Membuat Situs Statis dengan Hugo

Hugo dengan cepat menjadi salah satu cara terbaik untuk membuat situs website. Hugo adalah generator situs statis open source dan gratis yang memungkinkan kita membuat situs web statis dengan mudah.

Kelebihan situs web statis adalah karena hanya memerlukan sedikit sumber daya sistem untuk dihosting. Jadi situs statis sangat cocok untuk blog sederhana, situs dokumentasi, portofolio, dan banyak lagi.

Apa itu Situs Web Statis?

Situs web statis hanyalah situs yang terdiri dari file HTML dan CSS dasar untuk setiap halaman individual. Situs statis dapat dengan mudah dibuat dan dipublikasikan karena persyaratan servernya kecil dan persyaratan perangkat lunak disisi servernya sangat terbatas untuk mempublikasikannya. Tidak perlu mengetahui coding dan desain database untuk membangun website statis.

Pada masa-masa awal internet, hampir semua hal bersifat statis, namun situs-situsnya hambar dan dirancang dengan buruk. Juga jika ingin membuat perubahan luas disitus seperti tautan di footer maka harus memeriksa setiap file untuk situs web dan membuat perubahan berdasarkan halaman demi halaman. Mempertahankan sejumlah besar halaman tetap file tampaknya tidak praktis tanpa alat otomatis. Namun dengan sistem templat web modern, skenario ini berubah.

Selama beberapa tahun terakhir, situs statis kembali menjadi populer. Hal ini disebabkan oleh kemajuan bahasa pemrograman dan perpustakaan. Kini dengan generator situs statis, kita dapat menghosting blog, situs web besar, dan lainnya dengan kemampuan membuat perubahan di seluruh situs dengan cepat.

Kelebihan Web Statis

File statis ringan sehingga memuat situs lebih cepat. Efisiensi biaya adalah alasan penting lainnya mengapa perusahaan cenderung bermigrasi ke situs statis. Di bawah ini adalah beberapa kelebihan situs statis dibandingkan situs tradisional berdasarkan sistem manajemen konten dan skrip sisi server seperti PHP, MySQL dan lain-lain.

Kecepatan

Dengan rendering sisi server, potensi kesulitan terkait pemuatan halaman web menjadi lebih kecil. Di sini, konten situs disajikan sebagai halaman web yang sepenuhnya telah dirender sebelumnya. Sedangkan di situs tradisional, halaman web dibuat terpisah untuk setiap pengunjung. Kecepatan yang lebih baik memberikan peringkat SEO yang lebih baik dan kinerja situs yang lebih baik secara keseluruhan.

Fleksibilitas

Situs web statis memiliki banyak pilihan dalam hal penggunaan kerangka kerja untuk rendering. Kita bebas memilih bahasa pemrograman dan kerangka kerja apa pun mulai dari Ruby, JavaScript, Vue, React, dll. Hal ini membuat pembuatan dan pemeliharaan lebih lancar dibandingkan situs tradisional. Selain itu, situs statis memiliki lebih sedikit ketergantungan. Jadi kita dapat dengan mudah memanfaatkan infrastruktur cloud dan bermigrasi dengan mudah.

Keamanan

Platform web modern lebih rentan terhadap peretasan dibandingkan platform statis. Karena seluruh sistem tetap terhubung, ada banyak peluang untuk memyerang data situs. Namun di situs statis, database konten tetap independen dari antarmuka front-end. Ini memberikan lebih sedikit entri ke peretas sehingga data menjadi lebih aman. Pengunjung situs tidak terhubung ke database pada setiap kunjungan. Ini memberikan keuntungan lain dibandingkan situs web berbasis database.

Apa itu Hugo?

Ada banyak generator situs statis tetapi Hugo mengklaim sebagai kerangka kerja sumber terbuka tercepat dan terpopuler untuk membangun situs web di seluruh dunia. Hugo memberikan kecepatan luar biasa dan fleksibilitas luar biasa untuk membangun situs web dengan mudah.

Hugo awalnya dikembangkan oleh Steve Francia. Performa dan fitur Hugo telah meningkat pesat. Itu dapat menghasilkan situs web dalam hitungan detik. Ini dilisensikan di bawah Lisensi Apache 2.0.

Cara Kerja Hugo

Sebagai pembuat situs web statis, Hugo menggunakan bundel i18n, file data, file statis, templat untuk tata letak, konten yang ditulis dalam file Markdown, mode Org, atau AsciiDoctor, dan menjalankan file tersebut melalui templat tema. Kemudian memecahnya menjadi file HTML yang dapat dengan mudah digunakan melalui internet untuk merender situs web statis. Menariknya, ia melakukan segalanya dengan cukup cepat. Itu dapat membuat situs memiliki 10.000 halaman hanya dalam 10 detik.

Hugo diperdagangkan sebagai executable mandiri, tidak seperti SSG lain yang memerlukan ketergantungan perangkat lunak dan manajer paket. Beberapa fitur yang patut disebutkan adalah pemrosesan gambar, dukungan multibahasa, kode pendek, dan format keluaran khusus. Juga memungkinkan kita memisahkan berbagai jenis konten, seperti blog, podcast, dll.

Menginstal HUGO

Ada banyak cara untuk menginstal HUGO pada sistem yang dijelaskan web resmi HUGO dalam dokumentasi. Tergantung pada distribusi yang dijalankan, distribusi tersebut dapat berada di repositori paket asli sistem. Di Ubuntu hanya perlu menjalankan perintah berikut.

sudo apt install hugo

Setelah Hugo terinstal, kita perlu membuat direktori situs web sehingga kita dapat mulai mengonfigurasi dan memberi tema. Setelah Hugo diinstal, buka direktori induk tempat ingin membangun situs. Ini berbeda dengan tempat situs web akan dipublikasikan ke web dan ini bahkan bisa dilakukan di mesin lokal karena kami akan memindahkan file statis ke direktori publik nanti. Saya biasanya melakukan ini di direktori home saya.

hugo new site contoh.com

Ini akan membangun direktori tempat kita dapat mengkonfigurasi dan membangun situs web.

Memilih Tema di Hugo

Tema akan menjadi titik bagus untuk memulai dengan Hugo. Tema tersedia dalam berbagai bentuk dan ukuran. Kalian selalu dapat melihat tema-tema indah dari galeri tema yang dibuat khusus di situs web resmi Hugo. Faktanya, banyak di antaranya yang gratis. Banyak tema tema menyertakan file contoh untuk membantu memulai. Sekarang mari kita instal tema. Kami sedang mengunduh tema Kiera dalam contoh ini untuk dipasang.

Pertama, buka folder tema di Terminal menggunakan perintah berikut.

cd /themes/

Kemudian untuk mengkloning Kiera ke direktori tema, gunakan Git dengan mengetik:

git clone https://github.com/avianto/hugo-kiera kiera

Terakhir aktifkan Kiera. Seringkali direktori bernama exampleSite disediakan dalam tema Hugo. Ini terdiri dari contoh file pengaturan dan contoh konten. Untuk mengaktifkan tema Kiera, salin dan tempel file config.toml ke blog situs dan lakukan pengeditan konfigurasi yang diinginkan.

cp themes/kiera/exampleSite/config.toml

Kemudian konfirmasi untuk mengganti file config.toml sebelumnya.

Dengan cara ini, tema Kiera akan diinstal dan dikonfigurasi. Hal berikutnya yang harus dilakukan selanjutnya adalah memulai server web pengembangan bawaan Hugo sehingga dapat melihat situs di browser web.