If you’re a designer or developer with intermediate knowledge of HTML and JavaScript, and know your way around GitHub and the command line, this tutorial is for you. We’re going to walk step-by-step through converting a WordPress site into a static site generated from Markdown.
Tag: Eleventy
A couple of years ago I started building an IndieWeb website. Then I got painfully busy at work, stopped improving it, and basically ran out of free time to even post to it. Fast forward a couple of years, and I've got a new job that's somewhat more manageable, and during the holiday break I'm tryin...
It’s interesting to see the growing pains people are having on the internet as they add new functionality to their websites. Even WordPress has at least half a dozen plugins to enable a lot of the functionality that is de facto within social media. Slowly though, both technologists and small to medium sized companies will begin offering these features as standard pieces that won’t require this sort of overhead or configuration. Well eventually see a sea-change in the environment as the technological hurdles come down. It would be nice to see things like Netlify and WordPress offer IndieWeb-in-a-box for their customers.
In particular take a look at the great, and intuitive UI she’s got at the bottom of her post:
Join the conversation on Twitter. Or, if you liked this article and think others should read it, please retweet it.
Just click on the link, reply and go. It would be nice to see other social platforms allow this sort of interaction. Setting it up for Mastodon should also be pretty simple too.
When I re-made my site with Eleventy, the pages didn't change much, but I had loads of fun adding new features. The most fun was webmentions and I'm here to convince you to add them! First, let me step back and explain why webmentions exist—the IndieWeb.IndieWeb Check out this official description...
Eleventy is a heck of a good static site generator which gives us unreal flexibility to create powerful content systems that result in high performing, lightweight websites (including this one). You can learn to build a comprehensive Eleventy site from scratch with this upcoming course. See the site...
Last draft: DONE!
That was a pretty special moment, I must say. There’s probably around 40,000 words in this course, all-in.
If you get a copy, I can guarantee your @eleven_ty knowledge *and* front-end knowledge will be completely transformed! https://t.co/PZ3HueCZap pic.twitter.com/b5vL7NK1Jw
— Andy Bell (@hankchizljaw) June 11, 2020
The best “modern” way would be to create a Micropub endpoint and then you can use some of the excellent multi-platform Micropub clients like Quill, Omnibear, Micropublish.net, etc. The benefit of this is that you get way more than just bookmarks.
I don’t know if anyone has set one up to work with Eleventy or Netlify, but there is some prior art for other static site generators.
The low brow solution may be to take the route I took with TiddlyWiki, but that includes some cutting and pasting, so it may be helpful, but isn’t a completely automatic solution. You’ll note there’s a reply at the bottom of the post that modified my code for use with Roam Research which also includes code for browser extensions as well.
If you want to go crazy with some .php, there’s Parse This code for a plugin for WordPress that might be co-opted. It will parse a variety of pages for microformats, JSON-LD, schema, OGP, etc. to return rich data on a huge variety of websites to give you lots of metadata to create a bookmark, but this may be over and above anything you might want. I use it as a built-in product in the Post Kinds Plugin for WordPress to create a wide variety of post types for reply contexts.
Zach Leatherman stops by the show to talk about his static site generator, Eleventy, as well as look back at his Front End Engineer Manifesto from 2012 and see how it holds up in 2019.
Add Webmentions to your Eleventy static site with this step-by-step tutorial.
If it helps, Max Böck recently wrote some excellent articles (with code examples) on using Eleventy to easily syndicate content to Twitter as well as to add Webmention functionality. If you haven’t seen them yet, they may help you along your journey a bit more quickly. Both can be found at: https://indieweb.org/Eleventy
👓 Static Indieweb pt2: Using Webmentions | Max Böck
How to pull interactions from social media platforms like Twitter back to your own site, using Webmentions, webmention.io and Bridgy.
👓 Static Indieweb pt1: Syndicating Content | Max Böck
How to automatically publish content from a static site on Twitter, using Eleventy and Netlify's lambda functions.