Creating Hugo and Netlify powered website from scratch - Part 1
2018-01-07
Why?
New years = fresh start. So I thought about my personal website and blog (should definitely finally start it…). While I’ve built one of the versions of it before in AngularJS material, one in materialize and the recent one was already powered by hugo I’ve always was using some framework or theme to style it up.
So rather than chasing fancy library or good looking framework I’ve decided to build my website from scratch. Instead, start with simple skeleton website and eventually build it up. Plus one of my new year’s resolutions was to ship more stuff. So having to build my own website would somehow push me to do that.
Choosing tech
So, first of all, it was a matter of deciding on technologies I’d use while keeping framework amount to the minimum it makes sense to use things which make my life easier and code DRY.
A couple of months ago, thanks to some podcast, I’ve discovered Nelify. They provide free hosting for static sites on steroids pretty much. While being super developer friendly. Similar to what GitHub pages do. I’ve used it for a couple of projects and fell in love with it. Some of the benefits are CD from your GitHub, CDN based so super fast, free HTTPS certificates and HTTP2 out of the box.
Since I’ve already decided on where to publish, now I needed to figure out how? My previous version used Hugo and while I had some problems here and there in general experience was nice, so I’ve decided to stick with it. Have looked into other options (Gatsby looked soooo tempting…), but considering that Hugo is probably one of the fastest static site generators I’m happy with that.
Getting hands dirty
While I won’t cover ALL of the steps this was the general workflow.
I’ve already had Hugo installed but to set it you should be able to just:
$ brew install hugo
On macOS. It’s cross-platform, and installation is quite straightforward for others as well. Steps for other platforms here.
Once Hugo is in place I’ve actually bootstrapped the website with its cli:
$ mkdir tomche.space # call it whatever you want
$ cd tomche.space
$ hugo new site .
$ hugo new theme mega-T # call it whatever you want
That should set up a basic skeleton for the website. Configuration to use the newly created theme. Mine looked like this, adjust to your needs:
baseURL = "https://www.tomche.space" # URL you own and want to use
languageCode = "en-uk"
title = "Tomche"
theme = "mega-T" # freshly created theme from before
These options are quite self explanatory, the main one at this point is the
theme setting.
Trying to run:
$ hugo server
and going to localhost:1313 now just shows empty website. That’s because all of the template files are empty. So take a look at the freshly created theme:
themes/mega-T
├── LICENSE.md
├── archetypes
│ └── default.md
├── layouts
│ ├── 404.html
│ ├── _default
│ │ ├── list.html
│ │ └── single.html
│ ├── index.html <- root of the site /
│ └── partials
│ ├── footer.html <- lets start here.
│ └── header.html <-
├── static
│ ├── css
│ └── js
└── theme.toml
Pretty standard stuff for a website. Partials to keep website code DRY and some default templates to be used accross the website.
Starting top to bottom, first we need to add the HTML boilerplate for the
website. So in themes/mega-T/layouts/partials/header.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tomche - Tom Chmelevskij Personal Website</title>
</head>
<body>
Replacing the title with whatever you want and in footer.html
</body>
</html>
This two files now will have to be included in most of the other templates. So to get the hello world on the screen just add:
{{ partial "header" . }} <!-- Note the dot at the end, will need that in the future -->
<h1>Hello World!!!</h1>
{{ partial "footer" . }}
And now going back to the localhost:1313 should greet you with the lovely message.
Next Steps
I’ve covered the basics of setting up Hugo this time, but it’s still far away from the usable website. In the next part, I’ll talk about actually deploying the website to Netlify. Some gotchas and how to fix them. Once that is done will explain how to create the pages for blog posts and put them in menus. Also will touch on such features as adding headless CMS, a nice web GUI to actually manage the content.