This Website

How this website is built and maintained

Repo

This Website exists as a private mono repository on GitHub containing all the configuration, content and various assets such as images in order to build this site. I decided on a mono-repo because it’s not a particularly big website and having everything in once place keeps things simple and removes the need to use syncing tool to upload images to a separate CDN. Everything is hosted under https://tomcope.com. It does mean however, will all the images the repo is over 1/2 GB.

[tom@Awesome420 tomcope-website]$ du -hs .
683M	.
[tom@Awesome420 tomcope-website]$ 

Building

Back in the day this website used to be handcrafted HTML and CSS but after my mate Tim looked at it and I quote “cringed at the whole thing”, he offered to migrate it to something a bit more modern which at the time was Jekyll. Jekyll has fallen out of favour more recently and many people are migrating to Hugo, but for me, Jekyll has everything I need and is still widely supported on most cloud platforms.

Some helpful Jekyll Plugins I use:

• jekyll-seo-tag = Generates all the Social Media and Search Engine tags automatically from the page metadata. So when you post links in Slack it generates the correct site preview.
• jekyll-sitemap = Search engines love a site map.
• jekyll-feed = Generates RSS and Atom feeds for my site so if you really want you can subscribe to it :D
• jekyll-last-modified-at = Helps Generates the page footer with the git commit times of the site and each page.

[tom@Awesome420 tomcope-website]$ bundle exec jekyll build
Configuration file: /home/tom/Documents/Projects/tomcope-website/_config.yml
            Source: /home/tom/Documents/Projects/tomcope-website
       Destination: /home/tom/Documents/Projects/tomcope-website/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
       Jekyll Feed: Generating feed for posts
                    done in 1.292 seconds.
 Auto-regeneration: disabled. Use --watch to enable.
[tom@Awesome420 tomcope-website]$ 

Analytics

In College, I wrote my own Analytics system called “Anonae”, which (poorly) stood for “Anonymous Analytics Engine”. It was a fun project which I maintained for many years and introduced new features such as fuzzy fingerprinting and Web Beacons. However, over time I realised that maintaining all the quirks of the web was a full time job and there were many weird quirks with the system which meant I knew that I was dropping views all the time. So I migrated to Goatcounter!

Goatcounter, is a free and opensource, privacy-friendly Analytics system which had everything I was looking for:

• Simple API for generating “hit counters” at the bottom of the page (they look so cool!)
• Simple dashboard with everything I need, page views, referrals, screen size, page popularity
• Ability to exclude myself from the tracking
• Privacy focused with no IP tracking or Cookies

I would highly recommend it. I also wrote a script to integrate with PushOver so that every evening I get a push notification of how many views I’ve had today and the week.

Hosting

This Website is entirely self-hosted on a Linux VPS (Virtual Private Server) somewhere in France. I wanted it to be self-hosted for a more free and open internet, which means I am not beholden to any big platform or CDN. It’s not the most powerful server in the world, but it very much gets the job done. The other advantage of just using static files is this website is powered by Nginx! You can find more about the servers details here.

I’m using GitHub actions to compile and synchronise the sites files. It’s very much set and forget, I never go over the free allowance of builder minutes, so doesn’t cost me as penny and works very well.

I’ve also integrated it with PushOver to receive a push notification when my website goes live and if they are any errors in the build.