Moving From Wordpress to S3

After many years running WordPress, I have finally given up. I really don’t need a server running some kind of content management software. Comments get overrun with spam. The entire LAMP stack (or FAMP, in my case) has to be maintained, and for what? All I’m really doing is blogging some text.

For starters, here’s a list of the technologies I’m using and how. My next post will probably be the big, fat, post on absolutely everything you need to do to go from WordPress on a server to serverless S3 and CloudFront.

Hugo

Hugo is a web template system that will take ordinary markdown documents, apply a whole lot of templates and logic, and ultimately produce a lot of HTML files, which are suitable for hosting on a web site. There’s no database (e.g., MySQL) and no content management system (e.g., WordPress, Drupal). There are a few things you lose by doing this (search becomes a lot harder, uploading images and changing their size and such is harder). There are a bunch of other things that are really nice about this approach: I don’t run any web servers. There’s nothing to “hack”. And since I use some cloud services, there’s no worry about my server being overwhelmed if I get highlighted on Reddit or Twitter or something.

Making Hugo work depends on a few things.

Themes

You need a theme to get Hugo to render your blog post. There are many available at Hugo Themes. You won’t be able to use any of them out of the box. They all require customisation.

Go

Hugo is written in Go, which is a programming language. To get Hugo to do its thing, you’ll need the Go language and runtime. That’s no big deal. It’s free. But if yuo were thinking you were just gonna pay $0.17/month for your blog and not do anything difficult, this might be a big hurdle. Installing Go is no harder than installing python, NodeJS, or Ruby. But if that sentence sounded like complete gobbledygook to you, then this might not be the solution for you.

AWS Stuff

There’s a lot of AWS services I use. None of them are expensive, but each does some important part.

Amazon S3

S3 is the “simple storage service” that basically holds a bunch of objects. They’re a lot like files, but they’re not. Generally speaking, every image, every HTML asset, every JavaScript or CSS asset is an object in S3.

If you haven’t used AWS before, you’ll need to sign up for an account.

Amazon CloudFront

Although assets are stored in S3, they can’t be served to your web browser that way. (Ok, well, they could, but I’m ignoring that). So CloudFront runs the web servers, has my HTTPS web site certificates, and it sends your web browser the web page when you ask for it.

There’s a bunch of other AWS services we will use: Route 53, Amazon Certificate Manager, and Lambda at the Edge before we’re done.

GitHub

I actually store the markdown source files in a repository on GitHub. This lets me have version control of my blog post files and it’s nice, safe, secure online storage. I edit on my local laptop, like you would edit code. And when I’m happy with how it looks, I commit it and push it to GitHub.

Front-end Stuff

An interesting side-effect of going to this static file blogging, is that it eliminates what we call the “back end.” That is, there are no servers or databases or whatever. That means that I am now reluctantly a “front-end” develoepr. I now have to deal with all the HTML, CSS, and JavaScript that happens in the browser. If I want something to look good, or if I want you to be able to do something on my blog, I have to find a front-end, browser-based way to do it.

Bootstrap

Virtually any modern easy-to-use Hugo theme is gonna pull in bootstrap. If you want to make some basic adjustments to the look-and-feel of your pages (e.g., centering text, changing font sizes, laying out things), you need to go ahead and learn some Bootstrap.

Font Awesome

I find I end up learning Font Awesome so that I can put cute icons in the right places, like the mastodon icon: which I do with a bit of code like: <i class=“fab fa-mastodon mr-3”></i>

Web Fonts

But it’s not just Font Awesome that you have to learn. Often you want some nice font, like Roboto, which I use. And it’s important to know how to download them and serve them. Or, if you don’t care about your readers’ privacy, you need to know how to incorporate them from Google, and grant Google access to surveil all your blog’s readers.