Bootstrap4 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?

Silahkan 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.

Silahkan persiapkan semuanya:

  1. Install Git
  2. Install Ruby
  3. Install Nodejs
  4. Install SASS
  5. Install Bundler

Ketik perintah berikut untuk menginstall Bundler:

sudo gem install bundler

Setelah itu silahkan lanjutkan…

1. Clone Repository Bootstrap

Silahkan 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. Silahkan ketik perintah berikut untuk menginstal semua Gem yang dibutuhkan.

sudo bundle install

Tunggulah sampai prosesnya selesai.

Instalasi Gem

3. Install Semua Depedency dari Nodejs

Silahkan ketik perintah berikut untuk menginstall semua depedency.

npm install

Tunggulah sampai prosesnya selesai.

Instalasi depedency dengan NPM

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, silahkan ketik perintah berikut:

npm run docs-serve

atau

bundle exec jekyll serve

Maka akan tampil seperti ini:

Menjalankan Server Jekyll

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

Dokumentasi boostrap offline

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.

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

Mengubah baseurl bootstrap

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, silahkan ketik perintah berikut untuk mengkompilasi:

npm run docs-compile

Perintah ini akan melakukan kompilasi dari file markdown ke html.

Kompilasi dokumentasi bootstrap

Hasilnya output-nya bisa dilihat di direktori _gh_pages

Hasil Kompilasi dokumentasi bootstrap

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

Hasil Kompilasi dokumentasi bootstrap

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

Dokumentasi bootstrap 4 di localhost

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)