Kulgram Perkenalan SSG dan Hugo

lazt, [14.07.18 20:45]

hallo semua

lazt, [14.07.18 20:45]

kulgram hari ini mau dimulai

lazt, [14.07.18 20:46]

mungkin @ruzfi72 bisa dipersiapkan terlebih dahulu materi dan bahan yang diperlukan

Momo, [14.07.18 20:48]

Materi dan bahan sudah siap, mungkin yang lain bisa mempersiapkan alat yang dibutuhkan :

- git

- hugo

- browser favorit

- text editor favorit

lazt, [14.07.18 20:48]

okee buat temen-temen yang nyimak bisa dipersiapkan bahan yang diperlukan dahulu

lazt, [14.07.18 20:51]

silahkan @ruzfi72, bisa dimulai

Momo, [14.07.18 20:59]

Assalamualaikum warahmatullahi wabarakatuh.

Saya @ruzfi72 akan membawakan kulgram tentang 'Perkenalan SSG (Static Site Generator) dan Hugo'

Momo, [14.07.18 21:00]

Oke Sebelum kita membuat Blog dari SSG mari kita berkenalan dengan apa itu SSG.

Momo, [14.07.18 21:01]

SSG adalah singkatan dari Static-Site-Generator, dari sini mulai bisa dipahami bahwa SSG ini adalah sebuah program yang digunakan untuk membuat halaman statis. Halaman yang sudah dibuat oleh SSG dapat disajikan ke publik melalui Hosting, VPS, dan Layanan yang menyediakan tempat untuk menyajikan halaman statis (seperti GitHub Pages, GitLab Pages, Netlify, maupun Server dan Hosting).

Momo, [14.07.18 21:02]

Sedikit saya kutip kelebihan dari SSG

Momo, [14.07.18 21:02]

Kelebihan dari SSG yaitu tidak menggunakan Database dalam penyajiannya, jadi Keamanan lebih terjamin saat menggunakan SSG sebagai sarana. Dalam penyajiannya menggunakan memori yang lebih sedikit karena tidak membutuhkan proses pencarian konten dari web yang disajikan. Bisa ngedit artikel secara offline dan memperbarui di Hosting saat sudah tersambung ke internet.

Momo, [14.07.18 21:03]

Sampai disini ada pertanyaan?

lazt, [14.07.18 21:05]

mungkin bisa dijelaskan, jika ada kelebihan pasti ada kekurangan

Momo, [14.07.18 21:08]

Kelemahan dari SSG yaitu susah untuk update website ketika tidak berada di komputer dimana blog yang tersaji dibuat. Mungkin masih ada jalan pintas menggunakan server sebagai tempat SSG bekerja

Momo, [14.07.18 21:10]

Setelah sedikit kita mengenal tentang SSG, mari kita mencoba membuat situs Blog menggunakan SSG Hugo. Sebenarnya banyak sekali macam SSG silahkan cek www.staticgen.com untuk melihat daftar program SSG yang tersedia.

Momo, [14.07.18 21:11]

Kenapa *(saya) memilih Hugo?

Momo, [14.07.18 21:12]

Karena ini merupakan SSG yang pertama kali saya pakai dan mereka para developer Hugo mengklaim bahwa Hugo lebih cepat dari SSG lain seperti Jekyll, Octopress, dll.

Momo, [14.07.18 21:12]

Selanjutnya kita akan butuh beberapa alat yang dibutuhkan untuk membuat blog menggunakan Hugo

Momo, [14.07.18 21:13]

sudah saya sebutkan sebelumnya, alat yang dibutuhkan untuk membuat blog menggunakan Hugo sbb :

- git

- hugo

- browser favorit

- text editor favorit

Momo, [14.07.18 21:14]

Oh iya

untuk proses instalasi hugo bisa mengunduh terlebih dahulu executable file-nya di https://github.com/gohugoio/hugo/releases lalu pilih rilis terbaru dan sesuaikan dengan OS beserta arsitektur yang dipakai. untuk Linux turunan Debian bisa memakai perintah dpkg -i hugo_x.xx_Linux-xxbit.deb dan untuk yang menggunakan windows bisa melakukan ektraksi folder hugo dan menambahkan Windows command PATH agar hugo dapat diakses dimana saja melalui cmd

Momo, [14.07.18 21:14]

[ File : env.png ]

virtual environment saya *pengguna windows

Momo, [14.07.18 21:15]

[In reply to Momo]

selebihnya silahkan cek https://gohugo.io/getting-started/installing/ untuk melihat tata cara instalasi hugo jika kurang paham

Momo, [14.07.18 21:17]

Setelah step diatas mari kita cek apakah hugo sudah berhasil terpasang dengan memanggil perintah hugo untuk menampilkan versi yang dipasang hugo version.

Momo, [14.07.18 21:17]

Momo, [14.07.18 21:18]

langsung saja kita buat suatu situs menggunakan hugo dengan memakai perintah hugo new site {nama blog}

Momo, [14.07.18 21:18]

Momo, [14.07.18 21:19]

Setelah step diatas kita lanjut ke sedikit pembahasan mengenai struktur folder yang dipakai oleh Hugo.

Momo, [14.07.18 21:19]

berikut struktur folder yang dipakai Hugo

Momo, [14.07.18 21:20]

direktori archetypes berisi template bawaan yang akan dipakai untuk membuat suatu artikel baru (Front Matter)

Momo, [14.07.18 21:20]

direktori content berisi konten dari blog yang kita buat, hugo memakai markdown sebagai format kontennya

Momo, [14.07.18 21:20]

direktori data berisi data-data yang bisa dimanfaatkan pada tema seperti tag Google-analytics adsense dan lain-lain

Momo, [14.07.18 21:20]

direktori layout berisi tema default blog, jika kita ingin membuat tema default letakkan di sini

Momo, [14.07.18 21:21]

direktori static berisi file statis seperti Gambar, CSS, Js, dll

Momo, [14.07.18 21:21]

direktori themes pastinya berisi tema yang bisa digunakan di Hugo

Momo, [14.07.18 21:21]

Keterangan tersebut mungkin masih kurang betul. jadi mohon dimaklumi

Momo, [14.07.18 21:23]

Setelah memahami struktur folder mari kita coba untuk menyajikan hugo di komputer kita menggunakan salah satu tema yang sudah disediakan di https://themes.gohugo.io/.

Momo, [14.07.18 21:24]

Untuk kali ini saya memakai tema yang bernama pickles. kalian dapat menggunakannya juga dengan mengunduhnya menggunakan git

berikut perintah yang dapat digunakan :

cd themes

git clone -b release https://github.com/mismith0227/hugo_theme_pickles

Momo, [14.07.18 21:29]

[In reply to Momo]

Setelah step tersebut edit config.toml yang berada diluar folder themes, atur agar memakai tema yang sudah ada dalam folder themes menggunakan teks editor favorit masing-masing

Momo, [14.07.18 21:29]

Momo, [14.07.18 21:30]

config.toml

languageCode = "id-id"

title = "{judul blog}"

// themes config

themesDir = "themes"

theme = "hugo_theme_pickles"

Momo, [14.07.18 21:32]

setelah itu dengan memakai fitur server yang disediakan Hugo kita dapat melihat seperti apa blog kosong yang sudah kita buat.

dengan menggunakan perintah

hugo server

maka blog akan tersaji di localhost:1313

Momo, [14.07.18 21:32]

Momo, [14.07.18 21:34]

lazt, [14.07.18 21:53]

[In reply to Momo]

lalu untuk seperti buat artikel atau yang lain gimana ya?

Momo, [14.07.18 21:57]

Jadi ketika ingin buat artikel baru, kita harus berada dalam folder blog berada dan menjalankan perintah hugo new {kategori misal konten}/{judul-blog}.md

Momo, [14.07.18 21:57]

maka dalam folder content akan terbuat folder baru sesuai dengan yang diinginkan seperti contoh diatas konten yang berisi tentang file markdown yang siap diisi artikel

Momo, [14.07.18 21:37]

Okay mungkin itu saja untuk Perkenalan SSG dan Membuat Blog dengan memakai SSG Hugo

Sekian untuk kulgram kali ini, bila ada yang ingin ditanyakan silahkan

Kurang dan lebihnya dari saya mohon maaf.