The first step to making a WordPress site serverless is taking it off of WordPress. There is the argument you can make a serverless version of WordPress, but that’s a project of a whole different scale. For now, considering I still have my blog at WordPress.com, it’s sufficient for me to simply have a single flat web page.
There comes a separate issue: I’m not a designer. I don’t make things pretty. What I can do is make effective use of existing frameworks and themes.
My obvious choice was to go with Bootstrap.
Step 1: Look at my current site and subtract.
Here is what I have no WordPress.com. My older WordPress page was remarkably similar so we’ll just cut apart what we have now.
The first thing to go is the menu. I have two pages that aren’t the main page: the Blog and my Tumblr feed. I was fairly proud of it, as it just read my Tumblr RSS and formatted it into the WordPress theme style. But the only content that wasn’t reposts of this site were Programming memes and screen caps from the anime New Game! Now, if you’re interested, it still exists on Tumblr, but it won’t make an appearance on this draft of my site.
Now, going down the main page… About? Keep. Current Projects? Keep (and perhaps update). Contact me? Necessary but redundant. Summary of my blog? Put a pin in it. Not this draft but definitely pulling in as later work. Credits? Keep. Instagram? Again, later work. Social Icons? We’ll take that and the Contact block and just wrap it into the about section.
Step 2: Look at what I have left and compress.
My about section hasn’t been updated since … well, I’d rather not think about it. So we should fix that. It doesn’t need to be that long, and if anyone’s curious about my life story, you’re literally on my blog. As the kids say, HMU. So we’ll reduce that and bring in the Social Icons. That will also cover contact information. Current Projects can be reduced to one project. Want more? You have my GitHub. The credits get moved to the footer.
Step 3: Do Bootstrap Magic.
Abraca-Bootstrap Magic! I hadn’t used Bootstrap 4 and I previously used Bootstrap 3 as part of a framework so I figured I would give myself a refresher on how it actually works. The result you can see yourself.
And voila, our flat site is complete.
Here are some known issues:
- It’s flat. I know that. Flat isn’t boring, but we will add some dynamic elements to it later.
But here is a benefit: this site is Cloud Agnostic. Meaning, you can port it over to whichever cloud provider that lets you serve a static page from storage. You just dump all of this code into wherever you want it.
So enjoy our new Grid-based look and feel. How very Web 2.0!