Static website with HUGO - First steps

Install and add content

You want to create a blog and you ask yourself what easy tool you can use ?
HUGO is an open-source framework and it may be interesting for you.
I use it to build this blog.
Here is how I did to install HUGO on my Windows 7 computer.

Windows 7 binary installation

See also HUGO.

Structure

We create a classical directories structure with one part for binary and one another for data.

c:
cd \
mkdir hugo
mkdir hugo\bin
mkdir hugo\sites

Download

Download the binaries zip file for Windows 7 (hugo_0.37_Windows-64bit.zip for me).

Extract

Extract the hugo.exe file from the zip file in the C:\hugo\bin directory.

Config

To simplify future using of the hugo command, you may have to set the hugo.exe path in the PATH (HKEY_CURRENT_USER\Environment\PATH).
To do this, you can use regedit or cmd.

Test

c:
cd hugo\bin
hugo version

If it works fine, you should have this output

Hugo Static Site Generator v0.37.1 windows/amd64 BuildDate: 2018-03-07T17:56:57Z

Create our blog structure

We create our blog in sites the directory we created previously

c:
cd hugo\sites
hugo new site blog

If it works fine, you should have this output

Congratulations! Your new Hugo site is created in C:\hugo\sites\blog.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

The directories and files structure is the following

C:\hugo\sites\blog>dir

09/03/2018  16:18    <REP>          .
09/03/2018  16:18    <REP>          ..
09/03/2018  16:14    <REP>          archetypes
09/03/2018  16:21               105 config.toml
09/03/2018  16:21    <REP>          content
09/03/2018  16:14    <REP>          data
09/03/2018  16:14    <REP>          layouts
09/03/2018  16:18    <REP>          public
09/03/2018  16:14    <REP>          static
09/03/2018  16:14    <REP>          themes

Add a theme

Choose one

We choose a theme in the following list.
When we have made our choice we can download or get it by Git. Let’s download it.

Download

We download our beautifulhugo theme.

Install

And we extract the zip file Extraire in C:\hugo\sites\blog\themes.
We get it

C:\hugo\sites\blog>dir themes
07/03/2018  16:11    <REP>          .
07/03/2018  16:11    <REP>          ..
07/03/2018  16:11    <REP>          beautifulhugo

Modify the HUGO configuration file

Add the theme name in C:\hugo\blog\config.toml.

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "beautifulhugo"

Test the theme

Now, we are able to start the HotReload HUGO server.
You can add “-D” to the command to see draft posts.

C:\hugo\sites\blog>hugo server
←[K25lBuilding sites . ←[?25h
                   | EN
+------------------+----+
  Pages            |  7
  Paginator pages  |  0
  Non-page files   |  0
  Static files     | 33
  Processed images |  0
  Aliases          |  1
  Sitemaps         |  1
  Cleaned          |  0

Total in 234 ms
Watching for changes in C:\hugo\sites\blog{content,data,layouts,static,themes}
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disable
astRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

What we can see now in our browser
cms hugo hello theme

Add content

To create a new post, do the following

C:\hugo\sites\blog>hugo new post/mypost.md

Our first post is created

C:\hugo\sites\blog\content\post\mypost.md created

The mypost.md file content should look like this
The post is in draft mode.

---
title: "Mypost"
date: 2018-03-12T00:09:49+01:00
draft: true
---

We modify the mypost.md file to add a very simple data and set the mode draft to false

---
title: "Mypost"
date: 2018-03-12T00:09:49+01:00
draft: false
---
# Hello World !

Your browser should display the following page
cms hugo hello world

Summary

We installed HUGO, a theme and we wrote our first post.
It’s absolutely easy to setup and we are already able to generate simple content.
Of course, we have to learn Markdown syntax yet and other HUGO functionnalities before to be able to create complex and beautiful content.

cms  hugo  static  install  tuto 
comments powered by Disqus