ルカ-さん Luca-san

Set up this blog with Eleventy

Table of Contents

Intro

I wanted to have a blog since a while but couldn’t decide what to use for the site. I only knew two things: 1) i want to self-host the website and 2) i want something simple and basic. For the first reason i avoided solutions like Wordpress, Medium or Substack, and to expand the second point, i’m not a developer and always hated having to touch websites or frontends - i only script when i need and live by the mantra whatever it works. Also too many websites nowadays are just awful.

That said, there are plenty of ready easy-to-use solution for personal blogs that i more or less checked out before eventually settling for Eleventy:

All of them are nice and offers lot of features and can be fully customized tailored to your likes, but i eventually decide to have something more basic as my main goal is just to have a place to publish writeups whenever i feel like, and to keep it simple like older internet. Syntax for blog posts is Markdown, which is popular and easy to use. As a template engine for code blocks, it uses Prism - here is a reference on everything that's supported. I liked Bear as it's lightweight, simple, text based blog however it's not meant for self hosting, which threw me off.

That’s why i settled for Eleventy and specifically using their most basic default template: Eleventy Base Blog. Honestly the only feature that is missing from this template, is having comments below a blog post but considering the state of Internet nowadays and all the issues in moderating, it’s sad but just easier to avoid or delegate the feature to a 3rd party so it’s their problem instead.

Setting up this blog

Before jumping in the setup, note that i’ll host the blog on Cloudflare using their amazing free tier account. For full disclaimer i’m a fan of what they do.

If you want a better and way more comprehensive guide on setting up Eleventy, this is a nice one.

What you need

Setup

GitHub

The set up is very straightforward. Start at the GitHub project for the base blog: https://github.com/11ty/eleventy-base-blog and follow the instructions:

  1. Make a directory and navigate to it:
mkdir my-blog-name
cd my-blog-name
  1. Clone this Repository
git clone https://github.com/11ty/eleventy-base-blog.git .

Optional: Review eleventy.config.js and _data/metadata.js to configure the site’s options and data.

Blog Changes

I adjusted the name of the local folder and started messing with the files to do the very few edits required, like adjusting the footer, removing the yellow box you see in the demo etc. You can also do this step at last.

Cloudflare Pages

After you’re done switch over to the Cloudflare instructions for the deployment on Pages: https://developers.cloudflare.com/pages/framework-guides/deploy-an-eleventy-site/ and simply follow the instructions. They made it so simple that it took me more time to configure the GitHub SSH access on my machine than to deploy the site in Cloudflare.

Cloudflare Domain

I didn’t had a domain prior and decided to register it on Cloudflare too so to avoid having to transfer it. The process is again quite simple, search the name on their page https://domains.cloudflare.com/, buy it and then it’ll be automatically added in your account. WHOIS information are redacted by default but there is an option inside the account to control that.

After this, enable the custom domain in your Pages deployment -it’s literally few clicks- as described here: https://developers.cloudflare.com/pages/configuration/custom-domains/ and you’re done!

Cloudflare Security

This is optional but i also turned on all the bot protections Cloudflare offers. With the state of Internet, crawlers, scrapers, AI abuse, etc. it's basically mandatory.

Publish new Changes

To publish changes i can simply edit the local copy of the repository that i have in GitHub, and push the changes after i’m done. They’ll be automatically shipped and deployed by Cloudflare within seconds. So something like:

cd <blog folder>
<do some editing>
git add -u #add all the files you changed
git commit -m "MESSAGE" #comment about the change
git push -u origin main #push changes to github

Reference is yet again the Cloudflare Eleventy page https://developers.cloudflare.com/pages/framework-guides/deploy-an-eleventy-site/#creating-a-github-repository

The process still require a MR but in the end is quite simple and easy to manage.