Membuat Jekyll Blog Memiliki Dua URL Domain

Blog ini memiliki dua URL domain, yaitu domain utama dan domain alternatif yang diatur melalui konfigurasi GitHub Workflow untuk domain di GitHub Pages dan Netlify untuk custom domain.

Kebutuhan dua domain ini bertujuan untuk membuat blog ini dapat diakses melalui dua jalur berbeda, yaitu:

1. GitHub Pages, https://bandithijo.github.io
2. Custom Domain, https://bandithijo.dev

Hal ini saya lakukan agar ketika saya sudah tidak aktif mengelola custom domain (misal: karena meninggal), blog ini masih dapat diakses melalui domain GitHub Pages. Sehingga konten blog (mudah-mudahan) masih dapat memberikan manfaat bagi yang memerlukan.

Konsep Dasar

Terdapat banyak cara untuk membuat banyak pintu akses yang mengarah ke blog/web kita. Yang paling umum adalah menggunakan DNS configuration, misalnya dengan membuat CNAME atau ALIAS record yang mengarah ke domain tertentu.

Namun, karena saya menggunakan Jekyll sebagai static site generator, maka saya memilih cara yang lebih sederhana yaitu dengan memanfaatkan fitur konfigurasi Jekyll itu sendiri.

Karena Jekyll mendukung build dengan menggunakan flag --config untuk menentukan file konfigurasi yang berbeda, maka saya memanfaatkan fitur ini untuk membuat dua jenis build berdasarkan file config.

$ bundle exec jekyll build --config _config_custom.yml

Flag --config ini juga dapat menerima beberapa file konfigurasi sekaligus, sehingga kita dapat membuat file konfigurasi tambahan yang hanya berisi pengaturan yang ingin diubah saja.

$ bundle exec jekyll build --config _config.yml,_config_custom.yml

Implementasi

Strateginya adalah, saya ingin pengaturan url untuk file config utama yaitu _config.yml mengarah ke domain GitHub Pages, sedangkan untuk file config tambahan yaitu _config_netlify.yml mengarah ke custom domain.

Membuat File Konfigurasi Tambahan

Saya membuat 1 file configurasi tambahan dengan nama _config_netlify.yml yang isinya hanya meng-overwrite pengaturan url saja.

1url: https://bandithijo.dev

Sebgai gambaran, berikut adalah isi dari file _config.yml utama.

1title: BanditHijo.dev
2description: Here's where I started writing some notes that someday I will call it, a book
3baseurl: "" # the subpath of your site, e.g. /blog
4url: https://bandithijo.github.io # the base hostname & protocol for your site, e.g. http://example.com
5author: Rizqi Nur Assyaufi

Dapat dilihat bahwa pada file _config.yml, pengaturan url mengarah ke domain GitHub Pages dan pada file _config_netlify.yml, pengaturan url mengarah ke custom domain.

Mengatur Build di GitHub Workflow

Untuk build di GitHub Pages, saya tidak perlu mengubah apapun karena secara default Jekyll akan menggunakan file _config.yml secara default jika tidak didefinisikan secara eksplisit.

1name: Deploy Jekyll site to Pages
2
3on:
4  push:
5    branches: ["main"]
6
7  workflow_dispatch:
8
9permissions:
10  contents: read
11  pages: write
12  id-token: write
13
14concurrency:
15  group: "pages"
16  cancel-in-progress: false
17
18jobs:
19  build:
20    runs-on: ubuntu-latest
21    steps:
22      - name: Checkout
23        uses: actions/checkout@v4
24      - name: Setup Ruby
25        uses: ruby/setup-ruby@4a9ddd6f338a97768b8006bf671dfbad383215f4
26        with:
27          ruby-version: '3.3.5'
28          bundler-cache: true
29          cache-version: 0
30      - name: Setup Pages
31        id: pages
32        uses: actions/configure-pages@v5
33      - name: Build with Jekyll
34        run: bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}" # 👈 Default config _config.yml
35        env:
36          JEKYLL_ENV: production
37      - name: Upload artifact
38        uses: actions/upload-pages-artifact@v3
39
40  deploy:
41    environment:
42      name: github-pages
43      url: $
44    runs-on: ubuntu-latest
45    needs: build
46    steps:
47      - name: Deploy to GitHub Pages
48        id: deployment
49        uses: actions/deploy-pages@v4

Pada bagian Build with Jekyll, perintah build secara default menggunakan file config _config.yml sehingga tidak perlu didefinisikan secara eksplisit.

Mengatur Build di Netlify

Untuk build di Netlify, saya menambahkan perintah build pada pengaturan di Netlify pada bagian:

Projects > Deploys > Deploy settings > Build settings > Configure

Pada bagian BUild command, saya menambahkan flag --config untuk menggunakan kedua file konfigurasi sekaligus.

bundle exec jekyll build --config _config.yml,_config_netlify.yml

Gambar 1. Pengaturan Build Command di Netlify

Selesai!

Pengecekan

Setelah melakukan git push ke repository, saya melakukan pengecekan pada kedua domain, pada bagian <head>...</head> untuk memastikan bahwa tag <link rel="canonical" ...> mengarah ke domain yang sesuai.

1. Pada domain GitHub Pages,

   1<link rel="canonical" href="https://bandithijo.github.io/">

2. Pada custom domain,

   1<link rel="canonical" href="https://bandithijo.dev/">

Dengan demikian, blog Jekyll ini sekarang dapat diakses melalui dua URL domain yang berbeda.

Pemanfaatan

Jika pada Jekyll blog menggunakan {{ site.url }} pada template, maka hasilnya akan menyesuaikan dengan domain yang diakses.