Hugo in Action: Static sites and dynamic Jamstack apps

Hugo in Action
brief contents
contents
foreword
preface
acknowledgments
about this book
Who should read this book
How this book is organized: A road map
About the code
liveBook discussion forum
Other online resourceslive
about the author
about the cover illustration
Part 1: Static Hugo websites: Loading fast, building to last
Chapter 1: The Jamstack and Hugo
1.1 The stack in Jamstack
1.2 How does Jamstack work?
1.3 The JAM in Jamstack
1.3.1 JavaScript
1.3.2 Application programming interfaces (APIs)
1.3.3 Markup
1.4 Why use Jamstack?
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 When not to use the Jamstack
1.5.1 When there is dynamic data with no historical significance
1.5.2 Building based on user-generated content with transient data
1.5.3 Having user-specific web pages
1.5.4 When there is no data to compile
1.6 Selecting the builder
1.7 Why choose Hugo?
1.7.1 Hugo is fast
1.7.2 Hugo is stable
1.7.3 Hugo is built for performance
1.7.4 Hugo is self-contained
1.7.5 Hugo is a single file
1.7.6 Hugo can be extremely low maintenance
1.7.7 Hugo can save you from analysis paralysis
1.7.8 Hugo is powerful
1.7.9 Hugo is scalable
1.7.10 Hugo is a community project
1.8 Is speed really important?
1.9 What can we build with Hugo?
1.9.1 Personal websites and blogs
1.9.2 Nontechnology business websites
1.9.3 Documentation websites
1.9.4 Hybrid Jamstack-based websites
1.10 Cases that don’t map to Hugo
1.11 How to be successful with Hugo and this book
Chapter 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 the Hugo source folder
2.2 Adding a theme
2.2.1 Adding a theme to the website
2.2.2 Running the dev server
2.3 Adding content
2.3.1 Configuration
2.3.2 Content pages
2.3.3 Index page
2.4 Continuous delivery
2.4.1 Netlify hosting
2.4.2 GitHub Pages
2.4.3 Vercel, Cloudflare, AWS Amplify, and other dedicated Jamstack hosts
2.4.4 AWS, Azure, and Google Cloud file storage
2.5 Meeting the goals for performance and maintainability
2.5.1 Performance
2.5.2 Maintainability
2.5.3 Choose the theme wisely
Chapter 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, and code blocks
3.1.6 Emojis, IDs, and other Hugo extensions
3.2 Markdown in action
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 Revisiting 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 Content versioning
3.7.2 Theme independence
3.7.3 Cleanliness
Chapter 4: Content management with Hugo
4.1 Customizing with the Hugo configurations
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 using custom shortcodes
4.6.1 HTML shortcodes
4.6.2 Markup-based shortcodes
4.6.3 Inline shortcodes
Chapter 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 a context switch via the with conditional for simplifying further checks
5.1.7 Adding content processing
5.1.8 Adding Markdown content
5.2 Using external data 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
Chapter 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 in 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 Controlling Markdown rendering
6.5 Using bundled templates for common work
Chapter 7: Creating your own theme
7.1 More ways to lay out content
7.1.1 Parameterizing front matter to differentiate the News page interface
7.1.2 Using the cascade property to apply properties to the front matter of multiple pages
7.1.3 Providing a different layout to the blog content
7.1.4 Cascading targets
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 Rendering 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 Powering up with content views
Chapter 8: Hugo Modules: Plugins for everybody
8.1 Setting up Hugo Modules
8.2 Themes as Hugo Modules
8.3 Importing themes
8.4 Enabling themes other than Eclectic
8.5 Getting a specific version of a theme
8.6 Viewing the dependencies source code
8.7 Modifying dependencies locally
8.8 Adding nested dependencies
8.9 Modules as template plugins
8.10 Shared dependencies across the theme and website
8.11 Content plugins
8.12 Commonly used Hugo Modules APIs
Part 2: Expanding with the Jamstack: Dynamic outside, static inside
Chapter 9: Accessing APIs to enhance functionality
9.1 Build-time vs. run-time API access
9.2 Embedding tweets at compile time
9.2.1 Understanding the Twitter API
9.2.2 Understanding Hugo’s functions for compile-time API access
9.2.3 Rendering a tweet as a testimonial
9.2.4 Managing content lifetimes
9.3 Hugo and REST APIs
9.4 Creating a contact page the Jamstack way
9.4.1 Setting up a contact form
9.4.2 Choosing a form provider
9.4.3 Using Netlify forms for the Contact Us page
9.4.4 Using Formspree for contact forms
9.5 Building dynamic surveys
9.6 Commenting using the Jamstack
9.6.1 Displaying a comment form
9.6.2 Displaying comments
9.7 Pseudo APIs that compile to JSON
9.7.1 Custom output formats in Hugo
9.7.2 Creating the JSON API for the website
Chapter 10: The power of JavaScript
10.1 Why use JavaScript in a Hugo project?
10.2 Using JavaScript to control the page flow
10.2.1 Handling forms in JavaScript
10.2.2 Building and loading JavaScript using Hugo Pipes
10.3 Approaches for JavaScript handling
10.3.1 HTML as primary JavaScript as a utility
10.3.2 JavaScript as a separate layer to HTML
10.4 Converting JavaScript to a utility controlled by the HTML code
10.4.1 Enabling dynamic forms through JavaScript
10.4.2 Splitting JavaScript into multiple files
10.4.3 Passing variables when building JavaScript
10.5 Enabling client-side search
10.5.1 Concept of a client-side search
10.5.2 Showing the search box in the header
10.5.3 Loading the website data
10.5.4 Importing a search library
10.5.5 Updating our build systems to support npm
10.5.6 Creating a search index
10.5.7 Getting search input and showing results
10.5.8 Using Hugo modules with JavaScript
10.6 An SPA in a Hugo website
10.6.1 Importing a node module in the root project
10.6.2 Creating a template for the SPA
10.6.3 Importing CSS
10.6.4 Creating a web page
Chapter 11: Breaking barriers with custom APIs and webhooks
11.1 Building custom APIs
11.1.1 Choosing the layer of the application stack
11.1.2 Monoliths vs. microservices
11.2 Adding LaTeX rendering to our website
11.2.1 What is LaTeX?
11.2.2 How can we render LaTeX?
11.2.3 Server-side LaTeX rendering
11.2.4 Writing the code to render LaTeX
11.2.5 Adding a HTTP server to call this function
11.2.6 Adding some security to prevent unauthorized access
11.2.7 Deploying to the cloud via Netlify Functions
11.2.8 Deploying to the cloud via Heroku
11.2.9 Creating shortcode to render LaTeX
Adding some LaTeX to our website
11.2.10
11.3 Using webhooks to rebuild automatically
11.3.1 Creating a webhook for Netlify rebuilds
11.3.2 Adding the webhook to Netlify Forms
11.3.3 Preventing abuse
11.3.4 Creating a GitHub Pages rebuild webhook
11.3.5 Creating a function to trigger GitHub webhooks
11.3.6 Adding a webhook to Formspree to rebuild the website
11.3.7 Updating the JavaScript code for some immediate feedback on the comment submission
Chapter 12: Adding e-commerce capabilities using the Jamstack
12.1 Creating e-commerce pages
12.1.1 Creating the product content view
12.1.2 Building a single product page
12.2 Creating a shopping cart
12.2.1 Creating a cart button in the header
12.2.2 Creating the cart in JavaScript
12.3 Checkout support
12.3.1 Setting up the billing provider
12.3.2 Creating a checkout session
12.3.3 Handling success and failure
12.3.4 Enabling the Buy Now button
12.4 Fulfillment
12.4.1 Receiving and verifying webhooks
12.4.2 Getting purchase details
12.4.3 Setting up an email provider
12.4.4 Sending emails
12.4.5 Preparing content to send to the users
12.4.6 Attaching files to email
Chapter 13: Wrapping it up
13.1 Developing multilingual websites
13.1.1 Overrides and defaults for content in a multilingual website
13.1.2 Accessing strings within the theme
13.1.3 Linking to translated pages
13.2 Special pages
13.2.1 Sitemaps
13.2.2 robots.txt
13.3 Different versions using different output formats
13.3.1 Built-in RSS formats
13.3.2 Creating our own output format
13.4 Service workers in progressive web apps
13.4.1 Install functions
13.4.2 Activation functions
13.4.3 Fetching resources
13.5 Prefetching on hover
13.6 Cleaner navigation with the Turbo JavaScript library
13.6.1 Adding Turbo Drive to the template
13.6.2 Handling JavaScript-based navigation
13.7 More Jamstack tooling and services
13.7.1 CLI, SDKs, configurations, and additional automation SDKs (software development kits)
13.7.2 Authentication, storage, and other pieces of the puzzle
13.8 The Hugo community
13.8.1 Asking for help
13.8.2 Showcasing your work
13.8.3 Contributing
13.9 The future of Hugo
appendix A: Getting up and running with Hugo
A.1 System requirements
A.1.1 Hugo flavors
A.1.2 Hugo versions
A.2 Installing Hugo
A.2.1 System package managers
A.2.2 Direct download
A.3 Code editors
A.4 Troubleshooting
A.4.1 Making sure Hugo runs
A.4.2 Installing the right version
A.4.3 Getting Hugo extended
A.4.4 Fixing Hugo Modules
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 Revisiting the config file
appendix C: A GUI-based admin section with Netlify CMS
C.1 Loading Netlify CMS
C.2 Configuring Netlify CMS
C.3 Using Netlify CMS
appendix D: The Go template language
D.1 Basic usage
D.1.1 Comments
D.1.2 Whitespace removal
D.1.3 Errors
D.2 Variables
D.2.1 Built-in variables
D.2.2 Custom variables
D.3 Data types
D.4 Functions for operators
D.5 Nesting and piping
D.6 Conditional expressions
D.7 Loops
D.8 Standard library
D.8.1 String conversions
D.8.2 String creation and manipulation
D.8.3 List and map manipulation and filtering
D.8.4 The web and Hugo-specific tasks
D.8.5 Resource access and manipulation
D.8.6 Language features
D.8.7 File handling and network access
D.8.8 Resource manipulation and Hugo Pipes
appendix E: Answers to exercises
Chapter 1
Chapter 2
Chapter 3
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Chapter 13
index
Symbols
Numerics
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
Y