How I made this blog and the homepage



07 Jul 2021

Introduction

Note: Some aspects of this blog post may seem a bit technical. Please don’t get bogged down by this - it’s taken me years to understand this stuff!

Over the years, I’ve had many different websites for different reasons - they were usually fansites for my biggest life-consuming interest at that point in time. Being a frugal youngster, the sites in question were always propped up using free services, and therefore quite limited in customisation (but some places did let you put in some of your own HTML). A prime example was when I used to nab free .tk domain names, and then point them towards various MSN Spaces-hosted ‘websites’. Those were the days!

Since then, I spent many an hour on social media platforms instead. However, back in 2018, I learned some new skills and wanted to try them out, and so I stood up a new corner on the internet - a tech blog. This time, it wasn’t using a WYSIWYG editor or anything spoon-fed - it involved managing a WordPress server via Amazon Web Services (AWS). As mentioned in a previous blog, life got in the way and the cost of keeping the WordPress server propped up without even adding any new posts to it just wasn’t worth the upkeep. I took it down, but exported the XML of all the blog posts so all was not completely lost (for instance, the first Shenmue post on my blog was originally on that blog!).

Fast-forward to today, I decided to start blogging again, and to make YouTube videos on top. The idea of getting a WordPress server set up again was too daunting, and to be honest, the cost of keeping it online didn’t seem worth it (unless it was getting loads of hits but let’s face it, you aren’t going to be getting millions of visitors on day dot of propping up your little corner of the internet). Being familiar with AWS, I wondered if there was a way to run a blog using static website hosting, and reap the benefits of using S3 for site hosting…

(Any scary acronyms and jargon in this introduction will be clarified later on in this blog)


Blog doodle


TL;DR


What is the point in having a site / blog?

A personal view that is also held by many others is that everyone should have their own little space on the internet. There’s room for everyone at the table.

Here are a number of benefits to having your own site / blog online:

Ideally, you should also purchase the domain name for your real name as soon as you can, for safe keeping or immediate use. Going against my own advice, I’ve done this - although I haven’t set up a site in my name yet and my online presence is currently anonymous for privacy reasons. When the time is right, I’ll probably move on from Titch and begin using my real name.


Why should I do it on the cheap?

Financial cost is a barrier to entry for a lot of people. You are probably thinking, “why should I add another subscription fee to the list when nobody is even going to visit my site anyway?”. I thought the same, hence why I spun down that WordPress server.

Starting out, it is worth doing it on the cheap just so you get yourself out there and finances aren’t the barrier to entry - the hurdles that you have to cross instead are your own motivation, and taking some time to learn some HTML and learn how to work your way around AWS (especially as you may rack up random bills if you don’t know what you’re doing!).


How is the Titch Life site and blog made?

In short, the website and blog are separated out into their own S3 buckets as mostly static webpages - meaning there is no JavaScript in use, except for a little bit used for the Google-powered search bar on the bottom of the blog site:


Jekyll screenshot


Where will the site and blog live?

The point of this blog post is to sign-post and provide a helicopter view, as opposed to being a long tutorial - those are already out there and will be linked to accordingly.

My website and blog are both hosted in Amazon Web Services (AWS) - it has everything you need to get a domain name set up and your site facing the world. The sites sit on their own individual file storage spaces, called S3 (Simple Storage Service), and you set up your domain name (e.g. TitchLife.com) to point to these storage ‘buckets’ so people can access them as websites.

There are other advanced features you can use, such as CloudFront, which caches your site in multiple locations across the globe - this is at an additional cost, and something I wanted to set up to ensure that the sites are HTTPS-only (for cyber security and browser compatibility reasons). The point about being cached across the globe is of note as you choose geographically where you want your AWS ‘stuff’ to live. Typically, this will be in the location nearest to you - but whichever location you choose, it is still in the cloud.

AWS datacenters have a very-high uptime percentage (due to data being replicated across multiple datacenters within a region) so there is a very minimal chance of your site ever going down due to an outage.


How much is all this?

Time to let you in on a little secret (and the bit you probably really wanted to know) - I only spend < £5 (GBP) a month to host this blog and the main homepage for Titch Life. On top of that, there is a yearly fee of ~£10 to register the domain name of TitchLife.com (and another tenner-ish on top for .co.uk). That means it’s about £6** a month to run a site, blog and domain - which is considerably lower than a lot of sites out there that provide this service as a bundle.

The low cost does come at a non-financial price - there’s a bit more effort and required knowledge involved in getting things set up. Once that initial set-up is complete, it’s fairly straightforward to push out updates to your website and any new posts to your blog once you get the hang of it. You just need to learn some HTML, which you may have under your belt already, and some Markdown for the blog (this bit was new to me so I had to do some learning here too). You then just drag-and-drop your updated site / blog into S3, and then it’s out there in the world.

You can take it a step further and use Terminal commands on Mac / Command Prompt on Windows to make this process automatic (for example, to upload your newly-updated website / blog in one single line of command) - that requires a bit of set-up with AWS Command Line Interface, but it is miles quicker than manually logging into AWS and doing the drag-and-drop stuff.

** prices subject to differ based on free tier usage, geographical region and number of on-demand requests.


Who can see my site / blog?

If you’ve set up your site / blog correctly, the entirety of the internet will be able to see the contents of these! With this in mind, make sure you haven’t uploaded anything or set anything you intend to keep private as publicly-facing - there are a lot of built-in security features in AWS that are worth learning about, and the tutorials provided by AWS tend to go over these.


AWS Management Console screenshot


Recommended tutorials

As promised, here are all the tutorials I used to get up and running:

I also did a fair bit of Googling to fix any issues and troubleshoot stuff, and to learn how to add really specific, minor features to the blog.



Scary acronyms and jargon

AWS - Amazon Web Services, a cloud service provided by Amazon. You can rent space on their computational architecture to do loads of stuff - to power your databases, apps, websites, all sorts!

HTML - HyperText Mark-up Language, and how most websites are ‘coded’. Usually handles the actual contents of a webpage, as opposed to the style of the content.

Markdown - similar to HTML, but much more lightweight and user-friendly. This blog post you are reading right now, has been written in Markdown (with bits of HTML sprinkled in).

CSS - Cascading Style Sheets, used to ‘style out’ HTML content - determining colours, fonts, background images, margins etc.

S3 - file storage containers in AWS, a bit like files and folders you have on your PC / Mac but stored in the cloud.

HTTPS - Hypertext Transfer Protocol Secure - connections between you and a webpage being delivered by HTTPS are encrypted and therefore less susceptible to eavesdropping attacks.

Cloud - something that floats around in the sky… but not in this sense - an on-demand service where physical computer hardware is typically managed by a provider and a consumer can loan space on these (e.g. storage, servers for computation).

Domain name - anything such as Google.com, TitchLife.com, Amazon.com… in fancier terms, a domain name is typically used as a more user-friendly alias for an IP address / web server.



Thank you muchly for reading. See you in the next blog, or video!


~~

Speak soon,

//Titch.



The images in this blog post were either doodled by me, or screenshot from various webpages and are correct as of July 2021.