This article is a case study. It shares the story of self hosting this website - the blog space of The Liberated Edge - as a static Hugo website on The Edge. You will get to know how we manage its content through CI/CD workflows, and how we integrated fair web analytics to help us further steer its evolution.

The problem

The Liberated Edge is a feature-rich web application which is a lightweight knowledge management solution. It comes with many capabilities that ar great when it comes to capturing and managing knowledge, e.g. the auto-generated table of content per article is a killer feature. Some of them we found a bit over the top, when is all about a simple blog.

This is how the conclusion that we needed to find a solution more tailored towards blogging was reached. As the intention was to self host the blog on The Edge, the target technical solution had to tick the following boxes.

1. The blog should be really lightweight. It shouldn’t consume much bandwidth or cause excessive CPU and memory usage.
2. The blog technology should allow for self hosting such a blog on really downscaled servers on The Edge. This is a requirement that we do our best to satisfy with any application self hosted on The Edge.
3. There should be a way to understand more about the usage of the blog in order to further evolve it. I had in mind basic web analytics and metrics that are pretty standard.
4. Any collected user data shall not be shared with third parties.
5. Authoring experience should be no-brainer for the average software engineer or developer.
6. Outstanding support for revision-history. I imagined it somewhat featuring the super powers of git.

The solution

The proposed solution is opinionated and it’s tuned to really satisfy the aforementioned functional and non-functional requirements and nothing more. There could be much better ways to solve this problem and I would be happy to get to know about them, explore, document and share them as knowledge with everyone. Later on The Liberated Edge will also automate them.

Fig. 1 presents the target solution from the perspectives of readers, authors, and experts in web analytics.

It is worth noting that the Internet Gateway and all of the Linux containers run on The Edge are hosts/nodes in a virtual private network (VPN). This is not evident on the diagram as it’s a detail that does not necessarily contribute to clarity.

Internet Gateway

The Internet and The Server on The Edge are bridged by an Internet Gateway, where an instance of Caddy 2 acts as a reverse proxy and forwards HTTP requests to the applications self hosted on The Edge, i.e. on the Server on The Edge, as appropriate. After the requests get processed the reverse proxy forwards the responses back to the respective clients.

Website container

Non-surprisingly the highest performing option at the lowest resource cost would be having the blog served as a static website. We use Hugo to generate a static website at build time. It translates markdown to nice and tidy html markup in a blink of an eye.

As far as the Caddy 2 instance running in the Website container is concerned, the origin of the served website is unknown and irrelevant, i.e. the web server just serves static html and assets from a folder on the local file system.

Hugo also supports theming and this helps with the blog being a bit more unique and appealing to users even if web development was is not a strength of mine.

Gitea

We use a git repository to store the source code of the website and other assets. In addition, git naturally offers advanced support for revision history. As a software for managing git repositories, Gitea can also emit change notifications to observers through web hooks.

These are all important capabilities from authoring perspective.

Buildbot

Buildbot is a continuous integration framework/server implemented in Python. It has minimal consumption of system resources. It helped us create a CI/CD pipeline. The pipeline is triggered after every commit in the main branch of a git repository managed by Gitea.

It fetches the latest changes from git, rebuilds the static website via Hugo and deploys the new version of the website to the website container.

Offen

The fair and open source web analytics suite Offen is another lightweight solution that performs pretty well on The Edge. It always requests for explicit concent prior to storing any user data and provides decent means for users to actually inspect the collected data. It’s an opt-in and really transparent model of measurement. Of course, the Offen instance does not share any user data with third parties.

User journeys from technical perspective

The described solution currently supports the following user journeys.

Authoring

The Authoring core user journey can be initiated on any platform that supports text editing and provides a git client. We use it to work on posts from computers, smartphones and tablets.

1. An author clones a git repository storing the source code of the website.
2. An author creates/modifies a post, creates a git commit, and pushes it to the main branch of the remote repository.
3. Gitea emits a change notification through a registered web hook.
4. The web hook that receives the notification is registered by the Buildbot main server. As a result the main server triggers a build on the Buildbot worker.
5. The pipeline executed by the Buildbot worker fetches the latest changes from git, uses hugo to builds the latest version of the static website, and then invokes rsync to copy the newly built version of the website to the website container.

Reading

1. A reader navigates in a (desktop or mobile) web browser to https://blog.theliberatededge.org.
2. The GET HTTP request sent by the browser reaches the Caddy 2 reverse proxy running on the Internet Gateway. The proxy forwards the HTTP to the Website container.
3. The Caddy 2 web server instance running on the Website Container handles the request, e.g. finds a page and sends back its HTML markup as a HTTP response.
4. The reverse proxy running on the Internet Gateway forwards back the HTTP response to the user’s client/web browser.
5. The web browser renders the HTML.

Of course, this is the same flow for loading any media (images, videos) that may also be published on the website.

Web analytics

Prior to following the Web analytics user journey one needs to import a JavaScript snippet to the base HTML template of the Hugo website. Once the snippet is added to the end of the HTML body, tracking events will be sent to the respective tracking account in Offen.

Once there is some web analytics data stored one could go through it following the journey described below.

1. Navigate in a web browser to your Offen instance.
2. Log in as an operator of the instance.
3. Switch to the different analytics accounts that you may be using.

Trade-offs

As we had to balance with regard to feasibility and technical excellence, there are some conscious trade-offs that we had to make.

1. Almost all of the communication goes through the Internet, while all self hosted applications are running in one and the same virtual private network (VPN) and the respective Linux containers are possibly be run and managed by one and the same LXD server instance in the majority of cases. The only significant step that does not go through the Internet is the deployment of the Website container initiated by the Buildbot worker. The mechanism relies on rsync of folders on both containers.
2. We lack any system and application monitoring. This may or may not be an issue as The Edge usually targets families and small communities anyway.

Do you need help with building your own blog?

Bear in mind that The Liberated Edge can help you big time with self hosting a similar blog for your own needs on The Edge. We created installation guides for all of the applications that serve as building blocks in the proposed solution. You need to follow them step by step.

Installation and configuration guides

• Internet Gateway
• Server on The Edge
  • Self hosting static websites
  • Gitea
  • Buildbot main server
  • Buildbot worker
  • Offen fair web analytics

Integration of the self hosted applications

Once you get the respective containers up and running, you will need to integrate the self hosted applications as already described on a higher level.

It’s still unclear how to demonstrate these last final steps in a way that is both easy to follow and detailed enough. If you happen to come up with some ideas, don’t hesitate to share them with us on Mastodon. Our vision is to fully automate them in future to lower the entry barrier for non-technical - so to say - explorers of The Edge.