Hello and welcome

Hugo and Hugo themes, how to use, and why I chose them

May 17, 2019
general

This blog will run using the amzing hugo static site generator project.
I am using the theme hugo-cactus-theme by digitalcraftsman which hopefully I wont edit it, its the cleanest, simplest and SEO friendly that I found.

The entire blog will be made by using markdown languae.

The blog will be hosted on Netlify.
Netlify offers CI/CD, CDN, Let’s Encrypt SSL and an optional custom domain for free.

The code will be saved on Github for free.

That is why I think that everyone should blog for free, not using any platform that offers you the same functionallity or less, but doesn’t share its revenue on the content you write.

Getting started with hugo and cactus theme

Some hugo themes support Sass/SCSS, so I prefer building hugo executable from source to have those extended features.

If the theme you are using doesn’t generate Sass/SCSS just install hugo from homebrew brew install hugo.

Else, install go
Than build/install hugo from source.

mkdir $HOME/src
cd $HOME/src
git clone https://github.com/gohugoio/hugo.git
cd hugo
go install --tags extended

Assuming your installation went ok, let’s build our new blog site with hugo, and import our theme.

Netlify auto deploy needs the theme to be a submodule in your repository

hugo new site ./blog
cd ./blog
git submodule add https://github.com/digitalcraftsman/hugo-cactus-theme.git themes/hugo-cactus-theme

Now let’s configure the site to use the theme we downloaded.

All hugo themes has an exampleSite directory with a short sample, we will copy the config.toml file to our root directory, edit it and try to run the site

cp ./theme/hugo-cactus-theme/exampleSite/config.toml ./

Now modify your configuration on the existing config.toml file you copied, example:

baseURL = "https://blog.omerh.me/"
languageCode = "en-us"
title = "My Blog"
theme = "hugo-cactus-theme"
enableRobotsTXT = true
googleAnalytics = ""
disqusShortname = ""

Now we should have a running website working. let’s try run it.
Run hugo server and it the command runs, open your browser and go to http://localhost:1313

Now let’s add a new blog post:

hugo new content/post/first_post.md

This will create a new file in ./content/post/first_post.md that will have default archetypes

---
title: "first_post"
date: 2019-05-17T22:21:07+03:00
draft: true
---

Start writing your blog, once its ready, edit the draft to draft: false and you will see the post.

Remember to have the hugo server running and generating your site by running hugo server

Now that you have a running blog push the files to github, go to netlify and connect the repository from github to your netlify as a new site.
Now look for your new generated URL that will have your site up and running.

Enjoy.

comments powered by Disqus