Go to file
2024-10-06 01:21:07 +00:00
.github/workflows Update all steps to take place inside Nix devshell 2023-11-10 17:50:33 +08:00
archetypes Update post archetype 2023-04-09 13:42:23 +08:00
assets Update admonition block and its styling 2024-10-04 21:11:14 +08:00
bin Delete openring-create script 2023-04-27 17:55:50 +08:00
config/_default Update site config 2023-11-13 22:36:11 +08:00
content Update "Speeding up NixOS package search on the terminal" 2023-11-13 22:18:29 +08:00
data Update feeds list 2023-05-24 10:38:49 +08:00
i18n Create QoL improvements for code listings 2023-02-21 01:06:05 +08:00
layouts Update webring as of 2024-10-06 2024-10-06 01:21:07 +00:00
static Ignore exported avatar images 2023-05-23 19:01:27 +08:00
templates Update admonition block and its styling 2024-10-04 21:11:14 +08:00
.envrc Use flake by default 2022-11-22 23:10:53 +08:00
.gitignore Add Vale into the toolbelt 2024-10-04 21:12:05 +08:00
.vale.ini Add Vale into the toolbelt 2024-10-04 21:12:05 +08:00
flake.lock Update flake inputs 2024-10-03 10:47:05 +08:00
flake.nix Add custom site output attribute for flake 2023-11-08 13:53:34 +08:00
Gemfile Update Ruby Gem environment 2023-11-08 13:45:48 +08:00
Gemfile.lock Update Ruby Gem environment 2023-11-08 13:45:48 +08:00
gemset.nix Update Ruby Gem environment 2023-11-08 13:45:48 +08:00
go.mod Update Hugo modules 2024-10-01 14:04:49 +08:00
go.sum Update Hugo modules 2024-10-01 14:04:49 +08:00
LICENSE Update license year 2023-02-25 15:24:16 +08:00
netlify.toml Replace Makefile with Rakefile 2023-04-26 09:43:54 +08:00
Rakefile Add concurrency into the assets generation step 2024-10-04 21:12:34 +08:00
README.adoc Update README 2024-10-04 21:13:11 +08:00
shell.nix Update devshell 2024-10-04 21:13:02 +08:00
treefmt.toml Add Rubocop to Gemfile 2023-03-07 00:28:10 +08:00

My website featuring a fairly customized version of my More Contentful Hugo theme.

Setting things up

You need Nix package manager installed to easily replicate the development shell for this project. Otherwise, you might have to manually install the following components:

  • Hugo as it is the tool used to generate this website.

  • Go runtime as the Hugo project uses Hugo modules.

  • Git not only because it is the VCS this project uses but also because it is used for Hugo modules.

  • Ruby as this site uses Asciidoctor and custom Asciidoctor extensions.

  • openring for generating a webring which is used on the site homepage.

  • ImageMagick for processing the image files.

With the things installed, you can just clone the Git repo of this project, run rake serve, and voila! Youre now a content creator!

Most of the usual tasks done with this project should be handled by this project already which is listed in its Rakefile. You can view the file for more details but for the sake of completion, here are the following tasks.

  • Building the website with rake serve.

  • Updating the Hugo modules with rake update.

  • Easily creating a live server with rake serve.

Workflow

The workflow should be pretty easy to get started. Here are the non-exhaustive writing guidelines for this project.

  • You can edit any text with the text editor of your choice.

  • The content uses Asciidoc markup with Asciidoctor toolchain.

  • The content also uses custom Asciidoctor extensions, all of which is cited on the Gemfile.

The posts from this website have a certain folder structure to follow. All of them should have a dedicated folder named $PUBLISH_DATE_IN_ISO_FORMAT-$POST_TITLE_IN_KEBAB_CASE. For example, if you have a post titled "How to pick your nose" published on March 31 of 2023, you have to store it in a folder 2023-03-31-how-to-pick-your-nose in the content Hugo folder. You can easily create one with hugo new posts/$FOLDER_NAME/index.adoc.

Content branches

There is another thing that this project uses which is set of dedicated branches for containing code for certain posts. For example, the content branch content/posts/2023-03-31-how-to-pick-your-nose contains code walkthroughs to be used on the same content from the content directory.

This setup allows us to easily write code walkthroughs. Each of those branch are basically dedicated branches for content which can be retrieved inside of the Asciidoctor document.

Another thing to set up is to create a Git worktree. Mostly, it is expected to be in a directory inside of the project.

git worktree add ./code-workspace

The above directory is typically used for the content/* branches.

Getting used to with Asciidoctor

This Hugo project uses Asciidoc markup with Asciidoctor due to more markup features found in it compared to Markdown. Not to mention, it easily allows extending the markup with its API which this project also makes use of.

Speaking of extending Asciidoctor, we use our own set of custom Asciidoctor extensions deployed with RubyGems.

Note
If you have Nix, this is already handled for you so feel free to skip the following section.

Asciidoctor custom include processors

This website uses its own set of Asciidoctor extension as depicted from the above section. But there are more than shorthand macros for certain types of link.

The most useful (arguably) types of extension found here are the include processors.

  • An include processor for retrieving Git objects with git:. This might not sound great but it allows me to create dedicated branches for certain content. Plus, it easily creates patches which is nice to create code walkthroughs.

  • An include processor for SWHIDs but only with content blobs (i.e., swh:cnt:). Very useful for referring to archived codebases.

General content taxonomy

While this is mostly referring to Hugo taxonomies, this is generally applicable to similar features found in other site generators. The way how I describe the relationship of the content for the end user is pretty simple as it only contains two taxonomy: tags and series.

  • Each content may have multiple tags attached to them. These tags are basically referring to a field of various scopes. It can go from a very broad field (e.g., Programming) to a specific one (e.g., Web development). I recommend to be as specific as possible with the tags.

  • Each content can be a part of a series. A content can only be one series at any given time. A series is typically encompassing in its scope and should have an introductory post as to what it is and its aims.

Deployment

This project uses Netlify to deploy the website. However, this uses GitHub Actions to build the website since Netlify is too limited for our this project needs.

The building step for this website should be the same as the (encouraged) workflow with Nix development shells. Hence, it should be run with make build and deploy the website with public/ folder.

Project development guidelines

This project is developed with some habits. The following non-definitive list show those habits.

  • This project uses a custom Ruby bundler for Nix environments. It only needs gemset.nix but it is generated from Gemfile.lock. To generate them, you can run the following command:

    nix run github:sagittaros/bundix -- -l

    Take note you need to do this every time you change the Ruby environment.

  • It needs content/* branches to be deployed with the site. This is because several posts uses a an Asciidoctor extension to include content from other Git revisions. This means you have to fetch them into your local Git repo.

    git fetch origin +refs/heads/content/*:refs/heads/content/*

    You can easily a dedicated content branch with ./bin/switch-content-orphan-branch.rb.

  • For content drafts, it is recommended to create a dedicated branch for it. This branch needs to have a prefix of drafts/ with the filename relative to the content directory (e.g., drafts/posts/2023-03-26-how-to-pick-your-nose). This step is already automated with ./bin/create-draft-branch.rb.

  • Consequently with previous guideline, it is recommend to commit daily and commit often with the drafts. Once it is done, a rebase should be done with a squashed commit publishing the content.

  • The avatar images are processed with ImageMagick. Furthermore, they should be optimized. The simple avatar designs such as ./assets/svg/avatars/ezran/default.svg can be reduced and optimized up to 90% of its quality. Though, this depends on the encoding of the format (e.g., WebP, AVIF). The following command should show how it is done.

    magick convert $AVATAR -quality 30 $AVATAR_OUTPUT

The template used for this site is licensed under MIT license which you can view the file in full detail. The content that is hosted in here are my intellectual property. However, code samples from the content are dual-licensed under MIT and AGPLv3.