Preface

Are you using a database to serve content that rarely changes? If you’re using WordPress, Ghost, or other solutions for your content site, you probably are. Or at best, you’ve set up caching strategies to speed things up and reduce database calls.

Database-driven content management systems like WordPress let you define a common theme shared across your site, making it a breeze to publish new content. However, since most content doesn’t change in real time, you’re sacrificing speed and scalability for features that benefit content creators and developers instead of the people who want to read your content. And that additional complexity means you need more resources in production too: more servers to handle the traffic, standby database servers, a caching layer you have to manage, and more.

There’s no better way to make a snappy content site than by serving static pages from a traditional web server or a content delivery network (CDN). But you don’t have to give up the rapid development features you’ve come to expect. Static site generators, like Hugo,^[1] give you a fantastic middle ground. You get the theming and content management features of a database-driven site without the bloat, security vulnerabilities, or complexities associated with caching.

Hugo gives you a framework for building a fast, organized content site using many of the skills you already have. You define your layouts in HTML and your content in Markdown. Hugo has built-in support for tagging, categorization, related content, multiple output formats, image optimization, and asset handling. While you’re developing your site, Hugo gives you a web server for testing, and automatically refreshes your pages as you change them. When you’re done building your site, Hugo generates a static site that you can upload to your web server.

There are other static website generators available, like Jekyll^[2] and Gatsby,^[3] two popular and well-known choices. Hugo has a few benefits over those other choices. First, Hugo uses a single binary with no dependencies, which means you don’t need a complex build chain or additional runtimes like Node or Ruby to get started or use its features. Unlike Jekyll, Hugo doesn’t assume you’re creating a blog. And unlike Gatsby, you don’t need to learn React to build your themes or content; if you already know HTML and Markdown, you can be productive right away. Finally, Hugo is incredibly fast when it comes to building the site. It can generate thousands of pages quickly, which comes in handy if you’re using Hugo to build something like a documentation website.

In this book, you’ll use Hugo to build a personal portfolio site that you can use to showcase your skills and thoughts to the world. You’ll build the basic skeleton, develop a custom theme, and use content templates to generate new pages quickly. You’ll use internal and external data sources to embed content into your site, and render some of your content in JSON and RSS. You’ll add a blog section with posts and integrate Disqus with your site, and then make your site searchable. While this isn’t a web design book, you’ll integrate modern CSS into the site, and use Hugo’s asset management features to process styles, images, and scripts. Then you’ll integrate Hugo with Node.js and Webpack for those situations where you need a little more flexibility. Finally, you’ll explore deployment with Netlify,^[4] cloud storage, and traditional web hosts so you can share your work with the world.