Hugo in Action: Static sites and dynamic Jamstack apps

by Atishay Jain

Overview

Build and deploy a live website in just 30 minutes using Hugo. The Hugo engine lets you rapidly deliver static sites that are low maintenance, high performance, and feature rich.

In Hugo in Action you will learn:

Building web pages with Hugo and Jamstack
Creating content using Markdown
Content management with Hugo
Designing new Hugo themes
Using the Go template language
Managing dependencies with Hugo modules
Accessing APIs with Jamstack
Adding a shopping cart using JavaScript
Content tagging with markup

Sometimes, simple is better. Static websites—sites with fixed content—are easier to create and maintain, and inherently more secure than dynamic pages. Hugo in Action is a hands-on guide to using the Hugo static site engine to render these websites in milliseconds. Working with a complete example website and source code samples, you’ll learn how to build and host a site that will wow users and stay stable without a third-party server. Full coverage of the Jamstack (Javascript, APIs, Markdown) shows how easy it is to add complex features to super-simple sites, including eCommerce shopping carts, dynamic forms, and multilingual options.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

About the technology
Because they load pre-built pages, static websites are simple, secure, and incredibly fast. With the Hugo static site generator you can build and render a website in seconds without the grind of hand coding the pages. Hugo takes a directory of content and templates and renders it as a full HTML and CSS website—perfect for blogs, documentation, and other sites that don’t require real-time updates.

About the book
In Hugo in Action you’ll learn step-by-step how to build efficient, low-maintenance static web sites. You’ll use Hugo as a CMS and web development environment, create custom pages, and design your own Hugo themes. And you won’t stop there! Moving beyond the basics, you’ll incorporate the Jamstack model to add capabilities like eCommerce and your own APIs. The result: rich websites that are flexible and incredibly stable.

What's inside

Building web pages with Hugo and Jamstack
Using the Go template language
Managing dependencies with Hugo modules
Content tagging with markup

About the reader
For web developers with a basic knowledge of JavaScript.

About the author
Atishay Jain is a Senior Computer Scientist at Adobe. He has developed web-based software used by millions of Adobe Creative Cloud customers.

Table of Contents
PART 1 STATIC HUGO WEBSITES: LOADING FAST, BUILDING TO LAST
1 The Jamstack and Hugo
2 Live in 30 minutes: You now have a website
3 Using markup for content
4 Content management with Hugo
5 Custom pages and customized content with the Go template language
6 Structuring web pages
7 Creating your own theme
8 Hugo Modules: Plugins for everybody
PART 2 EXPANDING WITH THE JAMSTACK: DYNAMIC OUTSIDE, STATIC INSIDE
9 Accessing APIs to enhance functionality
10 The power of JavaScript
11 Breaking barriers with custom APIs and webhooks
12 Adding e-commerce capabilities using the Jamstack
13 Wrapping it up

Product Details

ISBN-13:	9781617297007
Publisher:	Manning
Publication date:	04/26/2022
Pages:	488
Product dimensions:	7.38(w) x 9.25(h) x 1.00(d)

About the Author

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 that 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.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

Table of Contents

Foreword vii

Preface ix

Acknowledgments xi

About this book xiii

About the author xviii

About the cover illustration xix

Part 1 Static Hugo websites: Loading fast, building to last 1

1 The Jamstack and Hugo 3

1.1 The stack in Jamstack 4

1.2 How does Jamstack work? 9

1.3 The JAM in Jamstack 11

JavaScript 11

Application programming interfaces (APIs) 11

Markup 12

1.4 Why use Jamstack? 13

Minimal operations 13

Great performance 13

Lower costs 13

Developer productivity 14

Longevity 14

Tooling 14

1.5 When not to use the Jamstack 15

When there is dynamic data with no historical significance 15

Building based on user-generated content with transient data 15

Having user-specific web pages 15

When there is no data to compile 15

1.6 Selecting the builder 16

1.7 Why choose Hugo? 16

Hugo is fast 17

Hugo is stable 18

Hugo is built for performance 18

Hugo is self contained 19

Hugo is a single file 19

Hugo can be extremely low maintenance 19

Hugo can save you from analysis paralysis 20

Hugo is powerful 20

Hugo is scalable 20

Hugo is a community project 21

1.8 Is speed really important? 21

1.9 What can we build with Hugo? 22

Personal websites and blogs 22

Nontechnology business websites 22

Documentation websites 23

Hybrid Jamstack-based websites 23

1.10 Cases that don't map to Hugo 23

1.11 How to be successful with Hugo and this book 23

2 Live in 30 minutes: You now have a website 25

2.1 Your first Hugo website 26

The Hugo command line 26

Adding to source control 28

Structure of the Hugo source folder 29

2.2 Adding a theme 32

Adding a theme to the website 33

Running the dev sewer 34

2.3 Adding content 37

Configuration 37

Content pages 40

Index page 41

2.4 Continuous delivery 43

Netlify hosting 44

GitHub Pages 47

Vercel, Cloudflare, AWS Amplify, and other dedicated Jamstack hosts 50

AWS, Azure, and Google Cloud file storage 50

2.5 Meeting the goals for performance and maintainability 51

Performance 51

Maintainability 52

Choose the theme wisely 54

3 Using markup for content 57

3.1 Writing content in Markdown 59

Paragraphs in Markdown 60

Headings, lists, and other block elements 60

Formatting, inline links, code, and images 63

HTML 66

Tables, task lists, and code blocks 67

Emojis, IDs, and other Hugo extensions 69

3.2 Markdown in action 71

3.3 Other markup languages 73

3.4 Metadata 74

Comments 74

Basic data types 74

Multiline strings 75

Lists 75

Dictionaries 76

Revisiting config.yaml 76

3.5 Other metadata languages 78

3.6 Front matter 79

Common metadata elements in the front matter 80

Data-driven landing page using the front matter 84

3.7 Benefits of using markup and metadata languages 85

Content versioning 85

Theme independence 86

Cleanliness 88

4 Content management with Hugo 89

4.1 Customizing with the Hugo configurations 91

4.2 Organizing content with sections and menus 94

Sections 95

Menus 98

4.3 Better together with page bundles 102

Leaf bundles 103

Branch bundles 104

Headless bundles 107

4.4 More than tags: Taxonomies 108

4.5 YouTube, Gists, and other snippets via shortcodes 114

Shortcodes with content 115

Nested shortcodes 116

Built-in shortcodes 116

4.6 Content sharing using custom shortcodes 117

HTML shortcodes 117

Markup-based shortcodes 118

Inline shortcodes 119

5 Custom pages and customized content with the Go template language 121

5.1 Separating data and design 122

Accessing the Go template language 124

Existence checks 126

Using site variables for defaults 126

Creating variables for simplification 127

Using standard library functions to reduce the code size 128

Using a context switch via the with conditional for simplifying further checks 129

Adding content processing 130

Adding Markdown content 132

5.2 Using external data to add content 134

Adding the menu 134

Adding recent blog posts 139

5.3 Playing with structured data 141

Using front matter for structured data 141

Parsing files for data 143

5.4 Enhancing life with the Go template language 145

Template code in shortcodes 145

Inner content in shortcodes 147

Save some time with archetypes 148

6 Structuring web pages 151

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

Encapsulating templates with different content types 153

Providing the base template for reuse 154

Defining blocks of code 154

Reusing the base template in a different layout 157

6.2 Reusing content with partials 160

Moving to a partial 161

The partial context 162

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

Partials and performance 165

A detour to partial returns 168

6.3 Asset handling with Hugo Pipes 170

Handling textual assets 171

Handling images 176

Other assets 182

6.4 Controlling Markdown rendering 183

6.5 Using bundled templates for common work 184

7 Creating your own theme 187

7.1 More ways to lay out content 188

Parameterizing front matter to differentiate the News page interface 189

Using the cascade property to apply properties to the front matter of multiple pages 191

Providing a different layout to the blog content 192

Cascading targets 195

Related pages via Hugo 197

7.2 Updating the index pages by providing content and subsection lists 198

Using the list template for index pages 198

Creating multiple pages to render a long list 199

Using a custom paginator 202

Rendering a list of subsections 202

7.3 Providing the taxonomy pages 204

The terms page 205

The taxonomy pages 207

7.4 Creating our own theme 207

Moving to a new theme 208

Aligning content with the theme 209

Providing theme assets 210

7.5 Powering up with content views 211

8 Hugo Modules: Plugins for everybody 214

8.1 Setting up Hugo Modules 217

8.2 Themes as Hugo Modules 218

8.3 Importing themes 219

8.4 Enabling themes other than Eclectic 220

8.5 Getting a specific version of a theme 220

8.6 Viewing the dependencies source code 222

8.7 Modifying dependencies locally 222

8.8 Adding nested dependencies 223

8.9 Modules as template plugins 226

8.10 Shared dependencies across the theme and website 227

8.11 Content plugins 228

8.12 Commonly used Hugo Modules APIs 230

Part 2 Expanding with the Jamstack: Dynamic outside, static inside 233

9 Accessing APIs to enhance functionality 235

9.1 Build-time vs. run-time API access 236

9.2 Embedding tweets at compile time 237

Understanding the Twitter API 239

Understanding Hugo's functions for compile-time API access 240

Rendering a tweet as a testimonial 241

Managing content lifetimes 242

9.3 Hugo and REST APIs 243

9.4 Creating a contact page the Jamstack way 244

Setting up a contact form 244

Choosing a form provider 247

Using Netlify forms fort-he Contact Us page 248

Using Formspree for contact forms 249

9.5 Building dynamic surveys 253

9.6 Commenting using the Jamstack 256

Displaying a comment form 256

Displaying comments 259

9.7 Pseudo APIs that compile to JSON 270

Custom output formats in Hugo 271

Creating the JSON API for the website 271

10 The power of JavaScript 275

10.1 Why use JavaScript in a Hugo project? 277

10.2 Using JavaScript to control the page flow 278

Handling forms in JavaScript 278

Building and loading JavaScript using Hugo Pipes 280

10.3 Approaches for JavaScript handling 282

HTML as primary JavaScript as a utility 282

JavaScript as a separate layer to HTML 283

10.4 Converting JavaScript to a utility controlled by the HTML code 285

Enabling dynamic forms through JavaScript 285

Splitting JavaScript into multiple files 287

Passing variables when building JavaScript 288

10.5 Enabling client-side search 290

Concept of a client-side search 290

Showing the search box in the header 291

Loading the website data 291

Importing a search library 293

Updating our build systems to support npm 295

Creating a search index 297

Getting search input and showing results 298

Using Hugo modules with JavaScript 299

10.6 An SPA in a Hugo website 300

Importing a node module in the root project 301

Creating a template for the SPA 302

Importing CSS 303

Creating a web page 303

11 Breaking barriers with custom APIs and webhooks 306

11.1 Building custom APIs 307

Choosing the layer of the application stack 307

Monoliths vs. microservices 308

11.2 Adding LaTeX rendering to our website 309

What is LaTeX? 310

How can we render LaTeX? 310

Server-side LaTeX rendering 311

Writing the code to render LaTeX 311

Adding a HTTP server to call this function 314

Adding some security to prevent unauthorized access 316

Deploying to the cloud via Netlify Functions 316

Deploying to the cloud via Heroku 319

Creating shortcode to render LaTeX 324

Adding some LaTeX to our website 325

11.3 Using webhooks to rebuild automatically 326

Creating a webhook for Netlify rebuilds 327

Adding the webhook to Netlify Forms 328

Preventing abuse 330

Creating a GitHub Pages rebuild webhook 334

Creating a function to trigger GitHub webhooks 334

Adding a webhook to Formspree to rebuild the website 338

Updating the JavaScript code for some immediate feedback on the commemt submission 340

12 Adding e-commerce capabilities using the Jamstack 344

12.1 Creating e-commerce pages 345

Creating the product content view 345

Building a single product page 347

12.2 Creating a shopping cart 349

Creating a cart button in the header 349

Creating the cart in JavaScript 350

12.3 Checkout support 356

Setting up the billing provider 356

Creating a checkout session 357

Handling success and failure 363

Enabling the Buy Now button 364

12.4 Fulfillment 365

Receiving and verifying webhooks 365

Getting purchase details 368

Setting up an email provider 369

Sending emails 371

Preparing content to send to the users 372

Attaching files to email 373

13 Wrapping it up 375

13.1 Developing multilingual websites 376

Overrides and defaults for content in a multilingual website 376

Accessing strings within the theme 379

Linking to translated pages 380

13.2 Special pages 381

Sitemaps 381

Robots.txt 383

13.3 Different versions using different output formats 384

Built-in ESS formats 384

Creating our own output format 385

13.4 Service workers in progressive web apps 387

Install functions 388

Activation functions 388

Fetching resources 389

13.5 Prefetching on hover 394

13.6 Cleaner navigation with the Turbo JavaScript library 395

Adding Turbo Drive to the template 396

Handling JavaScript-based navigation 396

13.7 More Jamstack tooling and services 398

CLI, SDKs, configurations, and additional automation SDKs (software development kits) 398

Authentication, storage, and other pieces of the puzzle 399

13.8 The Hugo community 400

Asking for help 400

Showcasing your work 400

Contributing 401

13.9 The future of Hugo 401

Appendix A Getting up and running with Hugo 403

Appendix B TOML and JSON for metadata 408

Appendix C A GUI-based admin section with Netlify CMS 415

Appendix D The Go template language 423

Appendix E Answers to exercises 434

Indsx 439