Membuat website statis dengan Hugo

Hugo adalah website statis generator atau yang dikenal dengan SSG yang dibuat dengan bahasa Go, yang terkenal dengan kecepatannya. Belajar membuat website atau blog dinamis dengan kekuatan Hugo

Update kelas terakhir : 4 tahun yang lalu

cover hugo-cover-1.jpg

Apa itu static site generator

Static site generator atau SSG sedang populer. Cara baru untuk membuat website kita lebih cepat dan lebih aman untuk diakses. Baca artikel tentang apa itu Static site generator di sini

Perkenalan dan cara install Hugo

Yuk kenalan dengan SSG Hugo. Hugo adalah ssg atau pembuat website statis yang sangat cepat, dibuat dengan bahasa Go Lang yang kini sangat populer.

Modifikasi konten website hugo

Setelah kamu belajar cara install dan mengganti tema Hugo, sekarang kita akan mengeksplor lebih banyak isi dari konten website yang dibuat dengan Hugo. Artikel bermain dengan konten Hugo

Membuat tema Hugo sendiri

belajar bagaimana cara membuat custom theme alias bikin tema Hugo sendiri. Kita akan belajar cara mengambil kontent, menampilkan daftar folder tertentu dan lainnya, sebelum kamu mengaplikasikan CSS sendiri

Apa itu front matter

Front Matter adalah data-data yang tersimpan untuk konten kita yang berisi informasi meta dari file tersebut. Isinya bisa apa saja, sebagai contoh untuk memberi judul, tanggal dan apakah postingannya ingin dalam draft atau dipublish langsung. Tapi tidak terbatas di ketiga hal tersebut saja.

Sistem tag atau kategori di Hugo

Belajar cara membuat tag atau sistem kategori dengan fitur taxonomy yang ada di hugo untuk membantu website kamu menjadi lebih terorganisir

Tampilan dinamis di setiap halaman Hugo

Kita sudah punya satu template partial header yang bisa berisi hal-hal yang selalu tampil di semua halaman seperti menu. Tapi bagaimana kalau kita ingin di salah satu bagiannya, yaitu di Hompage/ Landingpage kita ingi memainkan isi header ini, atau menyembunyikannya.

Mengatur SEO di Hugo

SEO alias Search engine optimization pada website tentu sangat penting kalau kamu mau website kamu mudah ditemukan oleh orang. Tenang Hugo tidak ketinggalan tentang hal SEO, kita bisa dengan mudah mengaturnya.

Menampilkan summary atau snippet

Belajar bagaimana cara menampilkan snippet atau summary di Hugo. Kamu mau menampilkan ringkasan atau potongan dari artikel kamu di Hugo? ada dua cara, yang paling mudah menggunakan variabel .Summary

Membuat pagination di Hugo

Semakin rajin kamu membuat blog, semakin banyak tempat yang dibutuhkan untuk menampilkan list kontennya. Waktunya kita belajar sistem pagination di hugo. Belajar cara membuat pagination di Hugo

Membuat sistem komentar di Hugo

Salah satu kekurangn website statis adalah mengimplementasikan "user generated content" alias konten yang dihasilkan oleh user, sebagai contoh komentar. Untungnya, sudah banyak tool yang bisa kita implementasikan untuk mengatasi hal ini. Sebagai contoh untuk sistem komentar sendiri, di website statis, kita punya pilihan untuk memasang:
  • disqus, commento, hyvor, talkyard, dll..

Hosting website statis hugo di render.com

Setelah kamu belajar berbagai macam tips dan trik membuat website statis dengan Hugo, baik itu tema yang kamu ambil atau tema buatan sendiri, sekarang waktunya kita menunjukkan hasil karya ini ke dunia! hehe. Alias waktunya kita Hosting :).

Cara auto deploy dengan webhook github

Render punya fitur untuk membuat proses build website Hugo nya menjadi automatis, cukup push kode baru kamu ke github dan dia akan melakukan perubahannya.

Forestry, CMS untuk website statis

Kamu sudah punya website statis? tidak suka dengan cara deploy yang harus, bikin file baru di local lalu push perubahannya? mau punya CMS alias content management system seperti wordpress yang mudah digunakan dan ada interfacenya untuk kamu? tenang, forestry datang menyelamatkan!

Halaman ini adalah halaman video tutorial programming "Membuat website statis dengan Hugo".

<< Daftar kelas koding lainnya