stinky.blog

Adios Wordpress?

Welcome to my first post on a static site. Wordpress has been super cool, but I really wanted to try out something simpler and easier to deploy from the commandline.

It has been a blast hosting the blog on the VPS and learning the ins-and-outs of securing the server, managing the certificates, and general wordpress admin stuff. Wordpress plugins have been very awesome and easy to use, even the free ones. However, it's just a ton of functionality that I don't really need.

I watched a couple of youtube videos about hosting static sites on github pages with jekyll and other static site generators. That led me to trying out a few of them before landing on this one, eleventy.

To get this running, I created a github repository: username.github.io

Then, I cloned the repo to my home folder

git clone https://github.com/brianm88/brianm88.github.io

I used this eleventy template: eleventy-base-blog

Cloned those files to my github folder and ran eleventy:

npx @11ty/eleventy --serve

There I had a working skeleton! But, I wanted a search bar. So I found a solution with pagefind: pagefind

Pretty much just need to insert this line into one of the pages to get it working. In my case, inserted it in to /my-repo/_includes/layouts/home.njk

<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        new PagefindUI({ element: "#search", showSubResults: true });
    });
</script>

Then, you need to run the indexer to let it build an index of your site files.

npx -y pagefind --site _site

Then I had some weird issues getting github pages to let me select the right folder. So, I created a /docs/ folder like they suggest, and I just rsynced the stuff into it. I wrote this into a script so I can execute all this in one command. The script also takes a commit comment and pushes to github:

#!/bin/bash

set -e

# 11ty build
npx @11ty/eleventy

# pagefind build index
npx -y pagefind --site _site/

# rsync to gitpages folder
rsync -arui --delete _site/ docs

# Prompt for commit message
echo "Enter commit message:"
read commit_message

# git operations
git add docs
git commit -m "$commit_message"
git push -u origin main