eleventy-webmentions
A basic starter template for Eleventy blogs with added support for webmentions.
For more information about this, read Static Indieweb: Using Webmentions.
Installation
Run npm install
after cloning this repository. The available commands are identical to eleventy-base-blog.
Enable Webmentions
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.sample
file, then delete the.sample
from the filename. -
Check the information in
_data/metadata.json
and 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.
Customization
This starter includes just the basic functionality, feel free to make it your own.
The relevant parts are:
- Templates:
_includes/webmentionlist.njk
and_includes/webmention.njk
- Filter:
webmentionsForUrl
in.eleventy.js
- Data Fetching:
_data/webmentions.js
- Basic Styling:
css/webmentions.css