Jekyll
Recently, I start to reorganize my personal website with Jekyll. I knew this tool from the first day I tried GitHub Pages (perhaps in 2018). At that time, I did not read through the documentation and thought this is only a “theme” tool, which modifies my website to a look I don’t like. So I did not use it, but started from scratch to build an HTML + CSS static site. It was a happy learning process. I started to learn using the freecodecamp online app, and got good understanding of the web development basics. With some practice, I eventually was able to tune my website front page to the way I wanted.
After making the front page successfully, I got more ambitious: I want the website to be more informative about who I am and what I do. In particular, I wanted to make my website a portal for all my research activities, where my ideas, data, thoughts and nice visuals were organized together. Although this sounds like a good idea, when I really went about to do it, it soon got very painful because the number of .html files grew very quickly. I was very frustrated when I updated the “Last edited: xxx” string in the footer of my site, because every time I needed to modify all the .html files.
Because of that, I stopped working on the website for a while. And only recently, when I use sphinx to build code documentations, I start to think that there should be a tool like sphinx, which translate simple markup language to html. Interestingly, this tool is Jekyll, which I overlooked (or underestimated) 5 years ago! After reading through the documentations, I am very sure that this is the tool I am looking for. I can customize the templates freely, write normal content in Markdown, and use .yml text file to serve as database. At the moment of writing, I am still working on the framework of the website (creating templates and tuning css). But I can already see that in the near future, I can maintain the website just by adding a simple entry in the data file.
Read the documents, at least to know what the tool is designed for. This is the lesson I learn from this experience.
Update Feb 11, 2023
While migrating my earlier blog posts and research notes to this new system, a problem I encounter is the link to image files. In the past, I use the Markdown-writer add-on in Atom, which generates an images folder in the project root folder, then followed by year and month, and finally the image file. For example, an image added today will be saved as /images/2023/02/xxx.jpg. In the .md file, the string to invoke this image would be , since all my notes/posts are in immediate subfolders of root folder, e.g. /Notes or /Blog. However, in Jekyll system, images are saved in /assets/images/{year}/{month}/ by default. As a result, the relative path from the .md file is different. If I want to migrate a post, I will have to manually edit all the links to images. This is tedious, but still possible to do since I only have less than 50 posts from the past. However, it will be nice if I can use some sort of “absolute” path to link images, so that even I change the location of the post, the links still work. If a solution is found, I will post an update here.
Update Feb 12, 2023
In the end, I manually updated the relative paths to absolute path, so that I don’t have to worry about bad links now. The website has a shape now, and the current goal is to fill in stuff to eliminate bad link (which links to nowhere).