How to create a custom theme in hugo static website generator
Table of contents
No headings in the article.
Here’s a step-by-step guide to create a Hugo theme with Tailwind CSS and integrate a **Fabform.io** contact form:
---
## 1. **Set Up Your Hugo Site**
1. **Install Hugo**:
Download and install Hugo from the [official website](gohugo.io/getting-started/installing).
2. **Create a new Hugo site**:
```bash
hugo new site my-hugo-site
cd my-hugo-site
```
3. **Initialize Git** (optional):
```bash
git init
```
---
## 2. **Add Tailwind CSS**
1. **Install Node.js and npm**:
Ensure you have Node.js installed to use npm.
2. **Install Tailwind CSS**:
```bash
npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
```
3. **Configure Tailwind**:
Edit `tailwind.config.js` to include Hugo content paths:
```javascript
module.exports = {
content: [
"./layouts/**/*.html",
"./content/**/*.md",
"./themes/**/*.html",
],
theme: {
extend: {},
},
plugins: [],
}
```
4. **Create CSS file**:
Create `assets/css/tailwind.css`:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
5. **Build Tailwind CSS**:
Add a build script to your `package.json`:
```json
"scripts": {
"build:css": "npx tailwindcss -i ./assets/css/tailwind.css -o ./static/css/style.css --watch"
}
```
Run the build script:
```bash
npm run build:css
```
6. **Include Tailwind in your theme**:
Add the CSS file in your base layout (`layouts/_default/baseof.html`):
```html
<link href="/css/style.css" rel="stylesheet">
```
---
## 3. **Create a Hugo Theme**
1. **Create a new theme**:
```bash
hugo new theme my-theme
```
2. **Set your theme in `config.toml`**:
```toml
theme = "my-theme"
```
3. **Set up layouts**:
Create basic layouts in `themes/my-theme/layouts/_default/`.
---
## 4. **Add Fabform.io Contact Form**
1. **Create a contact form layout**:
Create `layouts/contact.html`:
```html
<form action="fabform.io/your-form-id" method="POST" class="space-y-4">
<div>
<label for="name" class="block text-sm font-medium">Name</label>
<input type="text" id="name" name="name" class="w-full p-2 border rounded" required>
</div>
<div>
<label for="email" class="block text-sm font-medium">Email</label>
<input type="email" id="email" name="email" class="w-full p-2 border rounded" required>
</div>
<div>
<label for="message" class="block text-sm font-medium">Message</label>
<textarea id="message" name="message" class="w-full p-2 border rounded" rows="4" required></textarea>
</div>
<button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded">Send</button>
</form>
```
2. **Create a contact page**:
Add `content/contact.md`:
```markdown
---
title: "Contact"
layout: "contact"
---
```
---
## 5. **Run the Hugo Server**
Start the development server to see your changes:
```bash
hugo server
```
Visit `localhost:1313/contact` to test the contact form.
---
## 6. **Deploy Your Site**
Once everything looks good, build the site:
```bash
hugo
```
Deploy the `public` folder to your web hosting provider.
---
This will give you a Hugo site with Tailwind CSS and a functional Fabform.io contact form.