How to start a static blog

Actually, there are many free services you can quickly launch a blog for free. So what’s the point about this post telling you to do it. The difference here is launching a ‘static blog’.

You’ll have to enjoy learning new web technologies.

In this tutorial, you’ll learn how to use:
Github, Eleventy, and Cloudflare Page.

Welcome to the Jamstack movement for creating a static blog!

First thing first, your blog will not have any database. It’s an advantage.
Your blog content will be more portable as you continue to keep blogging. You don’t actually have to worry about having a content management system on a virtual private server.

Github will be where you create your blog content.
Eleventy is an online tool (more or less a static site generator). It’s cool.
Cloudflare Page will take care of your blog content distribution. It’s more than just a content delivery network (CDN).

At the end of this quick tutorial, you should be able to build a free static blog using Eleventy as your static site generator (SSG). There are many more SSGs like Hugo, Gatby, NextJS, etc. But we’ll focus only on Eleventy. I’ll detail more about what is Eleventy and why you should use Eleventy.

In fact, it doesn’t matter much about which SSG to experiment in your learning stage. As your blog content are saved in markdown files, this is the kind of portability I mentioned early. So switching between SSGs is flexible.

What to expect after going through this tutorial. Your static blog will be ultra fast, super secure, and free.

What’s Eleventy (also 11ty)?
It’s the world’s simplest site generators for static sites. After testing some popular site generators like Hugo and others, I find that Eleventy is the best for beginners. You can start learning and using it in a short time.

And SSG is a framework to manage your static website and transform it into a site serving only static pages.

Also called 11ty, it works by compiling files it finds from your working directory into static HTML files. As it’s written in JavaScript, you gain access to the whole of npm in terms of packages you can use in your project. But, 11ty is not a JavaScript framework—that means zero boilerplate client-side JavaScript.

Some more background information about 11ty:
“Ever since Zach Leatherman created Eleventy in 2018 it is gaining more and more followers especially from people tired of JS-heavy static site generators. Eleventy is zero-config by default and works with any project’s structure. It doesn’t tie you up with any framework and supports up to eleven different template languages. Eleventy is simple(r). Eleventy adapts to you,” according to Bejamas.

Some other SSGs in the crowded space:
Pelican (Python)
Hugo (Go)
Hexo
Gridsome (Vue – JS)
VuePress (Vue – JS)
Ghost
Gatsby (React – JS)
Jekyll (Ruby)

The second SSG after 11ty is Hugo that I recommend you should try.

Now, let’s get started: install Eleventy
You can follow these steps to prepare and install Eleventy. I also recommend that you bookmark this well-written, easy to understand tutorial (very comprensive): Learn Eleventy From Scratch.

Instructor Stephanie Eckles has her course on “Build An Eleventy (11ty) Site From Scratch” (video) on Egghead.io. Her lessons will help explain “key 11ty features and concepts to help you make the most of this amazing static site generator”.

Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites. With Cloudflare Pages, you can deploy your first website to the Pages platform. Alternatively, you should also check out Netlify and Vercel as both of them offer the same deployment solution with similar offerings. If you use 11ty, Netlify works natively with that. But if you’re a Next.js developer, Vercel should be your first choice.

Among these three leading JAMstack platforms for frontend developers to deploy static websites and blogs, Cloudflare’s CDN is an important reason.