Building My New Website with Hugo and Directus

For my new website, I opted for a powerful and efficient combination: Hugo as the static site generator and Directus as the headless Content Management System (CMS). This stack allows for a blazing-fast frontend with a flexible and user-friendly backend for content management.

1. What is Hugo?

Hugo is a popular open-source static site generator written in Go. It takes content files (typically Markdown, but also supports other formats), applies templates, and generates a complete static website. Key benefits of Hugo include:

• Speed: Hugo is renowned for its incredible build speed, making it ideal for large websites.
• Simplicity: While powerful, Hugo's basic concepts are relatively easy to grasp.
• Flexibility: It offers a robust theming system and extensive configuration options.
• Security: As a static site generator, there's no database to manage on the frontend, reducing the attack surface.

2. Creating a New Hugo Project

Getting started with Hugo is straightforward. First, you need to have Hugo installed on your system. You can find the installation instructions for your operating system on the official Hugo website (https://gohugo.io/installation/).

Once installed, you can create a new Hugo project using the hugo new site command in your terminal:

hugo new site my-new-website
cd my-new-website

This will create a basic directory structure for your new Hugo site.

3. Integrating Directus with Hugo

To manage the content for my Hugo website, I chose Directus, an open-source headless CMS. Directus provides a user-friendly interface for creating and managing content, which is then exposed via a REST or GraphQL API.

The integration process, as outlined in the Directus documentation (https://docs.directus.io/blog/getting-started-directus-hugo.html), typically involves the following steps:

• Setting up Directus: First, you need to have a Directus instance running, either locally or on a hosting provider. You'll then define your data models (collections) within Directus.
• Fetching Data in Hugo: Within your Hugo templates, you'll use Hugo's getJSON or similar functions to fetch data from the Directus API endpoints. This usually involves making HTTP requests to retrieve the content you need.
• Templating: You'll then use Hugo's templating language (Go templates) to structure and display the data fetched from Directus on your website pages. This involves iterating through the JSON data and rendering it according to your design.
• Configuration: You might need to configure Hugo to know the base URL of your Directus API.

This decoupling of content management (Directus) from the site generation (Hugo) offers several advantages, including content editors not needing access to the website's codebase and the ability to reuse content across different platforms in the future.

4. Previewing Changes in Hugo

Hugo provides a built-in development server that allows you to preview your changes in real-time as you work. To start the development server, navigate to your Hugo project directory in the terminal and run:

hugo server -D

The -D flag includes draft content. Hugo will then build your site and make it accessible at http://localhost:1313/ (or another port if 1313 is already in use). Any changes you make to your content or templates will be automatically reflected in your browser, making the development process very efficient.

5. Creating a Hugo Build

Once you're satisfied with your website, you can create a production-ready build using the hugo command:

hugo

This command will generate the complete static website (HTML, CSS, JavaScript, images, etc.) in the public directory of your Hugo project. You can then deploy the contents of this public folder to your web server.

By leveraging the speed and flexibility of Hugo and the powerful content management capabilities of Directus, I was able to build a fast, secure, and easily maintainable website. This combination has proven to be an excellent choice for my online presence.