This blog here is created using Hugo and is hosted on GitHub Pages. It was part of a Hackathon which Adjust organized in November 2022.
The only thing we had to do before the Hackathon was setting up the DNS entry, to give it some time to propagate.
andreasscherbaum:~$ dig engineering.adjust.com
; <<>> DiG 9.16.1-Ubuntu <<>> engineering.adjust.com
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 44394
;; flags: qr rd ra; QUERY: 1, ANSWER: 4, AUTHORITY: 0, ADDITIONAL: 1
;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 65494
;; QUESTION SECTION:
;engineering.adjust.com. IN A
;; ANSWER SECTION:
engineering.adjust.com. 3429 IN A 185.199.108.153
engineering.adjust.com. 3429 IN A 185.199.109.153
engineering.adjust.com. 3429 IN A 185.199.110.153
engineering.adjust.com. 3429 IN A 185.199.111.153
;; Query time: 0 msec
;; SERVER: 127.0.0.53#53(127.0.0.53)
;; WHEN: So Dez 11 18:32:38 CET 2022
;; MSG SIZE rcvd: 115
Everything else was part of the Hackathon effort. This blog post describes how the blog is setup.
Repository
A GitHub repository is required which holds the content of the website. It can be public or private, doesn’t matter (much). The only difference is that if the repository is private, you pay for the deployment workflow.
GitHub Pages
Go to the GitHub website of the repository, click on “Settings”, then on “Pages”. Enter the “Custom Domain” name, and also tick on “Enforce HTTPS”. The “Branch” setting is still main
(or master
), ignore that for a moment.
Workflow
Thanks to the “GitHub Actions for Hugo” by peaceiris, setting up the deployment is rather easy. Only a few changes are required.
Create a file .github/workflows/gh-pages.yml
in your repository - you might have to create the subfolders first. Add the following to this file:
name: GitHub Pages
on:
push:
branches:
- main # Only this branch includes the published website
pull_request:
jobs:
deploy:
runs-on: ubuntu-latest # use the latest version
steps:
- uses: actions/checkout@v3
with:
submodules: true # Fetch Hugo themes (true OR recursive)
fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: 'latest'
# extended: true
- name: Build
run: hugo --minify
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
if: github.ref == 'refs/heads/main'
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public
publish_branch: gh-pages
cname: engineering.adjust.com
In our case the cname: engineering.adjust.com
is important, as there is another repository deploying another static website. This ensures that the correct website is build and deployed. Also create the public
folder, add some content there and commit and push everything.
Head to the GitHub website for the repository, and click the “Actions” tab. The workflow should already spinning, and your website is deployed.
Now visit the website. It should show an error, let’s fix that.
Website source
Go back into the GitHub Settings, and to “Pages”. Make sure that “Source” says “Deploy from a branch”, and as “Branch” select “gh-pages” - this branch should now exist. Change gh-pages
to a different branch, if you changed the name in the workflow. Use “/” as folder. Save everything and visit the website again. Now the content of the “/public” folder in your repository is visible. Time to add some real content.
Hugo
Install Hugo on your local system. Initialize the website using hugo new site website
. This deploys the website structure into a sub-folder “website”. Move this out into the main directory:
mv website/* .
rmdir website
Now update the config.toml file with your settings, maybe add a theme. Preview the website with hugo server
.
Once you are happy with the content, add everything using git add
and git commit
it. Then git push origin main
everything to the server.
Go to the “Actions” tab on the GitHub repository website and see how your website is deployed.