This is my first blog post, ever. And because I’ve built this website by using Hugo, why not starting this journey of self-learning by a blog post on how to start with amazing framework?

Note: The following how-to has been tested on a Windows (10) operating system only.

Build from Source

As mentioned in the Hugo Windows Installation guide, three are three main components when working with Hugo:

  • Git
  • Go
  • Dart Sass

To begin with, Git and Go are mostly necessary to start with Hugo development, where Git plays the role of the Version Control System. It is good practice to git your progress and, in case needed, revert your current work to a previous version.

Therefore:

  1. Install Git: Git Installation
  2. Install Go: Go Installation
  3. Install Clang: Clang (needed to compile any native code dependencies or tools used by Hugo and because we are building Hugo from Source)
  4. Update your PATH environment variable Go Wiki: Setting GOPATH. Look for the Windows section.
  5. Install Hugo: Hugo Installation. It is recommended to install the extended version to have all the features needed since the beginning.
    1. In short, open a CLI (I’m using Hyper for Windows), and install Hugo by typing/copy-pasting the following to build the standard version of Hugo:
    CGO_ENABLED=1 go install tags extended github.com/gohugoio/hugo@latest
  6. Test your installation: once done, type hugo version and you should see something like hugo v0.140.0 windows/amd64 BuildDate=unknown (Hugo - Basic Usage)

In addition, follow the detailed instructions to install GCC on Windows.

Git it!

A possible next step is to Git your folder. By gitting it, you keep track of any changes you do during the development.

In order to do that, you can follow the instructions Initializing a Git repository.

Starting with a Theme

Starting with a theme is the easiest way to look at a setup already done. From there, you can edit it as you wish with your own data and style.

Let’s say you want to start with the most common Theme available for Hugo, PaperMod.

  1. Follow the installation guide, the recommended method 2.
  2. You can use the Data Professor config.yml file to get inspiration of what he already did and then edit the available configuration settings.
    1. In case you have the hugo.toml file and not the config.yml file, you can use the YAML TO TOML Converter to convert the config.yml file into the hugo.toml.
  3. cd into your project directory and type hugo server -D (where the -D will run the drafts pages as well) and go to //localhost:1313/ to see your current locally deployed blog.
  4. If everything went correctly, you should see something like the official hugo.PaperMod Webpage with the editing from the Data Professor config.yml file.
  5. Pat yourself in the back, you now have a blog! 🎉🎊
  6. To improve/edit your newly created blog, you can have a look into the official repo for more info or the following other great resources:
    1. Hugo-PaperMod
    2. The Data Professor PaperMod Github Example
    3. The Data Professor - How to build a portfolio website for data science | Hugo + Hostinger
    4. How to Set Up This Blog

Publish your blog on gh-pages

And now, what? After you have built your own blog locally, you can think of showing it to the world. But how? Here, the gh-pages comes into action. Because we are not using Jekyll as a SSG (Static Site Generator), the About GitHub Pages page suggests to use the GitHub Actions in order to publish our Hugo website.

You can follow the Host on GitHub Pages how-to for hosting and deployment to understand what are the necessary steps to easily and freely host your own blog online.

References: