New website made with Eleventy

It has been a long time since I have done anything with my website, and I figured it was about time. Having worked with many heavyweight front-end frameworks, I wanted to go back to the roots again.
For me, this means back to writing simple pages with little to no JavaScript. I have also find the new wave of brutalist websites quite refreshing, and I have tried my best to adhere to that style.

The Content

For some time, I have wanted to start blogging about Life in Tech. I'm passionate about topics such as diversity, mentoring, and developer experience. I might also do technical posts.

The next non-tech post I want to do is on "Why diversity in teams is a good thing."

For now, enjoy "Behind the Scenes" of this website:

The Technical

I considered writing all code from scratch, but as I wanted to write the actual content using Markdown, I looked into what modern tools were available to help me. These criteria helped me narrow it down:

• Raw HTML/CSS should be the result. Only JavaScript that I write myself is allowed, with no framework overhead.
• Ability to write the content in Markdown to make it easier for me to focus on the content. I rarely use big fancy word processors like Word or Google Docs, as I tend to be distracted by all the options available. Instead, I use a simple text editor.
• Should be hosted on GitHub Pages and be able to use GitHub Actions to generate the site. The reason for this is that GitHub provides both for free, and I like the simplicity of them.
• Easy to work with while still being flexible. Start small with the ability to expand.

From this, I quickly ended up with Eleventy (11ty), which checks off all the boxes above. I got the basic setup in 15 minutes and then spent a couple of hours tweaking the CSS styles to be brutal enough.

Configuration

I have installed a few plugins and libraries to make writing the pages more straightforward and faster. The good thing about Eleventy) is that it tries to do most things at build-time. For example, I use Prism to do syntax highlighting like this:

const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(syntaxHighlight);
};

Even though Prism is a small library (~2KB), there is no reason to do the same parsing and DOM creation on every page load.

So far, I have not a single line of JavaScript on the page, and I intend to keep it that way 🤞.

Deployment and Hosting

I host this website on GitHub Pages. As with similar sites hosted on GitHub Pages, it requires two branches to make it work:

• One source branch where the source code is. This is the code that is used to generate the site. In my case, this is a node project using Eleventy and Markdown.
• One site branch, which contains what will be deployed to the GitHub Pages hosting. In my case, the branch contains the site generated by Eleventy.

To automate the generating the site from the source branch and putting it on the site branch, I use GitHub Actions. There are only two steps required: Generate site using eleventy and use gh-pages to deploy it. Below is the workflow definition to do that.

name: Build and Deploy Eleventy

on:
  push:
    branches:
      - source

jobs:
  build:
    runs-on: ubuntu-20.04

    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - uses: actions/checkout@v2

      - name: Use Node.js $
        uses: actions/setup-node@v1
        with:
          node-version: $

      - name: Install dependencies & build
        run: |
          npm ci
          npm run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          publish_dir: ./_site
          publish_branch: main
          github_token: $