Diskon kelas baru hingga 25%! Masukkan kupon "lebihcepat" di kelas ini

X
Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

BELAJAR HUGO - PENGERTIAN, KURIKULUM DAN CARA BELAJAR

Hugo adalah framework static site generator yang membantu kamu membuat website dengan cepat

Belajar Hugo

Static site generator atau yang dikenal SSG sedang populer di mata para developer website. Banyak framework yang berlomba untuk menawarkan membuat website statis dengan mudah, salah satunya yang sangat populer adalah Hugo

Apa itu static site generator

Kalau diartikan langsung, SSG bisa disebut “penghasil website statis”. Pada dasarnya SSG adalah istilah umum untuk sebuah alat atau software yang bisa menghasilkan halaman statis.

Apa sih halaman statis? halaman statis adalah halaman yang terbuat dari tiga teknologi andalan web developer yaitu.. HTML, CSS dan javascript (pilihan), di mana tidak ada backend ataupun database yang terlibat langsung di sini. Selengkapnya tentang Static Site Generator baca di sini

Keuntungan dari SSG

  1. website lebih cepat
  2. website lebih aman

Daftar materi kelas 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

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!


Daftar newsletter skodev masukkan emailmu untuk dapat informasi menarik dari dunia koding