Deploy situs Hugo ke AWS S3

Ketika situs dibangun dengan hugo, saatnya untuk mendeploy ke platform hosting tertentu. Berikut ini adalah cara untuk mendorongnya ke AWS S3 dan menyajikannya dengan AWS CloudFront CDN.

Persiapan situs

Di sini tidak akan dijelaskan bagaimana membuat Hugo proyek situs atau menambahkan artikel atau posting blog di sana. Asumsikan Anda sudah melakukannya.

Jika belum, berikut ini adalah Hugo quickstart

Opsi Deployment

Ada beberapa opsi yang tersedia untuk mendeploy dan menghosting situs yang dibangun dengan Hugo (https://gohugo.io/hosting-and-deployment/). Secara pribadi saya suka

• Bagaimana situs hugo dapat dihosting di github
• AWS Amplify membangun dan mendeploy.
• dan mendeploy ke s3 dengan hugo deploy perintah dan menyajikannya dengan AWS CloudDront CDN dan AWS Route53 dan AWS Lambda.

Di bawah ini saya akan menjelaskan metode terakhir ini.

1. Membuat s3 bitbucket dengan izin yang lebih longgar

pergi ke: https://console.aws.amazon.com/s3

1. buat bucket dengan nama seperti nama situs, misalnya: “microsoft.com”

2. klik pada bucket => properties, di bawah => static website hosting

3. klik edit, lalu - aktifkan, dan “host a static website”

4. juga masukkan di index: index.html dan di error: 404.html
5. klik simpan, ingat “bucket website endpoint”, akan terlihat seperti: http://microsoft.com.s3-website-ap-southeast-2.amazonaws.com
6. pergi ke bucket permissions, lihat gambar di bawah. akses publik tidak boleh diblokir.

7. kebijakan bucket (ganti microsoft.com dengan nama domain Anda):

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::microsoft.com/*"
        }
    ]
}

2. Membuat Sertifikat

pergi ke AWS certificate manager https://console.aws.amazon.com/acm pilih wilayah yang benar.

1. klik permintaan
2. sertifikat publik
3. nama domain: ambil dua seperti: “microsoft.com” dan “www.microsoft.com”
4. Anda dapat meminta lebih banyak subdomain seperti “blog.microsoft.com”, “xmpp.microsoft.com” dll
5. lakukan validasi DNS. Lebih mudah untuk melakukannya/mengirimkannya melalui konsol Route53 jika registrar Anda adalah AWS.

3. Mendeploy Fungsi Lamnda ke Lambda@Edge

Fungsi Lambda@Edge akan mengubah ulang URL proyek Hugo QuickStart untuk direktori ke objek default, index.html. Itulah cara Cloudfront menyajikan URI ‘/posts/my-post/’ dengan konten ‘/posts/my-post/index.html’ mengembalikan 200 alih-alih 404.

Flavor Cafe (Scotch) Lambda@Edge Code

// Hugo on Cloudfront, Lambda@Edge function 
// Flavor Cafe (Scotch)
// @starpebble di github
//
// Dua aturan rewrite untuk URI sub direktori hugo.
// Contoh:
//   1. ubah ulang URI /posts/ ke /posts/index.html
//   2. ubah ulang URI /posts ke /posts/index.html
//
// Tambahkan sebanyak mungkin ekstensi file untuk aturan 2.
// URI yang berakhir dengan ekstensi file yang dikenal tidak diubah ulang oleh aturan 2.

'use strict';

// @starpebble di github
// hugo flavor cafe (scotch)

const DEFAULT_OBJECT = 'index.html';

exports.handler = (event, context, callback) => {
  const cfrequest = event.Records[0].cf.request;
  if (cfrequest.uri.length > 0 && cfrequest.uri.charAt(cfrequest.uri.length - 1) === '/') {
    // e.g. /posts/ ke /posts/index.html
    cfrequest.uri += DEFAULT_OBJECT;
  }
  else if (!cfrequest.uri.match(/.(css|md|gif|ico|jpg|jpeg|js|png|txt|svg|woff|ttf|map|json|html)$/)) {
    // e.g. /posts ke /posts/index.html
    cfrequest.uri += `/${DEFAULT_OBJECT}`;
  }
  callback(null, cfrequest);
  return true;
}; 

4. Membuat AWS CloudFront CDN

pergi ke https://console.aws.amazon.com/cloudfront

1. Buat Distribusi
2. buat asal yang menunjuk ke bucket s3 Anda

3. Sertifikat untuk situs Anda
4. ketika menawarkan untuk mengubah ke situs web statis - setuju
5. buat perilaku yang menunjuk ke asal Anda, dan Alihkan Http ke Https

6. di bawah dalam asosiasi perilaku/fungsi - di Origin Request - pilih fungsi Lambda Anda

7. Simpan
8. Pergi ke tab Umum distribusi Anda dan salin nama domain distribusi. Harus terlihat seperti: asdfasdfasdf.cloudfront.net

5. Arahkan AWS Route53 DNS ke CloudFrount Anda

pergi ke https://console.aws.amazon.com/route53/v2/hostedzones

1. buat atau klik pada zona yang dihosting situs Anda. Harus disebut seperti situs Anda: misalnya: “microsoft.com”
2. buat catatan “A” kosong yang menunjuk ke distribusi CloudFront Anda (nama domain distribusi)
3. buat catatan “A” “www” yang menunjuk sebagai alias ke catatan “A” pertama Anda

6. Instal aws cli

1. Instal alat cli aws https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
2. konfigurasikan koneksi cli aws
   1. periksa file ~/.aws/credentials, harus memiliki sesuatu seperti

[default]
aws_access_key_id = .......
aws_secret_access_key = .......

3. uji koneksi, ketik sesuatu seperti di bawah ini untuk melihat bucket s3 Anda

aws s3 ls

7. Perbarui config.toml Anda

1. buka file hugo.toml atau config.toml di proyek hugo Anda
2. tambahkan di akhir (ganti kembali microsoft.com dengan milik Anda):

[[deployment.targets]]
# Nama arbitrer untuk target ini.
name = "lfs3"

# S3; lihat https://gocloud.dev/howto/blob/#s3
# Untuk endpoint S3 yang kompatibel, lihat https://gocloud.dev/howto/blob/#s3-compatible
URL = "s3://microsoft.com?region=ap-southeast-2"

# Jika Anda menggunakan CDN CloudFront, deploy akan membatalkan cache yang diperlukan.
cloudFrontDistributionID = 	""

Jika Anda menyimpan konfigurasi Anda dalam config.yml, seharusnya terlihat seperti

deployment:
  targets:
    name: "lfs3"
    URL: "s3://microsoft.com?region=ap-southeast-2"
    cloudFrontDistributionID:	"E123123123"

3. simpan file ini
4. kompilasi situs Anda

hugo

5. deploy dengan perintah hugo deploy

hugo deploy

6. buka url situs Anda di browser untuk melihat apakah semua ini berhasil

Tautan yang berguna

• Kirimkan Form Google di Situs Web Hugo
• Menambahkan markup data terstruktur ke situs web Hugo
• Kartu Perintah Hugo
• Menggunakan Gitea Actions untuk mendeploy situs web Hugo ke AWS S3
• Hugo quickstart: https://gohugo.io/getting-started/quick-start/
• Daftar besar contoh tema Hugo: https://themes.gohugo.io/
• Hosting dan deployment Hugo: https://gohugo.io/hosting-and-deployment/
• Pengelolaan gambar dalam tema Mainroad Hugo: Pengelolaan gambar tema Mainroad
• Instal AWS Command Line Interface (AWS CLI): https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
• Tema paling populer untuk Hugo
• Bagaimana menyimpan gambar thumbnail dalam folder bundel halaman untuk situs Hugo dengan tema Mainroad

Saya berharap dokumentasi kecil ini akan membantu Anda. Semoga hari yang indah!