In this guide we’ll be creating a sleek and simple static site with Hugo, perfect for a professional blog. We’ll take advantage of GitLab to store our code and leverage Cloudflare Pages for hosting. The best part is that it’s free! The only cost associated will be with owning a custom domain if you choose to use one for your site.

Prerequisites

  • Install Git Here
  • Install Hugo Here
  • Create a Gitlab account Here
  • Create a Cloudflare account Here
  • Pick out a theme you would like to use for your site Here (I’ll be using PaperMod)

I’m on Linux so I’ll run sudo apt-get install git then sudo apt install hugo, and we’re good to go. Next, head over to Gitlab and create a new project. Feel free to create a project name of your choice and make sure to leave the “Initialize repository with a README” option unchecked.

Terminal time

First, lets create a folder somewhere on our computer that will house all of our files for our website. Open up that Terminal and navigate to the folder we just created and run the following command (Replace dieg0sec with your sites name):

hugo new site dieg0sec -f yml

This will generate another folder containing all the files needed for our Hugo site. We use the -f yml flag to change the default configuration file type from TOML to YAML. Though I don’t know enough about the differences, our theme gives examples using YAML, so we’re going with that. Now lets create a page. Navigate to the folder we just created and run hugo new docs/test.md to create a test page. Before we install our theme lets run git init to initialize our git.

Note: I had never used git before creating this website. The instructions might not be correct/efficient but they worked for me. For more information on pushing your files to Gitlab, reference the instructions on Gitlab after you create your project.

On our themes installation instructions page it gives us the following installation command:

git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1

Alright, we should have all the files needed to create our site, but let’s make a few changes before we view it. First, open the config.yml file and add theme: PaperMod as a new line item. While we’re here, also enter the address of the custom domain you are going to use. For example, my config.yml file will start with baseURL: https://dieg0sec.com/

Next, let’s go into the content/docs/test.md page we made earlier and change draft: true to draft: false and add some content so we can see how it displays. Now let’s run hugo server and navigate to http://localhost:1313/ in our browser to take a look. Awesome! Everything is looking good on my end so lets get everything pushed to our Gitlab repo. Add a readme using echo "# dieg0sec" >> README.md then git commit -m "initial commit". Create and set the main branch withgit switch --create main & git branch -M main. Add the remote address git remote add origin https://gitlab.com/dieg0sec/mysite.git (You’ll find this command when you open your empty project on Gitlab). Then push the README with git push -u origin main. Once that is done push everything over by running git add . & git commit -m "first test page" Once you see the files populate, it’s time to head over to Cloudflare and make our site live!

Cloudflare & Custom domain

Log into your Cloudflare account and in Account Home, select Workers & Pages > Create application > Pages > Connect to Git. Select the new Gitlab repository that we created and enter the following information:

  • Production branch main
  • Build command hugo
  • Build directory public

Hit “Save and deploy”

Boom, you’re live! Now, lets set up our custom domain. Go back to Account Home, select Workers & Pages and click your Gitlab repo. Then head over to the Custom domain tab and go through the instructions. I already have my Domain’s name servers pointed to Cloudflare, so it’s going to automatically create a CNAME record for us. That’s it you’re finished! I hope you found this guide helpful. If you create a site using this guide, please send me a message; I’d love to hear about it!

Additional resources

Change your nameservers to Cloudflare Cloudflare’s gide to deploying a Hugo site PaperMod installation instructions If you followed this guide, you’re in a great spot to join the Indieweb!