Deploy blog to gh-pages

Setelah mengikuti semua seri tentang hexo di blog ini. Mungkin kalian sekarang ingin membuat blog hexo kalian di publish online? Tidak hanya sekadar konfigurasi di lokal komputer kita saja? Agar semua orang dapat membaca tulisan / artikel kita. Iya kan?

Ada banyak cara untuk membuat blog hexo kita dapat dikonsumsi publik secara online. Bisa dengan menyewa hosting berbayar. Atau jika kalian punya akun github, kalian bisa hosting di static web hosting milik github ini. Dan tentunya gratis.

Nah, di artikel kali ini, akan dibahas bagaimana sih cara publish nya. Disini saya akan bahas cara publish di gh-pages.

Ada 2 cara:

1. Menggunakan Github Actions untuk men deploy blog ke Github Pages. Cara ini bisa bekerja baik di repositori publik ataupun private. Atau,
2. Menggunakan One-command Deployment, jika tidak ingin mengunggah file folder Hexo kalian ke github.

Github Pages

1. Buat repositori bernama username.github.io, untuk username diisi menggunakan username / nama pengguna github kalian.
2. Push file folder Hexo kalian ke github repositori yang sudah dibuat tadi. Biasanya github otomatis mem-push file folder Hexo kalian ke cabang/ branch bawaan main, untuk github lama, mungkin akan di push ke master

• Cara push ke cabang/ branch main github:

  1	$ git push origin main

• Folder public/ jangan dan memang tidak diharuskan untuk ter push. Jadi, pastikan di file .gitignore mengandung baris public/. Struktur folder perkiraan akan sama seperti repositori ini, tanpa file .gitmodules.

3. Periksa versi Node.js yang kalian gunakan di komputer kalian dengan node --version. Pastikan yang tercatat adalah versi utama (mis., v16.y.z)
4. Buat .github/workflows/pages.yml di repositori kalian dengan mengganti node-version: 16 dengan versi utama Node.js yang telah kalian cek tadi.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

name: Pages

on:
  push:
    branches:
      - main  # default branch

jobs:
  pages:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 16.x
        uses: actions/setup-node@v2
        with:
          node-version: '16'
      - name: Cache NPM dependencies
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

5. Ketika proses deployment selesai, maka halaman yang berhasil di generate bisa kalian cek di repositori yang telah dibuat tadi. Dan cek di cabang/ branch gh-pages.

6. Lalu, di pengaturan github kalian, arahkan menuju Settings > Pages > Source . Dan ganti seperti gambar dibawah ini dan simpan pengaturan

   

7. Jika tidak ada kendala, seharusnya halaman blog sudah bisa diakses. Silahkan cek halaman blog kalian di username.github.io.

Catatan: jika kalian menentukan nama domain khusus dengan CNAME, maka kalian perlu menambahkan file CNAME ke folder source/. Info lebih lanjut.

Halaman Proyek

Jika kalian lebih suka memiliki halaman proyek di GitHub:

1. Buat repositori bernama username.github.io/nama-repo, untuk nama-repo bebas diberi nama misalkan blog / hexo .
2. Ubah file _config.yml, dan ganti nilai url: menjadi https://username.github.io/nama-repo.
3. Jika sudah, langsung push ke gihtub.
4. Ketika proses deployment selesai, maka halaman yang berhasil di generate bisa kalian cek di repositori yang telah dibuat tadi. Dan cek di cabang/ branch
5. Lalu, di pengaturan github kalian, arahkan menuju Settings > Pages > Source . Dan ganti seperti gambar dibawah ini dan simpan pengaturan
6. Jika tidak ada kendala, seharusnya halaman blog sudah bisa diakses. Silahkan cek halaman blog kalian di username.github.io/nama-repositori.

One-command Deployment

Semua instruksi disini berasal dari adaptasi halaman one-deployment-command

1. Install hexo-deployer-git
2. Tambahkan konfigurasi berikut ke _config.yml, (hapus baris yang ada jika ada).

   1 2 3 4 5

   deploy: type: git repo: https://github.com/<username>/<project> # example, https://github.com/hexojs/hexojs.github.io branch: gh-pages

3. Jalankan perintah berikut

   1	hexo clean && hexo deploy

4. Jika tidak ada kendala, seharusnya halaman blog sudah bisa diakses. Silahkan cek halaman blog kalian di username.github.io.

Terima kasih sudah membaca artikel Deploy blog to gh-pages

Referensi:
https://hexo.io/docs/github-pages
https://docs.github.com/en/pages
https://github.com/marketplace/actions/github-pages-action