Ahmad Muhardian · 23 Oct 2017

Cara Membaca Dokumentasi Bootstrap 4 Secara Offline

Biasanya kita membaca dokumentasi Bootstrap dari websitenya langsung.

Namun, apabila tidak ada koneksi internet…

Mau baca di mana?

Untungnya dokumentasi Bootstrap dibuat dengan SSG (Static Site Generator) Jekyll. Sehingga kita bisa me-render ulang di localhost untuk dibaca secara offline.

Bagaimana caranya?

Silakan disimak…

Persiapkan Alat yang dibutuhkan

Proyek Bootstrap menggunakan banyak alat-alat (tools) seperti SASS, Jekyll, NPM, Bundler, dll.

Agar kita bisa build dokumentasi secara offline, alat-alat tersebut harus dipersiapkan.

Silakan persiapkan semuanya:

Ketik perintah berikut untuk menginstal Bundler:

sudo gem install bundler

Setelah itu silakan lanjutkan…

1. Clone Repository Bootstrap

Silakan ketik perintah berikut untuk clone repositori Bootstrap dari Github:

git clone --depth 1 https://github.com/twbs/bootstrap.git

Setelah itu, pindah ke direktori bootstrap.

cd bootstrap

2. Install Semua Gem yang dibutuhkan

Gem adalah library dan tool yang dibuat dengan Ruby. Silakan ketik perintah berikut untuk menginstal semua Gem yang dibutuhkan.

sudo bundle install

Tunggulah sampai prosesnya selesai.

3. Install Semua Depedency dari Nodejs

Silakan ketik perintah berikut untuk menginstall semua dependency.

npm install

Tunggulah sampai prosesnya selesai.

4. Menjalankan Server Jekyll

Dokumentasi Bootstrap dibuat menggunakan Jekyll. Jekyll adalah SGG (Static Site Generator) untuk membuat web statis dari file markdown.

Untuk menjalankan server Jekyll, silakan ketik perintah berikut:

npm run docs-serve

atau

bundle exec jekyll serve

Maka akan tampil seperti ini:

Ini artinya server Jekyll sudah berjalan pada port 9001. Sekarang coba buka http://localhost:9001/.

Selesai 🎉…

Sekarang kita sudah bisa membaca dokumentasi bootstrap dari localhost.

Tunggu dulu…

Bagaimana kalau kita ingin baca tanpa harus menjalankan server Jekyll?

Kita bisa memanfaatkan server Apache2 atau XAMPP yang sudah terinstal di komputer.

Caranya:

Kita harus build atau compile dulu dokumentasi Bootstrap. Lalu ditaruh di dalam /var/www/html atau htdocs.

Namun, sebelum melakukan itu, kita harus ubah dulu baseurl-nya.

Silakan buka file _config.yml dengan teks editor, lalu ubah baseurl menjadi seperti ini.

Alamat http://localhost/doc/bs4 adalah alamat yang akan saya gunakan di localhost.

Berarti nanti hasil kompilasinya akan saya taruh di dalam:

/var/www/html/doc/bs4

atau

C:\xampp\htdocs\doc\bs4

Berikutnya, silakan ketik perintah berikut untuk mengkompilasi:

npm run docs-compile

Perintah ini akan melakukan kompilasi dari file markdown ke html.

Hasilnya output-nya bisa dilihat di direktori _gh_pages

Copy semua file ini ke dalam /var/www/html/doc/bs4.

Setelah itu buka http://localhost/doc/bs4/, maka hasilnya:

Selesai. 🎉

Kapanpun kita butuh dokumentasi Bootstrap 4, kita tinggal buka dari sana.

Jika gagal mengkompilasi, kamu bisa copy dari sini: github.com/petanikode/bootstrap4-offline)