Making a Blog With Hugo And Netlify
Tags: netlify, hugo
Published: 2019-09-02 21:41:50

Numerous blog posts already exist to explain how to build a blog with Hugo and deploy it using Netlify. But since this is my first blog post (a warm welcome by the way :heart:) I wanted to briefly describe how I created my own site, which you can find on [https://bjarnemagnussen.netlify.com](https://bjarnemagnussen.netlify.com).

I will also clarify things I have often found lacking in other descriptions, such as what to be aware of when using Netlify, how to use a *private* repository for the raw files and how to use the Academic theme of Hugo. Some prior knowledge of git and GitHub is required.

When I started out to create my own site I wanted something that was **easy to deploy** and with support for **markdown**. It is my preferred way to write and the choice quickly went for **a static site generator**. I chose *Hugo* because it is written in Go (the language I currently study) and I liked the look of the Academic theme. Easy deployment with Netlify was also a clear plus.

## Installing Hugo With Academic Theme

I chose an installation method that uses git and GitHub as described [here](https://sourcethemes.com/academic/docs/install#install-with-git). However, **I didn't want my raw markdown documents and configuration files exposed in a public repository** and changed some steps in the installation process.

1. First create a **private** repository on GitHub, you can name it whatever you want.

2. Then clone the `academic-kickstart` repository to your local machine in a temporary dictionary *mirror*.
```sh
mkdir mirror
cd mirror
git clone --bare https://github.com/sourcethemes/academic-kickstart.git
```

3. Finally push it to your private repository created in step 1 (change `yourname` and `private-repo` accordingly below).
```sh
cd academic-kickstart.git
git push --mirror https://github.com/yourname/private-repo.git
```

You now have a basic Academic theme skeleton inside your repository and can delete the temporary *mirror* folder that was only created for this purpose.

Use your repository in any of the usual ways you find convenient. Academic comes pre-installed with many example pages and configuration options. You can find the documentation page for it [here](https://sourcethemes.com/academic/docs/) and change the example files according to your taste and need.

## Deploying The Site

To deploy the webpage on Netlify you will first have to register with them [here](https://netlify.com).

> It is completely fine to register using only your email :wink:. No need for GitHub's single-sign-on at this point![^1]

We can then deploy a new site by pressing the little "New site from Git" button in the top right.
![new-site-from-git](https://bjarnemagnussen.netlify.com/img/post/making-a-blog-with-hugo-and-netlify/screen1.png)

From the new window we select the "Github" option under "Continuous Deployment".
![continuous-deployment-using-github](https://bjarnemagnussen.netlify.com/img/post/making-a-blog-with-hugo-and-netlify/screen2.png)

We must then grand Netlify some rights and access to our private repository that we have specifically created for this purpose.
![select-repository](https://bjarnemagnussen.netlify.com/img/post/making-a-blog-with-hugo-and-netlify/screen3.png)

Confirm it by clicking on the repository from within Netlify's window.
![confirm-repository](https://bjarnemagnussen.netlify.com/img/post/making-a-blog-with-hugo-and-netlify/screen4.png)

And press the "Deploy site" button to deploy using default parameters for `hugo`.
![confirm-default-parameters](https://bjarnemagnussen.netlify.com/img/post/making-a-blog-with-hugo-and-netlify/screen5.png)

:tada: Congratulations! Your blog should show up under "Sites" and **every** new commit to your private repository is automatically deployed.
![deployed-site](https://bjarnemagnussen.netlify.com/img/post/making-a-blog-with-hugo-and-netlify/screen6.png)

*You can now change the settings for "the-complicated-looking-and-automatically-assigned" subdomain, or switch to using your own domain name. All of that is explained on their [documentation page](https://www.netlify.com/docs/custom-domains/).*


[^1]: Although we must link our GitHub account with Netlify, I always avoid using single-sign-ons from specific vendors. I find it disturbing to use as it complicates parting with the vendors later if we should not use their services anymore...