AWS Amplifyで静的Hexoブログサイトの構築

  1. 1. AWS Amplifyのインストール
  2. 2. Hexoを使って、ブログサイトを作成
  3. 3.ブログサイトをAWS Amplifyにデプロイ

1. AWS Amplifyのインストール

Amplifyをインストール

 npm install -g @aws-amplify/cli

Amplifyをコンフィグする

 amplify configure

Access_keyとSecret_access_keyを設定する

 aws_access_key_id=XXXXXXXXXXXXXXXXXXX
 aws_secret_access_key=XXXXXXXXXXXXXXXXXXXXXX

2. Hexoを使って、ブログサイトを作成

Hexo-cliをインストール

 npm install -g hexo-cli

新たなフォルダーを作成して、Hexoのブログを初期化する

 mkdir blog //新たなフォルダーを作成(ここはblogを命名)
 cd blog //新たなフォルダに入る
 sudo hexo init //Hexoのブログを初期化

ブログサイトを起動

 hexo s

http://localhost:4000/ で起動したブログサイトを確認。

3.ブログサイトをAWS Amplifyにデプロイ

先ほど作成したフォルダーでAmplifyを初期化

 amplify init

問題の答えを選ぶ

 Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project amplifytest
? Enter a name for the environment prod
? Choose your default editor: IntelliJ IDEA
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using none
? Source Directory Path:  source
? Distribution Directory Path: public
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider  awscloudformation

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use amplify
Adding backend environment prod to AWS Amplify Console app: XXXXXXXX

 *答えが上記と違う場合、エラーが発生する場合がある

エラーがない場合、メッセージを表示する

 ✔ Successfully created initial AWS cloud resources for deployments.
 ✔ Initialized provider successfully.

ホスト情報を追加

 amplify hosting add

答えを選択する

 ? Select the plugin module to execute Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
  ? Choose a type Manual deployment

サイトを公開する

 amplify publish

エラーがない場合、completeのメッセージを表示する

 ✔ Zipping artifacts completed.
 ✔ Deployment complete!
 https://prod.XXXXXXXX.amplifyapp.com

💰

×

Help us with donation