author Ahmad Muhardian

Cara Membuat Tema Hugo dari Nol (Meracik ulang Tema Petani Kode)


Saat ini Saya sedang menggunakan Hugo versi 0.18 dan berencana untuk meng-upgrade ke versi 0.24. Kabar baiknya, Beb sudah merilis versi 0.24 sekitar dua hari yang lalu.

Rilis Hugo versi 0.24

Selain melakukan upgrade ke mesin terbaru, saya juga berencana meracik ulang tema Petani Kode. Karena saya rasa tema ini cukup berantakan, baik dari segi kode dan performa.

Alasan Saya ingin Membuat Tema Baru

  • Kode tema yang digunakan saat ini masih berantakan.
  • Kode CSS-nya masih murni ditulis dari nol dan saya ingin mencoba bereksperimen dengan SASS di Hugo.
  • Penerapan AMP masih salah dan banyak yang tidak valid.
  • Tema yang digunakan saat ini, tampilannya hanya bisa terlihat sempurna kalau terhubung dengan internet, sedangkan kalau digunakan secara offline tampilannya barantakan. Hal ini disebabkan karena saya menggunakan CDN (Content Delivery Network) dan font dari Google.
  • Ingin belajar membuat tema dari nol, karena tema yang digunakan saat ini merupakan hasil modifikasi dari tema AMP Starter.

Membuat Tema Baru di Hugo

Hugo sudah menyediakan perintah untuk membuat tema baru:

hugo new theme [name]

Sebagai contoh, saya akan membuat tema bernama kacang (karena saat ini lagi musim tanam kacang 😄).

hugo new theme kacang

Maka akan ada direktori baru di dalam direktori themes.

Tema Baru di Hugo

Hugo sudah membuatkankan kita struktur direktori temanya dan tinggal dimodifikasi saja. Tapi sebelumnya, kita harus paham dulu dengan struktur direktori tersebut.

Struktur Direktori Tema Hugo

Berikut ini struktur direktori tema Hugo:

kacang/
├── archetypes
│   └── default.md
├── layouts
│   ├── 404.html
│   ├── _default
│   │   ├── list.html
│   │   └── single.html
│   ├── index.html
│   └── partials
│       ├── footer.html
│       └── header.html
├── LICENSE.md
├── static
│   ├── css
│   └── js
└── theme.toml

Ada tiga direktori yang dibuatkan oleh Hugo:

  1. archetype — direktori yang berisi template konten;
  2. layouts — direktori yang berisi layout temanya;
  3. static — direktori untuk menyimpan file statis seperti css, javascript, gambar, dsb.

Biar lebih jelas, mari kita bahas satu-persatu…

Archetype

Jika blog kita memiliki beberapa jenis konten, misalnya ada artikel, portofolio, podcast, dll. maka kita harus membuatkan archetype untuk masing-masing jenis konten tersebut.

Di dalam direktori archetype terdapat file default.md yang merupakan archetype default yang akan digunakan ketika kita membuat konten dengan perintah hugo new.

Layouts

Direktori layout menyimpan file-file HTML yang merupakan struktur dasar dari tema.

Terdapat dua direktori penting di dalamnya:

  1. _default berisi struktur HTML untuk halaman konten. Ada dua isinya:

    • list.html file HTML untuk menampilkan daftar konten.
    • single.html file HTML untuk menampilkan satu konten.

    List vs Single

  2. partials berisi bagian-bagian kecil dari struktur HTML.

    Partials

    Partials memungkinkan kita memecah kode-kode layout menjadi bagian kecil, sehingga lebih efisien.

Kemudian ada juga file HTML:

  1. 404.html file HTML untuk halaman error 404 not found.
  2. index.html file HTML untuk halaman indeks atau homepage.

Static

Direktori ini menyimpan file-file statis seperti CSS, Javascript, Gambar, dan sebagainya.

Membuat Halaman Home

Hal pertama yang harus kita lakukan adalah membuat halaman utamanya, yaitu halaman homepage.

Layout untuk halaman homepage ditentukan oleh file layouts/index.html.

Silahkan isi file index.html dengan kode berikut:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>{{ .Title }}</title>
    </head>
    <body>

        <h1>Hello World!</h1>
        <p>Selamat datang di <b>{{ .Title }}</b></p>

    </body>
</html>

Ini hanya untuk percobaan saja.

Setelah itu silahkan jalankan server hugo dengan menggunakan tema tersebut.

hugo server -t kacang

Hasilnya:

Hasil percobaan tema kacang

Berhasil…

Selanjutnya kita tinggal modifikasi saja sesuai selera.

Baca lanjutan tutorial ini: Membuat Layout Tema Hugo: 3 Halaman Penting yang Harus Ada dalam Blog

Untuk referensi nama-nama variabel Hugo, bisa dibaca di dokumentasi Hugo.

Akhir Kata…

Pengembangan tema ini mungkin akan saya lanjutkan di tulisan terpisah. Karena saya belum membuat rancangan dan desainnya.

Sekarang yang terpenting sudah tahu cara memulainya 😄.

Terima kasih sudah membaca sampai akhir.

Referensi: Dok. Hugo — Creating a Theme.

Baca Juga ini

Cara Redirect Halaman di Hugo untuk Mempertahankan Trafik

Cara Redirect Halaman di Hugo untuk Mempertahankan Trafik

Hingga saat ini, proses migrasi Petani Kode ke Hugo masih belum selesai. Mengapa saya katakan demikian? Karena banyak artikel yang belum diedit. Banyak artikel yang link-nya error 404, alias tidak ditemukan. Terpantau dari laporan Google Webmaster, error 404-nya tembus sampai 546 halaman. Hal ini akan membuat banyak orang kecewa, termasuk juga saya. Karena sudah banyak artikel yang terindeks di google, di-share di sosial media, dan link lainnya.

Cara Hosting/Deploy Hugo di Github

Cara Hosting/Deploy Hugo di Github

Github memiliki layanan hosting Static Page yang bisa kita manfaatkan untuk hosting Hugo. Pada dasarnya SSG seperti Hugo akan membuat sebuah file statis yang (biasanya) berada di dalam direktori public. Nah direktori ini yang akan kita upload ke Github agar website atau blog kita bisa dibuka melalui: https://username.github.io atau kustom domain sendiri. Berdasarkan panduan di dokumentasi Hugo, ada empat cara yang bisa dilakukan untuk hosting Hugo di Github: Hosting ke direktori doc Hosting ke cabang gh-pages Hosting ke halaman personal/organisasi Hosting Github dengan Continuous Integration (CI) Kita akan mencoba cara yang nomer 3, karena menurut saya cukup gampang.

Migrasi Petani Kode dari Blogger ke Hugo

Migrasi Petani Kode dari Blogger ke Hugo

Tercatat pada tanggal 11 Januari 2017, website Petani Kode mulai dikembangkan ulang dengan mesin (engine) Hugo. Hugo adalah salah satu mesin generator web statis yang berusia cukup muda. Hugo ditulis dengan bahasa pemrograman Go dan diklaim lebih cepat dari mesin sejenisnya seperti Jekyll, Middleman, Octopress, dsb. Pengembangan website Petani Kode berlangsung cukup cepat. Meskipun bahasa pemrograman Go belum pernah saya pelajari dan pahami. Namun, berkat kerja keras dan semangat website ini bisa jadi dalam waktu sekejap.

Cara Impor Artikel Blogger ke Hugo Kurang dari 15 Menit

Cara Impor Artikel Blogger ke Hugo Kurang dari 15 Menit

Dalam rangka migrasi Petani Kode ke Hugo, saya harus melakukan impor artikel dari Blogger ke Hugo. Untungnya Hugo sudah menyediakan skrip untuk impor konten dari blogger ke Hugo. Proses impor ini memakan waktu cukup cepat. Saya kira, tidak sampai 15 menit. Mungkin anda bisa melakukannya lebih cepat. Begini caranya… Sebelumnya, pastikan telah menginstal Go (Golang) dan Git. Kemudian lakukan langkah-langkah berikut ini. 1. Ekspor BlogPertama, kita perlu mengekspor dulu konten yang ada di blogger.

Cara Menggunakan SSL Gratis dari Cloudflare untuk Github Pages (Kustom Domain)

Cara Menggunakan SSL Gratis dari Cloudflare untuk Github Pages (Kustom Domain)

Gihub pages merupakan layanan hosting web statis dari Github. Layanan ini sebenarnya sudah memberikan SSL Gratis untuk domain yang menggunakan .github.io. Lalu bagaimana dengan yang kustom domain atau domain sendiri? Untuk yang kustom domain, kita bisa menggunakan SSL gratis dari Cloudflare. Cloudflare merupakan layanan untuk CDN, DNS Management, Cache, SSL, dll. Saya kira, setiap website harus menggunakan Cloudflare, karena bnayak manfaat yang bisa didapat dari sana.

Saya tidak Bisa Bahasa Pemrograman Go, Terpaksa ini yang Saya Lakukan

Saya tidak Bisa Bahasa Pemrograman Go, Terpaksa ini yang Saya Lakukan

Ada cerita menarik yang saya alami ketika migrasi Petani Kode dari Blogger ke Hugo. Waktu itu, ketika saya ingin mengimpor konten dari Blogger ke Hugo, ada sesuatu yang kurang dari skrip Go yang disediakan. Kekuarangnnya tidak mampu membuat atau mengambil gambar (thumbnail) untuk setiap artikel. Saya kemudian berpikir, mungkin nanti saya bisa edit setiap gambar untuk artikel. Namun, rasanya akan sangat melelahkan melakukannya karena jumlah artikelnya sampai ratusan. Tidak ingin melakukan hal yang berulang-ulang seperti kata orang, Don’t Repeat Yourself di singkat DRY.