手把手教你搭建部落格

robin發表於2022-03-24

由於 github 訪問不太穩定，覺得將部落格遷移到 AWS 上。可以藉助 AWS 儲存的功能。

Untitled.png

為什麼選擇 hexo

  • 生成頁面速度快
  • 支援 markdown
  • 一鍵部署
  • 超強的擴充套件性
  • 海量的外掛

建立部落格

# 安裝
npm install hexo-cli -g

# 建立部落格
hexo init myblog
cd myblog
npm install

# 本地執行
hexo server

這短短的幾步，部落格便建立成功了。

Untitled 1.png

安裝部署工具

# 安裝
npm install hexo-deployer-aws-s3 --save-dev
# 將部署配置放入 _config.yml
deploy:
  type: aws-s3             # 外掛的名字
  region: us-east-1        # 儲存桶所在區域
  bucket: my-bucket        # 儲存桶名字

AWS 使用指南

AWS 儲存介紹

S3 是一種物件儲存服務，提供行業領先的可擴充套件性、資料可用性、安全性和效能。首年使用會有 5 GB 的免費儲存空空間。

接下來，就需要我們在 aws 上建立儲存。

建立儲存桶

Untitled 2.png

儲存後

Untitled 3.png

此時，更新 deploy 配置

# 將部署配置放入 _config.yml
deploy:
  type: aws-s3             # 外掛的名字
  region: ap-northeast-1   # 儲存桶所在區域
  bucket: robinblog        # 儲存桶名字

憑證

憑證的作用是為了獲得 aws s3 儲存的控制許可權，便於部署靜態網站。進入官方文件，需要生成憑證、配置策略、配置憑證。

生成憑證

  1. 登入 AWS Management Console，單擊 https://console.aws.amazon.com/iam/ 開啟 IAM 控制檯。
  2. 在導航窗格中，選擇 Users (使用者)。
  3. 選擇要為其建立訪問金鑰的使用者的名稱，然後選擇 Security credentials (安全憑證) 選項卡。
  4. 在 Access keys(訪問金鑰) 部分，選擇 Create access key (建立訪問金鑰)。

  5. 要檢視新訪問金鑰對，請選擇 Show (顯示)。關閉此對話方塊後，您將無法再次訪問該祕密訪問金鑰。您的憑證與下面類似：

    • 訪問金鑰 ID：AKIAIOSFODNN7EXAMPLE
    • 祕密訪問金鑰：wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
  6. 要下載金鑰對，請選擇 Download .csv file (下載 .csv 檔案)。將金鑰儲存在安全位置。關閉此對話方塊後，您將無法再次訪問該祕密訪問金鑰。
  7. 下載 .csv 檔案之後，選擇 Close (關閉)。在建立訪問金鑰時，預設情況下，金鑰對處於活動狀態，並且您可以立即使用此金鑰對。

憑證生成後，還必須擁有執行所需 IAM 操作的許可權。具體配置流程，請參閱 IAM 使用者指南
中的訪問 IAM 資源所需的許可權，下面是我配置的相關策略

配置策略

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "s3:*",
                "s3-object-lambda:*"
            ],
            "Resource": "*"
        }
    ]
}

配置憑證

aws 提供多種配置憑證的方式

  1. 從載入AWS Identity and Access Management適用於 Amazon EC2 的 (IAM) 角色
  2. 從共享憑證檔案 (~/.aws/credentials) 載入
  3. 從環境變數載入
  4. 從磁碟上的 JSON 檔案載入
  5. JavaScript 開發工具包提供的其他 credential-provider 類

我採取了方式 2 ，從共享憑證檔案 (~/.aws/credentials) 載入

[default]
aws_access_key_id = <YOUR_ACCESS_KEY_ID>
aws_secret_access_key = <YOUR_SECRET_ACCESS_KEY>

看文件發現，可以通過 AWS CLI 配置憑證，安裝操作官方文件很詳細看這裡，我們重點介紹下配置憑證的過程。

首次安裝成功，命令列執行 aws configure 配置如下：

Untitled 4.png

配置成功後，同樣會在 ~/.aws/credentials 檔案中建立對應的欄位

Untitled 5.png

至此，配置完成。

部署

# 構建
npm run build
# 部署
npm run deploy

發現報錯，The bucket does not allow ACLs，還需要在儲存中開啟 ACLs

Untitled 6.png

接下來要關閉「阻止共有訪問操作」

Untitled 7.png

再執行 npm run deploy，部署成功

Untitled 8.png

Untitled 9.png

訪問配置

部署成功後，開啟靜態網站託管功能

Untitled 10.png

Untitled 11.png

訪問域名 http://robinblog.s3-website-ap-northeast-1.amazonaws.com/ 成功

Untitled 12.png

總結

部署確實很方便，但文件還是不太完善，文件中提到「獲取憑證」的操作，其中配置 IAM 操作許可權也是關鍵步驟，在文件中確一筆帶過，如下圖：

Untitled 13.png

在這塊花費了不少時間。

更多實操過程可參考https://aws.amazon.com/cn/getting-started/?nc2=h_ql_le_gs&trk=4601add5-b05e-40e5-86a4-84b8eec3a582&sc_channel=ba

相關文章