Welcome to my website. In this first post I will go over some details on how this site was created.
- The site is static HTML, generated by Hugo
- Sourcecode is accessible on Github
- The generated HTML is hosted on Github pages
- Based on the hugo-coder theme
So, I didn’t use a fancy CMS like Wordpress, or a platform like Medium for example. The main reasons for doing it like this are:
- Keep it simple: The site does not need fancy stuff that requires session management, a database, authorization etc. I just need to publish information. Less moving parts means less maintenance and more speed and robustness.
- Own your own data: the content is plain Markdown files, the generated site is plain HTML. Both formats are easily editable and very portable.
- Developer friendly: The content and styling is maintained by myself. I get to use industry standard tools and proven technologies that I am comfortable with: Git, Markdown, HTML, CSS. I do not need to mouse around in a user-friendly UI.
The setup Link to heading
This is how I did it
I installed Hugo on my laptop. I use Homebrew on macOS, so:
brew install hugo
I have a Github account, where I created
- a source repository for my Hugo website configuration and content,
- a target Github Pages repository for my
generated site called
micheldebree.github.io(the naming convention for personal Github Pages). The site is served from this repository.
This is because Github personal pages cannot be served from a subfolder in the repository.
hugogenerates the static website in the subfolder
public, so I cannot make do with just one repository for source and target.
- a source repository for my Hugo website configuration and content, called
In the source repository
website, I created the initial website by following the Hugo quickstart documentation.
Now a trick to generate the website that ends up in the
publicfolder, directly into the root of the target repository; checkout the target repository as a submodule of the source repository, with the name
cd website rm -rf ./public git submodule add https://github.com/micheldebree/micheldebree.github.io.git public
Now I’m ready to install a theme, tweak things to my liking, and start my first post.
Custom domain with HTTPS Link to heading
As you may have noticed, this site is not served from
That is because I setup Github Pages to use my own domain name. Check out the
on how to do that. Basically you need to:
Setup the DNS records at your domain provider to point to the Github servers.
Add a file called
CNAMEto the root of your site. Because
hugocopies everything in the
staticfolder verbatim to the root of the generated site, I created the file
static/CNAMEwith the following content:
The best part: Github takes care of the
httpsautomatically, so visitors will see a green lock in their browser!
Build and publish the website Link to heading
I now have one
website repository to work in, with a submodule for the
generated website. So when I make changes, I usually do a push to both
When I made some changes that I want to commit:
git add . git commit -m "Finally finished my first blog post" git push
This pushes the changes to the source repository, but doesn’t push the site
that is served from
If I want to publish the changes:
hugo cd public git add . git commit -m "Finally finished my first blog post" git push
This generates the website in the
public folder and pushes it to the
target repository, where Github serves it to the world.
You can see how this could easily be more automated, but for now it works fine for me.