Cara Membuat Website Dengan Hugo dan Tailwind CSS 4.1
- Article Generator Pro
- Technology
- June 29, 2025
Table of Contents
Cara Membuat Website Dengan Hugo dan Tailwind CSS 4.1
Pendahuluan
Dalam era digital yang terus berkembang, memiliki website sendiri bukan lagi hal yang mustahil. Banyak pilihan untuk membuat website, dari menggunakan CMS seperti WordPress hingga menggunakan static site generator seperti Hugo. Namun, salah satu pilihan yang paling populer dan efektif saat ini adalah menggunakan Hugo bersama Tailwind CSS.
Hugo adalah salah satu static site generator yang paling populer di dunia, sementara Tailwind CSS merupakan utility CSS library yang sangat populer karena kemududahannya dalam membangun desain kustom tanpa harus ribet dengan CSS. Dalam artikel ini, kita akan membahas cara membuat website dengan menggunakan kombinasi Hugo dan Tailwind CSS 4.1.
Menginstal Hugo
Langkah Awal
Sebelum kita mulai, pastikan Anda telah menginstal Hugo di komputer Anda. Anda dapat menginstal Hugo menggunakan perintah berikut di terminal Anda:
# Download dan instal Hugo
go install github.com/gohugoIO/hugo/v2/hugo@latest
# Periksa versi Hugo yang terinstal
hugo version
Membuat Proyek Hugo
Setelah Hugo terinstal, Anda dapat membuat proyek baru dengan Hugo. Berikut adalah cara membuat proyek baru:
# Membuat proyek Hugo baru
hugo new site my-blog
# Berpindah ke direktori proyek
cd my-blog
Menginstal Tailwind CSS
Langkah-Langkah Membuat Proyek dengan Tailwind CSS
Setelah Anda memiliki direktori proyek Hugo, Anda dapat menginstal Tailwind CSS sebagai dependency. Berikut adalah cara menginstal Tailwind CSS:
# Ciptakan direktori css dan buat file input.css dan theme.css
mkdir -p assets/css
touch assets/css/input.css
touch assets/css/theme.css
# Buat file package.json dalam direktori proyek
npm init -y
# Instal Tailwind CSS sebagai dependency
npm install -D tailwindcss @tailwindcss/cli
# Buat konfigurasi Tailwind CSS
npx tailwindcss init
# Edit file postcss.config.js untuk menambahkan penggunaan Tailwind CSS
module.exports = {
plugins: [require('@tailwindcss/jit')],
}
Konfigurasi Tailwind CSS
Setelah menginstal semua dependency, Anda harus mengkonfigurasi Tailwind CSS agar dapat digunakan dalam proyek Anda. Berikut adalah cara mengkonfigurasi Tailwind CSS:
// File tailwind.config.js
module.exports = {
content: [
'./**/*.{html,js}',
'./src/**/*.vue',
],
theme: {
extend: {},
},
plugins: [],
}
Membuat File Style yang Membaca Tailwind CSS
Sekarang, kita perlu membuat file style yang dapat membaca Tailwind CSS. Anda dapat menambahkan kode berikut ke dalam file input.css:
/* File input.css */
@import "tailwindcss";
@import "./theme.css";
/* Custom CSS yang mungkin ingin digunakan sebagai overrides */
Menggunakan Tailwind CSS dalam Hugo
Untuk menggunakan Tailwind CSS dalam Hugo, Anda perlu menambahkan penggunaan Tailwind CSS ke dalam file HTML Anda. Berikut adalah cara menambahkan penggunaan Tailwind CSS:
<!-- File layouts/partials/header.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Blog</title>
<link rel="stylesheet" href="{{ .Site.BaseURL }}assets/css/output.css"> <!-- Output dari Tailwind CSS -->
</head>
<body>
<!-- Header dengan menggunakan utility class dari Tailwind CSS -->
<header class="bg-blue-500 text-white p-4">
<h1 class="text-3xl font-bold">My Blog</h1>
</header>
<!-- Konten lainnya -->
</body>
</html>
Menggunakan Makefile untuk Mengaktifkan Server
Mengaktifkan server Hugo dan Tailwind CSS secara bersamaan dapat dilakukan dengan menggunakan Makefile. Berikut adalah contoh Makefile yang dapat digunakan:
# File Makefile
# Variabel untuk direktori proyek
BUILD_DIR ?= public
# Variabel untuk direktori source
SRC_DIR ?= src
# Variabel untuk nama file output Tailwind CSS
OUTPUT_FILE ?= output.css
# Variabel untuk nama file input Tailwind CSS
INPUT_FILE ?= input.css
# Target untuk mengaktifkan server Hugo dan Tailwind CSS secara bersamaan
.PHONY: dev
dev:
npx tailwindcss -i $(INPUT_FILE) -o $(OUTPUT_FILE) --watch
hugo serve --watch
# Target untuk membuild website secara manual
.PHONY: build
build:
npx tailwindcss -i $(INPUT_FILE) -o $(OUTPUT_FILE)
hugo build
Dengan menggunakan Makefile seperti di atas, Anda dapat mengaktifkan server Hugo dan Tailwind CSS secara bersamaan dengan perintah make dev, atau membuild website secara manual dengan perintah make build.
Menggunakan Utility Class dari Tailwind CSS
Penggunaan Utility Class dalam Header
Berikut adalah contoh penggunaan utility class dari Tailwind CSS dalam header:
<!-- File layouts/partials/header.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Blog</title>
<link rel="stylesheet" href="{{ .Site.BaseURL }}assets/css/output.css"> <!-- Output dari Tailwind CSS -->
</head>
<body>
<!-- Header dengan menggunakan utility class dari Tailwind CSS -->
<header class="bg-blue-500 text-white p-4">
<h1 class="text-3xl font-bold">My Blog</h1>
</header>
<!-- Konten lainnya -->
</body>
</html>
Penggunaan Utility Class dalam Konten
Berikut adalah contoh penggunaan utility class dari Tailwind CSS dalam konten:
<!-- File layouts/partials/content.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Blog</title>
<link rel="stylesheet" href="{{ .Site.BaseURL }}assets/css/output.css"> <!-- Output dari Tailwind CSS -->
</head>
<body>
<!-- Konten dengan menggunakan utility class dari Tailwind CSS -->
<main class="container mx-auto p-4">
<article class="bg-white rounded shadow-md p-4 mb-4">
<h2 class="text-2xl font-bold mb-2">Judul Artikel</h2>
<p class="text-lg text-gray-600">Deskripsi artikel</p>
</article>
</main>
<!-- Konten lainnya -->
</body>
</html>
Kesimpulan
Membuat website dengan menggunakan kombinasi Hugo dan Tailwind CSS 4.1 sangat mudah dan efektif. Dengan menggunakan Hugo sebagai static site generator, Anda dapat membuat website yang dinamis dan mudah diatur. Sementara itu, Tailwind CSS memberikan kemududahan dalam membangun desain kustom tanpa harus ribet dengan CSS.
Dengan mengikuti langkah-langkah di atas, Anda dapat mengaktifkan server Hugo dan Tailwind CSS secara bersamaan dan menggunakan utility class dari Tailwind CSS untuk membangun desain yang profesional dan responsif.
Sumberdaya
- Hugo Official Documentation
- Tailwind CSS Official Documentation
- Cara Membuat Website dengan Hugo dan Tailwind CSS
Dengan demikian, Anda telah siap untuk memulai membuat website yang profesional dengan menggunakan kombinasi Hugo dan Tailwind CSS 4.1.
