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

Outline Introduction Quick Start Notes 2 / 26

Introduction 3 / 26

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 / 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 / 26

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

Quick Start 8 / 26

$ w h i c h h u g o / u s r / b i n / h u g o $ h u g o v e r s i o n H u g o S t a t i c S i t e G e n e r a t o r v 0 . 1 7 B u i l d D a t e : 2 0 1 6 - 1 0 - 0 7 T 2 1 : 4 5 : 2 7 + 0 7 : 0 0 # - - - $ h u g o n e w s i t e m e . g i t h u b . i o C o n g r a t u l a t i o n s ! Y o u r n e w H u g o s i t e i s c r e a t e d i n " / h o m e / e m / n o w / h u g o - w o r k / m e . g i t h u b . i o " . J u s t a f e w m o r e s t e p s a n d y o u ' r e r e a d y t o g o : 1 . D o w n l o a d a t h e m e i n t o t h e s a m e - n a m e d f o l d e r . C h o o s e a t h e m e f r o m h t t p s : / / t h e m e s . g o h u g o . i o / , o r c r e a t e y o u r o w n w i t h t h e " h u g o n e w t h e m e < T H E M E N A M E > " c o m m a n d . 2 . P e r h a p s y o u w a n t t o a d d s o m e c o n t e n t . Y o u c a n a d d s i n g l e f i l e s w i t h " h u g o n e w < S E C T I O N N A M E > / < F I L E N A M E > . < F O R M A T > " . 3 . S t a r t t h e b u i l t - i n l i v e s e r v e r v i a " h u g o s e r v e r " . V i s i t h t t p s : / / g o h u g o . i o / f o r q u i c k s t a r t g u i d e a n d f u l l d o c u m e n t a t i o n . 9 / 26 Step #1 Download & Install Step #2 Sca old A New Site

Step #3 Select & Download A Theme Step #4 Copy e x a m p l e S i t e & Run 10 / 26 $ c d m e . g i t h u b . i o $ t r e e . - - - a r c h e t y p e s - - - c o n f i g . t o m l - - - c o n t e n t - - - d a t a - - - l a y o u t s - - - s t a t i c - - - t h e m e s 6 d i r e c t o r i e s , 1 f i l e # - - - $ c d m e . g i t h u b . i o / $ g i t c l o n e h t t p s : / / g i t h u b . c o m / d i g i t a l c r a f t s m a n / h u g o - s t e a m - t h e m e . g i t t h e m e s / h u g o - s t e a m - t h e m e $ c p - a v t h e m e s / h u g o - s t e a m - t h e m e / e x a m p l e S i t e / * . $ h u g o s e r v e r - - w a t c h S t a r t e d b u i l d i n g s i t e s . . . B u i l t s i t e f o r l a n g u a g e e n : 0 d r a f t c o n t e n t , 0 f u t u r e c o n t e n t , 0 e x p i r e d c o n t e n t 5 p a g e s c r e a t e d , 0 n o n - p a g e f i l e s c o p i e d 1 0 p a g i n a t o r p a g e s c r e a t e d , 2 c a t e g o r i e s c r e a t e d , 6 t a g s c r e a t e d t o t a l i n 6 6 m s , W a t c h i n g f o r c h a n g e s i n / h o m e / e m / n o w / h u g o - w o r k / m e . g i t h u b . i o / { d a t a , c o n t e n t , l a y o u t s , s t a t i c , t h e m e s } S e r v i n g p a g e s f r o m m e m o r y W e b S e r v e r i s a v a i l a b l e a t h t t p : / / l o c a l h o s t : 1 3 1 3 / ( b i n d a d d r e s s 1 2 7 . 0 . 0 . 1 ) P r e s s C t r l + C t o s t o p

localhost:1313 11 / 26

$ t r e e . - - - a r c h e t y p e s - - - c o n f i g . t o m l - - - c o n t e n t - - - - - - - a b o u t - - - - - - - - - - - i n d e x . m d - - - - - - - p o s t - - - - - - - - - - - c r e a t i n g - a - n e w - t h e m e . m d - - - - - - - - - - - g o i s f o r l o v e r s . m d - - - - - - - - - - - h u g o i s f o r l o v e r s . m d - - - - - - - - - - - m i g r a t e - f r o m - j e k y l l . m d - - - d a t a - - - l a y o u t s - - - s t a t i c - - - t h e m e s - - - - - - - h u g o - s t e a m - t h e m e - - - - - - - - - - - . . . 12 / 26 Content & config.toml

Example Post 13 / 26 post/creating-a-new-theme.md - - - a u t h o r : " M i c h a e l H e n d e r s o n " d a t e : 2 0 1 4 - 0 9 - 2 8 l i n k t i t l e : C r e a t i n g a N e w T h e m e n e x t : / t u t o r i a l s / g i t h u b - p a g e s - b l o g p r e v : / t u t o r i a l s / a u t o m a t e d - d e p l o y m e n t s t i t l e : C r e a t i n g a N e w T h e m e w e i g h t : 1 0 d e s c r i p t i o n : " L o r e m i p s u m d o l o r s i t a m e t , c o n s e c t e t u r a d i p i s i c i n g e l i t . E a r u m s i m i l i q u e , i p s u m o f f i c i a a m e t b l a n d i t i i s p r o v i d e n t r a t i o n e n i h i l - - - # # # * * I n t r o d u c t i o n * * T h i s t u t o r i a l w i l l s h o w y o u h o w t o c r e a t e a s i m p l e t h e m e i n H u g o . I a s s u m e t h a t y o u a r e f a m i l i a r w i t h H T M L , t h e b a s h c o m m a n d l i n e , a n d t h a t y o u W e ' l l s t a r t w i t h c r e a t i n g a n e w s i t e w i t h a v e r y b a s i c t e m p l a t e . T h e n w e ' l l a d d i n a f e w p a g e s a n d p o s t s . W i t h s m a l l v a r i a t i o n s o n t h a t , y o u w i . . .

about/index.md + + + d a t e = " 2 0 1 5 - 0 8 - 2 2 " t i t l e = " L i n k c u s t o m p a g e s " m e n u = " m a i n " + + + Y o u c a n a d d c u s t o m p a g e s l i k e t h i s b y a d d i n g ` m e n u = " m a i n " ` i n t h e f r o n t m a t t e r : ' ' ' t o m l + + + d a t e = " 2 0 1 5 - 0 8 - 2 2 " t i t l e = " A b o u t m e " m e n u = " m a i n " + + + ' ' ' T h i s s i t e i s j u s t a u s u a l d o c u m e n t . C r e a t e a n e w s u b f o l d e r i n ` c o n t e n t ` a n d n a m e t h i s d o c u m e n t ` i n d B u t y o u c a n a l s o l i n k p o s t s t h a t w a y w i t h o u t m o v i n g t h e m . I f n o d o c u m e n t c o n t a i n s ` m e n u = " m a i n " ` i n t h e f r o n t m a t t e r t h e n a v i g a t i o n w i l l n o t b e s h o w n . S o u n d s 14 / 26 Example Page

Rendering Homepage/List 15 / 26

Rendering Single 16 / 26

config.toml 17 / 26 b a s e u r l = " h t t p s : / / e x a m p l e . o r g / " l a n g u a g e C o d e = " e n - u s " t i t l e = " S t e a m - a m i n i m a l t h e m e f o r H u g o " t h e m e = " h u g o - s t e a m - t h e m e " d i s q u s S h o r t n a m e = " s p f 1 3 " p a g i n a t e = 1 0 [ p a r a m s ] t i t l e = " S t e a m " s u b t i t l e = " a m i n i m a l t h e m e f o r ~ ~ G h o s t ~ ~ H u g o " c o p y r i g h t = " R e l e a s e d u n d e r t h e M I T l i c e n s e . " t h e m e C o l o r = " g r e e n " g o o g l e A n a l y t i c s = " " n a m e = " J o h n D o e " b i o = " I ' m j u s t a t h e m e . T h a t ' s i t . I f y o u l i k e m y d e s i g n c l o n e [ m e ] ( / / g i t h u b . c o m / d i g i t a l c r a f t s m a n / h u g o - s t e a m - t h e m e ) f r o m G i t h u b . T h a n k s . " d e s c r i p t i o n = " Y o u r d e s c r i p t i o n o f t h e b l o g " l o c a t i o n = " " # o p t i o n a l t w i t t e r = " s p f 1 3 " # o p t i o n a l g i t h u b = " s p f 1 3 " # o p t i o n a l g i t l a b = " " # o p t i o n a l c o m m e n t s = " d i s q u s " k e e p R e a d i n g S t r = " K e e p r e a d i n g " b a c k t o t o p S t r = " B a c k t o t o p " s h a r e S t r = " S h a r e " p a g e N o t F o u n d T i t l e = " 4 0 4 - P a g e n o t f o u n d "

Rendering - Example 18 / 26

Rendering - Example 19 / 26

Version Control # s o u r c e v e r s i o n c o n t r o l $ g i t i n i t $ e c h o " / p u b l i c / " > > . g i t i g n o r e $ e c h o " / t h e m e s / " > > . g i t i g n o r e $ e c h o " / o t h e r s - i f - a n y / " > > . g i t i g n o r e $ c a t . g i t i g n o r e 20 / 26 Publish (GHP) # c r e a t e n e w G H P r e p o m e . g i t h u b . i o ( w i t h o u t r e a d m e ) $ c d p u b l i c / $ [ s u d o ] g i t i n i t $ [ s u d o ] g i t r e m o t e a d d o r i g i n g i t @ g i t h u b . c o m : m e / m e . g i t h u b . i o . g i t $ [ s u d o ] g i t a d d . $ [ s u d o ] g i t c o m m i t - a m " a d d d i s q u s " $ [ s u d o ] g i t p u s h - - s e t - u p s t r e a m o r i g i n m a s t e r # r e p o g h p $ g i t c h e c k o u t - b g h - p a g e s $ g i t p u s h - f o r i g i n g h - p a g e s

Notes 21 / 26

F R O M a l p i n e : 3 . 4 M A I N T A I N E R E M < e u e u n g @ g m a i l . c o m > E N V H U G O _ V E R S I O N = 0 . 1 7 R U N a p k a d d - - u p d a t e w g e t c a - c e r t i f i c a t e s & & \ c d / t m p / & & \ w g e t h t t p s : / / g i t h u b . c o m / s p f 1 3 / h u g o / r e l e a s e s / d o w n l o a d / v $ { H U G O _ V E R S I O N } / h u g o _ $ { H U G O _ V E R S I O N } _ l i n u x - t a r x z f h u g o _ $ { H U G O _ V E R S I O N } _ l i n u x - 6 4 b i t . t a r . g z & & \ r m - r h u g o _ $ { H U G O _ V E R S I O N } _ l i n u x - 6 4 b i t . t a r . g z & & \ m v h u g o _ $ { H U G O _ V E R S I O N } _ l i n u x _ a m d 6 4 / h u g o _ $ { H U G O _ V E R S I O N } _ l i n u x _ a m d 6 4 / u s r / b i n / h u g o & & \ a p k d e l w g e t c a - c e r t i f i c a t e s & & \ r m / v a r / c a c h e / a p k / * W O R K D I R / w o r k C M D / u s r / b i n / h u g o 22 / 26 Dockerfile

$ d o c k e r b u i l d - t e u e u n g / h u g o : v 2 . $ d o c k e r i m a g e s | g r e p h u g o $ d o c k e r l o g i n $ d o c k e r p u s h e u e u n g / h u g o : v 2 T h e p u s h r e f e r s t o a r e p o s i t o r y [ d o c k e r . i o / e u e u n g / h u g o ] 1 1 c 9 7 b 2 9 5 8 2 0 : P u s h e d d 4 5 4 6 b 2 b 5 9 f d : P u s h e d 0 1 1 b 3 0 3 9 8 8 d 2 : L a y e r a l r e a d y e x i s t s v 2 : d i g e s t : s h a 2 5 6 : 7 6 4 e 9 f 1 3 4 a d 7 3 6 f c 6 7 e 2 9 f 4 a f 1 3 6 e 5 2 3 b 5 5 7 4 4 9 5 6 2 c 3 0 1 6 e d e 3 a 4 5 6 b 7 a c e 5 a d 7 s i z e : 9 4 5 $ d o c k e r r u n - t i - - r m - v $ ( p w d ) : / w o r k e u e u n g / h u g o : v 2 $ d o c k e r r u n - t i - - r m e u e u n g / h u g o : v 2 s h $ d o c k e r r u n - t i - - r m e u e u n g / h u g o : v 2 h u g o v e r s i o n H u g o S t a t i c S i t e G e n e r a t o r v 0 . 1 7 B u i l d D a t e : 2 0 1 6 - 1 0 - 0 7 T 1 4 : 4 5 : 2 7 Z 23 / 26 Hugo on Docker

Refs 24 / 26

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

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