This Website
Background
I've had a personal website hosted on Squarespace since 2017. At the time, I was making good use of their e-commerce service. Besides that, I found the drag-and-drop interface slow. Additionally, these services rarely give you any significant customization tools. You can write custom HTML and style it with inline CSS or via a global stylesheet. However, trying to change the base theme's CSS is next to impossible owing to the minified class and id attributes being non-deterministic.
So I started writing my own website from scratch. My criteria was short:
- Load quickly / Be small
- Function without JavaScript
- No dependencies loaded onto the browser
These are all things I enjoy about my three favourite websites (news.ycombinator.com, woodgears.ca and paulgraham.com). Watching these pages instantly render is a magical thing to me. Constantly seeing loading bars and spinners makes you forget a computer is ludicrously fast.
Reusing HTML
For almost any multi-page website there are some sections of the page that are repeated. DRY dictates that rather than copying and pasting these onto each page we should abstract them out into a reusable component. Unfortunately, there is no performant way to do this in plain HTML.
One solution to this problem is to use a templating tool. First, the reusable parts of the website are moved into seperate files. Then they can be imported into other HTML documents. Finally, a tool inserts the template HTML wherever it is needed and outputs the fully formed HTML pages. There are some very powerful tools available to do this, but since I want to avoid dependencies I made my own. The result was a rather simple Go application which you can find more information about here.
To work on this website I use Intellij with the File Watchers plugin. Whenever I save a HTML, CSS, or JavaScript file it runs my website builder. The output directory is then served with python -m http.server. The only thing this lacks when compared to the development experience of React or Angular is that the page doesn't automatically reload when a change is made.
Auto Deploying
I host this website for free with Github Pages. Rather than manually push the built assets to the "gh-pages" branch I have created a Github Action that does this for me whenever I push to "master". One job builds the website with my Go application and the other pastes that over the current website and pushes a commit. The YAML for this action can be viewed here.
DNS and SSL
The last two pieces of this website are from AWS. My domain was purchased via Route53. This service is both cheap and extremely flexible. Guides are available online for configuring DNS records to point to a Github Pages site.
For my SSL certificate I use the AWS Certificate Manager. This was surprisingly easy. With just a few clicks it automatically configured my Route53 domain with a valid certificate.
