I started this web site as a project to explore how you would go about building a website today and how the technology might have changed over the last 20 years. This was more out of curiosity than anything else.

The last time I created a web page I used ASP running on Microsoft IIS retrieving dynamic content from a MSSQL. There were not many frameworks available so you had to roll your own. Node.js did not exist and the primary layout tool was HTML tables.

Today there are so many options for each step required to build a website:

• How and where to host
• What framework to use
• Static / dynamic websites
• Use AI tools
• Style and themes
• Databases

For almost any question there were ten options that could be considered.

How and where to host

If I simply wanted to start writing on the web there are many options like Ghost, Medium, Substack, and many others. In my case a big part of the reason I started this journey was to learn about modern web technology.

For hosting your own website, I could choose between Netlify, Vercel, Heroku, Bluehost, Azure, AWS, GCP, just to name a few. In the end I decided to get a shared vCPU at Hetzner running Linux, which would give me the flexibility to play with installing anything I wanted on the server to experiment with.

After I got the virtual server up and running, the next decision was which web server to use. The most common ones are NGINX and Apache. I opted to install NGINX Unit as I was interested in looking into the application interface they offer. Then the next step was to get a domain name. I asked Copilot to suggest domain registration options -- and, once again, I received a long list. I signed up for a domain at Namecheap, they had discounts on .dev domains 🤷.

Almost there. The final step was to set up a certificate for HTTPS. For that I installed Certbot and got certificates from Let's Encrypt. This is pretty convenient because it automatically verifies the domain, saves the certificates, and sets up automated renewal as cronjobs on the server.

Finally, my web server was serving a "Hello World" page.

What framework to use

Now the next step was to decide how to actually write the page. Should I just stick to raw HTML? Well the purpose was to learn something new, so that ruled out that option. I also wanted to have something that would make it simple to write a new post when things were set up, being able to include code examples, some math, and simple diagrams. Markdown, with code examples, math latex support, and Mermaid for diagrams would do the job.

There are so many frameworks to choose from, just looking at available JavaScript framework I came across: React, Vue, Angular, Svelte, and many more. Then there were different build systems like Webpack and Vite, package managers like npm, yarn, and pnpm.

I decided to start with something a bit higher level, so I asked Copilot about what would be good static site generators. It gave me a long list including Eleventy and Hugo. I opted to start with trying out Eleventy, which is a static site generator built in JavaScript and uses Nunjucks templates. I chose it because it seemed simple, widely used and met my requirements.

AI Tools

When I was setting up the site I decided also to give Cursor (an AI Coding assistant) a try. Other alternatives include Github Copilot, Windsurf, and Replit. Initially, I prompted Cursor to give me a complete site using Eleventy. It managed to get a site up and running after going back and forth a few times. But then I pushed it too far and it ended up completely messing up the site, so I decided to start again from an existing starter site. Cursor still assisted as I tweaked the site a little.

Style and theme

To get the initial site going, I selected one of the Eleventy starter sites. It included basics like code highlighting and diagrams. I added support for math equations by installing KaTeX plugin and then I had Cursor assist with adding dark mode to the site. Below are examples of some of the features available.

Code examples

Python example: simple plot

import numpy as np
import matplotlib.pyplot as plt

x = np.linspace(-np.pi, np.pi)
y = np.sin(x)

# Plot
plt.plt(x,y)
plt.show()

C++ Example: Hello World

#include <iostream>

int main(int argc, char** argv) {
    std::cout << "Hello World!" << std::endl;
    return 0;
}

Math

The math equations are written using LaTeX math syntax.

$\sum_{i=1}^n = \frac{(n-1)n}{2}$

$\int_a^b f(x) \, dx$

Diagrams

Here is an example of a Mermaid diagram showing few of the shapes and links available.

Databases

For this initial site there is no need for a database as all the content is static so I did not explore any of the databases like MySQL, PostgreSQL, MongoDB, etc. That is something for a later time.

Conclusion

The journey of building this website was a very interesting experience. Learning about overwhelming number of possibilities when selecting what technology to use.

Having so many options poses a challenge for someone taking the first steps. Just selecting between hosting, server platform, framework, packaging, and databases, you are talking about thousands of possible permutations for setting up the technology stack.

Lessons learned:

• There’s an overwhelming number of choices today — but also great tools to help.
• You can get a web site up and running pretty quickly all from the comfort of your home.
• Decide! Avoid getting stuck exploring all the endless options.
• AI tools are helpful but still require judgment and intervention.