Creating a Static Site with Hugo and Tailwind Css

Creating a static website can be an excellent way to showcase projects, portfolios, or documentation. Using Hugo, a fast static site generator, combined with Tailwind CSS, a utility-first CSS framework, offers a powerful and efficient workflow. This guide will walk you through the key steps to set up your own static site using these tools.

What is Hugo?

Hugo is an open-source static site generator written in Go. It is known for its speed and flexibility, allowing developers to create websites quickly without a database. Hugo uses Markdown files for content and templates for layout, making it easy to maintain and update your site.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides low-level classes to build custom designs directly in your HTML. Instead of writing custom CSS, you use predefined classes to style your elements, which speeds up development and ensures consistency across your site.

Setting Up Your Project

Begin by creating a new directory for your project. Inside, initialize a new Hugo site and install Tailwind CSS. You can do this using npm or yarn, depending on your preference. Setting up a build process with PostCSS helps compile Tailwind into your static files.

Initializing Hugo

Run the command hugo new site mysite to create a new Hugo site. Navigate into the directory with cd mysite and start adding content and templates.

Installing Tailwind CSS

Initialize npm in your project folder with npm init -y. Then install Tailwind CSS and its dependencies: npm install -D tailwindcss postcss autoprefixer. Generate the Tailwind configuration file with npx tailwindcss init.

Configuring Tailwind CSS

In your tailwind.config.js, specify the paths to all your template files so Tailwind can purge unused styles:

module.exports = {
  content: ['./layouts/**/*.html', './content/**/*.md'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Building Your Site

Create a CSS file, e.g., src/styles.css, and include Tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Build your CSS with the command:

npx tailwindcss -i ./src/styles.css -o ./static/css/styles.css --watch

Integrating with Hugo

Link your generated CSS file in your Hugo layouts, typically in layouts/_default/baseof.html:

<link rel="stylesheet" href="/css/styles.css">

Creating Content

Use Markdown files in the content directory to add pages and posts. Use Tailwind classes within your templates to style your site elements, such as headers, navigation, and footers.

Final Tips

Leverage Hugo’s powerful templating system to create reusable components. Keep your Tailwind classes consistent for a cohesive design. Regularly build and preview your site to ensure everything looks great.

With Hugo and Tailwind CSS, you can develop a fast, modern static website tailored to your needs, all while maintaining a simple and efficient workflow.

Table of Contents