How the site is hosted

The site is hosted on a Basic Digital Ocean droplet with 2 vCPUs and 2GB of memory. So far this is enough to host all of my little web projects, including:

How the site is built

This site is generated by Jekyll with some custom plugins. The source code can be seen here. I initially chose Jekyll because it seened to be the most popular static site generator at the time, and Github Pages integration was nice. Build times are a little slow, and ruby/gem versions are a pain to manage, but for now it works well enough that I feel no need to change.

Initially, I set things up so that pushing a change to the repository would trigger a build on my server. However I ran into issues with gem versions not lining up, and it felt wasteful to be running through the entire process of downloading gems, installing packages, and building the site every time I want to deploy something. Especially since I have a perfectly good, pre-build copy sitting on my computer! Now I have a separate repository for the compiled site, with a rake task that copies the compiled site to the repository and pushes it.

Design decisions

I like the home page to show my most recent posts, and for it to show the full post content as much as possible. Sometimes I’ll have a very long post with many code snippets though, and for those I will have a “read more” link to see the full text.

The post header

I like structuring the blog as a linklog, and thought about how to present both a link to the original article and a permalink on my site. Currently, the post title links to the permalink, and I have a link to the original just below.

I also have a colorful gradient that subtly reflects the content of the post. I've written more about how this is done here

At the end of each post, there is a list of up to 5 related posts. These are determined by how many tags the posts have in common. I add tags to the each post but have decided not to display them anywhere. They are only used in the background the find related posts. I find that this adds a fun serendipity to the site, and sometimes I'm surprised to see what posts are brought up from the past.

The tags are generated automatically by a rake task that runs whenever a draft is updated to "published" status.

Social posts

Posts that I published to GoToSocial are reflected on this site as well. To visually deemphasize these compared to full-text posts, I indent the text slightly for social posts. This maybe too subtle of an effect, but adding more feels like it just draws more attention, so this is what I've landed on for now.

I post these directly to GoToSocial, and then use a rake task to compile them into the site upon build. This is backwards from a POSSE perspective, but it was the simplest implementation I could think of.

Fonts

The font used in the logo is Ostrich Sans Rounded, and the body is Lato.

Workflow for building the site

1. Create a draft

rake draft["The title of my post"]

This generates a new markdown file in the _drafts directory, with the appropriate frontmatter to fill in:

title:     The title of the post
slug:      A slug (automatically generated) for the URL
link:      An optional link to an external site, linklog-style
image:     An optional image for OpenGraph metadata
image_alt: Alt text for the image
archive:   Which section of the archive to file under, if needed
slash:     If this is an update to one of my slashpages
blurb:     A short blurb of the post, for OpenGraph metadata

2. Promote the post out of “draft” status

rake publish

If there is only one file in _drafts, it will automatically handle that file. If there are multiple, it will prompt to select which one to publish. There are a number of functions that run when a post is published:

i. Generate a color gradient from the post title

I've written about how this is done here. To summarize:

  1. Perform a Google Image search for the title of the post
  2. Get the first five results
  3. Extract the most prominent color from each of the images
  4. Save these five colors to the post's frontmatter

See the source (colors_from_title)

ii. Generate tags from the post content

This function uses ChatGPT's API to automatically generate tags based on the post's content. Since the tags are not displayed directly, I can afford to be laissez-faire about these results.
See the source (tags_from_content)

3. Push the updated site live

rake build_push["commit message"]

This task also has some handy actions built in:

i. Pull latest posts from GoToSocial

This function uses the GoToSocial API to pull the latest posts from my account and add them to the site. I chose to run this task at build time rather than with a cron task, because visually I like having a full text post at the top of the page.
See the source (get_latest_gts_posts)

ii. Push the source and the compiled site to separate repositories

As mentioned above, building the site on my remote server for every update felt very wasteful, as well as requiring me to manage gem bundles there, too. Instead, I have a separate repository for the compiled site and have that one trigger deploys to my site. 

system "git -C ../#{GH_PAGES_DIR}/ pull"
system "jekyll build"
system "rm -r ../#{GH_PAGES_DIR}/*" unless Dir['../#{GH_PAGES_DIR}/*'].empty?
system "cp -r _site/* ../#{GH_PAGES_DIR}/"
system "git -C ../#{GH_PAGES_DIR}/ add -A"
system "git -C ../#{GH_PAGES_DIR}/ commit -m \"#{msg}\""
system "git -C ../#{GH_PAGES_DIR}/ push"
system "git add -A"
system "git commit -m \"#{msg}\""
system "git push"

The commit message I set at the top is used for both repositories.
See the source (build_push)