How This Website Is Made

This website is the built from my Notes repo and is the best way I could come up with to display the contents of my notes I have accumulated throughout the years. These notes are written in Org Mode and are linked together using a package in Emacs called Org Roam.

How is it made?

With the basic description of what this website and the repo containing its contents out of the way let dive into how this website is being built behind the scenes.

So since the content of my notes and subsequently this website are written in Org Mode I wrote a script in ELisp called publish.el that configures settings for the ox-html Emacs package to publish org files to html files. I also overwrote the default publish template so I am able to insert some extra div elements to format the website with CSS. Although this script is quite complex and does way more than I am giving it credit for I tried to make an effort to document what the script is doing via comments, so if you are interested in the logic or if you want to use this script for a similar project you are working on feel free to check it out and lift anything that helps you.

This script is run via GitHub Actions on push to the master branch of the repo. If you want to see the actual workflow file you can check it out here. This action uses a Docker Image that I also made to run Emacs in a docker image to execute the publish.el script. The Docker image in question can be found here and is available on both GitHub Packages and Docker Hub. I also made a more bare bones version that this Docker Image is built off of that doesn't include the Org Roam package, which can be found here.

What makes it look like this?

I was inspired by Andy Matuschak's notes and wanted to replicate his miller column design. I also took some of the CSS and JavaScript from Jethro Kuan's (the developer of the Org Roam package) website. You can see my CSS here and my JavaScript here.


If you have any feedback on what I could improve feel free to open an issue on GitHub: here or submit a PR with your suggested changes.

This page was last updated: 2021-12-03 Fri 01:07:10. Source