Membuat website statik dengan Gatsby

Intro
Setup develop env
- Node.js
- Git
- Gatsby CLI
- VS code / any code editor
Gatsby Starter
Continues Integration

Intro

Membuat website sebagai portofolio memang impian setiap programmer atau IT specialist, namun terkadang beberapa programmer non web merasa sulit dalam membuat website dikarenakan terlalu banyaknya stack yang cukup membingungkan dalam membuat website. Perlu nya keahlian bahasa Javascript juga membuat beberapa programmer (non web) sedikit kesulitan. Pada akhirnya beberapa dari IT specialist antara harus menghabiskan waktu mempelajari sedikit web dev di luar waktu kerjanya.

Saya juga bukan seorang Webdev, walaupun memang saya punya beberapa skillset seperti html, css dan sedikit javascript yang biasa saya asah hanya agar bisa mempelajari vulnerabilty sejenis xss dan teman-temannya. Ya karena saya pikir itu bukan minat saya.

Sebagai seorang Cybersecurity (Selanjutnya Cybersec) specialist mempunyai website sendiri memang bukan karena saya ingin membuat nya menjadi portofolio, tapi saya ingin memulai untuk menulis sesuatu yang berhubungan dengan Cybersec, berbagi tentang sedikit ilmu yang saya tahu. Atau bahkan untuk membuat progres perjalanan saya dalam mempelajari dunia Cybersec ini.

Oleh karena itu saya tidak terlalu membutuhkan website yang kompleks dan menunjukkan kelihaian saya sebagai webdev, tapi lebih kepada saya ingin menggunakan website tersebut sebagai wadah saya untuk berbagi.

Pilihan untuk membuat website dengan mudah sebenarnya cukup banyak, dulu kita bisa menggunakan blogspot atau cms seperti wordpress dan joomla. Beberapa waktu belakangan ini juga meningkat munculnya beberapa website builder seperti Tilda dan Webflow yang menawarkan opsi lebih fleksibel.

Untuk beberapa cara membuat website tersebut saya sudah mencoba nya, mulai dari blogspot dan wordpress sejak saya smp dulu, yang mana membuat saya untuk kali ini ingin membuat projek yang sedikit berbeda. Platform yang mungkin tidak terlalu mudah namun tidak terlalu kompleks juga bagi saya yang bukan webdev ini.

Maka dari itu pilihan saya mengerucut menjadi statik website dengan engine yang sudah belakangan ini marak, seperti Jekyll, Gatsby atau Hugo. Dari beberapa pilihan tadi saya melakukan beberapa pertimbangan yang mana Hugo cukup bagus dalam membuat static website yang nantinya bisa kita gabungkan dengan git-based CMS seperti Netlify untuk mempermudah mengelola websitenya. Tapi pada akhirnya pilihan saya jatuh pada Gatsby karena penggunaan Javascript nya dan pilihan dalam menggunakan Headless CMS nya yang mudah. Disini saya juga menemukan starter (template) Gatsby page yang saya cukup suka untuk saya pakai sebagai blog / website pribadi saya.

Memulai setup

Untuk membuat Gatsby website disini kita membutuhkan

Node.js versi 14.15 (atau lebih baru)
Git (Untuk version control dengan Github nantinya)
Gatsby command line interface (CLI) (v3 atau lebih baru)
Code / text editor (Saya sarankan menggunakan VS code, atau Sublime text)

Install Node.js

Anda bisa langsung menginstall lewat website Node.Js dengan link ini untuk pengguna windows atau menggunakan

brew install node

untuk pengguna MAC.

Karena saya akan menggunakan wsl saya dalam membuat website Gatsby ini maka dari itu saya harus menggunakan nvm

sudo apt update
sudo apt -y upgrade
sudo apt-get install curl
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
nvm --version

Setelah itu saya harus set default versi Node.js

nvm install 16
nvm use 16
node --version
npm --version

Git

Menginstall git juga cukup mudah, bisa mengikuti link berikut ini

Gatsby CLI

Masuk ke terminal yang kita punya (tergantung dari OS)

npm install -g gatsby-cli

Setelah di install kita cek versi Gatsby CLI kita

gatsby --version
gatsby --help

Dan gunakan --help untuk melihat opsi yang bisa kita lakuin dengan gatsby CLI ini.

VS code

Untuk menginstall VS code bisa cek link berikut

Gatsby starter

Gatsby sendiri punya banyak starter (template) yang sudah jadi. Yang nantinya bisa dengan mudar bisa kita impport dan modifikasi. Untuk di tutorial ini saya akan menggunakan gatsby-starter-portfolio-minimal-theme nya punya Konstantin Muenster yang bisa kita akses di Github nya doi.

Untuk mulai mengimport starter websitenya kita harus pergi ke terminal pilihan kita dan membuat project baru di gatsby dengan command gatsby new

gatsby new portfolio-minimal https://github.com/konstantinmuenster/gatsby-starter-portfolio-minimal-theme

Setelah kita install kita akan masuk ke folder portfolio-minimal dan mulai nge develop projectnya gatsby ini

cd portofolio-minimal
gatsby develop

Setelah itu website kalian akan automatis terlaunch di localhost dengan port 8000 , akses di browser kalian localhost:8000 Demo website.

Berhasil! Sekarang kalian bisa dengan mudah untuk mengedit websitenya dengan code editor favorit kalian

Di folder content kalian bisa menambahkan postingan blog baru kalian dan juga di image folder menambahkan foto yang kalian gunakan di blog kalian.

Seperti yang kalian lihat format halaman untuk blog nya adalah md, atau MarkDown untuk kalian yang masih belum familiar dengan format ini bisa lihat tutorial Markdown saya.

Code Integrations

Sejauh ini website kita sudah terlaunch dengan Gatsby, untuk terakhir tinggal kita menentukan harus dimana kita hosting website kita. Disini saya memutuskan menggunakan Github sebagai hosting karena Github sendiri punya fitur Github Action dan ada Action Github Publish yang juga dapat membantu kita untuk nge deploy website Gatsby ini secara automatis setiap kita membuat perubahan pada kode Gatsby kita menggunakan Version Controlling Git.

Kita bisa mengecek dokumentasinya disini.

Hal pertama yang harus kita lakukan adalah disini menentukan apakah kita mau nge Push website statik kita ke branch main atau gh-pages. Disini kita akan ngepush ke gh-pages agar main kita akan bersih dari kode yang sudah tercompile oleh Gatsby.

untuk itu kita juga harus mengedit sedikit kode gatsby-config.js kita agar nantinya lnk dari website kita itu mempunyai prefix nama repository kita di Github.

edit kode gatsby-config.js kalian dengan menambahkan path_prefix: “/namarepokalian”

module.exports = {
  pathPrefix: "/cybersec-github-pages",
  plugins: [
    {
      resolve: "gatsby-theme-portfolio-minimal",
      options: {
        siteUrl: "https://gatsby-starter-portfolio-minimal-theme.netlify.app/", // Used for sitemap generation
        manifestSettings: {
          favicon: "./content/images/favicon.png", // Path is relative to the root
          siteName: "My Minimal Portfolio", // Used in manifest.json
          shortName: "Portfolio", // Used in manifest.json
          startUrl: "/", // Used in manifest.json
          backgroundColor: "#FFFFFF", // Used in manifest.json
          themeColor: "#000000", // Used in manifest.json
          display: "minimal-ui", // Used in manifest.json
        },
        contentDirectory: "./content",
        blogSettings: {
          path: "/blog", // Defines the slug for the blog listing page
          usePathPrefixForArticles: false, // Default true (i.e. path will be /blog/first-article)
        },
        // googleAnalytics: {
        //     trackingId: "UA-XXXXXX-X",
        //     anonymize: true, // Default true
        //     environments: ["production", "development"] // Default ["production"]
        // }
      },
    },
  ],
};

Saya menambahkan pathPrefix: “/cybersec-github-pages”, sebelum plugin.

Jangan lupa membuat github repo kalian terlebih dahulu dengan mudah. Kemudian setelah itu di settingan repo kita buat secret key yang akan kita gunakan dalam membuat workflow nya Github Action menggunakan Gatsby Publish tersebut.

Settings.

Masukan personal token yang kalian dapatkan di setting Github dan save dengan nama contohnya ACCESS_TOKEN

Kemudian kita buat folder .github -> workflows dan buat file main.yml dengan isi seperti ini

name: Gatsby Publish

on:
  push:
    branches:
      - dev

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: enriikke/gatsby-gh-pages-action@v2
        with:
          access-token: ${{ secrets.ACCESS_TOKEN }}
          deploy-branch: gh-pages
          gatsby-args: --prefix-paths

Dan kembali ke terminal kita kemudian kita add semua file yang kita edit dan commit ke repository github yang tadi kita sudah buat

git add .
git commit -m "Put commit message"
git checkout -b dev
git remote add origin [email protected]:_username kalian_/_link ke git kalian_.git
git push -u origin dev

Setelah kalian melakukan git push, harap tunggu beberapa waktu kemudian kembali cek bagian github actions di repository kalian dan dapat terlihat workflow sedang terdeploy nya Gatsby website kalian ke link yang tertera

website akan biasanya dapat diakses dengan url usernamegithub.github.io/nama-repo-kalian