How I set up this site

While the explanation below is by no means on technical expert level and there is much more complicated stuff that could be done, I want to elaborate my decision process in setting up this page. The main goal was to go as lean and easy as possible, so this could be replicated by anyone interested in their own simple website for free.

The initial challenge

When I first considered hosting a personal portfolio page, the plan was to use my existing home server, spin up a containerized version of Ghost CMS and make it accessible through a subdomain based on duckDNS. However, I delayed getting to work right away… something did not yet feel right. On the one hand, Ghost seemed overkill for my use case - I want to document some of my projects as a personal portfolio, not build a community, which is the direction Ghost has been taking in recent years. Next, a DynDNS domain somehow seemed a little to unprofessional to promote - best case, this would be my online landing page going forward! Last but not least, I did not feel completely confident serving the site from my residential internet connection. Though I do not expect a lot of traffic, I did not want my upload speed to become a bottleneck at any time. I decided to address these issues one by one!

Technology Stack

After I had decided not to continue with a full-blown Ghost installation, my next best idea was to go JAMstack and decouple the Ghost backend from the frontend. Ghost offers official integration with Gatsby to generate static html for the frontend, while still using the Ghost admin tools for content generation. Really liking the idea of such a lean frontend, I then considered that my requirements for the backend were not that high either; all I wanted to convey could be put into simple Markdown files. Looking at different static site generators I settled for Hugo. In a new folder I initiated a git repository and instantiated a new Hugo site in the same directory. I then pointed Obsidian, my Markdown editor of choice, to the content folder of my new Hugo project and was all set to start writing content. I moved on to the next step.

Deployment

Having the new Hugo project on my server I had different options to expose the site to the outside world. I could build the page locally and use Caddy (which I was already running as a reverse proxy) as my web server. This would however not solve the bottleneck-problem mentioned earlier. This is why I had already instantiated a git repository! Putting the project in a repository would allow me to run automatic build jobs to other platforms everytime I pushed new content, e.g. new or updated articles. Since I wanted the site to be hosted on the internet and not locally, I decided to push the repo to Github instead of my local Gitea instance, which I did not want to expose outside of my LAN. I then considered free hosting providers for such a simple site like mine. The obvious choice would have been Github pages. I could have used GitHub Actions to build the Hugo site into a separate ‘gh-pages’ branch and run it from there (which I did for testing purposes). I also looked at Netlify and Vercel, which also offer free tiers for such simple sites. The best option I have found for my use case, however, was Render! Render allows me to simply point to my Hugo repository and apply pre-configured build commands - upon every push to my repository, Render now pulls the project code from Github, builds my website, and exposes it as a subdomain to onrender.com. My website was live!

Custom Domain

Since Render already gave me a subdomain to their service, DuckDNS would not have been an improvement anymore. I still wanted to tackle this last issue however, and so I started comparing different domain registrars. While Google Domains and Porkbun both offered very attractive packages as well, I finally settled on Cloudflare - they recently allowed purchase of domains directly via their platform instead of only offering transfer, and offered the lowest ongoing cost of the services I compared. A minor additional advantage of Cloudflare was that Render actually documented how to set up DNS with Cloudflare specifically. Shortly thereafter, this page was therefore accessible under this current domain!

Website configuration

Since this is meant to be a very simple portfolio page, I have decided against additional features like commenting etc. (giscus would have been a great option). Also, I decided against dependabot for theme updates, since I wanted to keep things stable and static for now. I had used both these features testing out a different theme before and ultimately decided they would not be needed for what I was trying to showcase. Let’s see whether that changes at some point in the future, for now people could reach me via my contact details in case they wanted to discuss any content.