How my site was built
The wonders of the world wide web.
This site is my little gem. I launched it in 2017 and I have been improving and maintaining it ever since. I sometimes call it my personal playground. It is my little corner of the web, a place where I have full creative freedom over my own content. And I love it.
This page provides an insight into the development and design process of building this beauty. Enjoy. At the end of the post, I have linked some good resources for building your own site.
Framework? No thanks
Some of you might think I built this using some frontend framework like React, Svelte, Phoenix, or Ruby on Rails. But no.
This site used to be handcoded, but since Semtembre 2022 I converted it to Hugo, a static site generator. This reduces code replication, but I do file like hugo is a boilerplatery, so I did consider converting it again, to 11ty (who knows, I’ve proven I apparently have to much free time).
I use tailwind for the styling. We use it over at Qdentity, and I got so used to it that I decided to also use it for my own site. It allows me to quickly style things in the DOM without UGLY style attributes. It also allows me to write shorter, more expressive CSS files. I enjoy it.
I have a .htaccess file that handles all the routing for fancy URLs. It removes the file extension, redirects some stuff, and is just overall pretty Poggers.
I have a script that starts a tailwind process that watches files and a local hugo server for development. I also have a script to build the site and then check it for dead links, validate the HTML, and format it which I use in a GitHub action.
My website is hosted at bHosted. They provide reasonably cheap and very reliable shared hosting including PHP, MySQL, DirectAdmin, and PhpMyAdmin. They’re a Dutch company, so the servers are close to me (which means better performance). I pay about 30 euros a year for the webhosting, and my overall experience with them is very good.
I also host some stuff on GitHub pages. The main selling point here is that it’s free. Mainly my blog and documentation for projects are hosted using GitHub.
If you’re looking for paid hosting I’d definitely go with bHosted. If you’re on a budget however, I’d recommend either GitHub pages or Neocities. They’re both great. I think GitHub pages is more reliable in the long run since it is part of a company with a steady income, but if you have your own domain name moving hosts isn’t a big deal.
I used to just use the default sans-serif font the user had installed, but that’s just laziness. I thought long and hard about font selection when I redesigned my website, and I settled for this:
- Merriweather for the main content
- Poppins for headers
- Fira Sans Condensed for subheadings
- Bungee shade as display font for header
I think these fonts compliment each other, while also creating a nice contrast.
My blog consists of three static hugo sites, which I build and deploy using a simple bash script and GitHub actions. I developed my own hugo theme with IndieWeb support, based on neofeed.
I built my own barebones statistics tracker. It tracks visits, not views, per post. The results are publicly available can be filtered per month and are shown in a simple graph that I built using Chart.js.
Dynamic pages & APIs
The projects and books pages are both dynamic. That means when the site is deployed using GitHub actions it pulls the latest content from GitHub and Micro.blog to populate the pages. Why you ask? Well, that means I can be lazy and don’t have to update my site every time I create a new project or read a new book.
The projects page pulls my repositories from my GitHub account using the GitHub API. The thumbnails shown are screenshot.png files at the root of each project’s repository. If there is no such file I display a default empty one using placeholder.com.
The books page works similarly. It pulls the books from Micro.blog bookshelves. The problem is that the microblog API requires an access token to get access to the bookshelves, but doesn’t allow scopes. That means the token can get access to my entire account, including the ability to comment and post. That’s why I built my own wrapper around the Micro.blog API, that hides the token for me.
I open-sourced most of my website, and like my other projects, it can be found on my GitHub profile.
I haven’t yet decided on the license. I want to open-source my site properly, but I also don’t want sites that look a lot like mine out there. In short, I’m fine with people using my code for their site, as long as it looks different and isn’t just straight up a copy of mine. I also don’t want any commercial or patented use. If you know the proper license, please contact me at email@example.com.
I’ve also open-sourced the blogging software I built for my neolog, called neopub. It can be found here: github.com/neopublished/neopub. It is licensed under the Apache License 2.0.
For CI/CD I’m using GitHub actions since all of my code is also hosted on GitHub. I know GitHub isn’t open-source and I should probably use Gitea or GitLab, but you know, old habits.
All projects that have documentation hosted using GitHub pages (on docs.geheimesite.nl) have CD to build and deploy new docs on push to the master branch. My website and neolog are being deployed using FTP-Deploy-Action.
Thanks for reading all of that (or just scrolling to the bottom). I hope you learned some things. If anything about this page was unclear, don’t hesitate to shoot me an email at firstname.lastname@example.org. Now, as promised, here are some resources for building your own site: