Recipe for a blog

Who is this article for?

You want to write things on the internet but don't know where to start.

Websites

are so complicated, it's hard to even ask the right questions. If you're like me, your thought processes will go like

1. "Wait, so, HTML... URL... hosting, IP addresses? How do I... do that?"
2. *two hours of Wikipedia*
3. "Ohhh. DNS. Of course."
4. *the knowledge drains from your head like charge from a capacitator*

This is fun but it doesn't get you a blog. Instead, pick something and do it. First, ask yourself:

"What do I actually want?"

For me this looked like:

• written in Markdown
• has something like JSX
• version-controlled
• possible to update on my phone
• doesn't need an account
• is very lightweight
• will 'just work' forever and ever
• is fun!

Approach 1: ready-made hosting

Loads of super smart people use WordPress to blog so you'd better have a reason to do otherwise.

Cohost can be a tech blog if you want!

If you like playing with HTML, check out Neocities.

Paid options include Pika and Obsidian Publish.

Do any of these match your requirements? If not...

Approach 2: a static site generator

Loads of really clever people do something a bit different. Something a bit like a static site generator (SSG). These are fun to play with: your blog becomes your toy and tinkering kit!

Here's a list of SSGs. Do you like the look of any of them? It's probably hard to tell the difference.

I use Eleventy. Here's my recipe. I assume:

• you're comfy with Git and the command line
• you're happy tweaking CSS and JavaScript
• you have a normal Linux-y environment (or WSL or Cygwin).

Making the thing

1. Clone the official blog template:

   cd location/of/my/blog
   git clone https://github.com/11ty/eleventy-base-blog.git .
   

2. Create a public repo. I'll assume you're on Codeberg and you've set up SSH pushes.
3. Hook your local clone up to the repo you just made:

   git remote set-url origin git@codeberg.org:USER/REPO.git
   git push
   

4. Install Node.js
5. Run Eleventy:

   npm install
   npm start
   

6. Visit http://localhost:8080/. Wow!
7. Make the blog yours! With the help of comments scattered around the base blog and Eleventy's documentation:
   • change up the CSS
   • write some posts
   • mess with config
   • tweak the "templates".
8. Change LICENSE.md to your own and give credit to the base blog.

PHEW. You made it? Well done! It's ready for the world. Take a breather, get some tea or something. Halfway there.

Putting it online

Try building the static site:

npm run build

Look in the _site/ folder. It now contains plain HTML + CSS. This is what you'll need to host the website.

If you're on Codeberg, I suggest hosting on Codeberg Pages. (If you're on GitHub, try GitHub Pages. If you're on GitLab, try GitLab Pages. The steps will be slightly different for these.)

1. Make a public repo called pages.
2. We'll do a little trick to push _site/ to it without copying all the files. First delete it:

   rm -rf _site
   

3. Next, clone your new repo into _site/. (By using --no-checkout, we don't copy down any files.)

   git clone --no-checkout git@codeberg.org:USER/pages.git _site
   

4. Then rebuild:

   npm run build
   

5. Commit all the files and push:

   cd _site
   git add .
   git commit -m "some helpful message"
   git push
   

6. Wait a bit. Then visit <your-username>.codeberg.page. Wow!

Every time you want to update the website, do steps (2) to (5) again.

Next steps

• Following those steps every time you want to update the website is annoying. We can skip them using CI/CD.
  • Codeberg: try Woodpecker CI, using the Node.js template.
  • GitHub or GitLab: connect your account and repo to Vercel. (You won't need the pages repo any more.)
• Get a domain name! Then link it to your site.
  • Codeberg Pages instructions
  • Vercel instructions

But don't get too distracted by all this. Go make the things you're actually interested in! Then write about what you've made and learned.