एचयूगो साइट को एएसएस एसी तक तैनात करें

हुगो एक स्थैतिक साइट जनरेटर है।

Page content

जब साइट hugo के साथ जनरेट होती है तो इसे किसी होस्टिंग प्लेटफॉर्म पर डिप्लॉय करने का समय आता है।
यहां एक तरीका है इसे AWS S3 पर पुश करें और AWS CloudFront CDN के साथ सर्व करें।

Hugo static site deployed to AWS

साइट की तैयारी

यहां यह बताया नहीं जा रहा है कि कैसे Hugo साइट प्रोजेक्ट बनाया जाता है या वहां आर्टिकल्स या ब्लॉग पोस्ट्स जोड़े जाते हैं।
यह मान लिया जा रहा है कि आपने पहले ही इसे कर लिया है।

अगर नहीं, तो यहां एक Hugo quickstart है।

डिप्लॉयमेंट विकल्प

हुगो जनरेट की गई साइट को डिप्लॉय और होस्ट करने के कई विकल्प उपलब्ध हैं (https://gohugo.io/hosting-and-deployment/). मुझे व्यक्तिगत रूप से अच्छा लगता है:

नीचे मैं बिल्कुल इसी - अंतिम - विधि के बारे में विस्तार से बता रहा हूं।

1. रिलेक्स्ड परमिशन्स के साथ S3 bitbucket बनाएं

जाएं: https://console.aws.amazon.com/s3

  1. बकेट बनाएं जिसका नाम साइट के नाम के जैसा हो, उदाहरण के लिए: “microsoft.com”

  2. बकेट पर क्लिक करें => प्रॉपर्टीज, नीचे => स्टैटिक वेबसाइट होस्टिंग स्टैटिक वेबसाइट होस्टिंग सेक्शन

  3. एडिट करें, फिर - एनेबल करें, और “स्टैटिक वेबसाइट होस्ट करें” स्टैटिक वेबसाइट होस्टिंग के एडिटिंग

  4. वहां इंडेक्स में भी: index.html और एरर में: 404.html डालें

  5. सेव करें, “बकेट वेबसाइट एंडपॉइंट” को याद रखें, यह लगभग इस तरह दिखेगा: http://microsoft.com.s3-website-ap-southeast-2.amazonaws.com

  6. बकेट परमिशन्स पर जाएं, नीचे दिए गए चित्रों को देखें। पब्लिक एक्सेस ब्लॉक नहीं होना चाहिए।

ब्लॉक पब्लिक एक्सेस - ऑफ 1

ब्लॉक पब्लिक एक्सेस - ऑफ 2

  1. बकेट पॉलिसी (microsoft.com को अपने डोमेन नाम से बदलें):
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::microsoft.com/*"
        }
    ]
}

2. सर्टिफिकेट बनाएं

जाएं AWS सर्टिफिकेट मैनेजर https://console.aws.amazon.com/acm सही रीजन चुनें।

  1. रिक्वेस्ट करें
  2. पब्लिक सर्टिफिकेट
  3. डोमेन नाम: दो जैसे: “microsoft.com” और “www.microsoft.com”
  4. आप अधिक सबडोमेन्स जैसे “blog.microsoft.com”, “xmpp.microsoft.com” आदि के लिए अनुरोध कर सकते हैं
  5. DNS वैलिडेशन करें। अगर आपका रजिस्ट्रार AWS है तो इसे Route53 कंसोल के माध्यम से करना/पुश करना आसान होगा।

3. लैंडा फंक्शन को Lambda@Edge पर डिप्लॉय करें

Lambda@Edge फंक्शन हुगो क्विकस्टार्ट प्रोजेक्ट के डायरेक्टरीज के यूआरएल को डिफ़ॉल्ट ऑब्जेक्ट, index.html के लिए रीराइट करेगा।
यही तरीका Cloudfront यूआरआई ‘/posts/my-post/’ को ‘/posts/my-post/index.html’ के साथ सर्व करता है, 200 के बजाय 404 लौटाता है।

फ्लेवर कैफे (स्कॉच) Lambda@Edge कोड

// Hugo on Cloudfront, Lambda@Edge function 
// Flavor Cafe (Scotch)
// @starpebble on github
//
// Two rewrite rules for hugo sub directory uri's.
// Example:
//   1. rewrite uri /posts/ to /posts/index.html
//   2. rewrite uri /posts  to /posts/index.html
//
// Add as many file extensions as you like for rule 2.
// uri's that end in a known file extensions are not rewritten by rule 2.

'use strict';

// @starpebble on 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/ to /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 to /posts/index.html
    cfrequest.uri += `/${DEFAULT_OBJECT}`;
  }
  callback(null, cfrequest);
  return true;
};

4. AWS CloudFront CDN बनाएं

जाएं https://console.aws.amazon.com/cloudfront

  1. डिस्ट्रिब्यूशन बनाएं
  2. अपने S3 बकेट के ओरिजिन को बनाएं

ओरिजिन बनाएं

  1. अपनी साइट के लिए सर्टिफिकेट
  2. जब यह आपको स्टैटिक वेबसाइट में बदलने का प्रस्ताव देता है, तो सहमत हो जाएं
  3. अपने ओरिजिन के लिए बिहेवियर बनाएं, और HTTP को HTTPS में रीडायरेक्ट करें

बिहेवियर को एडिट करें

  1. बिहेवियर/फंक्शन्स संबंधों में नीचे ओरिजिन रिक्वेस्ट में अपने लैंडा फंक्शन को चुनें

लैंडा फंक्शन

  1. सेव करें
  2. अपने डिस्ट्रिब्यूशन के जनरल टैब पर जाएं और अपने डिस्ट्रिब्यूशन डोमेन नाम को कॉपी करें। यह लगभग इस तरह दिखेगा: asdfasdfasdf.cloudfront.net

डिस्ट्रिब्यूशन डोमेन नाम का उदाहरण

5. AWS Route53 DNS को अपने CloudFrount के साथ जोड़ें

जाएं https://console.aws.amazon.com/route53/v2/hostedzones

  1. अपनी साइट के होस्टेड ज़ोन को बनाएं या अपने साइट के होस्टेड ज़ोन पर क्लिक करें। यह अपनी साइट के जैसा नाम होना चाहिए, उदाहरण के लिए: “microsoft.com”
  2. अपने CloudFront डिस्ट्रिब्यूशन (डिस्ट्रिब्यूशन डोमेन नाम) के लिए “A” रिकॉर्ड बनाएं
  3. अपने पहले “A” रिकॉर्ड के एलियस के रूप में “A” “www” रिकॉर्ड बनाएं

6. AWS CLI को इंस्टॉल करें

  1. AWS क्लाइंट कमांड लाइन टूल्स को इंस्टॉल करें https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html
  2. AWS CLI कनेक्शन को कॉन्फ़िगर करें
    1. फ़ाइल ~/.aws/credentials की जांच करें, इसमें कुछ ऐसा होना चाहिए
[default]
aws_access_key_id = .......
aws_secret_access_key = .......
  1. कनेक्शन की जांच करें, नीचे दिए गए आदेश के साथ अपने S3 बकेट को देखें
aws s3 ls

7. अपने config.toml को अपडेट करें

  1. अपने hugo.toml या config.toml को अपने hugo प्रोजेक्ट में खोलें
  2. अंत में जोड़ें (फिर से microsoft.com को अपने नाम से बदलें):
[[deployment.targets]]
# इस लक्ष्य के लिए एक अनिवार्य नाम।
name = "lfs3"

# S3; देखें https://gocloud.dev/howto/blob/#s3
# S3-संगत एंडपॉइंट्स के लिए, देखें https://gocloud.dev/howto/blob/#s3-compatible
URL = "s3://microsoft.com?region=ap-southeast-2"

# अगर आप CloudFront CDN का उपयोग कर रहे हैं, तो डिप्लॉय आवश्यकता के अनुसार कैश अवलोकन करेगा।
cloudFrontDistributionID = 	""

अगर आप अपने डिप्लॉयमेंट को config.yml में रखते हैं, तो यह इस तरह दिखेगा

deployment:
  targets:
    name: "lfs3"
    URL: "s3://microsoft.com?region=ap-southeast-2"
    cloudFrontDistributionID:	"E123123123"
  1. इस फ़ाइल को सेव करें
  2. अपनी साइट को कम्पाइल करें
hugo
  1. hugo deploy कमांड के साथ इसे डिप्लॉय करें
hugo deploy
  1. अपनी साइट के यूआरएल को ब्राउज़र में खोलें और देखें कि यह सब काम कर रहा है

उपयोगी लिंक

मुझे उम्मीद है कि यह छोटा हाउ-टू डॉक आपकी मदद करेगा। एक अच्छा दिन हो!