Get Hugo and Get Going

John T. Mills
John T. Mills
Get Hugo and Get Going

What's Hugo?

Hugo is a website building framework. What does that mean though? It means you can focus on content, and let hugo wrap your words in elegant code.

Get Hugo:

  1. Using a web browser, navigate to Hugo's website. https://gohugo.io/
  2. Navigate to Getting Started -> Install Hugo -> Binary (Cross Platform) or follow the link here: https://gohugo.io/getting-started/installing/
  3. The downloads are housed on the Hugo github repository.
  4. In our example here, we will use the Windows archive, but they are all very similar. Download the variation specific to your operation system.
  5. Once downloaded, unpack the archive in a convient place. For Windows I am generating a C:\Hugo\bin directory. example image

Optional: Add the Hugo Folder to the Windows Path Variable

This configuration change is handy for commonly used commands. With this change in place you can run hugo rather than C:\Hugo\bin\hugo.exe.

  1. Click the Search Windows icon.
  2. Type "This PC"
  3. Right click on This PC from the search results and select Properties.
  4. Select Advanced System Properties from the left menu.
  5. Select Environment Variables... from just above the cancel button.
  6. Select the Path User variable from the top panel, and click Edit....
  7. Select New and type your path C:\Hugo\bin in the text area.
  8. Select OK and exit out of the settings windows.
  9. Start a new command prompt with cmd to see the change.

Configure Hugo

Install a new site in your working directory

  1. Open a new command prompt with cmd and change the working directory. 
    C:\> cd C:\Hugo
  2. Generate a new site tree. 
    C:\> hugo new site myhobbiest
Congratulations! Your new Hugo site is created in C:\Hugo\myhobbiest.
   
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.
  3. Examine the new site. 
    C:\Hugo>cd myhobbiest
   
C:\Hugo\myhobbiest>dir
 Volume in drive C is Windows
 Volume Serial Number is 5A0C-A11C
   
 Directory of C:\Hugo\myhobbiest
   
11/24/2020  08:31 AM    <DIR>          .
11/24/2020  08:31 AM    <DIR>          ..
11/24/2020  08:31 AM    <DIR>          archetypes
11/24/2020  08:31 AM                82 config.toml
11/24/2020  08:31 AM    <DIR>          content
11/24/2020  08:31 AM    <DIR>          data
11/24/2020  08:31 AM    <DIR>          layouts
11/24/2020  08:31 AM    <DIR>          static
11/24/2020  08:31 AM    <DIR>          themes
               1 File(s)             82 bytes
               8 Dir(s)  22,856,654,848 bytes free
   
C:\Hugo\myhobbiest>

Install a Hugo theme

  1. Many themes are available in the Hugo theme library, but in this example we will use Axiom.
  2. Open the Axiom theme page at https://themes.gohugo.io/axiom/.
  3. Click Download. example image
  4. You will be redirected to the github project. From there select the code download button. example image
  5. Select Download ZIP. example image
  6. Open the zip file.
  7. Select Extract and then select Extract All from the expanded panel. example image
  8. Navigate to C:\Hugo\myhobbiest\themes. example image
  9. Click on Select Folder. example image
  10. Click on Extract. example image

Define the website

  1. Open config.toml in notepad from C:\Hugo\myhobbiest. 
    C:\Hugo\myhobbiest> notepad config.toml
  2. Load a default configuration and edit as necessary. 
    baseURL = "https://myhobbiest.com"
   
title = "My Hobbies Blog"
languageCode = "en-us"
defaultContentLanguage = "en"
   
theme = "axiom-master"
   
paginate = 4
canonifyURLs = false
summaryLength = 40
rssLimit = 100
enableEmoji = true
enableRobotsTXT = true
pluralizelisttitles = false
   
[permalinks]
posts = "/:filename"
   
[params]
mainSections = ["posts"]
copyrightYear = 2020
# Go Reference time: Mon Jan 2 15:04:05 MST 2006
dateFormat = "Jan 2, 2006 3:04PM"
highlight = "dark"
   
[params.brand]
domain = "myhobbiest.com"
email = "info AT myhobbiest DOT com"
   
[params.social]
#facebook = "https://www.facebook.com/user_or_page"
#github = "https://github.com/user"
#instagram = "https://instagram.com/user"
#linkedin = "https://www.linkedin.com/in/user"
#pinterest = "https://www.pinterest.com/user"
#stackoverflow = "https://stackoverflow.com/users/user"
twitter = "https://twitter.com/myhobbiest"
rss = "https://www.myhobbiest.com/feed.atom"
#youtube = "https://www.youtube.com/user"
#footer = ["twitter", "rss"]
   
[params.services]
#googleAnalyticsId = "UA-901234567-8"
#googleTagManagerId = ""
#googleAdsId = ""
#googleAdsenseId = ""
##googleAdsenseAdSlotId = ""
#googleAdsenseLoad = ""
#googleAdsConversionId = ""
#googleAdsConversionValue = 0
#facebookApp = ""
#facebookPixel = ""
#disqusShortname = ""
   
#[params.logo]
#inline = true
#path = "image/brand/logo.svg"
   
[params.image]
width = "2048"
height = "1024"
faviconIco = "favicon.ico"
faviconAlt = "image/brand/favicon.png"
icon1To1 = "image/brand/icon-1-1.png"
icon2To1 = "image/brand/icon-2-1.png"
default = "image/posts/begin.jpg"
   
[params.font]
type = ""
path = ""
files = []
   
[params.cdn]
provider = "local"
type = "image"
   
[params.cloudinary]
#host = "https://res.cloudinary.com/CLOUD_NAME/"
#version = ""
#image = "image/upload/"
#raw = "raw/upload/"
#video = "video/upload/"
   
[params.cloudinary.presets]
#base = "f_auto,q_auto/"
#page = "w_auto,dpr_auto,c_scale,f_auto,q_auto/"
#feature = "w_auto,dpr_auto,c_scale,f_auto,q_auto/"
#summary = "w_auto,dpr_auto,c_scale,f_auto,q_auto/"
   
[outputs]
home = ["HTML", "ATOM"]
section = ["HTML"]
taxonomy = ["HTML"]
taxonomyTerm = ["HTML"]
   
[outputFormats]
[outputFormats.ATOM]
name = "ATOM"
baseName = "feed"
mediaType = "application/atom+xml"
   
[mediaTypes]
[mediaTypes."application/atom+xml"]
suffixes = ["atom"]
   
[markup]
[markup.goldmark]
[markup.goldmark.extensions]
definitionList = false
footnote = true
linkify = false
strikethrough = false
table = true
taskList = false
typographer = false
[markup.goldmark.renderer]
unsafe = true
[markup.goldmark.parser]
attribute = false
[markup.highlight]
codeFences = true
noClasses = false
tabWidth = 2
# lineNos = true
# lineNumbersInTable = false
   
[menu]
[[menu.main]]
url = "/posts/"
name = "Posts"
weight = 1
   
[[menu.foot]]
url = "/posts/"
name = "Posts"
weight = 1
   
[[menu.foot]]
url = "/about/"
name = "About"
weight = 2
   
[[menu.foot]]
url = "/contact/"
name = "Contact"
weight = 3
   
[[menu.foot]]
url = "/privacy/"
name = "Privacy"
weight = 4
   
[languages]
[languages."en"]
weight = 1
languageName = "English"
  3. Verify the site is functional. 
    C:\Hugo\myhobbiest> hugo server
Building sites … WARNING: calling IsSet with unsupported type "invalid" (<nil>) will always return false.
   
   
                   | EN
-------------------+-----
  Pages            |  6
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  0
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0
   
Built in 25 ms
Watching for changes in C:\Hugo\myhobbiest\{archetypes,content,data,layouts,static,themes}
Watching for config changes in C:\Hugo\myhobbiest\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
  4. In your web browser, navigate to http://localhost:1313/ and you should see a bare, but functional website. example image

Conclusion

Now you have a website, but there's still a lot of configuration to do before it's ready to be hosted. I'll cover those tasks in detail in a future post.