Hugo in Action: Static sites and dynamic Jamstack apps

Description

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