This website

I built this website as a means to an end - to have an online list of personal accomplishments that could be easily shared and accessed by anyone interested. Below you can find what I used.

Web framework

You can’t build a website without a framework, unless you want to write pure HTML. While looking for frameworks, I found Astro - an up and coming tool for immensely fast static websites. This was very important to me, as these days one of the main factors that influence the perception of a website is how fast a user can interact with it. One of the advantages it has is a large variety of features ideal for content (text) heavy websites. They have a great tutorial and detailed documentation. Astro turned out to be an excellent choice.

Content collections allow you to write blog articles with plain markdown, and then turn them into fully fleshed and beautiful pages when viewed.

Image optimization is another nice Astro feature, which can turn a single image you upload into a variety of optimized, responsive images during build time. When your website is viewed, the best image is chosen according to the user’s screen and pixel density.

Hosting

One of the most well known choices for free web hosting is, of course, Github Pages. Github generously offers free web hossting for any Git repository. The catch is, that the repo has to be public. I didn’t want for the source code to be easily found, so I looked for alternatives.

That’s how I found Cloudflare Pages. They offer blazing fast web hosting, for free, CDN included. You can sync your website with a private Git repository and build automatically with every commit, with a large max file size limit, and basically no bandwidth limits. Pages is also part of Workers, which allow you to implement a backend (e.g. a contact form) at no cost. This looked like a much better option to me. Plus, I already use their DNS for this website, so I just enabled the Pages functionality, added my Git repo, and went to work.

Design

As a beginner with web design, I wanted something to help simplify creating the look I wanted and be easy to organize. I found Tailwind CSS, which is a CSS framework that focuses on testing and developing quickly, to be ideal. Global dark mode support was a nice benefit too.

For simple SVG icon integration I used Astro Icon.

Contact form

There are quite a few backend-less contact form options on the internet, but I wanted to use something that I created myself. Workers allow you to run code on Cloudflare’s servers alongside your static frontend. Using this example I wrote a single program that sends form submissions to my email via Resend. Turnstile was used for some added protection against bots.

Search functionality

I wanted the fastest and simplest search, but one that still worked well. Pagefind provided what I was looking for. It builds the search index automatically based on the files you give it - all you need to do is customize the features and the design.