Media Pengembangan Web & App | by APPKEY

Pembuatan Website Mengenal Hugo, Framework untuk Membuat Website Statis yang Ramah...

Mengenal Hugo, Framework untuk Membuat Website Statis yang Ramah Pemula

-

Hugo atau dikenal juga dengan Hugo SSG adalah HTML dan CSS website generator dengan bahasa pemrograman Go Lang atau Go. Dengan Hugo SSG, kita dapat menciptakan static site atau website statis.

Hugo adalah sebuah open-source framework yang saat ini begitu populer di kalangan developer dan programmer. Developer Hugo pun mengklaim, Hugo lebih cepat dibanding SSG lain seperti Jekyll, Middleman, dan Octopress.

Hugo pertama kali dibuat oleh Steve Francia di tahun 2013, yang kemudian mendapat peningkatan besar pada fitur dan performa setelah dikembangkan oleh developer yang dipimpin oleh Bjørn Erik Pedersen sejak tahun 2015.

Saat ini Hugo telah dilisensi dibawah Apache License 2.0. Framework ini memiliki keunggulan diantaranya, cepat, mudah digunakan, dan dapat dikonfigurasi. Hugo SSG mengambil direktori dengan konten dan template dan membuatnya menjadi situs web HTML lengkap.

Hugo SSG mengandalkan Markdown file dengan materi depan untuk metadata, dan Anda dapat menjalankan Hugo dari mana pun. Hal ini membuat Hugo SSG berfungsi dengan baik untuk host bersama dan sistem lain yang Anda tidak memiliki akun dengan hak istimewa. Hugo SSG pun dapat merender situs web berukuran sedang dalam sepersekian detik.

Aturan praktis yang baik adalah setiap konten dirender dalam waktu sekitar 1 milidetik. Hugo dirancang agar berfungsi dengan baik untuk semua jenis situs web termasuk blog, tumbles, dan dokumen.

Berikut langkah mudah membuat website dengan Hugo Static Site:

1. Menginstal Hugo SSG

frmwrkAnda dapat mengunjungi www.gohugo.io lalu klik Quick Start, di sana telah disediakan tutorial lengkap menginstal Hugo lengkap untuk semua OS.

  • MacOS dan Linux, gunakan package manager homebrew
Artikel Terkait  Blogging Adalah? Pengertian Blogging Dalam Dunia Web
Artikel Terkait  Cara Terlengkap dan Termudah Membangun Website Bisnis Travel Menggunakan Wordpress

brew install hugo

  • MacPorts, dapat menginstal Hugo dengan mengikuti one-liner dibawah ini

port install hugo

  • Windows gunakan package manager chocolatey

choco install hugo –confirm

  • Scoop, dapat dilakuan sebagai berikut

scoop install hugo

atau

scoop install hugo-extended

2. Create New Sitefrmwkr-logo

Setelah Anda menginstal Hugo, Anda dapat langsung membuat website baru dengan kode sebagai berikut:

hugo new site ProyekSaya

Perintah ini akan membuat proyek atau folder baru sesuai dengan nama yang Anda ketikkan. Silakan buka text editor untuk melihat instalasi Hugo.

3. Create New Page

Membuat halaman baru pada website Anda dapat mengetik

hugo new posts/post-pertama.md

File yang sudah Anda buat pun akan berisi:

---title: "Post Pertama"date: 2020-08-15T09:44:10+08:00draft: true---

Baris — adalah informasi dari file tersebut, yang bisa berisi banyak hal. Pada kasus ini adalah judul dari kontennya, tanggal dibuat dan apakah dia draft atau bukan.

4. Menambahkan Tema

Setelah membuat website, tentu websitemu belum mempunyai tema atau template dasar yang dapat dilihat. Oleh karena itu, Anda membutuhkan git dalam menginstalnya, namun Anda juga dapat menggunakannya tanpa menginstal git. Hanya saja, penggunaan git lebih memudahkan Anda.

Anda dapat melihat tema pada www.themes.gohugo.io di sini Anda akan menemukan banyak list tema yang cocok. Anda juga dapat membuat tema Anda sendiri dengan mengetik “hugo new theme <THEMENAME>” pada command. Pada contoh ini, kami menggunakan tema Ananke:

git initgit submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

Penjelasan:

git init

Agar dapat mengambil tema berdasarkan link gitnya.

git submodule add..

link repo pada git submodule add adalah link tema yang kita ambil. Anda dapat memilih salah satu dan mengganti link repo di atas berdasarkan info tema yang Anda pilih.

Catatan untuk pengguna non-git

  • Jika Anda belum memasang git, Anda dapat mengunduh arsip versi terbaru tema ini dari: https://github.com/budparr/gohugo-theme-ananke/archive/master.zip
  • Ekstrak file .zip tersebut untuk mendapatkan direktori “gohugo-theme-ananke-master”.
  • Ubah nama direktori itu menjadi “ananke”, dan pindahkan ke direktori “themes /”.
Artikel Terkait  TailwindCSS, untuk Proses Prototyping Desain Web yang Lebih Cepat
Artikel Terkait  Bingung Memilih Hosting Terbaik? Ini Tipsnya!

Setelah memilih tema, hal selanjutnya yang harus dilakukan adalah mengkonfigurasikan tema dengan menjalankan:

echo 'theme = "ananke"' >> config.toml

5. Menambahkan Beberapa Konten

Untuk menambahkan konten Anda dapat membuatnya secara manual dengan contoh sebagai berikut

content/<CATEGORY>/<FILE>.<FORMAT>

Tambahkan metadata di dalamnya, namun Anda dapat menggunakan perintah baru untuk melakukan beberapa hal untuk Anda (seperti menambahkan judul dan tanggal).

6. Menjalankan Server Hugo

Setelah menambahkan konten, Anda dapat menjalankan website Anda. Website ini dapat dilihat di localhost atau baca output dari command tentang informasi localhost Anda. Jika Anda ingin menampilkan konten yang masih berbentuk draft, Anda dapat menambahkam –D seperti contoh berikut.

hugo server –D

7. Mengganti tema Hugo

Mengganti tema Hugo sangatlah mudah. Anda hanya perlu copy paste command git submodule salah satu temanya untuk menginstal. Jika sudah, Anda akan menemukan lebih dari satu tema pada folder themes.

Berikut ini adalah deskripsi dari perintah paling umum yang akan Anda gunakan saat mengembangkan proyek dengan Hugo.

1. Tes Instalasi

Anda dapat mengetes Hugo apakah sudah terinstal dengan baik menggunakan ‘help’ command.

hugo help

Anda akan menemukan berbagai baris yang berisi baris-baris penjelasan.

2. Command pada Hugo

Penggunaan paling umum dalam menjalankan hugo dengan direktori Anda saat ini sebagai direktori masukan. Ini menghasilkan situs web Anda ke direktori public/ secara default, meskipun Anda dapat menyesuaikan direktori keluaran dalam konfigurasi situs Anda dengan mengubah bidang publishDir. Perintah hugo membuat situs Anda menjadi publik / dir dan siap untuk di-deploy ke server web Anda:

hugo

0 draft content

0 future content

99 pages created

0 paginator pages created

16 tags created

0 groups created

in 90 ms

3. Draft, Future, dan Expired Content

Hugo mengizinkan Anda untuk mengatur draft, publishdate, dan expirydate pada konten front matter. Secara default, Hugo tidak akan mempublish:

– Konten dengan nilai future publishdate

– Konten dengan status draft: true

Artikel Terkait  Blogging Adalah? Pengertian Blogging Dalam Dunia Web

– Konten dengan nilai past expirydate.

Ketiganya dapat diganti selama pengembangan dan penerapan lokal dengan menambahkan flag pada hugo dan hugo server atau dengan mengubah nilai Boolean yang ditetapkan ke kolom dengan nama yang sama (tanpa-) dalam konfigurasi:

  1. – –buildFuture
  2. – –buildDrafts
  3. – –buildExpired
Artikel Terkait  Fungsi Paypal | Media Pembayaran Belanja Online

4. LiveReload

Hugo memiliki LiveReload bawaan. Cara paling umum dan sederhana menggunakan Hugo saat mengembangkan situs adalah denga meminta Hugo menjalankan server dengan hugo server command. Berikut perubahannya:

hugo server

0 draft content

0 future content

99 pages created

0 paginator pages created

16 tags created

0 groups created

in 120 ms

Watching for changes in /Users/yourname/sites/yourhugosite/{data,content,layouts,static}

Serving pages from /Users/yourname/sites/yourhugosite/public

Web Server is available at http://localhost:1313/

Press Ctrl+C to stop

Hal ini akan menjalankan server web yang berfungsi penuh sembari mengawasi sistem file Anda untuk menambahkan, menghapus, atau mengubah area berikut dari proyek Anda:

  • /static/*
  • /content/*
  • /data/*
  • /i18n/*
  • /layouts/*
  • /themes/<CURRENT-THEMES/*
  • Config

5. Disable LiveReload

LiveReload bekerja dengan memasukkan JavaScript ke dalam halaman yang dibuat oleh Hugo. Skrip membuat sambungan dari klien soket web browser ke server soket web Hugo. Namun terkadang pengguna perlu melakukan disable pada LiveReload, berikut caranya.

hugo server –watch=false

atau

hugo server –disableLiveReload

Kemudian tambahkan key-value pada file  config.toml atau config.yml seperti berikut:

disableLiveReload = true

disableLiveReload: true

6. Deploy Website Anda

Setelah menjalankan server untuk local webdevelopment, Anda perlu menjalankan final hugo tanpa bagian server dari command untuk membangun ulang situs Anda. Deploy situs hanya perlu dilakukan dengan mengkopi direktori public/ pada produksi web server.

Demikian penjelasan terkait Hugo, tutorial, serta kegunaan dasar fitur-fitur Hugo. Hugo adalah salah satu framework yang baik untuk Anda membuat website statis dan patut Anda coba khususnya bagi developer pemula.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Rekomendasi 10 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

Proses Komunikasi: Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Jasa Pembuatan Website Untuk Toko Online

Perusahaan yang menyediakan Jasa pembuatan website untuk toko online bisa kita temukan dengan mudah di internet. Masing-masing dari perusahaan...

8 Contoh Search Engine Terbaik yang Paling Banyak Digunakan di Indonesia

Dulu jika ingin mencari informasi tentang apapun biasanya kita akan menanyakan kepada seseorang yang lebih mengetahui informasi, atau datang...

Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Domain Google? Apa Bedanya Dengan Domain Biasa?

Saat memutuskan untuk membuat website menjadi salah satu bentuk media digital marketing Anda dalam bersaing di zaman digital ini,...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya