"Does the world need another blog builder?!". That's the question I asked Twitter a couple of weeks ago. I took the two likes on that tweet as an overwhelming yes, and went ahead and built it! It's called Static Blog.
And now I'm writing about the blog builder on a blog I built with it - how meta!
But seriously, why did I build it?
Well, I'll be honest - I built it for myself. The world probably doesn't need another blog builder. But whenever I've needed to create a blog, I've always started from scratch.
And I've been thinking about creating a Codemzy blog (you're on it, this is the first post!) for a while. I had a look around at my options.
There's WordPress, and then Ghost looks pretty promising. But I'm a huge fan of static sites. I don't want to run a server for a personal blog. So they were out the window.
And then there's NextJS and GatsbyJS. You can use both of these static site builders for blogs. But there's some configuration involved to get the perfect blog set up, and I'm a minimalist when it comes to coding. If I can build a site in plain HTML and CSS, I'll do it! And I just figured these were overkill for my needs.
I also considered Medium, Substack and a range of other hosted blog options. But I want to stay in control of my content. And I want my blog on its own domain. And most of these options aren't static either.
Can't I just write some Markdown and have my static blog up and running? Preferably on Netlify because every time I log into my Netlify account, I feel happy inside - it's a joy to use. I'll probably dedicate a whole other blog post to Netlify worshipping. I even used the Netlify blog as inspiration when I was building this blog.
As a bonus, the speed boost you get with static sites is great for your visitors (and for SEO too)! Perfect for a blog.
So I created Static Blog with these features:
- A place to put your markdown files and have them automatically turn into blog posts
- YAML for that front matter (titles, categories, etc.)
- Blog pages (lists of blog posts in date order)
- Category pages (optional)
- Author pages (optional)
- Creates static content, HTML, CSS (and a tiny bit of JS for dark mode).
Getting started
If you want to create a static blog on your domain, this bit's for you.
Head over to the static blog repository on GitHub and click the green 'Use this template' button.
Give your new repo a name, like your-blog-name and a description "This is my awesome new blog that's going to change the world". Decide if you want it to be public or private (the repo, not the blog) and create your new repository from the template.
The README should tell you everything you need to know to set up, but I'll cover some extra items here.
Scheduling
Many static site builders don't include post scheduling. They are not specifically for blogs. And to be honest, it's not that easy to schedule things on a static site since it's, you know, static.
But actually, Netlify has a cool feature called 'Build hooks'. I wire this up to an IFTTT trigger or Zapier zap to call it every morning at 9:00.
Let's say I had a post 2021-10-14_my-second-blog-post.md. In yesterdays build, that post did not get published. I gave it today's date (the format is YYYY-MM-DD). So it will only get published in any builds that happen today or later.
Post scheduling is handy because you can write posts ahead of time. If I write four posts this week, I can schedule one a week for the next month and take some time off.
You can deploy your static blog to any static site hosting provider, but check if they have a similar way to trigger a build if you want to schedule posts. Vercel also has a similar feature called Deploy hooks.
Updates
Similarly to scheduling posts, I had a problem with updating posts. If I update a post by changing the content in its .md file, it immediately overrides the blog post.
That's fine for minor tweaks, but sometimes I want to schedule an update to a post that's a big update or a complete re-write. I want the post to go back to the top of the list. And like with new posts, I might want to schedule that for a future date.
And you can.
When you want to schedule an update, create a new file. Use the same name but with the new date for the update. So you will have two files.
2020-10-01_my-blog-post.md(the original)2021-12-01_my-blog-post.md(the update)
You can copy across the YAML from the original to the update, but don't forget to add the updated date:
---
title: This is my updated blog post that includes really cool info!
published: 2020-10-01
updated: 2021-12-01T14:30
---
The original post will stay live on your blog until the updated post date. Once a build triggers on or after the updated post date, the updated post takes over the URL. After the updated post takes over, you can delete the original post file.
Categories
Many blogs use categories to organise content. I'm planning to do that. I bet you are too?
So I included that as a feature. You can add a category id in your YAML data at the top of a blog post file. It will look like this:
---
title: This is my first blog post and it will be epic!
description: This is a description about the blog post. It will be the introductory paragraph used in search results, on blog list pages, and at the top of the blog post. It's pretty important.
categoryId: 'topic-a'
---
Make sure you add the category in /settings/categories.js too.
const categories = {
"topic-a": {
name: "Topic A",
description: "Read all about Topic A...",
},
// ...
};Authors
Maybe you only plan to have one author on your blog, you. But sometimes, blogs have multiple authors, especially a company or product blog. Like categories, you can add an author id to your post information and add authors in /settings/authors.js.
Dark Mode
I can't believe I nearly forgot to mention - Dark Mode! Click that button at the top right, and feel your eyes relax into the darkness of the night sky. You don't need to do anything to set this up. I used Tailwind to style it.
If you do write some custom pages, you might want to make sure that you include dark mode styles (Tip: use the dark: variant).
Got any questions? I'm planning to write some more guides and add some more features. But in the meantime, if you have any questions, tweet @codemzy or create an issue.