With personal websites, there is a multitude of different approaches one can take. The "easy" route so to speak is what I would label as the Wix approach - use an interactive site generator with a nice interface which will handle most of the work for you. HTML, CSS and JavaScript will be produced in the background for you, and the underlying implementaton of the website is ultimately hidden. This approach as several advantages:

• A quick turn-around time. Your changes are immediately visible.
• Ease of use. Even if you are not at all familiar with website development, you would be able to produce a website due to the easy interface.
• Hosting of the website is included - either as a free or paid option.

However, there are naturally also a number of drawbacks with this approach. You are generally limited within the templates and layouts available within the site generator site, and you as a result not necessarily be able to create exactly the website you envision. Additionally, while hosting is usually easy, you are in many cases limited to hosting your website with the same company that made the site generator.

The DIY approach

If you have experience with web development, you may then be tempted to create your own website without the safe boundaries of a site generator. However, there are many different DIY approaches one could choose to take as well! For instance, one could choose to make use of a JavaScript/TypeScript framework such as React or Vue.js. These frameworks are usually used in industry and backed by big tech companies such as Google or Meta. Their main drawback is that they are complicated - these are frameworks which are built for production use, and their design shows it: Lifecycle methods, virtual DOMs, JSX, single-file components - these are just some of the keywords you will become accustomed to when developing within these frameworks.

Ultimately, while these frameworks are certainly interesting in their own respect, I believe it is possible to make do with less. Personal websites rarely require a back-end, meaning that a completely static site written in HTML and CSS with little to no JavaScript is certainly possible! For one, this will often end up being a lot more performant than developing a website in a framework designed for heavy single-page applications. Additionally, you are able cut out a lot of the complexity of these frameworks, which generally increases your productivity when developing the website.

Static Site Generators

However, writing pure HTML can get tiresome and quite repetitive. It is for this reason I chose to make my website using a static site generator. A static site generator, such as Hugo or Zola, generates static HTML based on raw text-input and a series of HTML templates that you write yourself. The final HTML pages are pre-built, meaning they require no JavaScript to run and can as a result render incredibly quickly.

I choose to use Zola for my personal website - mainly due to its high performance and quick generation of the static site. For my personal website, I have created an HTML template that describes the general layout of a project page (e.g. such as for my Ember project). I am then able to write the text contents of the Ember project page in Markdown, and Zola will then put this content into my project template and generate a single .html file for the Ember project page. This means I do not need to replicate the same HTML for all my other project pages whenever I wish to change the look and feel of it - I simply change my HTML template! It grants me fine control over my website, without the hassle of duplicating anything.

Additionally, due to the high-performance of static sites, many companies are willing to host these websites completely for free. I am currently hosting my website with Cloudflare pages and have it set up to track my GitHub repo for this website. Any change in the GitHub repo is then reflected immediately in my website!