Ringkasan

Tulisan ini berisi cara migrasi dari wordpress ke hugo bagian kedua dari dua bagian :

Persiapan Awal

Di tulisan kemarin, kita sudah membahas cara migrasi wordpress ke hugo. Di kesempatan kali ini, kita akan melanjutkan proses selanjutnya, yaitu deployment web kita supaya bisa diakses secara publik alias daring/online.

Karena sudah menggunakan hugo, kita tidak perlu sewa hosting lagi untuk menaruh web kita. Kita bisa menggunakan static web hosting gratisan yang banyak tersedia. Ada GitHub Pages, GitLab Pages, Firebase Hosting, dll. Untuk tutorial kali ini saya menggunakan github pages.

Sebelum memulai, yang perlu kita siapkan adalah :

Aplikasi git
Akun github
Domain (opsional)
Web/proyek hasil konversi wp ke hugo

Langkah-langkah

Berikut ini adalah langkah-langkah/proses yang harus kita lakukan supaya web kita bisa diakses publik menggunakan github pages :

1. Tes/Uji Coba Web

Pastikan web yang kita buat dengan hugo sudah sesuai dengan apa yang kita inginkan, sebelum kita lakukan deployment. Kita bisa tes terlebih dahulu di lokal dengan menjalankan perintah hugo server. Perintah ini akan mejalankan web server lokal & build konten hugo yang telah kita buat. Untuk mengakses web versi lokal, bisa diakses melalui alamat http://localhost:1313. Sesuaikan tampilan, konten web jika masih ada yang kurang atau perlu diperbaiki.

2. Setup Repo Git

Web sudah dites & dirasa oke? Bagus👍 Selanjutnya, kita ingin memasukkan poyek web kita ke repo git supaya nanti bisa diunggah ke github sehingga akhirnya bisa diakses secara daring. Berikut langkah-langkahnya :

1. Inisialisasi Repo Git

Jalankan perintah berikut di dalam folder proyek web hugo untuk inisialisasi repo git :

git init

2. Tambahkan file `.gitignore`

Tambahkan file .gitignore di dalam folder proyek hugo/web. Isinya file kurang lebih seperti berikut :

# # Basic gitignore template for Hugo SSG - which has some stuff for WordPress migration
# #
# # This is a template .gitignore file for git-managed Hugo projects.
# #
# # Fact: you don't want Hugo core files, or your server-specific
# # configuration files etc., in your project's repository. You just don't.
# #
# # Ignore everything in the root except the "content" directory and "static"
# /*
!.gitignore
!content/
!*.toml
!static/

# #OS generated files
.DS_Store

# Hugo build output
/public/
/resources/

# Hugo logs and caches
/.hugo_build.lock
/hugo_stats.json
/.hugo_cache/

# Temporary files and backups
*.tmp
*.bak
*.swp
*.swo

# OS generated files
.DS_Store
Thumbs.db

# IDE and Editor settings
.vscode/
.idea/
*.iml

# Node.js dependencies (if applicable)
node_modules/
package-lock.json
yarn.lock
pnpm-lock.yaml

Inti dari isi file .gitgnore diatas adalah hanya file/berkas & folder tertentu saja yang akan kita masukkan ke dalam repo git. Selain itu, tidak dianggap masuk ke repo.

3. Automasi dengan GitHub Actions

Supaya ketika kita melakukan update repo jika ada perubahan/penambahan konten web & web kita langsung berubah kontennya, kita bisa menggunakan GitHub Actions untuk melakukan automasi build web kita. Berikut ini langkah-langkahnya :

Buat folder .github/workflows/
Buat file hugo.yml di dalamnya:

# Sample workflow for building and deploying a Hugo site to GitHub Pages
name: Deploy Hugo site to Pages

on:
    # Runs on pushes targeting the default branch
    push:
    branches:
        - main

    # Allows you to run this workflow manually from the Actions tab
    workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
    contents: read
    pages: write
    id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
    group: "pages"
    cancel-in-progress: false

# Default to bash
defaults:
    run:
    shell: bash

jobs:
    # Build job
    build:
    runs-on: ubuntu-latest
    env:
        HUGO_VERSION: 0.140.0
    steps:
        - name: Install Hugo CLI
        run: |
            wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
            && sudo dpkg -i ${{ runner.temp }}/hugo.deb            
        - name: Install Dart Sass
        run: sudo snap install dart-sass
        - name: Checkout
        uses: actions/checkout@v4
        with:
            submodules: recursive
            fetch-depth: 0
        - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v5
        - name: Install Node.js dependencies
        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
        - name: Build with Hugo
        env:
            HUGO_CACHEDIR: ${{ runner.temp }}/hugo_cache
            HUGO_ENVIRONMENT: production
            TZ: America/Los_Angeles
        run: |
            hugo \
            --gc \
            --minify \
            --baseURL "${{ steps.pages.outputs.base_url }}/"            
        - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
            path: ./public

    # Deployment job
    deploy:
    environment:
        name: github-pages
        url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
        - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

3. Deployment

Repo git sudah siap. Selanjutnya, kita akan menghubungkan repo git ke github. Berikut langkah-langkahnya :

1. Buat repositori GitHub

Buat repo git baru di akun github untuk menaruh web kita.

Pergi ke GitHub → Klik New Repository
Isi Repository Name → misalnya USERNAME.github.io
Pilih Public → Klik Create Repository

Untuk pemilihan nama repository, wajib menggunakan format USERNAME.github.io supaya web bisa diakse dengan alamat USERNAME.github.io. Contoh, jika nama username github kita adalah agasigp, maka web kita nanti akan bisa diakses menggunakan alamat agasigp.github.io

2. Hubungkan dengan GitHub

Jalankan perintah berikut di dalam folder proyek/web hugo untuk menguhubungkan repo git kita ke github & mengunggah repo git ke github :

git remote add origin https://github.com/USERNAME/USERNAME.github.io.git
git branch -M main
git add .
git commit -m "Initial commit"
git push -u origin main

Proses deployment menggunakan github actions akan berjalan ketika kita melakukan update ke repo github melalui perintah git push -u origin main. Proses deployment membuthkan waktu 1-2 menit.

3. Akses Web

Selamat, web anda sudah bisa diakses melalui alamat https://USERNAME.github.io🎉

4. Kustomisasi Domain (Opsional)

Jika ingin web kita tidak menggunakan alamat lain selain usename.github.io, kita bisa menggunakan domain kita sendiri untuk alamat web kita, misal agasigp.web.id atau blog.agasigp.web.id. Berikut langkah-langkah nya :

Verifikasi domain untuk github pages Verifikasi domain penting supaya domain kita tidak bisa digunakan oleh orang lain yang ingin membuat github pages dengain domain yang kita miliki. Cara verifikasinya bisa dilihat disini.
Konfigurasi domain untuk github pages Setelah verfikasi domain berhasil, kita tinggal mengatur domain kita ke github pages. Langkah-langkah konfigurasi beserta pengaturannya bisa dilihat disini.

Referensi

https://gohugo.io/hosting-and-deployment/hosting-on-github/

Ringkasan#

Persiapan Awal#

Langkah-langkah#

1. Tes/Uji Coba Web#

2. Setup Repo Git#

1. Inisialisasi Repo Git#

2. Tambahkan file .gitignore#

3. Automasi dengan GitHub Actions#

3. Deployment#

1. Buat repositori GitHub#

2. Hubungkan dengan GitHub#

3. Akses Web#

4. Kustomisasi Domain (Opsional)#

Referensi#