Making a Personal Website

Hello World

This year I read Tim Berners-Lee’s book, Weaving the Web, which came out in 1999. It renewed my interest in the web itself and the basic element that started it all - HTML.

The modern web is a bit of a bloated mess, filled with adverts and well-meaning but ultimately poorly implemented cookie permission pop-ups. Despite the fact that literally millions of websites exist I feel like we visit so few. Most of our activities are bundled up into a relatively small number of extremely popular websites.

Years ago I remember filling up my browser with bookmarks to lots of little websites ran by individuals who would update with interesting things. But if you are a small-time creator today it is just to much easier (and probably better for you) to just use a social media platform - but that’s boring!

So through a mixture of nostalgia for the old web and the desire to have a place to dump all of my creations in one place - I decided to make my own website.

Tools & Technologies

I decided that I did not want to use a visual editor website such as SquareSpace or Wordpress as they are costly and I find them ultimately too restrictive. I also really like static websites if possible, the reliance on heavy Javascript and Server-Side rendering is unnecessary for a lot of things so I chose to use GitHub Pages to host for free and Jekyll templating engine to create the pages. I also use Tailwind CSS for some nice modern styling.

I have my repository structured like a normal Jekyll repository with _data, _includes, _layouts and assets which contain images and music.

A Few Tailwind Difficulties

I picked Tailwind CSS because it felt like a fairly new and perhaps better alternative to Bootstrap and because I had never used it before - two terrible reasons to pick a framework.

I was caught out at first by blindly including it and wondering why it wasn’t working with Jekyll. It’s a bit different to how Bootstrap works, it requires some extra processing, you don’t simply include a minified CSS (Although you sort of can). What I eventually settled on was including an NPM Package.json:

{
  "dependencies": {
    "@tailwindcss/cli": "^4.1.14",
    "@tailwindcss/typography": "^0.5.19"
  },
  "devDependencies": {
    "tailwindcss": "^4.1.14"
  },
  "scripts": {
    "start:css": "npx @tailwindcss/cli -i ./pre-processed/tailwind.css -o ./assets/css/portfolio.css --watch",
    "build:css": "npx @tailwindcss/cli -i ./pre-processed/tailwind.css -o ./assets/css/portfolio.css --minify"
  }
}

When running locally I need to run npm start:css to let Tailwind automatically create the output CSS file that is included in the assets for the Jekyll application.

Jekyll

Then I also have a script which I run at the same time for Jekyll to compile and serve locally.

docker run --rm \
  --volume="$PWD:/srv/jekyll:Z" \
  -p 4000:4000 \
  jekyll/jekyll:4.2.0 \
  jekyll serve

I try and not have tons of small programs installed on my laptop and opt to use docker for them instead. It can be a bit slower but it works fine for me.

Tailwind Config

You can also have a tailwind.config.js in the root of the directory with your themes and plugins:

module.exports = {
  content: ["./_includes/**/*.html", "./_layouts/**/*.html", "./_posts/*.md", "./*.html"],
  theme: {
    extend: {
      colors: {
        accent: "#1D6FCD",
        dark: "#414f5bff",
        light: "#e8f5ff",
      },
      fontFamily: {
        heading: ["Poppins", "sans-serif"],
        body: ["Inter", "sans-serif"],
      },
    },
  },
  variants: {},
  plugins: [require("@tailwindcss/typography")],
};

Final Step

I then let Jekyll compile the static site which I output into a docs directory which is the one used for GitHub pages to work.