How to create your blog with Gohugo and Netlify
769 Words CHANGE ME READ TIME 3 Minutes, 29 Seconds
2021-01-14 00:11 +0000
We all know that content marketing and SEO are the real winners when you want to get some traffic in the long term. But it always sounds super complicated, set up a blog, work on the SEO, pushes some content, etc…
For the last 2 years, I found a solution that really fits my needs and allows me to have a blazing fast blog with no maintenance, good SEO performance and easy to set up. It takes 30 minutes total and it’s free of charge.
I basically use it for every blog I own, like this one but also for my professional blogs (job board and launching strategy).
Disclaimer: You need to know how to use Git/Github for this method. And you also need to be OK with using the terminal
A static site generator
The easiest way to publish content is to create some basic HTML files, without any server interaction. A static site generator lets you write your article offline and will generate all the HTML files afterward. All you need to do is take these files and put them on a webserver. There is plenty of SSG, I choose Hugo a few years ago because it’s one of the faster and because the community is huge - that’s super useful for plugins or themes.
Let’s see how to install Hugo and create your blog:
Install
First, you’ll need to install it on your computer (remember, everything is done offline) I’m running a MacOS so all I need to do is:
brew install hugo
If you have another OS check their install
doc
Then, create a new site:
hugo new site myblog
A SEO friendly theme
Most of us create a blog to get some traffic, to improve our SEO. The very important tip here is to be super cautious of your theme choice. What I do is:
- Choosing a theme based on the functionality/appearance.
- Open the demo with Chrome
- Check the SEO score on LightHouse.
- Good themes has 90, 95/100 on Lighthouse. DO NOT USE OTHERS
If you really want a theme with a bad SEO score, you can fork it and make the modification on your own repo. That’s what I made for my theme.
Once you choose your theme, let’s add it to your blog:
cd quickstart
git init
git submodule add https://github.com/angezanetti/hugo-log themes/hugo-log
Then, last step, update the config file:
echo 'theme = "hugo-log"' >> config.toml
Make sure to check the configuration file of the theme, especially for a theme SEO focused, you’ll have some extra infos to fill.
And that’s it, you configured your new blog!
Create some content
To create a new post we run:
hugo new posts/my-first-post.md
That will generate a new markdown file, open it, and start writing. On the top of the markdown file you should find something like:
---
title: "My First Post"
date: 2019-03-26T08:47:11+01:00
draft: true
description: my desc is awesome
toc: false
images:
tags:
- tag1
- tag2
- ...
---
That’s the metadata of your post, as well as the status of it. draft: true
means that the post is a WIP and won’t be posted to the production version.
Now, we’ll “build” the blog to see how it will show once online:
hugo server -D
-D is for development
Open localhost:1313
and you’ll see the first version of your blog!
Let’s see how we can publish it now.
Publish your blog for free
The big advantage of having static files only is: it’s super easy (and cheap) to host. We’ll do it with Netlify. The Starter plan is free and more than enough for most of our blogs. You can create as many website as you want, as soon as your traffic doesn’t exceed 100Gb(!).
So first, create an account on app.netlify.com, then it will ask you to connect your GitHub/Gitlab account to it (push your blog to it beforehand).
To create a new site, Select New site from git.
, select your blog repository
and try to build it.
It should fail! Because we need to tell to Netlify how to build our blog, just add this file to the root of your project:
[build]
publish = "public"
command = "hugo --gc --minify"
[context.production.environment]
HUGO_VERSION = "0.55.6"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"
Now, try to build it again and you should be good!
You can now set up a (sub)domain for it, Netlify also provide you a SSL certificate (for free).
And that’s it! You now have a brand new blog, super-fast, resilient, no maintenance and for free!
→ If you want more tips about blogging & indiehacking follow me on Twitter