Cara Setting Forestry.io Sebagai Post Editor Hugo

Forestry.io adalah sebuah layanan software as a service (SaaS) yang berfungsi sebagai post editor untuk static site generator. Untuk menambah post (artikel) di static site generator hanya memakai text editor dan ditulis dalam syntax Markdown. Nah, dengan Forestry.io, menambah post tidak perlu lagi menggunakan text editor, melainkan editor dari Forestry.io atau biasa disebut dengan istilah WYSIWYG Editor.

Forestry.io mendukung static site generator Hugo, Jekyll, VuePress, dan Gatsby. Layanan dari Forestry.io ini berbayar, namun tersedia juga paket Personal yang bisa digunakan tanpa biaya, selain itu kita dapat menambahkan website statis sebanyak mungkin (Unlimited sites).

Tutorial ini membahas tentang bagaimana cara setting atau menghubungkan Forestry.io dengan website Hugo yang sebelumnya sudah saya deploy ke GitLab Pages.

Menghubungkan Forestry.io dengan Hugo

  1. Buat akun terlebih dahulu di Forestry.io.
  2. Login, lalu klik Add Site.
    Cara Setting Forestry.io Sebagai Post Editor Hugo
    Belum ada website di Forestry.io
  3. Pilih static site generator Hugo, dan pilih versi. Versi yang terpasang di laptop Hugo v0.56.3, sementara versi paling tinggi di Forestry.io v0.56.1, ini tidak ada masalah, bisa berjalan dengan baik.
    Cara Setting Forestry.io Sebagai Post Editor Hugo
    Pilih static site generator
  4. Pilih di mana repository website Hugo berada, saya memakai GitLab.
    Cara Setting Forestry.io Sebagai Post Editor Hugo
    Pilih Git Provider
  5. Tampil pertanyaan untuk mengijinkan Forestry.io mengakses akun GitLab, klik Authorize.
    Cara Setting Forestry.io Sebagai Post Editor Hugo
    Ijinkan Forestry.io mengakses repository GitLab
  6. Pilih nama repository tempat menyimpan website Hugo.
    Cara Setting Forestry.io Sebagai Post Editor Hugo
    Pilih repository
  7. Forestry.io mulai menjalankan importing site.
    Cara Setting Forestry.io Sebagai Post Editor Hugo
    Forestry.io importing site
    Cara Setting Forestry.io Sebagai Post Editor Hugo
    Forestry.io Setting up your site
  8. Untuk menyelesaikan proses setup, klik Mark as done untuk Set up sidebar, Import media, dan Setup preview commands. Lalu klik Complete setup.
    Cara Setting Forestry.io Sebagai Post Editor Hugo
    Finish setup process
    Cara Setting Forestry.io Sebagai Post Editor Hugo
    Setup process done
  9. Selanjutnya buka menu Front matter dan klik Add Template.
  10. Pada Create new template pilih Create based on existing document.
    Cara Setting Forestry.io Sebagai Post Editor Hugo
    Membuat template baru
  11. Beri nama template dan pilih salah satu post yang sudah ada. Lalu klik Create Template.
    Cara Setting Forestry.io Sebagai Post Editor Hugo
    Beri nama template
  12. Hasil dari Create Template seperti di bawah ini.
    Cara Setting Forestry.io Sebagai Post Editor Hugo
    Hasil create template
  13. Selanjutnya membuat Post, klik menu Post, Create new -> Post.
    Cara Setting Forestry.io Sebagai Post Editor Hugo
    Halaman semua posts
  14. Masuk ke post editor, isi Title, Date, Tags, Categories, dan isi dari konten. Opsi Draft disamping tombol Save set Off jika ingin mempublikasi postingan yang dibuat.
    Cara Setting Forestry.io Sebagai Post Editor Hugo
    Post editor membuat post baru
  15. Setelah post disimpan, cek status pipeline di GitLab, Nama Project -> CI/CD -> Pipelines. Commit yang berasal dari Forestry.io diberi pesan Update from Forestry.io – Updated Forestry configuration.
    Cara Setting Forestry.io Sebagai Post Editor Hugo
    GitLab pipelines
  16. Setelah beberapa menit commit atau status pipeline passed, browsing URL dari website Hugo untuk melihat hasilnya.
    Cara Setting Forestry.io Sebagai Post Editor Hugo
    Post yang baru dibuat melalui Forestry.io

Selamat mencoba 🙂

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *