Very well written and has a great pace for introducing the reader to all the concepts and real-life workflows for building JAM stack based websites with Hugo.

Milorad Imbra

Static websites—sites with fixed content—are the simplest type of web pages. In addition to being easier to create and maintain, they’re inherently more secure than dynamic pages. And with the Hugo static site engine, you can render them in milliseconds. Hugo in Action is a step-by-step guide to using Hugo to create static websites that really show off the advantages of simplicity. Working with a complete example website and source code samples, you’ll learn how to build and host a low-maintenance, high-performance site that will wow your users and stay stable without relying on a third-party server.

About the Technology

Sometimes, simple is better. Developers of static web pages enjoy great performance, flexibility, scaling, and minimal ongoing maintenance. And with the Hugo engine, you can build and render them in milliseconds. Written in Go, the Hugo engine takes your directory of content and templates and renders it as a full HTML and CSS website. It uses Markdown files for its data, making it quick to code, capable of running from any directory, and a great choice when working on a shared system where you don’t have full privileges. Perfect for blogs, documentation, and portfolio sites, Hugo makes web development fast and fun again.

About the book

Hugo in Action teaches you to build and host your own fully customizable static website with the Hugo engine. This friendly tutorial teaches you step-by-step how to use Hugo as a Content Management System and web development environment. Working with a complete company example website and source code, you’ll get to grips with using Markup for content tagging, moving off-template to build your own Hugo themes, and creating custom pages. Next, you’ll push further than you thought was possible with a static site, using JavaScript and the JAM Stack (JavaScript, APIs, and Markup) to add functionality like eCommerce and your own APIs. When you’re done, you’ll have the skills to build a stable but feature-rich website without relying on third-party server code.

Part 1: Building a Static Hugo Website

1 The JAM stack with Hugo

1.1 Parts of the JAM stack

1.1.1 JavaScript

1.1.2 Application Programming Interfaces(APIs)

1.1.3 Markup

1.2 How does the JAM stack work

1.3 How is JAM different from LAMP, MEAN or MERN?

1.4 Why use the JAM Stack?

1.4.1 Minimal Operations

1.4.2 Great Performance

1.4.3 Lower costs

1.4.4 Developer Productivity

1.4.5 Longevity

1.4.6 Tooling

1.5 Selecting the builder

1.5.1 Jekyll

1.5.2 Gatsby

1.5.3 Hexo, Pelican, VuePress, Nuxt and others

1.5.4 Hugo

1.6 Why choose Hugo?

1.6.1 Hugo is fast

1.6.2 Hugo is built for performance

1.6.3 Hugo is self-contained

1.6.4 Hugo is distributed as a single file

1.6.5 Hugo can be extremely low maintenance

1.6.6 Hugo can save you from analysis paralysis

1.6.7 Hugo is powerful

1.6.8 Hugo is scalable

1.6.9 Hugo is a community project

1.7 Is speed really important?

1.8 What can we build with Hugo?

1.8.1 Personal websites and blogs

1.8.2 Non-technology Business website

1.8.3 Documentation websites

1.8.4 Hybrid JAM stack based websites

1.9 Summary

2 Live in 30 minutes — you now have a website

2.1 Your first Hugo website

2.1.1 The Hugo command line

2.1.2 Adding to source control

2.1.3 Structure of a Hugo website

2.2 Adding a theme

2.2.1 Enabling the theme via Hugo Modules

2.2.2 Running the dev server

2.3 Adding content

2.3.1 Configuration

2.3.2 Content Pages

2.3.3 Landing Page

2.4 Continuous Delivery

2.4.1 Netlify hosting

2.4.2 Github Pages

2.4.3 AWS, Azure and Google Cloud

2.5 Meeting the goals for performance and maintainability

2.5.1 Performance

2.5.2 Maintainability

2.6 Choose the theme wisely

2.7 Summary

3 Using Markup for content

3.1 Writing content in Markdown

3.1.1 Paragraphs in Markdown

3.1.2 Headings, lists and other block elements

3.1.3 Formatting, Inline links, code and images

3.1.4 HTML

3.1.5 Tables, Task Lists, Code Blocks

3.1.6 Fractions, emojis and other Hugo extensions

3.2 Markdown in Action

3.2.1 Block Elements

3.2.2 Inline Elements

3.2.3 Inline HTML and character codes

3.2.4 Tables

3.2.5 Fractions, emojis and other extensions

3.3 Other Markup languages

3.4 Metadata

3.4.1 Comments

3.4.2 Basic data types

3.4.3 Multiline strings

3.4.4 Lists

3.4.5 Dictionaries

3.4.6 Revisit config.yaml

3.5 Other metadata languages

3.6 Front Matter

3.6.1 Common Metadata elements in the Front Matter

3.6.2 Data-driven landing page using the Front Matter

3.7 Benefits of using markup and metadata languages

3.7.1 Cleanliness

3.7.2 Theme independence

3.7.3 Content Versioning

3.8 Summary

4 Content Management with Hugo

4.1 Customizing with the Hugo config

4.2 Organizing content with sections and menus

4.2.1 Sections

4.2.2 Menus

4.3 Better together with Page Bundles

4.3.1 Leaf Bundles

4.3.2 Branch Bundles

4.3.3 Headless Bundles

4.4 More than tags — Taxonomies

4.5 YouTube, Gists and other snippets via Shortcodes

4.5.1 Shortcodes with content

4.5.2 Nested shortcodes

4.5.3 Built in shortcodes

4.6 Content Sharing via Custom Shortcodes

4.6.1 HTML shortcodes

4.6.2 Markup based shortcodes

4.6.3 Inline shortcodes

4.7 Summary

5 Custom Pages and Customized Content with the Go Template Language

5.1 Separating data and design

5.1.1 Accessing the Go Template language

5.1.2 Existence checks

5.1.3 Using site variables for defaults

5.1.4 Creating variables for simplification

5.1.5 Using standard library functions to reduce the code size

5.1.6 Using the content switch via the with conditional for simplifying the checks further

5.1.7 Add some processing of content

5.1.8 Adding markdown content

5.2 Using Hugo generated properties to add content

5.2.1 Adding the menu

5.2.2 Adding recent blog posts

5.3 Playing with structured data

5.3.1 Using Front Matter for structured data

5.3.2 Parsing files for data

5.4 Enhancing life with the go template language

5.4.1 Template code in shortcodes

5.4.2 Inner content in shortcodes

5.4.3 Save some time with archetypes

5.5 Summary

6 Structuring web pages

6.1 Using content types, base templates and blocks to structure templates

6.1.1 Encapsulating templates with different content types

6.1.2 Providing the base template for reuse

6.1.3 Defining blocks of code

6.1.4 Reusing the base template on a different layout

6.2 Reusing content with partials

6.2.1 Moving to a partial

6.2.2 The Partial Context

6.2.3 Bringing back the submenu using additional parameters to the menu partial

6.2.4 Partials and performance

6.2.5 A detour to partial returns

6.3 Asset handling with Hugo Pipes

6.3.1 Handling textual assets

6.3.2 Handling images

6.3.3 Other assets

6.4 Using bundled templates for common work

6.5 Summary

7 Creating your own theme

7.1 More ways to lay out content

7.1.1 Parameterized front matter to differentiate the news page interface

7.1.2 Using the Cascade property to apply properties to front matter of multiple pages

7.1.3 Providing a different layout to the blog content

7.1.4 Cascade side effects and local overrides

7.1.5 Related Pages via Hugo

7.2 Updating the index pages by providing content and subsection lists

7.2.1 Using the list template for index pages

7.2.2 Creating multiple pages to render a long list

7.2.3 Using a custom paginator

7.2.4 Rending a list of subsections

7.3 Providing the taxonomy pages

7.3.1 The terms page

7.3.2 The taxonomy pages

7.4 Creating our own theme

7.4.1 Moving to a new theme

7.4.2 Aligning content with the theme

7.4.3 Providing theme assets

7.5 Summary

Part 2: Expanding with the JAM Stack

8 Accessing APIs to enhance functionality

9 The power of JavaScript

10 Adding eCommerce capabilities using the JAMStack

11 Extending functionality by building your own APIs

12 Wrapping it up

Appendixes

Appendix A: Getting up and running with Hugo

A.1 Requirements

A.1.1 System requirements

A.1.2 Hugo Flavors

A.1.3 Hugo Versions

A.2 Installing Hugo

A.2.1 System Package Managers

A.2.2 Direct Download

A.3 Troubleshooting

A.3.1 Making sure hugo runs

A.3.2 Installing the right version

A.3.3 Getting Hugo Extended

Appendix B: TOML and JSON for metadata

B.1 Tom’s Obvious Minimal Language (TOML)

B.1.1 Comments

B.1.2 Basic data types

B.1.3 Multiline strings

B.1.4 Lists

B.1.5 Dictionaries

B.1.6 Front Matter

B.2 JavaScript Object Notation (JSON)

B.2.1 Basic data types

B.2.2 Multiline strings

B.2.3 Lists

B.2.4 Dictionaries

B.2.5 Front Matter

B.2.6 Revisit config

Appendix C: The Go Template Language

C.1 Built-in variables

C.2 Custom variables

C.3 Data Types

C.4 Functions for operators

C.5 Nesting and piping

C.6 Conditional expressions

C.7 Loops

C.8 Standard Library

C.8.1 String Conversion

C.8.2 String Creation and Manipulation

C.8.3 List and Map manipulation and filtering

C.8.4 Web/Hugo specific

C.8.5 Resource Access/Manipulation

C.8.6 Language features

C.8.7 File Handling and Network Access

C.8.8 Resource Manipulation and Hugo Pipes

What's inside

Installing Hugo and building your first web page
Using the Go Template language
Forking themes
Building your own APIs

About the reader

For web developers with intermediate knowledge of HTML/CSS and basic knowledge of JavaScript.

About the author

Atishay Jain is a Senior Computer Scientist at Adobe, who has developed web-based software used by millions of Adobe Creative Cloud customers on a daily basis.

placing your order...

Don't refresh or navigate away from the page.

Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.

7 of 12 chapters available