Hugo is a static site generator that renders HTML files from templates and content. It is optimized for speed, flexibility, and easy use. Hugo takes Markdown files and templates and renders them into static HTML files that can be hosted without running any server-side code. This allows sites generated with Hugo to have faster load times and be more secure compared to traditional server-side site generators.

1. Static Webpage Generator
Hugo
Eueung Mulyana
https://eueung.github.io/112016/hugo
CodeLabs | Attribution-ShareAlike CC BY-SA
1 / 26

2. Outline
Introduction
Quick Start
Notes
2 / 26

3. Introduction
3 / 26

4. Hugo is a general-purpose website framework
Hugo is a static site generator
A Fast and Flexible Static Site Generator built with
love by spf13 and friends in Go.
4 / 26
What is Hugo?
Web site generators render content into HTML les. Most are "dynamic site
generators". That means the HTTP server (which is the program running on your
website that the user's browser talks to) runs the generator to create a new HTML le
each and every time a user wants to view a page.
Hugo renders all HTML les on your computer. You can review the les before you
copy them to the computer hosting the HTTP server. Since the HTML les aren't
generated dynamically, we say that Hugo is a "static site generator".
Refs: Introduction to Hugo

5. 5 / 26
Static Site Generators
The typical CMS driven website works by building each page on-demand, fetching content from a
database and running it through a template engine. This means each page is assembled from
templates and content on each request to the server.
A Static Site Generator takes a di erent approach and generate all the pages of the website once
when there's actually changes to the site.
This means there's no moving parts in the deployed website. Caching gets much easier, performance
goes up and static sites are far more secure.
Ref: StaticGen

6. 6 / 26

7. Hugo is a static HTML and CSS website generator written in Go. It is optimized for speed, easy
use and con gurability. Hugo takes a directory with content and templates and renders them
into a full HTML website.
Hugo relies on Markdown les with front matter for meta data. And you can run Hugo from any
directory. This works well for shared hosts and other systems where you don't have a privileged
account.
Hugo renders a typical website of moderate size in a fraction of a second. A good rule of thumb
is that each piece of content renders in around 1 millisecond.
Hugo is designed to work well for any kind of website including blogs, tumbles and docs. [Ref:
spf13/hugo]
7 / 26

8. Quick Start
8 / 26

9. $whichhugo
/usr/bin/hugo
$hugoversion
HugoStaticSiteGeneratorv0.17BuildDate:2016-10-07T21:45:27+07:00
#---
$hugonewsiteme.github.io
Congratulations!YournewHugositeiscreatedin"/home/em/now/hugo-work/me.github.io".
Justafewmorestepsandyou'rereadytogo:
1.Downloadathemeintothesame-namedfolder.
Chooseathemefromhttps://themes.gohugo.io/,or
createyourownwiththe"hugonewtheme<THEMENAME>"command.
2.Perhapsyouwanttoaddsomecontent.Youcanaddsinglefiles
with"hugonew<SECTIONNAME>/<FILENAME>.<FORMAT>".
3.Startthebuilt-inliveservervia"hugoserver".
Visithttps://gohugo.io/forquickstartguideandfulldocumentation.
9 / 26
Step #1
Download & Install
Step #2
Sca old A New Site

10. Step #3
Select & Download A Theme
Step #4
Copy exampleSite& Run
10 / 26
$cdme.github.io
$tree
.
---archetypes
---config.toml
---content
---data
---layouts
---static
---themes
6directories,1file
#---
$cdme.github.io/
$gitclonehttps://github.com/digitalcraftsman/hugo-steam-theme.gitthemes/hugo-steam-theme
$cp-avthemes/hugo-steam-theme/exampleSite/*.
$hugoserver--watch
Startedbuildingsites...
Builtsiteforlanguageen:
0draftcontent,0futurecontent,0expiredcontent
5pagescreated,0non-pagefilescopied
10paginatorpagescreated,2categoriescreated,6tagscreated
totalin66ms,Watchingforchangesin/home/em/now/hugo-work/me.github.io/{data,content,layouts,static,themes}
Servingpagesfrommemory
WebServerisavailableathttp://localhost:1313/(bindaddress127.0.0.1)
PressCtrl+Ctostop

11. localhost:1313
11 / 26

12. $tree
.
---archetypes
---config.toml
---content
-------about
-----------index.md
-------post
-----------creating-a-new-theme.md
-----------goisforlovers.md
-----------hugoisforlovers.md
-----------migrate-from-jekyll.md
---data
---layouts
---static
---themes
-------hugo-steam-theme
-----------...
12 / 26
Content
&
config.toml

13. Example Post
13 / 26
post/creating-a-new-theme.md
---
author:"MichaelHenderson"
date:2014-09-28
linktitle:CreatingaNewTheme
next:/tutorials/github-pages-blog
prev:/tutorials/automated-deployments
title:CreatingaNewTheme
weight:10
description:"Loremipsumdolorsitamet,consecteturadipisicingelit.Earumsimilique,ipsumofficiaametblanditiisprovidentrationenihil
---
###**Introduction**
ThistutorialwillshowyouhowtocreateasimplethemeinHugo.IassumethatyouarefamiliarwithHTML,thebashcommandline,andthatyou
We'llstartwithcreatinganewsitewithaverybasictemplate.Thenwe'lladdinafewpagesandposts.Withsmallvariationsonthat,youwi
...

14. about/index.md
+++
date ="2015-08-22"
title="Linkcustompages"
menu ="main"
+++
Youcanaddcustompageslikethisbyadding`menu="main"`inthefrontmatter:
'''toml
+++
date ="2015-08-22"
title="Aboutme"
menu ="main"
+++
'''
Thissiteisjustausualdocument.Createanewsubfolderin`content`andnamethisdocument`ind
Butyoucanalsolinkpoststhatwaywithoutmovingthem.
Ifnodocumentcontains`menu="main"`inthefrontmatterthenavigationwillnotbeshown.Sounds
14 / 26
Example Page

15. Rendering Homepage/List
15 / 26

16. Rendering Single
16 / 26

17. config.toml
17 / 26
baseurl="https://example.org/"
languageCode="en-us"
title="Steam-aminimalthemeforHugo"
theme="hugo-steam-theme"
disqusShortname="spf13"
paginate=10
[params]
title="Steam"
subtitle="aminimalthemefor~~Ghost~~Hugo"
copyright="ReleasedundertheMITlicense."
themeColor="green"
googleAnalytics=""
name="JohnDoe"
bio="I'mjustatheme.That'sit.Ifyoulikemydesignclone[me](//github.com/digitalcraftsman/hugo-steam-theme)fromGithub.Thanks."
description="Yourdescriptionoftheblog"
location=""#optional
twitter="spf13"#optional
github="spf13"#optional
gitlab=""#optional
comments="disqus"
keepReadingStr="Keepreading"
backtotopStr="Backtotop"
shareStr="Share"
pageNotFoundTitle="404-Pagenotfound"

18. Rendering - Example
18 / 26

19. Rendering - Example
19 / 26

20. Version Control
#sourceversioncontrol
$gitinit
$echo"/public/">>.gitignore
$echo"/themes/">>.gitignore
$echo"/others-if-any/">>.gitignore
$cat.gitignore
20 / 26
Publish (GHP)
#createnewGHPrepome.github.io(withoutreadme)
$cdpublic/
$[sudo]gitinit
$[sudo]gitremoteaddorigingit@github.com:me/me.github.io.git
$[sudo]gitadd.
$[sudo]gitcommit-am"adddisqus"
$[sudo]gitpush--set-upstreamoriginmaster
#repoghp
$gitcheckout-bgh-pages
$gitpush-forigingh-pages

21. Notes
21 / 26

22. FROMalpine:3.4
MAINTAINEREM<eueung@gmail.com>
ENVHUGO_VERSION=0.17
RUNapkadd--updatewgetca-certificates&&
cd/tmp/&&
wgethttps://github.com/spf13/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_linux-
tarxzfhugo_${HUGO_VERSION}_linux-64bit.tar.gz&&
rm-rhugo_${HUGO_VERSION}_linux-64bit.tar.gz&&
mvhugo_${HUGO_VERSION}_linux_amd64/hugo_${HUGO_VERSION}_linux_amd64/usr/bin/hugo&&
apkdelwgetca-certificates&&
rm/var/cache/apk/*
WORKDIR/work
CMD/usr/bin/hugo
22 / 26
Dockerfile

23. $dockerbuild-teueung/hugo:v2.
$dockerimages|grephugo
$dockerlogin
$dockerpusheueung/hugo:v2
Thepushreferstoarepository[docker.io/eueung/hugo]
11c97b295820:Pushed
d4546b2b59fd:Pushed
011b303988d2:Layeralreadyexists
v2:digest:sha256:764e9f134ad736fc67e29f4af136e523b557449562c3016ede3a456b7ace5ad7size:945
$dockerrun-ti--rm-v$(pwd):/workeueung/hugo:v2
$dockerrun-ti--rmeueung/hugo:v2sh
$dockerrun-ti--rmeueung/hugo:v2hugoversion
HugoStaticSiteGeneratorv0.17BuildDate:2016-10-07T14:45:27Z
23 / 26
Hugo on
Docker

24. Refs
24 / 26

25. Refs
1. Top Open-Source Static Site Generators - StaticGen
2. Hugo :: A fast and modern static website engine
3. spf13/hugo: A Fast and Flexible Static Site Generator built with love in GoLang
4. Hugo Themes Site
25 / 26

26. END
Eueung Mulyana
https://eueung.github.io/112016/hugo
CodeLabs | Attribution-ShareAlike CC BY-SA
26 / 26