Membuat Static Blog Menggunakan Wintersmith

Wintersmith.io Logo
Wintersmith.io Logo

Membuat Static Blog Menggunakan Wintersmith – Static blog adalah blog yang tidak memiliki data dinamis atau hanya terdiri dari sekumpulan file-file static seperti HTML, CSS, Javascript serta Images. Dan salah satu platform yang paling sering digunakan untuk membuat blog static ini adalah Jekyll. Kepopuleran Jekyll semakin menjadi-jadi setelah menjadi official static site generator yang diusung oleh Github Pages, yang artinya kita tidak perlu melakukan build file di lokal komputer kita baru kemudian commit ke repository namun dari Github Pages bisa langsung melakukan auto build ketika kode kita commit.

Namun pada tulisan kali ini kita tidak akan membahas Jekyll, tentu saja karena memang sudah terlalu populer dan berbagai tutorial bisa ditemukan dengan mudah bahkan banyak yang berbahasa Indonesia. Kali ini kita akan bahas static site generator lain yakni Wintersmith.

Wintersmith seperti official website-nya menawarkan Flexible, minimalistic, multi-platform static site generator built on top of node.js memiliki beberapa keunggulan dibanding Jekyll menurut saya, diantaranya sebagai berikut :

1. Menggunakan Engine NodeJs
2. Templating dengan PUG/Jade
3. Sudah Tersedia Banyak Plugin Standard

Yuk, cusss kita mulai saja belajar membuat Blog Static menggunakan Wintersmith. Silahkan disimak langkah-langkahnya berikut ini :

1. Instalasi Wintersmith

Wintersmith seperti yang dijelaskan diatas menggunakan engine NodeJS sehingga untuk memasangnya tinggal menggunakan npm saja.

2. Membuat Project Baru

Setelahnya akan langsung digenerate hampir semua kebutuhan dasar dalam blog static termasuk dengan beberapa plugin dasar yang dibutuhkan, dan untuk menjalankan project ini Anda bisa menggunakan perintah :

3. Build File Static

Dan untuk men-generate static file yang nanti bisa kita host dimanapun, termasuk Github Pages , kita bisa menggunakan perintah :

File static akan di generate ke dalam folder build, kita bisa copykan ke branch berbeda sebagai static blog, contoh yang direkomendasikan menggunakan branch gh-pages.

4. Memodifikasi Konfigurasi

Konfigurasi dasar dari wintersmith terdapat pada file config.json, disini terdapat setup dasar seperti title, url, serta plugin yang kita gunakan. Kali ini kita akan coba memodifikasi dan menambahkan beberapa keterangan di config.json dan berikut adalah contohnya, dimana kita menambahkan beberapa keterangan di locals sesuai dengan blog yang akan kita buat :

5. Menambahkan Plugin Baru

Wintersmith punya beberapa plugin yang mungkin akan kita butuhkan, daftar lengkapnya bisa dilihat di wiki plugins mereka.
Yang pertama perlu ditambahkan ketika ingin menggunakan plugin adalah depedency di dalam package.json, kemudian menginstall semua depedency dengan npm install, dan berikut contoh instalasi beberapa pluginyang saya gunakan juga :

5.a. Menambahkan wintersmith-sassify

wintersmith-sassify merupakan plugin yang digunakan ketika kita ingin menggunakan SASS pre-processor dibandingkan CSS biasa, kita menginstall dengan cara

Setelahnya akan ada depedency tambahan di package.json kita, selanjutnya kita akan menambahkan konfigurasi baru di config.json seperti berikut :

Sehingga config.json kita selengkapnya akan menjadi seperti ini :

5.b. Menambahkan wintersmith-tag

wintersmith-tag digunakan untuk menambahkan tag pada artikel yang kita post, instalasinya menggunakan

Setelahnya kita akan mengubah Sehingga config.json kita seperti ini :

Dan untuk menggunakannya, kita hanya perlu menambah tags ditiap atikel markdown yang kita buat, seperti contoh :

5.b. Menambahkan wintersmith-sitemap

wintersmith-sitemap digunakan untuk men-generate file sitemap.xml yang bisa kita submit ke webmaster search engine nantinya, untuk instalasinya kita juga harus menambahakan plugin lainnya yang juga menjadi depedency dari wintersmith-sitemap, seperti berikut :

Setelahnya kita akan menambahkan di config.json pada bagian plugins

Plugin ini akan menghasilkan file sitemap.xml pada saat kita build.

Salah satu contoh blog static yang sudah live dibuat menggunakan wintersmith bisa dilihat di https://ft-umj-4.github.io/story/ dimana kodenya juga bisa dilihat dan dipelajari secara gratis di github https://github.com/ft-umj-4/story, atau lebih lengkap silahkan kunjungi showcase mereka disini.

Demikian panduan membuat blog static menggunakan wintersmith dari saya.
Semoga bermanfaat,

Ditulis oleh Irfan Maulana di siang hari.

Salam