Cara Membangun Situs Statis yang Sangat Cepat Dengan Hugo

Hugo adalah generator situs statis (SSG) yang ditulis dalam Go (alias Golang), bahasa pemrograman terkompilasi berkinerja tinggi yang sering digunakan untuk mengembangkan aplikasi dan layanan backend.

Saat ini, Hugo mampu menghasilkan sebagian besar situs web dalam hitungan detik (<1 ms per halaman). Itu menjelaskan mengapa Hugo menyebut dirinya sebagai “kerangka kerja tercepat di dunia untuk membangun situs web.”

Dalam artikel ini, kita akan melihat sejarah Hugo, apa yang membuatnya begitu cepat, dan bagaimana Anda bisa mulai membangun situs statis Hugo Anda sendiri.

Apa Itu Hugo? Dan Mengapa Ini Populer?

Steve Francia awalnya mengembangkan generator situs statis Hugo pada tahun 2013, dan Bjrn Erik Pedersen mengambil alih sebagai pengembang utama proyek tersebut pada tahun 2015. Hugo adalah proyek sumber terbuka, yang berarti kodenya dapat dilihat dan diperbaiki oleh siapa saja.

Sebagai generator situs statis, Hugo mengambil file konten penurunan harga, menjalankannya melalui template tema, dan mengeluarkan file HTML yang dapat Anda gunakan dengan mudah secara online – dan ia melakukan semua ini dengan sangat cepat.

Pada tahun 2021, ada lusinan, bahkan ratusan, generator statis. Setiap generator situs statis memiliki daya tariknya sendiri. Jekyll populer di kalangan pengembang Ruby, dan meskipun tidak secepat opsi lain, Jekyll adalah salah satu generator situs statis pertama yang diadopsi secara luas. Gatsby adalah SSG populer lainnya yang sangat cocok untuk mengembangkan situs yang dapat digunakan secara statis yang memiliki fungsionalitas dinamis.

Jadi, dengan begitu banyak SSG di luar sana, apa yang membuat Hugo menonjol?

Hugo Cepat

Dalam hal kinerja mentah, Hugo adalah generator situs statis terbaik di dunia. Dibandingkan dengan Jekyll, Hugo terbukti 35x lebih cepat oleh Forestry. Demikian pula, Hugo dapat merender situs 10.000 halaman dalam 10 detik, tugas yang membutuhkan waktu lebih dari setengah jam untuk diselesaikan oleh Gatsby. Hugo bukan hanya SSG tercepat dalam hal waktu pembuatan, tetapi juga cepat untuk dipasang.

Hugo dikirimkan sebagai executable mandiri, tidak seperti Jekyll, Gatsby, dan SSG lain yang memerlukan penginstalan dependensi dengan manajer paket. Ini berarti Anda dapat mengunduh dan menggunakan Hugo segera tanpa harus khawatir tentang ketergantungan perangkat lunak.

Membuat Templat Itu Mudah di Hugo

Dalam istilah SSG, "templating" mengacu pada proses penambahan placeholder untuk penyisipan konten dinamis dalam halaman HTML. Untuk mengakses judul halaman, Anda dapat menggunakan variabel {{ .Title }} . Jadi, dalam template HTML Hugo, biasanya {{ .Title }} dibungkus dengan tag H1 seperti:

 <h1>{{ .Title }}</h1>

Pada waktu pembuatan, Hugo akan secara otomatis mengambil judul di dalam file konten dan menyisipkan judul di antara dua <h1> . Hugo memiliki berbagai variabel templating bawaan, dan Anda bahkan dapat menulis fungsi khusus untuk memproses data pada waktu pembuatan. Untuk templating, Hugo menggunakan pustaka html/template dan text/template bawaan Go. Ini membantu mengurangi aplikasi yang membengkak karena Hugo tidak perlu menginstal perpustakaan pihak ketiga untuk templating.

Berikut adalah contoh templat beranda index.html dari tema Ananke yang populer. Seperti yang Anda lihat, ini menyerupai file HTML standar dengan beberapa kode templat tambahan:

 TBD: GRAB CODE FROM HERE: https://github.com/theNewDynamic/gohugo-theme-ananke

Cara Menginstal Hugo

Hugo dikirimkan sebagai executable yang dikompilasi, yang berarti Anda tidak perlu mengunduh dan mengelola banyak dependensi hanya untuk memulai. Ini tersedia untuk macOS, Windows, dan Linux.

Cara Menginstal Hugo di macOS dan Linux

Metode penginstalan yang disarankan untuk macOS dan Linux memerlukan Homebrew, pengelola paket untuk penginstalan dan pembaruan aplikasi. Jika Anda belum menginstal Homebrew, Anda dapat menginstalnya dengan menjalankan perintah di bawah ini di Terminal:

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Setelah Homebrew diinstal, jalankan perintah di bawah ini untuk menginstal Hugo:

 brew install hugo

Cara Menginstal Hugo di Windows

Untuk pengguna Windows, Hugo dapat diinstal menggunakan manajer paket Chocolatey atau Scoop. Karena instruksi untuk menginstal Chocolatey dan Scoop sedikit lebih rumit daripada Homebrew, kami sarankan untuk merujuk ke halaman dokumentasi resmi mereka di sini dan di sini.

Setelah menginstal Chocolatey atau Scoop, Anda dapat menginstal Hugo menggunakan salah satu dari perintah berikut (tergantung pada manajer paket Anda):

 choco install hugo-extended -confirm

 scoop install hugo-extended

Cara Memverifikasi bahwa Hugo Diinstal dengan Benar

Untuk memverifikasi bahwa Hugo telah diinstal dengan benar, jalankan perintah berikut:

 hugo version

Perintah Terminal ini akan menampilkan informasi mengenai versi Hugo yang saat ini diinstal seperti:

 hugo v0.85.0+extended darwin/arm64 BuildDate=unknown

Perintah dan Konfigurasi Hugo

Sebelum kita masuk ke dalam membuat situs statis dengan Hugo, mari kita kenali berbagai perintah CLI dan parameter file konfigurasinya.

Perintah Hugo CLI

• hugo check – menjalankan berbagai pemeriksaan verifikasi
• hugo config – menampilkan konfigurasi untuk situs Hugo
• hugo convert – mengonversi konten ke format yang berbeda
• hugo deploy – menyebarkan situs Anda ke penyedia cloud
• hugo env – menampilkan versi Hugo dan informasi lingkungan
• hugo gen – menyediakan akses ke berbagai generator
• hugo help – menampilkan informasi tentang suatu perintah
• hugo import – memungkinkan Anda mengimpor situs dari lokasi lain
• hugo list – menampilkan daftar berbagai jenis konten
• hugo mod – menyediakan akses ke berbagai modul pembantu
• hugo new – memungkinkan Anda membuat konten baru untuk situs Anda
• hugo server – memulai server pengembangan lokal
• hugo version – menampilkan versi Hugo saat ini

Hugo CLI juga memiliki berbagai flag untuk menentukan opsi tambahan untuk beberapa perintah. Untuk melihat daftar lengkap flag Hugo (ada banyak), sebaiknya gunakan perintah hugo help untuk menampilkan daftar semua flag yang tersedia.

File Konfigurasi Hugo

File konfigurasi Hugo mendukung tiga format: YAML, TOML, dan JSON. Demikian juga, file konfigurasi Hugo adalah config.yml , config.toml , atau config.json , dan Anda dapat menemukannya di direktori root proyek Hugo.

Berikut tampilan file konfigurasi Hugo dalam format YAML:

 DefaultContentLanguage: en theme: - kinsta-static-site contentdir: content layoutdir: layouts publishdir: public paginate: 5 title: Kinsta Static Site description: "This is a static site generated with Hugo!" permalinks: post: :slug/ page: :slug/ tags: "tag/:slug/" author: "author/:slug/"

Jika Anda pernah menggunakan WordPress atau CMS lain sebelumnya, beberapa opsi konfigurasi mungkin tampak familier bagi Anda. Misalnya, kinsta-static-site adalah nama tema situs, Kinsta Static Site adalah meta judul SEO, dan paginate (jumlah posting per halaman) adalah 5 .

Hugo memiliki lusinan opsi konfigurasi, yang semuanya dapat Anda jelajahi di dokumentasi resmi Hugo. Jika Anda perlu membuat perubahan konfigurasi global saat mengembangkan situs Hugo, kemungkinan Anda perlu mengedit file konfigurasi ini.

Cara Membuat Situs Hugo

Sekarang kita telah melalui cara menginstal dan menggunakan Hugo CLI dan dasar-dasar file konfigurasi Hugo, mari buat situs Hugo baru.

Untuk membuat situs Hugo, gunakan perintah di bawah ini (jangan ragu untuk mengubah situs-hugo saya menjadi sesuatu yang lain jika Anda mau):

 hugo new site my-hugo-site

Selanjutnya, navigasikan ke folder situs, dan Anda akan melihat file dan folder berikut: file config.toml , folder arketipe , folder konten , folder tata letak , folder tema , folder data , dan folder statis . Mari kita cepat membahas apa masing-masing file dan folder ini.

File config.toml Hugo

Seperti yang kami soroti di atas, file konfigurasi utama Hugo berisi pengaturan global untuk situs Anda.

Folder Arketipe Hugo

Folder arketipe adalah tempat Anda menyimpan templat konten yang diformat dalam Penurunan Harga. Arketipe sangat berguna jika situs Anda memiliki banyak format konten. Dengan pola dasar Hugo, Anda dapat membuat template untuk setiap jenis konten di situs Anda. Ini memungkinkan Anda mengisi file penurunan harga yang dihasilkan dengan semua pengaturan konfigurasi yang diperlukan.

Misalnya, jika Anda memiliki tipe konten podcast untuk menampilkan episode podcast, Anda dapat membuat arketipe baru di archetypes/podcast.md dengan konten di bawah ini:

 --- title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} description: "" season: episode: draft: true ---

Dengan pola dasar podcast ini, Anda kemudian dapat menggunakan perintah di bawah ini untuk membuat posting baru:

 hugo new podcast/s1e6_interview-with-kinsta-ceo.md

Sekarang, jika Anda membuka pos yang baru dibuat, Anda akan melihat ini:

 --- title: "Interview with Kinsta CEO" date: 2021-05-20T13:00:00+09:00 description: "" Season: 1 episode: 6 draft: true ---

Tanpa arketipe, Anda harus secara manual menentukan parameter materi depan untuk setiap posting baru yang Anda buat. Meskipun arketipe mungkin tampak rumit dan tidak perlu pada awalnya, mereka dapat menghemat banyak waktu Anda dalam jangka panjang.

Folder Konten Hugo

Folder konten adalah tempat konten posting Anda yang sebenarnya. Hugo mendukung format Markdown dan HTML, dengan Markdown menjadi opsi yang lebih populer karena kemudahan penggunaannya. Selain sebagai ruang penyimpanan umum untuk posting, Anda dapat menggunakan folder konten untuk mengatur konten posting lebih lanjut.

Hugo memperlakukan setiap direktori tingkat atas di folder konten sebagai bagian konten. Bagian konten di Hugo mirip dengan jenis posting khusus di WordPress. Misalnya, jika situs Anda memiliki postingan, halaman, dan podcast, folder konten Anda akan memiliki direktori postingan , halaman , dan podcast tempat file konten untuk berbagai jenis postingan ini akan berada.

Folder Tata Letak Hugo

Folder layout berisi file HTML yang menentukan struktur situs Anda. Dalam beberapa kasus, Anda mungkin melihat situs Hugo tanpa folder layout karena tidak harus berada di direktori root proyek dan sebagai gantinya dapat berada di dalam folder tema.

Mirip dengan tema WordPress yang menggunakan PHP untuk templating, templat Hugo terdiri dari HTML dasar dengan templat dinamis tambahan yang didukung oleh pustaka html/template dan text/template bawaan Golang. Berbagai file template HTML yang diperlukan untuk membuat markup HTML situs Anda ada di folder layout .

Folder Tema Hugo

Untuk situs yang lebih memilih cara yang lebih mandiri untuk menyimpan file dan aset template, Hugo mendukung folder tema . Tema Hugo mirip dengan tema WordPress karena disimpan di direktori tema dan berisi semua templat yang diperlukan agar tema berfungsi.

Sementara beberapa pengguna Hugo lebih suka menyimpan file terkait tema di direktori root proyek, menyimpan file-file ini di dalam folder tema memungkinkan pengelolaan dan berbagi yang lebih mudah.

Folder Data Hugo

Folder data Hugo adalah tempat Anda dapat menyimpan data tambahan (dalam format JSON, YAML, atau TOML) yang diperlukan untuk membuat halaman situs Anda. File data bermanfaat untuk kumpulan data yang lebih besar yang mungkin tidak praktis untuk disimpan secara langsung dalam file konten atau template.

Misalnya, jika Anda ingin membuat daftar tingkat inflasi USD dari tahun 1960 hingga 2020, dibutuhkan sekitar 80 baris untuk mewakili data (satu baris untuk setiap tahun). Alih-alih meletakkan data ini secara langsung dalam file konten atau template, Anda dapat membuatnya di folder data dan mengisinya dengan informasi yang diperlukan.

Folder Statis Hugo

Folder statis Hugo adalah tempat Anda menyimpan aset statis yang tidak memerlukan pemrosesan tambahan. Folder statis biasanya tempat pengguna Hugo menyimpan gambar, font, file verifikasi DNS, dan banyak lagi. Ketika situs Hugo dibuat dan disimpan ke folder untuk penyebaran yang mudah, semua file di folder statis disalin apa adanya.

Jika Anda bertanya-tanya mengapa kami tidak menyebutkan file JavaScript atau CSS, itu karena mereka sering diproses secara dinamis melalui saluran pipa selama pengembangan situs. Di Hugo, file JavaScript dan CSS biasanya disimpan di dalam folder tema karena memerlukan pemrosesan tambahan.

Cara Menambahkan Tema ke Situs Hugo

Mengunduh dan memasang tema siap pakai adalah cara yang bagus untuk memulai dengan Hugo. Tema Hugo tersedia dalam berbagai bentuk dan ukuran, dan banyak di antaranya tersedia gratis di repositori tema resmi Hugo. Mari kita lanjutkan dan instal tema Hyde yang populer di situs Hugo kami.

Pertama, navigasikan ke folder tema proyek Anda di Terminal:

 cd <hugo-project-directory>/themes/

Selanjutnya, gunakan Git untuk mengkloning tema Hyde ke direktori tema proyek Anda.

 git clone https://github.com/spf13/hyde.git

Selanjutnya, tambahkan baris berikut ke file config.toml Anda untuk mengaktifkan tema Hyde:

 theme = "hyde"

Pada titik ini, tema Hyde diinstal dan dikonfigurasi. Langkah selanjutnya adalah memulai server web pengembangan bawaan Hugo untuk melihat situs di browser web Anda.

Cara Mempratinjau Situs Hugo

Hugo dikirimkan dengan server web terintegrasi untuk tujuan pengembangan, yang berarti Anda tidak perlu menginstal server web pihak ketiga seperti Nginx atau Apache hanya untuk melihat situs Anda secara lokal.

Untuk memulai server web Hugo, jalankan perintah di bawah ini di direktori root proyek Anda:

 hugo server -D

Hugo kemudian akan membuat halaman situs Anda dan membuatnya tersedia di http://localhost:1313/ :

Jika Anda mengunjungi URL di browser web Anda, Anda akan melihat situs Hugo Anda dengan tema Hyde:

Secara default, server pengembangan lokal Hugo akan mengawasi perubahan dan membangun kembali situs secara otomatis. Karena kecepatan pembuatan Hugo sangat cepat, pembaruan ke situs Anda dapat dilihat hampir secara real-time – sesuatu yang jarang terlihat di dunia generator situs statis. Untuk mendemonstrasikannya, mari buat postingan pertama kita di Hugo.

Cara Menambahkan Konten ke Situs Hugo

Menambahkan konten ke situs Hugo sangat berbeda dari CMS lengkap seperti WordPress atau Ghost. Dengan Hugo, tidak ada lapisan CMS bawaan untuk mengelola konten Anda. Sebaliknya, Anda diharapkan untuk mengelola dan mengatur berbagai hal sesuai keinginan Anda.

Dengan kata lain, tidak ada cara yang “benar” secara eksplisit untuk melakukan manajemen konten di Hugo. Kami akan membagikan satu metode menambahkan dan mengelola konten di bagian ini, tetapi jangan ragu untuk mengubah banyak hal saat Anda lebih mengenal Hugo.

Bagian Konten di Hugo

Di Hugo, alat organisasi konten pertama yang Anda miliki adalah bagian konten . Bagian konten di Hugo mirip dengan jenis posting di WordPress – Anda tidak hanya dapat menggunakannya sebagai filter konten, tetapi Anda juga dapat menggunakannya sebagai pengenal saat membuat tema khusus.

Misalnya, jika Anda memiliki folder bagian konten blog , Anda dapat menggunakannya untuk menyimpan semua posting blog Anda dan merender template halaman tertentu yang hanya berlaku untuk posting blog.

Cara Menambahkan Postingan di Hugo

Dengan mengingat hal itu, mari buat bagian konten untuk posting blog dan tambahkan beberapa konten. Buat folder baru bernama posting di folder konten proyek Anda – ini adalah bagian konten.

Mari buat layer organisasi lain di dalam folder posts dengan membuat folder 2021 . Pada titik ini, direktori konten Anda akan terlihat seperti ini:

Sekarang, mari kita buat postingan pertama kita. Seperti yang telah kita bahas sebelumnya, Hugo mendukung file Markdown dan HTML untuk konten. Secara umum, lebih baik tetap menggunakan file penurunan harga karena lebih mudah untuk ditulis, diformat, dan dibaca.

Di folder content/posts/2021 , buat file baru yang diakhiri dengan .md (ekstensi file penurunan harga). Anda dapat memberi nama file apa pun yang Anda inginkan, tetapi sintaks yang disarankan untuk memberi nama file konten Hugo adalah YYYY-MM-DD-a-sample-post.md .

Selain membuat file konten secara manual, Anda juga dapat menggunakan Hugo CLI untuk membuat posting baru dengan perintah di bawah ini (pastikan untuk menjalankan perintah dari direktori proyek Anda):

 hugo new posts/2021/2021-08-30-a-sample-post.md

Perhatikan bagaimana folder konten hilang dari jalur di atas. Ini karena Hugo menganggap semua file konten akan masuk ke folder konten secara default.

Jika Anda membuka file konten yang baru dibuat, Anda akan melihat beberapa baris metadata di bagian atas dokumen yang terlihat seperti ini:

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true ---

Metadata ini, yang diformat dalam YAML, disebut "materi depan." Materi depan yang dibuat secara otomatis adalah salah satu manfaat signifikan dari penggunaan Hugo CLI. Bagian depan adalah tempat penyimpanan data unik untuk sebuah posting (nama posting, data, status draft, tag, kategori, dll.) Format default untuk materi depan dapat dikonfigurasi per bagian menggunakan pola dasar.

Sekarang mari tambahkan beberapa teks ke postingan. Saat menulis postingan, selalu pastikan konten Anda berada di bawah bagian depan seperti berikut:

Setelah Anda menyimpan file konten, Anda akan melihat Hugo membangun kembali situs Anda di Terminal. Pada tangkapan layar di bawah, Anda dapat melihat Hugo membangun kembali seluruh situs dalam 22 md!

Jika Anda mengunjungi situs Hugo Anda di browser web Anda, Anda akan melihat posting baru.

Cara Menambahkan Halaman di Hugo

Sekarang kita telah menambahkan sebuah postingan ke situs Hugo kita, mari kita tambahkan sebuah halaman. Sebagian besar sistem manajemen konten, termasuk WordPress, membedakan antara posting dan halaman. Biasanya, sebuah posting adalah konten yang bertanggal, sedangkan halaman terdiri dari konten yang selalu hijau atau statis.

Untuk membuat halaman, pertama-tama kita membutuhkan bagian konten halaman . Untuk melakukan ini, buat folder bernama halaman di folder konten Hugo. Setelah itu, gunakan perintah di bawah ini untuk menambahkan halaman "Tentang" baru ke situs Anda:

 hugo new pages/about.md

Perhatikan bagaimana konvensi penamaan untuk halaman berbeda dari posting. Tidak seperti posting, halaman tidak terikat pada tanggal tertentu, jadi tidak perlu menyertakan tanggal pembuatan dalam nama file.

Sekarang, mari tambahkan beberapa teks ke halaman “Tentang”:

Pada titik ini, Anda akan melihat halaman Tentang di browser web Anda:

Sekarang kita memiliki dua bagian konten — posting dan halaman — mari kita membahas cara membuat beberapa penyesuaian pada situs, seperti mengedit judul dan deskripsi, menambahkan halaman Tentang ke menu bilah sisi, mengubah format tautan permanen, dan menghapus halaman dari umpan posting.

Cara Mengubah Judul dan Deskripsi Situs

Metode yang tepat untuk mengubah judul dan deskripsi situs bergantung pada konfigurasi situs dan/atau tema aktif Anda. Dalam kasus tema Hyde, judul dan deskripsi situs dapat diubah di file konfigurasi Hugo ( config.toml ).

Kami mengetahui hal ini karena kode tema berikut yang membuat bilah sisi:

 <aside class="sidebar"> <div class="container sidebar-sticky"> <div class="sidebar-about"> <a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a> <p class="lead"> {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}} </p> </div> <nav> <ul class="sidebar-nav"> <li><a href="{{ .Site.BaseURL }}">Home</a> </li> {{ range .Site.Menus.main -}} <li><a href="{{.URL}}"> {{ .Name }} </a></li> {{- end }} </ul> </nav> <p>{{ with .Site.Params.copyright }}{{.}}{{ else }} {{ now.Format "2006"}}. All rights reserved. {{end}}</p> </div> </aside>

Dua bagian yang menjadi fokus adalah:

 {{ .Site.Title }}

Dan…

 {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

Setang {{ }} adalah bagian dari mesin templating Hugo dan memungkinkan data yang dihasilkan secara dinamis di halaman yang dirender. Sebagai contoh, {{ .Site.Title }} menginstruksikan Hugo untuk memeriksa file config.toml dan mengambil nilai yang dipetakan ke kunci Judul .

Karena konfigurasi default Hugo menggunakan Situs Hugo Baru Saya sebagai judul situs, itulah yang ditampilkan bilah sisi. Jika kita mengubah judul situs di config.toml menjadi sesuatu yang lain, perubahan itu juga akan terlihat di frontend.

Mari kita lanjutkan dan ubah parameter judul di config.toml dari Situs Hugo Baru Saya menjadi Situs Hugo Kinsta .

Pindah ke deskripsi situs, Anda dapat melihat bahwa mesin templating Hugo mendukung logika bersyarat. Diterjemahkan ke bahasa Inggris biasa, kode di bawah ini menginstruksikan Hugo untuk memeriksa apakah nilai Params ditetapkan ke kunci deskripsi dalam file config.toml . Jika tidak, inilah string default untuk digunakan.

 {{ with .Site.Params.description }} {{.}} {{ else }} An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

Karena kami tidak memiliki deskripsi yang dikonfigurasi dalam file config.toml , default Hugo untuk merender “Sumber terbuka yang elegan dan tema mobile-first untuk Hugo yang dibuat oleh @mdo. Awalnya dibuat untuk Jekyll.”

Sekarang mari kita perbarui file config.toml kita dari:

 baseURL = "http://example.org/" languageCode = "en-us" title = "Kinsta's Hugo Site" theme = "hyde"

Ke:

 baseURL = "http://example.org/" languageCode = "en-us" title = "Kinsta's Hugo Site" theme = "hyde" [params] description = "Kinsta is a premium managed WordPress hosting company."

Seperti yang diharapkan, perubahan sekarang juga terlihat di frontend:

Cara Menghapus Halaman Dari Umpan Pos

Di sebagian besar blog, umpan kiriman di beranda biasanya hanya menampilkan kiriman. Secara default, tema Hyde menyertakan semua file konten di umpan kiriman. Untuk mengubah perilaku ini, Anda harus mengedit fungsi range di template index.html , yang menghasilkan halaman beranda.

Fungsi range Hugo mengulangi serangkaian item yang ditentukan dan kemudian melakukan sesuatu dengan data. Secara default, template index.html tema Hyde berkisar pada .Site.RegularPages dan menyaring data seperti permalink, judul posting, dan ringkasan posting sebelum merender HTML.

Karena .Site.RegularPages mencakup semua halaman biasa di Hugo, termasuk posting dan halaman, halaman "Tentang" dirender. Dengan mengubah item range menjadi .Site.RegularPages "Section" "posts" , kita dapat menginstruksikan Hugo untuk hanya memfilter melalui halaman biasa di bagian posts – file konten di folder posts yang kita buat sebelumnya.

Mari buat perubahan itu sekarang dengan mengedit template dari ini:

 {{ define "main" -}} <div class="posts"> {{- range .Site.RegularPages -}} <article class="post"> <h1 class="post-title"> <a href="{{ .Permalink }}">{{ .Title }}</a> </h1> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> {{ .Summary }} {{ if .Truncated }} <div class="read-more-link"> <a href="{{ .RelPermalink }}">Read More…</a> </div> {{ end }} </article> {{- end }} </div> {{- end }}

Untuk ini:

 {{ define "main" -}} <div class="posts"> {{- range where .Site.RegularPages "Section" "posts" -}} <article class="post"> <h1 class="post-title"> <a href="{{ .Permalink }}">{{ .Title }}</a> </h1> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> {{ .Summary }} {{ if .Truncated }} <div class="read-more-link"> <a href="{{ .RelPermalink }}">Read More…</a> </div> {{ end }} </article> {{- end }} </div> {{- end }}

Setelah melakukan perubahan ini, halaman beranda hanya akan menampilkan postingan seperti ini:

Cara Menggunakan Parsial di Hugo

Salah satu fitur templating Hugo yang paling kuat adalah parsial – templat HTML tertanam di templat HTML lain. Sebagian memungkinkan penggunaan kembali kode di berbagai file template tanpa mengelola kode di setiap file.

Misalnya, biasanya melihat bagian halaman yang berbeda (header, footer, dll.) dalam file parsial yang terpisah, yang kemudian dipanggil dalam file template baseof.html tema.

Di dalam file baseof.html dalam tema Ananke, Anda dapat melihat contoh parsial pada Baris 18 – {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} .

Dalam hal ini, {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} menginstruksikan Hugo untuk mengganti isi Baris 18 dengan site-style.html di folder /layouts/partials . Jika kita menavigasi ke /partials/site-style.html , kita melihat kode berikut:

 {{ with partialCached "func/style/GetMainCSS" "style/GetMainCSS" }} <link rel="stylesheet" href="{{ .RelPermalink }}" > {{ end }} {{ range site.Params.custom_css }} {{ with partialCached "func/style/GetResource" . . }}{{ else }} <link rel="stylesheet" href="{{ relURL (.) }}"> {{ end }} {{ end }}

Dengan membongkar kode ini ke file terpisah, file template baseof.html dapat tetap teratur dan mudah dibaca. Sementara parsial tidak diperlukan, terutama untuk proyek dasar, mereka berguna untuk proyek yang lebih besar dengan fungsionalitas yang lebih kompleks.

Cara Menggunakan Kode Pendek di Hugo

Kode pendek Hugo mirip dengan parsial karena memungkinkan penggunaan kembali kode di berbagai halaman. Shortcode adalah file HTML yang berada di folder /layouts/shortcodes . Perbedaan utama adalah bahwa sebagian berlaku untuk template HTML, sedangkan kode pendek berlaku untuk halaman konten penurunan harga.

Di Hugo, kode pendek memungkinkan Anda mengembangkan modul fungsionalitas yang dapat Anda gunakan di halaman di seluruh situs Anda tanpa mengelola perubahan kode untuk setiap halaman.

Jika Anda menjalankan sebuah blog, kemungkinan besar Anda harus memeriksa isi postingan Anda untuk memperbarui referensi tahun ke tahun berjalan. Bergantung pada berapa banyak posting yang Anda miliki di situs Anda, tugas ini bisa memakan waktu lama!

Dengan menggunakan kode pendek Hugo di file konten Anda, Anda tidak perlu khawatir untuk memperbarui referensi tahun lagi!

Mari kita mulai dengan membuat shortcode di /layouts/shortcodes/current_year.html dengan isi di bawah ini:

 {{ now.Format "2006" }}

Kode pendek dapat disematkan ke dalam posting dengan sintaks ini – {{< shortcode_name >}} . Dalam kasus kami, kami dapat memanggil kode pendek current_year.html dengan {{< shortcode_name >}} seperti:

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true --- This post was created in the year {{< current_year >}}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus, velit sit amet vulputate scelerisque, massa turpis fringilla nulla, commodo dapibus urna arcu at nunc. Mauris ultrices convallis ipsum eget facilisis. Curabitur ut rutrum sem. Praesent id nibh non enim mollis porta. Nam mollis, quam et vehicula tristique, lorem ante laoreet orci, sit amet congue tortor nibh sit amet leo. Curabitur lobortis neque tempor, vestibulum lacus nec, condimentum arcu. Nulla fringilla leo sit amet ipsum auctor sagittis. Vivamus aliquam iaculis posuere. Pellentesque malesuada neque sit amet consectetur fringilla. Curabitur felis tellus, mattis in dui vel, vestibulum tincidunt metus. Mauris eget elit dui. Etiam risus nulla, ultricies vitae molestie quis, placerat in magna. Proin interdum, orci ac auctor ullamcorper, tellus ex porta tortor, suscipit luctus libero odio quis arcu. Phasellus dapibus pellentesque ex eget pulvinar. Proin vitae elit risus. Sed justo nulla, pellentesque eu erat eu, luctus bibendum magna. Curabitur at mi id augue egestas condimentum sed quis lectus. Aenean fringilla nisl sed tincidunt tristique. Cras scelerisque laoreet sapien a faucibus. Vivamus a vehicula arcu. Duis rutrum, massa eu tincidunt eleifend, est nulla faucibus nisl, sit amet consectetur neque velit at velit. Integer fermentum augue ut orci iaculis aliquet. Ut in gravida magna.

Jika Anda melihat postingan di browser web, Anda akan melihat tahun berjalan di baris pertama postingan seperti ini:

Cara Menambahkan Gambar ke Postingan di Hugo

Tidak seperti WordPress dan sistem manajemen konten lengkap lainnya, Hugo tidak menyertakan sistem drag-and-drop untuk mengelola gambar. Dengan demikian, merancang sistem manajemen gambar diturunkan ke pengguna akhir.

Meskipun Hugo tidak memiliki cara standar untuk mengelola gambar, satu metode populer bergantung pada penyimpanan gambar di folder /static dan mereferensikannya di postingan dan halaman menggunakan kode pendek. Mari kita telusuri bagaimana Anda dapat melakukan pengorganisasian gambar dasar di Hugo.

Hal pertama yang perlu kita lakukan adalah membuat struktur organisasi untuk perpustakaan gambar kita. Meskipun ini terdengar rumit, yang diperlukan hanyalah pembuatan beberapa direktori tambahan di dalam folder /static .

Mari kita mulai dengan membuat folder unggahan di /static . Di dalam folder unggahan , buat folder bernama 2021 untuk menampung semua gambar yang diunggah pada tahun 2021.

Selanjutnya, mari tambahkan dua gambar ( blue1.jpg dan blue2.jpg ) ke dalam folder 2021 .

Dalam HTML, gambar ditampilkan menggunakan <img> . Misalnya, untuk menampilkan blue1.jpg , kita bisa menggunakan HTML di bawah ini:

 <img src="/uploads/2021/blue1.jpg" alt="Blue is the warmest color!">

Meskipun HTML ini dapat ditambahkan langsung ke file konten Penurunan harga, lebih baik buat kode pendek yang dapat Anda gunakan untuk menampilkan gambar apa pun dari folder unggahan. Dengan cara ini, jika Anda perlu memperbarui tag img , Anda dapat mengedit template kode pendek tanpa mengedit setiap tag img .

Untuk membuat template shortcode, buat file baru di /layouts/shortcodes/img.html dengan konten di bawah ini:

 <img src="/uploads/{{ .Get "src" }}" alt="{{ .Get "alt" }}

Selanjutnya, tambahkan kode pendek di bawah ini ke posting blog:

 {{< img src="2021/blue1.jpg" alt="Blue is also the coolest color!">}

Dalam template kode pendek, {{ .Get "src" }} dan {{ .Get "alt" }} menginstruksikan Hugo untuk mengambil konten dari parameter src< dan alt< saat memanggil kode pendek.

Sekarang, jika Anda memuat ulang posting blog, Anda akan melihat gambar seperti ini:

Cara Menyebarkan Situs Hugo

Hingga postingan ini, Anda telah mempelajari cara menginstal Hugo, membuat situs, menambahkan tema, melakukan pengeditan dasar pada file konfigurasi, dan memperluas fungsionalitas situs Anda dengan sebagian dan kode pendek. Pada titik ini, Anda harus memiliki situs fungsional yang siap digunakan secara online.

Karena Hugo adalah generator situs statis, Anda dapat menerapkan HTML, CSS, dan JS yang dihasilkannya di mana saja dengan server web. Karena persyaratan teknis untuk melayani situs statis sangat rendah, Anda dapat menghostingnya secara gratis di berbagai penyedia seperti Netlify, Vercel, Cloudflare Pages, dan banyak lagi.

Sebelumnya, kami menggunakan hugo server -D untuk menjalankan server pengembangan lokal untuk melihat pratinjau perubahan pada situs kami secara real-time. Untuk menghasilkan situs secara penuh, kita dapat menggunakan perintah hugo di direktori root proyek kita. Setelah pembuatan situs selesai, Anda akan melihat folder publik baru di direktori proyek Anda. Di dalam folder ini, Anda akan menemukan semua file yang perlu diunggah ke server atau layanan penyimpanan cloud seperti Amazon S3.

Membuat situs Anda secara lokal dan mengunggahnya secara manual ke Amazon S3 atau server yang menjalankan Nginx adalah salah satu cara untuk menerapkan situs yang dibuat secara statis. Namun, ini bukan yang paling efisien karena mengharuskan Anda mengunggah file baru secara manual setiap kali Anda membuat perubahan.

Sebagai gantinya, opsi yang lebih baik adalah menautkan folder proyek Hugo Anda ke repositori GitHub dan menautkan repositori GitHub ke layanan penerapan otomatis seperti Netlify. Dengan pengaturan ini, Anda dapat mengedit situs Anda, mendorong perubahan ke GitHub, dan memicu pembuatan dan penerapan baru di Netlify tanpa intervensi manual. Sekarang, mari kita telusuri bagaimana melakukan semua ini!

Cara Mengunggah Proyek Hugo Anda ke GitHub

Pertama, Anda harus membuat repositori GitHub untuk proyek Anda. Untuk melakukannya, buat akun GitHub (jika Anda belum memilikinya) dan unduh aplikasi desktop GitHub resmi. Setelah menginstal aplikasi GitHub, klik File di bilah menu dan pilih New Repository . Beri nama repositori yang Anda pilih, biarkan opsi lain dalam status defaultnya untuk saat ini, dan klik Create Repository .

Secara default (di macOS), aplikasi GitHub membuat repositori baru di /Users/username/Documents/GitHub . Karena kami menamai repositori kami my-hugo-site , repositori kami dapat ditemukan di /Users/brianli/Documents/GitHub/my-hugo-site .

Selanjutnya, pindahkan semua file di folder proyek asli Anda ke folder repositori GitHub baru. Pastikan untuk menghapus folder publik karena kita tidak perlu mengunggah folder itu ke GitHub.

Jika Anda menavigasi kembali ke aplikasi GitHub, Anda sekarang akan melihat daftar file yang diubah. Untuk mengunggah repositori ke GitHub, tambahkan ringkasan, klik Commit to main , dan klik Publish Repository di sudut kanan atas.

Secara default, opsi "Simpan kode ini pribadi" dicentang. If you want your code to be open-source and publicly accessible, feel free to uncheck it. Finally, click Publish Repository once again.

Now, if you go to GitHub, you should see your repository online like so:

How to Link GitHub Repo to Netlify

If you don't already have a Netlify account, sign up for one here. To link a GitHub repository to Netlify, click New site from Git in the Netlify dashboard.

Under Continuous Deployment , select the GitHub option.

Next, use the search box to find your Hugo project repository.

Next, specify the settings for the continuous deployment. Since Netlify can detect a Hugo configuration, the default settings should work fine for a basic deployment.

As you get more familiar with Hugo, you may delve into environment variables, custom build commands, and more. For the time being, setting the build command to hugo and the public directory to public will allow you to deploy a simple Hugo site. After specifying the build command and public directory, click Deploy Site .

Karena Hugo adalah generator situs statis yang sangat cepat, penerapannya hanya membutuhkan beberapa detik untuk situs dasar. Setelah penerapan selesai, Anda akan dapat melihat URL staging di dasbor Netlify. Klik URL untuk melihat situs yang diterapkan.

Inilah situs Hugo kami di Netlify. Seperti yang Anda lihat, ini identik dengan situs di lingkungan lokal kami:

Pada titik ini, Anda dapat menyiapkan domain khusus dan sertifikat SSL untuk situs yang dihosting Netlify. Untuk melakukannya, kami sarankan untuk merujuk ke dokumentasi resmi Netlify.

Karena kami telah menautkan Netlify ke GitHub, komitmen baru ke repo GitHub proyek Hugo akan secara otomatis memicu penerapan baru di Netlify!

Ringkasan

Hugo adalah salah satu generator situs statis paling populer di dunia, dan untuk alasan yang bagus. Tidak hanya memiliki pemrosesan build super cepat, tetapi juga dikirimkan dengan kemampuan templating yang kuat yang mendukung parsial dan kode pendek.

Dalam tutorial ini, Anda mempelajari cara mengonfigurasi Hugo, membuat proyek baru, menambahkan file konten, mengedit file tema, dan menerapkan situs statis yang telah selesai. Kami merekomendasikan untuk membaca dokumentasi resmi Hugo untuk mempelajari lebih lanjut tentang Hugo dan fitur-fiturnya yang lebih canggih seperti fungsi kustom, materi depan, dan buildpack CSS/JS.

Apa pendapat Anda tentang Hugo dan generator situs statis lainnya? Beri tahu kami di komentar di bawah!