Memulai Dengan Hugo: Cara Membuat Situs Web Sederhana

Hugo adalah Generator Situs Statis yang memungkinkan Anda membuat situs web dengan sedikit atau tanpa pengalaman pengkodean. Anda dapat menggunakan tema yang dibuat sebelumnya sebagai dasar untuk desain situs web Anda. Ini memungkinkan Anda untuk lebih fokus mengisi situs dengan konten Anda.

Karena Hugo sebagian besar digunakan untuk situs web statis, Hugo sangat cocok untuk membuat blog, portofolio, atau situs dokumentasi.

Anda dapat dengan mudah mengatur dan membuat situs web Hugo menggunakan tema Hugo yang sudah dibuat sebelumnya. Hanya dengan beberapa langkah singkat, Anda kemudian dapat menambahkan konten dan halaman ke situs web Anda menggunakan penurunan harga.

Cara Menginstal Hugo

Anda perlu menginstal generator situs statis Hugo untuk membuat, menjalankan, dan menguji situs web Hugo. Menurut dokumentasi Hugo, ada banyak cara Anda dapat menginstalnya. Di bawah ini adalah beberapa opsi.

Mac

Anda dapat menginstal Hugo menggunakan Homebrew.

1. Buka terminal macOS Anda.
2. Instal manajer paket Homebrew
   instagram viewer
   .

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

3. Instal Hugo.

   buatan Install pelukan

jendela

Anda akan memerlukan pengelola paket yang setara untuk Windows. Misalnya, Anda dapat menggunakan Manajer paket sendok.

1. Buka Windows PowerShell, yang seharusnya sudah menjadi bagian dari Sistem Operasi Windows Anda.
2. Jika Anda menginstal Scoop untuk pertama kalinya, Anda mungkin perlu mengatur Kebijakan Eksekusi Anda.

   Mengatur-ExecutionPolicy RemoteSigned -cakupan Pengguna Saat Ini

3. Instal Scoop:

   yaitu (baru-object net.webclient).downloadstring('https://get.scoop.sh')
   

4. Instal Hugo:

   sendok Install pelukan

Cara Membuat Proyek Hugo

Untuk membuat proyek Hugo baru, Anda harus menggunakan built-in situs baru hugo memerintah.

1. Buka terminal atau command prompt Anda. Arahkan ke folder tempat Anda ingin membuat proyek.
2. Jalankan situs baru hugo memerintah:

   pelukan baru lokasi baru-hugo-website

3. Arahkan ke lokasi proyek Hugo Anda di file explorer Anda.
4. Buka folder proyek. Anda akan melihat bahwa situs web Hugo baru Anda memiliki struktur file dan folder yang diperlukan agar situs web Anda berfungsi.

Bagaimana Menambahkan Tema

Saat ini, proyek Anda hanya berisi folder dasar utama untuk proyek Hugo. Menjalankan situs web Anda secara lokal pada saat ini hanya akan menampilkan layar kosong. Karena Anda belum menyiapkan desain HTML, CSS, atau UI untuk situs web Anda, Anda perlu menambahkannya.

Hugo sudah menyediakan perpustakaan built-in Tema Hugo dibuat oleh pengembang.

1. Pilih tema yang Anda suka. Setiap tema mungkin memiliki petunjuk penyiapan yang sedikit berbeda, yang ditampilkan di halaman pratinjau masing-masing. Tutorial ini akan menggunakan Tema cerita sebagai contoh.
2. Arahkan ke folder root proyek Anda di terminal atau baris perintah.

   CD baru-hugo-website

3. Jalankan perintah untuk menambahkan tema Tale. Anda dapat menambahkan tema sebagai submodul, yang akan membuat folder baru bernama kisah di dalam tema map.

   git init
   git submodule tambahkan https://github.com/EmielH/tale-hugo.git themes/tale

   Atau, Anda dapat mengkloning repositori kisah GitHub ke dalam folder tema proyek Anda.

   git klon https://github.com/EmielH/tale-hugo.git themes/tale

4. Arahkan ke folder proyek Anda. Klik pada tema folder untuk membukanya. Terlepas dari perintah mana yang Anda gunakan, akan ada yang baru kisah folder yang menyimpan tema yang baru diunduh.
5. Dalam config.toml file, tambahkan tema kisah sebagai bagian dari konfigurasi. Ini akan memberi tahu Hugo untuk menggunakan HTML, CSS, dan gaya lain yang disertakan dalam tema Tale.

   tema = "kisah"

Cara Menambahkan Halaman ke Situs Web Anda

Anda dapat menulis konten Anda dalam format apa pun yang diterima Hugo. Hugo kemudian akan secara otomatis mengonversi file Anda menjadi file HTML saat menyajikannya kepada pengguna. Ini membuatnya cepat untuk membangun dan menyebarkan. Contoh ini akan menggunakan Penurunan harga, bahasa teks biasa yang sederhana, sebagai format untuk konten Anda.

Anda dapat menulis Penurunan harga sebagian besar dalam bahasa Inggris biasa dengan beberapa simbol tambahan untuk menentukan pemformatan apa pun. Ini termasuk menambahkan simbol untuk mewakili judul, kata mana yang dicetak tebal, atau pemformatan dasar lainnya yang mungkin Anda perlukan.

Untuk menambahkan sub-halaman atau posting baru ke situs web Anda, Anda perlu menambahkan file penurunan harga baru ke dalam isi map. Setiap posting atau halaman akan memiliki file penurunan harga sendiri yang terkait dengannya.

1. Buka isi folder di dalam proyek Hugo Anda. Buat file penurunan harga baru bernama myFirstPost.md.
2. Buka file di editor teks apa pun seperti Notepad++ atau Visual Studio Code.
3. Di bagian atas file, tambahkan beberapa metadata. Ini akan mencakup informasi penting tentang posting. Tema yang Anda gunakan akan memformat informasi ini dengan cara tertentu di halaman.

   
   pengarang: "Namamu"
   judul: "Postingan Pertama Saya"
   tanggal: "2022-05-17"
   

4. Setelah Anda menambahkan metadata, Anda dapat mulai menambahkan konten Anda menggunakan penurunan harga.

   Ini adalah posting pertama saya di situs web Hugo saya!
   Tema Hugo yang digunakan untukini situs disebut Tale.
   Dia adalah sangat sederhana untuk menginstal dan mengkonfigurasi.
   # Subjudul
   Ini adalah beberapa konten.
   # Subjudul Lain
   Ini adalah lebih banyak konten.

5. Jangan ragu untuk menambahkan lebih banyak file penurunan harga untuk menambahkan lebih banyak halaman ke situs web Anda.

Cara Menjalankan dan Menguji Situs Web Hugo Anda Secara Lokal

Untuk menjalankan situs web Anda, gunakan servis besar memerintah.

1. Buka terminal atau baris perintah.
2. Arahkan ke folder root proyek Hugo Anda.
3. Jalankan servis besar memerintah:

   servis besar

4. Tunggu hingga situs web menyelesaikan proses startup. Setelah selesai, terminal akan mencetak pesan yang mengatakan alamat lokal mana Anda dapat mengakses situs web. Biasanya, ini adalah http://localhost: 1313/.
5. Buka browser web dan masukkan http://localhost: 1313/, atau alamat mana pun yang diberikan terminal kepada Anda. Anda akan melihat halaman utama situs web Hugo Anda.
6. Pada halaman tersebut akan ada daftar posting untuk setiap file penurunan harga yang Anda miliki. Dalam hal ini, ada dua file penurunan harga yang diisi dengan konten. Ini termasuk halaman myFirstPost.md yang Anda buat sebelumnya. Ini juga termasuk posting baru bernama bananaCakeRecipe.md.
7. Klik tautan judul di salah satu pratinjau. Ini akan membawa Anda ke halaman penuh untuk posting tertentu.

Hosting Situs Web Hugo Anda

Membuat dan menjalankan situs web statis sederhana dan cepat dengan Hugo. Anda dapat menggunakan dan mengonfigurasi tema yang dibuat sebelumnya dan menjalankan situs web Hugo Anda secara lokal untuk pengujian. Anda juga dapat menambahkan halaman konten ke situs web Anda menggunakan penurunan harga.

Setelah Anda membuat situs web Hugo, Anda dapat mulai mempelajari lebih lanjut tentang cara menghostingnya. Ada banyak pilihan hosting situs web gratis untuk Anda pilih seperti Dropbox, Google Drive, atau OneDrive.

Cara Mendapatkan Hosting Situs Web Gratis Dengan Dropbox, Google Drive, atau OneDrive

Baca Selanjutnya