Yet Another Website Rebuild

This content is available in several other languages via the dropdown in the navigation bar.

Breaking Ground... Again

It's been a while since I last update my website. I've hopped around a lot with different configurations. For a while I was using Hugo Academic, then I switched to Bay where I've sat for a while without touching anything. At some point I was playing around with Flask, but never fully committed to it. As I'm coming towards the end of my PhD, I thought it would be a good time to update my website to something more modern and start actually posting some real content.

In doing so, I've come up with a few criteria that I wanted to meet:

First, I wanted something that was already well built with modern features. One of the main struggles I've had with previous websites is that it missed some necessities like reactive layouts, a light/dark theme, and a search bar. I also wanted a nice looking aesthetic. That's surprisingly hard to find for free - most free templates appear dated, are hacker-ish, or not designed for a personal website.

Second, I wanted something that I could understand most of the back-end code for. I can work my way through JavaScript, HTML, and CSS, but I'm not an expert in any of them. As an interdisciplinary biologist, I spend most of my programming time working in R and Python with scripts and command line tools, though I've also taught myself Rust just to get a lower level language under my belt. Hugo is written in Go and Jekyll is in Ruby. Once you know one language, you can pick up others; however, I don't want my personal website turn into a substantial coding project. The goal is to have a simple website where I can throw my ideas out there and potentially provide resources for others to learn from. By using a language that I'm already familiar with, I can quickly look at the code to hack in any functionality I need or figure out workarounds to issues I run into.

Third, I wanted something with a low attack surface. WordPress is a nice, low-code way to build a website, but it's famously vulnerable to attacks. If the Idea is to build a low maintenance website, I don't want to have to worry about the security of the server its running on. These issues exist if I were to put together my own website from scratch through a dynamic framework like Flask. While it would be nice to have a visual editor and dynamic content, I feel like I can get a lot of the benefit just by using a solid markdown framework. Any dynamic features I want can probably be added by playing with JavaScript. If that's not enough, I can always redirect to a dynamic site on a subdomain.

Setting up the Stack

Zola - A Feature Rich Static Site Generator

Zola checks all the boxes for me. It's written in Rust, which is a language that I'm already familiar with. It's also a static site generator, which means that it doesn't require a database or server to run. While its adoption seems lower than Hugo, Jekyll, or any of the other major solutions, I found some nice themes already adapted to it. I ended up using Blow

Zola also comes with some features I haven't seen in other static site generators. In addition to the built in search (which required some JavaScript support from the theme), it also has multilingual support. I'm excited to try and use this to reach a larger audience than I would if I had to stick to one language. I also like the command line server mode with live reloading. It's a nice way to see how your site looks and changes as you make changes to your content. This lets me iterate quickly and see the results of my changes even though the site will eventually be static.

I found that Zola's set up documentation was excellent. If you're following me along, you can find that here. I'm on Arch Linux, so I followed these steps:

# For Arch Linux
$ sudo pacman -S zola
$ cd ~/code/  # or wherever you want to store your website
$ zola init website_name
$ cd website_name
$ git init
$ git submodule add https://github.com/tchartron/blow.git themes/blow
$ zola serve

In addition to blogging and promoting some of my tools, I also want to use my website as a convenient URL shortener that I have control over. This is a space that Zola has less built-in support for. This is a valuable feature since I have content outside of my blog. I can also use the same blog engine to direct people to a list of my tools. I was able to implement this by using a shortcode.

<div {% if class %}class="{{class}}" {% endif %}>
    <p><a href="http://{{loc | safe}}">Redirect</a></p>
    <script>
        window.location.href = "http://{{loc | safe}}";
    </script>
</div>

After adding this to templates/shortcodes/redirect.html I can set up redirects that even work with my analytics.

Appeasing the EU with Umami

Every time I visit a website, I'm greeted with a popup that obscures the content of the page. That popup nags me to view the cookie policy and select my preferences. Sometimes I'm not even allowed to do that, the website simply forces me to accept. Other times, I have to sit through an arbitrarily inflated period where the website 'configures cookie partners' or something. Rather than subjecting my viewers to this, I decided to use a GDPR compliant analytics service. I decided to use Umami I still want to be able to track page views and see what pages are getting attention (especially if I set this up with redirects for a poster or talk QR code). Umami lets me track my analytics without having to worry about the cookie banners. They also have a free tier which should be enough for me unless until I go viral or something.

Plausible is a great alternative to Umami and is worth mentioning here. The reason why I decided to use Umami is that it offers a free tier as part of their hosted service. You can use a community version of Plausible for free, but you have to self host to do this. I wanted to avoid that for the reasons mentioned above.

Setting up Umami was really straightforward. I just needed to add a script tag to my HTML head and I was good to go. This was outlined during the account creation process. I'm not sure if I'll stick with Umami in the long run, but this one line integration means that I can change to a different analytics provider with minimal effort.

Static Hosting for Free with Cloudflare Pages

There's a lot of free static hosting providers out there. When I first started using a static site generator, I used Netlify. That was a great service, but I'm already using Cloudflare as part of my personal website to filter bots and I'm happy to stay with them. Most recently, my website has been hosted directly using Githup Pages. However, Github has had some recent issues with private repositories actually being publicly accessible, and I probably won't keep my Github Pro subscription after my educational license expires. Further, Github has a limitation to the amount of data you can store in a repository. I have some interesting ideas for blog posts that might require more than a few hundred kilobytes raw, and it would be nice to be able to manage my data structure in a way that keeps my website and the data close together. I have a nice data redundancy plan in place (another blog post for another day), so I'm comfortable managing my data this way.

Cloudflare Pages is nice because you can directly upload you static site to their service. This gets around having to use something like Github CI or worry about some complicated API release process. I think it might be possible to bake redirects straight into Cloudflare, which would let me bypass having to finagle that feature into Zola. Right now, Cloudflare Pages is free and doesn't seem to have any limits on data you can store. It also has serverless functions built in, so I could use that to build more functionality into my static website. I have way too many ideas for personal projects, so getting adjusted to the Cloudflare platform also sets me up for future projects.

First, I need to build my site using Zola. To do this, I'm using the zola build command. This will create a folder called public in my project directory. For now, I'm handling the upload process manually. Simply create a Cloudflare account if you don't have one and navigate to the Workers & Pages section of your dashboard. Click on the Pages tab, name your new project, and upload the public folder. If you don't have a domain, they'll give you a subdomain to use. Eventually I'll automate the upload process. The documentation to do that is here

Its worth mentioning that at the time of writing, Cloudflare Pages has a longstanding bug for Firefox users. When uploading content, for whatever reason it includes additional metadata that changes the way Cloudflare handles pages such that they only display the raw HTML. There might be a way to do this automatically, but this can be fixed by adding an extra "_headers" file in the root of your "public/" folder.

/*
! X-Content-Type-Options

Future Plans

I'm sure that this won't be the last time I do a full redesign of my website. Hopefully you found my rationale behind my decisions valuable in some way. I think that despite how long static website generators have been around, there's still a lot of room for future developments. I'm interested in how I could build in a more interactive experience through embedded JavaScript or by taking advantage of the serverless functions. I have not doubt you could build pretty impressive applications with a static website and serverless functions.

In the near future, I want to take advantage of a lot of the features that Zola has to offer. I'm not immediately satisfied with the out of the box search and language support that this combination offers. I'll probably start with adding some content in additional languages and then look at getting search fully functional. From there I have a number of different blog ideas that I think will be helpful for current and future graduate students in the synbio space. I also think this website will serve as a good launching pad for some of the tools I've built. More than anything, I'm excited to finally have a cohesive setup and start creating content - something I've wanted to do for a long time.