A basic starter template for Eleventy blogs with added support for webmentions.
For more information about this, read Static Indieweb: Using Webmentions.
Run npm install after cloning this repository. The available commands are identical to eleventy-base-blog.
Follow these steps to get it working:
- Go to https://webmention.io/ and sign in. To authenticate, you will have to include a
<a rel="me">link at your domain, pointing to your github or twitter user URL:
<a href="https://github.com/maxboeck" rel="me">Max on Github</a>
-
Once you've verified domain ownership, go to the settings page. Copy the token listed under "API Key" there.
-
Paste the token into the
.env.samplefile, then delete the.samplefrom the filename. That's a secret key, so this file should be in your.gitignore. If you are hosting your site on Netlify, make sure to enter the token in your build settings. -
Check the information in
_data/metadata.jsonand make sure your domain name is correct. It should look likeexample.com. -
Run Eleventy. It will try to fetch the webmentions for your domain (you may not yet have any, check your webmentions.io dashboard). After the first use, a cached json file will be created so you don't have to re-fetch that data everytime eleventy regenerates the site in development.
This starter includes just the basic functionality, feel free to make it your own.
The relevant parts are:
- Templates:
_includes/webmentionlist.njkand_includes/webmention.njk - Filter:
webmentionsForUrlin.eleventy.js - Data Fetching:
_data/webmentions.js - Basic Styling:
css/webmentions.css