Setup blog with hugo and Netlify

If you are interested to start your own blog then this article is for you. You will learn how to bootstrap a new static site with Hugo and deploy to Netlify free hosting plan.

There are several out of the box solutions on the market like WordPress, Medium, etc. However, if you would like to have more control over your blog you might consider to write it from scratch or use static site generators.

Writing a blog from scratch could be a tough job. Let’s take a look at the static site generators. This is a comprehensive list of popular platforms with high community support:

LinkTech Stack
jekyllRuby
gatsbyJS / React
hexoNodeJS
hugoGo

After some research, I decided to go with Hugo. Hugo is the fastest site generator since it is written on Go. You wouldn’t spend to much time while regenerate or experiment with your blog.

Install Hugo command line interface

Since my main platform is OSX I use Homebrew package manager:

1
brew install hugo

Create a blog application

1
2
hugo new site blog-app
cd blog-app

Setup theme

Quite a lot of themes can be found on the official Hugo Themes.

I choose Hugo Themes.

1
2
3
4
5
6
git clone https://github.com/olOwOlo/hugo-theme-even themes/even
cd ./themes/even/
# install dependencies
yarn install
# build
yarn build
  • If you don’t have yarn you can always use brew install yarn to install it.

Configuration

Each theme has unique features and parameters set. To use even theme you will need to configure ./config.toml file. To do it copy example ./themes/even/exampleSite/config.toml to ./config.toml:

1
2
3
4
# Go to root blog directory
cd ../..
# copy config
cp ./themes/even/exampleSite/config.toml ./config.toml

Now you can explore and configure different settings for even theme. Sometimes themes can be outdated or have some issues. However, it shouldn’t take much effort to remedy it.

Create a new blog post

1
hugo new posts/my-first-post.md

This command creates a draft blog post in markdown format.

Create a new statig page

1
hugo new about.md

Start server locally

1
2
# -D states for include content marked as a draft 
hugo serve -D

Now you can open the site in your browser via http://localhost:1313/.

Deploy to Netlify

We’ll deploy our blog to free Netlify account. Netlify can deploy Hugo sites from GitHub, GitLab and Bitbucket repositories. Follow the plan:

  • Create a git repository for blog application and push your site to selected repository service
  • Add /.gitignore to the repository with the following exceptions:
1
public/
  • Add ./netlify.toml to your repository with Netfly CI/CD instructions:
1
2
3
4
# netlify.toml
[build]
publish = "public"
command = "hugo --gc --minify"
  • Create free Netlify account
  • Create a new site from Git on Netlify

Netlify generates random subdomain for your website. You can change it to custom one. Or you can register your own domain with a domain registry. And point DNS to Netlify site.

That’s it. Enjoy your blog and keep creating!

Thank you for reading!