Contributing to Open Source (Hugo Theme)

Background

When creating this site (ammiranda.com) I needed to pick an existing theme (or create my own). I chose the Hugo static site generator as the technology backing the site so I looked at available Hugo Themes. After a quick review, I picked the Hugo Coder theme. I ran a security scan via Mozilla Observatory once I deployed my website. The results revealed a shocking hole because the generated HTML lacked a content security policy (CSP). This post will detail my process adding CSP functionality to the theme as well as upstreaming the change to the theme project’s repository by opening a pull request on Github.

Adding a CSP to the Hugo Coder Theme

In order to edit the theme’s source code I needed to fork the project’s repository which added a local copy to my repositories. I referenced my forked repository in my ammiranda.com project’s .gitmodules file in order to validate my changes though inspecting my website’s generated markup.

[submodule "themes/hugo-coder"]
	path = themes/hugo-coder
	url = https://github.com/ammiranda/hugo-coder.git

Thankfully I found a blog post instructing on how to add a CSP to a Hugo project. Please read the post to get a detailed explanation of the changes. Otherwise, the TL;DR was I added a meta tag template that defines the CSP and renders it into the head tag of the base template (bashof.html). The values added to the CSP are defined in the config.toml’s params.csp section.

Contributing CSP Changes to the Original Repository

I prepared the changes to be given back to the original project’s repository after confirming my fork generated the configured CSP for my site. On Github upstreaming changes to the original repo from a fork is very straightforward and easy. I opened a pull request (PR) in the original project specifying the target branch as my fork’s master branch ammiranda:master and the destination branch as the master branch of the host repository (luizdepra:master). The maintainer defined a PR template which provided guidelines on how they would accept contributions. I answered all the relevant questions, opened the PR and waited patiently for the maintainer to give feedback.

The maintainer responded to my PR with a small request to move the location of the csp.html template up one level in its current directory. I updated PR with the change and notified the reviewer. They acknowledged my update and merged the PR.

I changed the .gitmodules file in the ammiranda.com repo to reference the original theme’s repository so my site can benefit from the CSP feature and any other future improvements without needing to manually update my fork.

[submodule "themes/hugo-coder"]
	path = themes/hugo-coder
	url = https://github.com/luizdepra/hugo-coder.git

Final Thoughts

I found it really rewarding to improve a project I personally benefit from and plan to make many more contributions to open source in the future!

References