Membuat Blog JAMSTACK dengan Framework GATSBYJS PART 1

August 10, 2020

Muhammad Syukri

NOTE: Tulisan pertama saya di blog ini dengan menggunakan JAMStack. Setelah sekian lama tidak menulis Blog!

Apa itu JAMStack?

Apa yang saya pelajari dari pemrograman JAMStack dengan Framework Gatsby sangat menyenangkan. Banyak hal yang saya dapat pelajari disini. Ini bukan bahasa pemrograman biasa seperti halnya HTML, Namun gabungan dari JavaScripts+API+Markup/HTML dan Library ReactJs.

JAMStack adalah bahasa pemrogram luar biasa untuk membangun sebuah frontend website yang ciamik, cantik, cepat dan menyenangkan. Sungguh sangat menggoda saya untuk terus memperdalamnya sampai mahir. Sample web yang saya kembangkan dengan JAMStack bisa dilihat di link ini https://www.aretacollege.com atau web blog ini https://syukrie.aretacollge.com sendiri menggunakan JAMStack.

Langkah Persiapan

Pada tahap ini anda harus mempersiapkan segala sesuatunya seperti, nama domain yang akan digunakan boleh domain utama atau subdomain. Konsep website yang akan dibangun berupa landingpage, blog, atau web profile dll.

Pada kasus ini saya akan membahasa pembuat web blog dengan konsep blog ini adalah untuk membuat dokumentasi atau catatan harian pribadi saya selama belajar pemrograman JAMStack dengan GatsbyJs. Subdomain yang akan saya gunakan syukrie.aretacollege.com yang menginduk dari domain utama aretacollege.com.

Membuat Akun Github

Langkah-langkah membuat akun di Github secara gratis

Anda dapat mendaftar di Github dengan gratis, akses websitenya di https://github.com. Berikut tampilan halaman Github.
Jika anda sudah mendaftar, maka akan tampil halaman Github seperti berikut:
Create repository di github dengan klik tombol menu New, buat nama repository sebagai contoh syukrie-blog. Terlihat seperti gambar berikut:
Berikutnya klik Create Repository untuk melakukan penyimpanan
Setelah membuat repository, maka akan terbentuk sebuah repo dengan yang sudah anda buat, misalnya syukrie-blog. Berikut tampilan gambarnya:

Disinilah tempat anda menyimpan file-file dan dokumen-dokumen blog anda.

Membuat Domain/Subdomain di Cloudflare

Pada contoh kasus disini saya akan menjelaskan bagaimana membuat subdomain di cloudflare.com. Agap saja anda sudah punya domain utama, sebagai contoh saya punya domain utama yakni aretacollege.com. Berikut adalah langkah-langkahnya:

Buka website cloudeflare.com, tampilan websitenya seperti gambar berikut:
Jika anda belum memiliki akun di cloudflare, silahkan daftar gratis kog. Cara daftarnya klik menu Sign Up.
Setelah berhasil mendaftar, anda akan masuk ke dashboard. Pilih Add domain, lalu pilih domain anda. Sebagai contoh saya membuat subdomain syukrie.aretacollege.com, maka pilih Add record kemudian pilih CNAME, contoh seperti gambar berikut:

KETERANGAN: Name: syukrie adalah subdomain yang saya buat dengan tipe CNAME, target syukrie77.github.io yang merupakan alamat website saya di github.com yang sudah saya daftarkan. Sebaiknya sebelum melakukan setting ini anda sudah membuat akun di github.

Untuk melakukan pengetesaan bahwa subdomain anda sudah aktif lakukan perintah nslookup di console atau terminal anda, seperti terlihat di gambar berikut:

Langkah-langkah build file gatsbyjs ke github.com

Masuk ke folder dokumen gatsbyjs anda, misalnya
```
$cd personal-blog
```
develop local file gatsbyjs anda dengan perintah berikut:
```
$gatsby build
```
Buat repository di github, langkah-langkahnya sudah kita bahas sebelumnya di atas.
Install plugin gh-pages di console atau terminal anda seperti perintah berikut:
```
$npm install gh-pages
```
Edit file gatsby-config.js tambahkan folder sesuai dengan repostory anda di github
```
$vi gatsby-config.js
```
```
module.exports = {
pathPrefix: "/syukrie-blog",
}
```

Buat perintah deploy di file package.json

$vi package.json

{
"scripts": {
"deploy": "gatsby build --prefix=paths && gh-pages -d public"
}
}

Lakukan remote terhadap git anda dengan perintah berikut:

$git remote add origin https://github.com/syukrie77/syukrie-blog.git

Jalankan perintah deploy seperti berikut:
```
$npm run deploy
```

Edit file gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Personal Blog Syukrie`,
    description: `Personal Blog Sederhana Syukrie.`,
    author: `@syukrie`,
    avatar: `https://avatars0.githubusercontent.com/syukrie77`,
    siteUrl: `https://syukrie.aretacollege.com`,
  },

Edit file about.js di folder /src/pages

$vi about.md

---
title: About
---
Assalamualaikum Warahmatullahi Wabarakaatuh.

Personal Blog ini saya buat sebagai tempat menuliskan dokumentasi dan tutorial tentang apa saja yang saya pelajari baik di dunia IT, Bisnis, dan Digital Marketing. Saya sangat senang dengan pemrograman, networking, dan sistem server. Keseharian saya membuat program, menulis, dan berbisnis.

**Less is more..**

Langkah-langkah yang harus anda lakukan adalah sebagai berikut:

Gunakan gatsby new alamat-repository dari terminal atau console untuk mendownload file repository simple blog dengan berikan perintah berikut:

$gatsby new personal-blog https://github.com/wangonya/the-plain-gatsby