Christopher P. Bruton

Building this site (Eleventy and AWS Amplify)

Mon Feb 01 2021

I wanted to explain a bit of the technical aspects of this website. I built it over the course of about a week. It is a static site generated by Eleventy, saved in a GitHub repository, and deployed/hosted on AWS Amplify.

I’m not a front-end developer and I’m really not interested in learning about frameworks or building anything complicated. If you look at the HTML source of this page, it is dead simple. I have explored and tried various other static site generators in the past (Hugo, Jekyll, Pelican), and while they are undoubtedly useful and popular tools, the initial effort required was still too much.

In short: I didn’t want to start with someone else’s template. I have a basic understanding of HTML and CSS and I had an idea of what I wanted my site to look like. I wanted it minimal, text-based, but still aesthetic. I started by hand-coding a static site layout in pure HTML and CSS. Then I went looking for a static site generator that I could easily retrofit into my layout.

Eleventy

This time around, I discovered Eleventy. I’ve always been hesitant about using Node.js-based tools because it usually seems like overkill for what I want to do. But after skimming the Eleventy documentation it looked like it would be exactly what I wanted.

And essentially it was. In about an hour of work I was able to work Eleventy into my existing HTML/CSS, and came out with a basic generated site!

The journal (blog) section took some additional effort to set up, but I found it fairly straightforward to do. Eleventy is more suited for experienced developers (not necessarily front-end though), in my opinion—I think it would be quite challenging to build an Eleventy site from scratch if you had never touched a piece of code before.

Here’s how I list the 5 most recent journal entries on my home page:

<h2>Latest Journal Entries</h2>
<ol>
{% for post in collections.journal | reverse | limit(5) -%}
  <li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
{% endfor -%}
</ol>

This uses the Nunjucks templating language, which is pretty similar to Liquid or even Jinja2. One thing to note is that the limit(5) is not a builtin filter in Nunjucks; it is a custom filter that I added into my .eleventy.js file, which is kind of the core configuration for an Eleventy site.

eleventyConfig.addNunjucksFilter("limit", (arr, limit) => arr.slice(0, limit));

Just one line to add the filter. Pretty neat, eh?

AWS Amplify

I have hosted sites on Netlify before, and I have no complaints. But I wanted to move to Amazon Web Services (AWS), mainly because it’s a platform I use in my day job and also where I keep a few other personal projects. AWS skills will continue to be useful throughout my career so I want to spend as much time as possible practicing and learning the platform.

AWS Amplify is a powerful full-featured platform for web sites and web apps. I haven’t explored most of its features. But it also turns out to be a really simple way to host a basic static site. The experience is much like Netlify.

In AWS terms, Amplify essentially bundles S3, Cloudfront, and repository-based automatic deployment into one unified interface for static sites. Every time I push to the main branch of my repository, Amplify will spin up a temporary instance to build the site. My amplify.yml file looks like this:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npx @11ty/eleventy
  artifacts:
    baseDirectory: /_site/
    files:
      - '**/*'
  cache:
    paths: []

The important parts are the preBuild commands (npm install installs dependencies in my package.json), the build commands (npx @11ty/eleventy does the actual building with Eleventy), and the baseDirectory (which specifies where Eleventy’s output will go).

What’s next?

This is still a brand new site and there is bound to be more tweaking, enhancing, and tinkering with it going forward. One thing I would like to add soon is comments capability. I’m still thinking about the best way to do this. Certainly not going to use Facebook comments or Disqus, and I think I’d like the comments to be statically hosted as well. This would require a redeployment every time I want to display new comments, but it would be worth it to avoid scripting.

I’ve seen a few blogs that scrape and include comments from Mastodon threads about each post. It’s an interesting idea I might explore, but since I’m trying to avoid social media—including Mastodon—it might be counterproductive. I’d rather have a simple comments form at the bottom of each post, not requiring any kind of third-party account to post.

Thanks for reading,
Christopher