How I Made This Website

Everyone Should Have a Website

Everyone should have their own website. In the early days of the of the internet, a much higher percentage of internet users had their own webpage. As the internet opened up to less tech-savvy people, social media websites became the places where people would share their thoughts. This is for good reason, humans are social animals and social media allowed for much greater interaction and social networking than personal webpages. Increasingly though, when you consider the privacy and security problems that are arising with social media companies, it seems a good hedge to have your own website too. Facebook has survived one antitrust lawsuit, but who is to say it will survive another and not go the way of MySpace. It seems wise then to have a backup. Especially as services like Netlify and Github Pages mean you can now host a static site for free. This website is currently hosted on Github Pages.

The Problem

As someone who had been thinking about making a personal website for a while, what stopped me for a long time is that I was unsure of the best way to build it. I didn’t know how to get what I wanted, in fact I wasn’t entirely sure of what I did want. However, I knew what I didn’t want.

I mostly code in R and Python, for the purpose of data science and other mathematical programming, along with some scripting for other small projects. I didn’t want to have to train myself to be a full stack web developer. Yes, I’ve played around with Javascript, HTML and CSS before, but I didn’t want to have to spend hours becoming an expert at CSS grids and build something from scratch to get a website that looked nice. I quite like minimal looking websites, but even then I knew that to have something that looked reasonably professional would just take much more time than I was willing to put in.

I didn’t want limited control and to not have the ability to go in and change things if I want a slightly different look. It might not be something I’ll ever actually do, but the option to completely rewrite the website and alter it so that it is fully customised is something that feels important to me, even if I don’t use it. Maybe one day I will become a CSS expert, and if that does happen then I want to be able to use it.

A youtube channel I really enjoy is The Coding Train. He makes cool interactive animations using a JS library called p5.js. I prefer to use vanilla JS myself, but I want the ability to easily include any interactive animations I’m inspired to make in my website, see here for an example. I don’t want to be limited in the type of content I can include.

I also don’t want to have to build a backend myself. I’ve messed around with Flask and Django before, but I’m far from an expert. I knew it would take me too long to get up to speed with those, and that anything I made would just be too much effort for a website that is most likely insecure and buggy. One of the secrets of tech is to use tools that make things easier.

However, most the pre-made solutions I was aware of just seemed clunky and overkill for what I wanted, without enough flexibility. Wordpress is the one that first springs to mind. It uses PHP and databases, which seemed like unnecessary bloat. The modern web is bloated enough as it is. Ever had to wait, for what feels like an eternity, for pictures to load on some news article you were reading?

To summarise, I didn’t want:

• A website that was bloated and overly complex for my needs.
• To have to build everything myself from scratch.
• To not be able to tweak things to my heart’s content.
• To not be able to add cool interactive animations.

The Answer

For a while these requirements lead to paralysis. Then I stumbled across a youtube video recommending Hugo, a static site generator. Hugo is built with the Go programming language, but no Go knowledge is necessary. There are hundreds of themes available that other people have created, I’m using the Cactus theme. Hugo is able to take markdown files and convert them into a static site (it uses a template system that looks similar to Django). So I can just write posts in Markdown, which is nice because Markdown is much easier to write than HTML, and someone else has taken care of the details. But what’s great for someone like me, who only knows some JS, HTML and CSS, is that the JS, HTML and CSS files are all there for me to edit. I can tweak them as much as I like, but I didn’t have to build them from scratch.

This also illustrates an important learning technique, especially in tech. When you have limited knowledge in an area, it can be much more informative to play around with other people’s solutions, before making your own. If I had tried to make a website like this from scratch I would have simply gotten frustrated and given up.

As a static site, in comparison to Wordpress, my website is much faster and less bloated. It does not need to query a database, it just has to serve the HTML webpage.

Importantly, static doesn’t mean boring! As I said, I can still include interactive elements in my website using javascript, and I can embed youtube videos, tweets and instagram posts.

Other Answers

There are other static site generators available. One of the most popular is Gatsby. However, this uses React and GraphQL. These aren’t technologies I’m familiar with, and would decrease my ability to dig into the nuts and bolts of the website, without first learning these. It also requires Node.js, while Hugo is standalone, without any dependencies.

The other popular one is Jekyll, I know this uses Ruby and is the default static site generator for Github Pages. This seems pretty similar to Hugo, though one slight advantage for Hugo is that because it uses Go instead of Ruby, it builds websites much faster. The Hugo documentation also seems more in-depth. Honestly though, one of the biggest reasons I used Hugo out of these two, is that it was just the first I came across.

Recommendation

If you, like me, know how to code but don’t know much about web development, then I really recommend creating your own website with a static site generator. Even if you don’t have much coding experience, (it’s never too late to learn), then Hugo or Jekyll are still good options, there are many tutorials online that will guide you through it, and every theme has an example site that you can easily adapt, but without the same level of customisation. Remember, the most important thing on a website is the content, of which you will have full control. Hugo even has some GUI frontends to make it easier to use. I’m more than happy with the results.