Last time, I wrote about why I decided to switch to using Hugo. Today we will get a bit more technical on how. I will write in a tutorial-like fashion, so if you never used Hugo and want to attempt it out, please follow along.

Tools of the trade

First, let’s look at what tools I decided to use for this project and why.

Atom: the hackable text editor for the 21st Century.

Atom is just a great all-around editor, and if I don’t have an IDE that is specific to the language I’m using, I tend to fall back to it. There are many more fancy editors for this sort of work, like Brackets or CoffeeCup. Nothing we do is going to be editor specific, so feel free to choose something else.

Sass: professional-grade CSS extension language.

I could not imagine writing CSS without Sass. It pre-processes your CSS and outputs if you do something wrong. As well as adds tons of functionality to it. Like being able to nest your Css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}

li { display: inline-block; }

a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}

Partials are another big deal. It makes it easy to split your CSS into smaller files with specific uses then import them all in the main file, which is then processed into your final CSS file. So you could have an easy to understand structure like

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

root
│ output.css
│
└───scss
│ │ main.scss
│ │
│ └───partials
│ │ _common.scss
│ │ _header.scss
│ │ _footer.scss
│ │ etc...

Those are the main reasons I use Sass, but there are even more features, Mixins for example let’s you write in a function-like manner. You can also use inheritance to extend selectors instead of retyping all their values.

Hugo: The world’s fastest framework for building websites.

Hugo is a general-purpose website framework. But since it generates the output on your local machine as static HTML, none of the unused functionality bloats your loading time like a dynamic site may. Another benefit is that since Hugo generates static sites, we don’t need to set up a backend server or database to handle our content. Meaning we can put our final product on almost any web server.

Setting up our site

Most of what comes next, we will do through the terminal or your os equivalent.

installing Hugo

First, we need to install Hugo, and since I’m using OSX I’m going to do it through Homebrew with a simple

1

brew install hugo

If you use something else, there are detailed instructions on how to do so on the Hugo website.

Site creation

With Hugo installed, you are ready to create your new site. So get to the directory you want your project to be in and type

1

hugo new site

Then add some content to the following files.

1
2
3

//single.html
{{.Title}} //add the title for the post as a header
{{ .Content }} //and then the content

1
2
3

//list.html
{{ range (.Paginator 10).Pages }} //give us the first ten posts and loops over them.
{{ end }}

We have a list of our posts on our front page, which is why “list.html” and “index.html” look the same. Now go back into your browser, and it should refresh since the Hugo server is using Livereload if the page doesn’t just refresh. Now you should see your “Hello world” post on the index page with a link to the single page of the post.

That is the absolute basic setup you would need to get started. To get more in-depth, head over to the Hugo documentation

Make it pretty

Right now, it might not look like much, and that’s why we have Sass. First of all, we have to install it. We can do this either with NPM

1

npm install -g Sass

or Homebrew

1

brew install Sass/Sass/Sass

Windows user can use Chocolatey

1

choco install Sass

With Sass installed, we should create a file structure that is easy to work with and to stay organized. Create a folder structure

1
2
3
4
5

root
│
└───themes
│ │
│ └───

Now we are ready to add some style to our work. in “res/scss/partials” create a file named “_headers.scss”

1
2
3
4
5
6

//_headers.scss
h1 {
a {
color: #0099CC; //give links a nice blue color, but only if nested under a h1 tag
}
}

Then we import this partial in our “main.scss”

1
2

//main.scss
@import 'partials/_headers';

And if everything went fine, we should now have a link with a nicer blue color.

And there we have the absolute basics on how to style your site with Sass.

Further on we will look at how we can put our site on the web using Github and Netlify for free.