in Internet

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 🙂

Write a Comment

Comment