Continuous Deployment Hugo dengan Github Actions

Hugo adalah static site generator untuk membangun situs web statis yang database-free. Karena Hugo berjalan tanpa koneksi basis data, maka dapat digunakanlah Github Pages sebagai hosting. Dalam meningkatkan efisiensi operasionalnya, Github Actions akan menjadi solusi continuous deployment.

Remote Repository

Anggap kita sudah memiliki sebuah project situs website Hugo bernama example dengan struktur direktori seperti di bawah. Lalu kita anggap bahwa project kita telah terintegrasi dengan remote repository di Github.

 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

example
├── archetypes
│   └── default.md
├── config.toml
├── content
│   └── posts
├── data
├── layouts
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static
└── themes
    └── hugo-theme-nix
        ├── archetypes
        │   └── default.md
        ├── exampleSite
        │   ├── config.toml
        │   ├── content
        │   │   ├── about.md
        │   │   └── post
        │   │       ├── creating-a-new-theme.md
        │   │       ├── goisforlovers.md
        │   │       ├── hugoisforlovers.md
        │   │       └── migrate-from-jekyll.md
        │   └── static
        │       ├── favicon.ico
        │       └── profile.jpg
        ├── i18n
        │   ├── en.yaml
        │   └── es.yaml
        ├── images
        │   ├── about.png
        │   ├── index.png
        │   ├── posts.png
        │   ├── screenshot.png
        │   └── tn.png
        ├── layouts
        │   ├── 404.html
        │   ├── _default
        │   │   ├── list.html
        │   │   └── single.html
        │   ├── index.html
        │   └── partials
        │       ├── footer.html
        │       ├── head-custom.html
        │       ├── header.html
        │       ├── head.html
        │       ├── pagination.html
        │       └── social.html
        ├── LICENSE.md
        ├── README.md
        ├── static
        │   └── css
        │       └── nix.css
        └── theme.toml

Project dalam repository lokal perlu diintegrasikan dengan remote repository di Github.

1

$ git init

Kemudian silahkan login akun Github dan membuat sebuah repository baru, misalnya dengan nama example. Jika sudah, kembali ke terminal dan tambahkan remote repository baru dari Github dengan perintah berikut.

1

$ git remote add origin [email protected]:<username-github>/example.git

Github Pages

Kita perlu membuat remote repository lain di Github, misalnya dengan nama blog-public. Nantinya repository baru tersebut akan menampung file-file hasil generate Hugo secara otomatis dari repository example.

Kemudian masuk ke Settings pada repository tersebut, dan aktifkan Source master pada bagian GitHub Pages

Workflows

Kembali ke terminal, buat sebuah direktori baru di project kita dengan nama .github lalu di dalamnya buat lagi sebuah direktori bernama workflows

1

$ mkdir -p .github/workflows

Jika sudah, di dalamnya kita buat sebuah file, misalnya bernama pages.yml dan di dalam file tersebut akan kita gunakan sebagai konfigurasi runner dari Github Actions.

 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
33

name: blog-publish

on:
  push:
    branches:
    - master

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
      with:
        submodules: false

    - name: Setup Hugo
      uses: peaceiris/actions-hugo@v2
      with:
        hugo-version: 'latest'
        extended: true

    - name: Build
      run: hugo --minify --environment production

    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        external_repository: <username-github>/blog-public
        publish_branch: master
        publish_dir: ./public
        deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEYS }}
        allow_empty_commit: false
        commit_message: ${{ github.event.head_commit.message }}

Generate SSH Keys

SSH Keys diperlukan untuk memberikan akses kepada Github Actions dalam memodifikasi repository external.

1

$ ssh-keygen -t rsa -b 4096 -C "<[email protected]>" -f master

Nantinya akan ter-generate 2 file yaitu

1. File master adalah private key
2. File master.pub adalah public key

Deploy Keys

Salin public keys master.pub ke dalam clipboard dengan perintah seperti berikut

1

$ xclip -selection clipboard < master.pub

Silahkan buka halaman Settings pada repository blog-public, lalu pilih Deploy keys. Tambahkan public keys dengan nama ACTIONS_DEPLOY_KEYS.

Secrets

Salin private keys master ke dalam clipboard dengan perintah seperti berikut

1

$ xclip -selection clipboard < master

Buka halaman Settings pada repository example, lalu pilih Secrets. Tambahkan secret baru dengan nama ACTIONS_DEPLOY_KEYS, berisi private key yang baru saja kita salin.

Pengujian

Semua perubahan telah dilakukan pada direktori project Hugo example, sekarang kita akan melakukan pengujian apakah dengan melakukan push ke remote repository akan memberikan efek ke repository blog-public.

Tambahkan perubahan ke staging

Tambahkan seluruh file yang sudah ada di repository lokal menjadi berstatus staging.

1

$ git add .

Commit

Sebelum melakukan commit biasanya kita perlu melakukan konfigurasi username dan email akun Github kalian.

1
2

$ git config user.name "<username-github>"
$ git config user.email "<[email protected]>"

Lalu commit semua file yang berada di dalam mode staging dengan perinah berikut.

1

$ git commit -m "Commit Pertama Kali"

Push ke remote repository

Jika sudah lakukan lakukan push ke remote repository Github.

1

$ git push --set-upstream origin master

Jika berhasil, maka seharusnya proses deployment melalui Github Actions akan langsung berjalan seperti berikut.

Hasil

Berikut ini adalah hasil setelah melakukan push dan proses deployment pada Github Actions berjalan.

Terlihat bahwa Github Actions berhasil menjalankan push secara otomatis ke repository eksternal blog-public. Dan hasil build Hugo dapat kita buka pada Github Pages dengan URL berikut.

https://<username-github>.github.io/blog-public

Kesimpulan

Dengan penerapan CI/CD memakai Github Actions, proses penyuntingan dan berbagai hal operasional lain menjadi dipangkas. Tentu berkat implementasi konsep automation semua menjadi lebih efisien. Beberapa keuntungan yang kita peroleh adalah sebagai berikut.

1. Tidak perlu melakukan build secara manual.
2. Repository utama (example) dapat kita jadikan private repository.
3. Aktivitas push hasil build Hugo dilakukan secara otomatis, tiap kali ada perubahan.

Referensi

• gohugo.io/documentation
• docs.github.com/en/free-pro-team@latest/actions
• github.com/marketplace/actions/github-pages-action