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
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
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.