Going Serverless with Bootstrap

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.

20180417-amycodes-wordpress-bar

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.

screencapture-file-C-repos-amycodes-serverless-index-html-2018-04-17-20_23_13

 

 

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.
  • It all relies on external CSS and JS. So do a lot of websites, including WordPress (check your network traffic). That’s the way the Internet works these days. However, this does leave you with points of vulnerability, and I once got a ticket at work that was ‘disheartened’ that we would dare use external Javascript. This is, however, the suggested best practice as presented by Bootstrap and it’s their library so I’m going to trust what they say. You can roll your own processed Sass/Less CSS, but again that is outside of the scope of this project.

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!

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s