Frank Bille-Stauner

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 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:

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:

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: $