aafeng avatar

使用AWS Amplify自动部署Hexo静态站点

aafeng

Published: 05 May 2020 › Updated: 05 May 2020使用AWS Amplify自动部署Hexo静态站点

使用AWS Amplify自动部署Hexo静态站点

最近尝试了一下Amazon AWS的Amplify,感觉非常好用。下面介绍一下如何使用Amplify自动将Hexo生成的静态站点发布到AWS。 其实使用AWS的优点还是有很多的。 比如: 前12个月免费,12月后对于访问量不是很高的个人站点而言,费用也非常低,每个月可能都不到1美元; 全球CDN网络支持;和众多AWS服务的无缝集成等等。下面把具体步骤总结一下:

安装并配置AWS Amplify

首先运行如下命令安装Amplify:

npm install -g @aws-amplify/cli

如果还没有在~/.aws/credentials中创建profile,运行如下命令配置Amplify:

amplify configure

其运行结果就会在credentials中创建一个profile:

[amplify]
aws_access_key_id=XXXXXXXXXXXXXXXXXXX
aws_secret_access_key=XXXXXXXXXXXXXXXXXXXXXX

当然,如果想要使用现有的profile,可以忽略上面的这一步。

生成Hexo静态站点

下面以一个简单的静态站点为例。运行如下命令生成一个静态站点,并安装Node.js的依赖库:

hexo init amplify-test
cd amplify-test
npm install

在本地测试一下Hexo是否能正常工作:

hexo s

访问 http://localhost:4000/ 应该能看到刚刚生成的站点。

使用Amplify初始化/部署静态站点

进入到站点目录并运行:

amplify init

会有一系列的问题需要回答,我的选择如下:

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

发布成功后会有提示:

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

进入到AWS Amplify,可以看到已经成功部署:

image.png

连接到自己的域名

在AWS Amplify的Domain management中,选择”Add domain”并进行配置:

image.png

接下来Amplify会验证你对域名的所有权,按照提示在你的域名管理站点中添加相应的CNAME记录。

image.png

然后在你的域名管理网站中添加对应的CNAME。需要等待一定时间DNS更改才能生效。

Leave 使用AWS Amplify自动部署Hexo静态站点 to:

Written by

Experience is everything.

Read more #cn posts


Best Posts From aafeng

We have not curated any of aafeng's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.

More Posts From aafeng