Hosting blog Hugo di Netlify dengan custom domain

Cara hosting blog Hugo di Netlify dengan custom domain yang dibeli sendiri dari provider lain

Blog yang dibuat dengan Hugo disiapkan dulu di local. Instalasi Hugo, download theme, setting theme dan yang lainnya. Setelah siap baru di hosting.

  1. Netlify membutuhkan sebuah file config dengan nama netlify.toml. Di setiap theme yang digunakan biasanya sudah ada konfigurasi untuk file tersebut. Jika tidak tersedia, maka harus buat sendiri dengan konfigurasi berdasarkan dokumentasi resminya.

    # netlify.toml
    
    [build]
        publish = "public"
        command = "hugo --gc --minify"
    
    [build.environment]
        HUGO_VERSION = "0.121.1"
    
    [context.production.environment]
        HUGO_ENV           = "production"
        HUGO_ENABLEGITINFO = "true"
    
    [context.split1]
        command = "hugo --gc --minify --enableGitInfo"
    
    [context.split1.environment]
        HUGO_ENV = "production"
    
    [context.deploy-preview]
        command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"
    
    [context.branch-deploy]
        command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"
    
    [context.next.environment]
        HUGO_ENABLEGITINFO = "true"
    
    [[redirects]]
        from   = "/npmjs/*"
        to     = "/npmjs/"
        status = 200
    
    • Konfigurasi netlify.toml tidak harus sama seperti ini, tiap theme biasanya berbeda parameter, kalau bingung tinggal pakai saja yang ini atau dari dokumentasi resmi
    • File netlify.toml disimpan di root project, sama dengan lokasi file hugo.toml
  2. Buat repository baru di Github bisa private atau public

  3. Push blog Hugo yang di local ke repo Github yang sudah dibuat

  4. Di Netlify, buat site baru dengan pilihan Import an existing project. Authorize dengan akun Github, setelah tersambung tinggal pilih repository yang akan di host

  5. Tambahkan domain di Netlify untuk site yang sudah dibuat, ikuti saja step yang disediakan

  6. Untuk setiap site yang dibuat, Netlify memberikan sebuah nama dengan subdomain nama-random-12345.netlify.app

  7. Login ke provider tempat domain dibeli, set bagian Nameservers ke pilihan Use default nameservers

  8. Cari menu DNS Management, tambahkan dua data baru

    • Host name: @

      Record type: A (Address)

      Address: 75.2.60.5 (IP address ini dari Netlify, bisa dicek disini)

    • Host name: www

      Record type: CNAME (Alias)

      Address: nama-random-12345.netlify.app

    Jangan lupa di save

Selesai. DNS propagation membutuhkan waktu kurang lebih 24 jam, jadi tunggu saja biasanya beberapa jam sudah jalan semuanya

Bisa dicek di https://dnschecker.org/, tinggal masukkan domain dan cek. Jika semuanya warna hijau berarti DNS propagation sudah jalan, jika masih ada yang merah berarti belum semua jalan