Creating a personal blog with Hugo and Netlify

Posted on Jun 8, 2020

Introduction

This tutorial will show you how to create a simple blog using Hugo and Netlify.

Set up Hugo

Install Hugo (MacOS)

brew install hugo

Create a new hugo site, make sure you change into your desired parent directory, such as Documents.

cd Documents
hugo new site yoursitename
\\ Creates a new hugo site at the newly created directory named yoursitename
cd yoursitename

Install a theme Requires your hugo site to be a git repository so that you can add a Git Submodule.

git init
git submodule add https://github.com/jscottgray/orglike.git
cp themes/orglike/exampleSite/config.toml config.toml

Start a local development server I found that while making CSS changes that my web browser was caching the non-updated version. To avoid this throw on the noHTTPCache flag.

hugo server --noHTTPCache

Upload to GitHub

Create a new GitHub repository and do not select to initalize with a README. Note that you can set the repository as private if you wish.

Follow the instructions to push an existing repository from the command line (Echoed below for ease of following along).

git remote add origin https://github.com/yourgithubname/newreponame.git
git push -u origin master

Set up Netlify for Automatic Deployment

Select the “New site from Git” button

Select GitHub as the Git provider

Authorize GitHub to access your repositories

Select your repository from the list

On the final steps, it will automatically detect that it’s a Hugo repo and will prepopulate the fields with the appropriate commands so there’s no need to change these values.

Hit “Deploy site”

Congrats!

That’s all it takes. When you push to your repo later on with new blog posts Netlify will automatically build the new site and deploy your website for you.