DEV Community

Xavier
Xavier

Posted on • Originally published at angezanetti.com

How to create your blog with Gohugo and Netlify

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:

  1. Choosing a theme based on the functionality/appearance.
  2. Open the demo with Chrome
  3. Check the SEO score on LightHouse.
  4. 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
Enter fullscreen mode Exit fullscreen mode

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
  - ...
---
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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 indiehacking follow me on Twitter

Top comments (0)