~

这是九九计划
09

~

前言

2018年8月26日更新:简易 bat 一键更新博客

之前博客是托管在 CloudCone 的 VPS 主机上的,最近发现他家的网络炸得厉害,有点难受,故一直在找合适的页面托管。
知道静态博客能搭建在 Github 等上,但是有点担心会翻车。
前几天突发奇想搜了下能不能在大名鼎鼎的 Amazon S3 上搭建静态博客,结果发现还真的可以~
刚好免费一年套餐还有效,遂说干就干。
途中想办法给博客加上 HTTPS 支持,发现 CloudFront 还提供全球分发 CDN ,对于博客而言价格还不高,喜滋滋~
踩了一点小坑,出现了一些问题,在这里记录一下~


静态博客

简单理解为,纯 html 页面,不需要后台支持,可以直接渲染输出的博客。
现在可以用的静态博客程序很多有很多,就不一一列举,搜索即可。
我就以我在用的名不见经传的 Ink 纸小墨 为例,其他大同小异~

InkPaper
Github InkProject
纸小墨 主页


博客程序环境

Linux macOS Windows 都可,我之前是在 Linux VPS 主机上搭建,但是成本稍高。其实程序环境在哪都无所谓,能生成页面然后上传到 S3 上就行~
那么反而是自己的本地环境最为方便,还免去了服务器成本,美滋滋的。

以 Windows 为例,直接访问上面的 博客程序主页 ,下载 Windows 版本的程序压缩包。
打开压缩包发现包含一个 blog 文件夹以及一个 ink.exe 程序文件。
直接解压放到自己想放博客文件地方,例如 D:\Blog,怎么用呢?

ink.exe 是一个命令行程序,需要在 CMD 或者 PowerShell 中使用。

比如你的博客目录结构是这样的:

目录结构图

那么可在 BLOG 文件夹内按住 Shift + 右键 ,点击弹出菜单内的 在此处打开 PowerShell 窗口
输入 .\ink serve ,然后复制 http://localhost:8000/ 到浏览器窗口打开,就可以看到博客的样子啦~

看到的实际上是 ~\blog\public 下的内容,而自己用 MarkDown格式 写作的博客文章放置在 \sourse 文件夹下。
经过 .\ink build or .\ink preview or .\ink serve 命令,ink程序将 .md 文件转换为 html 静态网页。
也就是说,自己的博客网页本质上是在 public 这个文件夹下。

更多命令操作和文章格式请参阅: 简洁的静态博客构建工具 —— 纸小墨(InkPaper)
刚刚的预览界面也有相同的一篇文章~


在 S3 上渲染输出

这一步相当简单了~
首先注册一个 AWS 账号,重要的是需要绑定一张 信用卡 。
稍微有点门槛的~
你会有一年的免费套餐~
最好有一个域名,可以 Google 一下免费域名。暂时没有也没关系,不影响这一步。

登陆控制台: https://ap-southeast-1.console.aws.amazon.com/console/home?region=ap-southeast-1#

选择 S3 ,点击创建存储桶。创建过程中除了名称和区域,其他的在创建之后还可以随时更改。
名称填你准备的域名,如: blog.my.cc
存储区域国内最好选东京或新加坡,然后点击下一步。

第二页可以不用理会,直接点击下一步。

在第三页 管理公共权限 下拉选择 为此存储桶授予公共读取权限 ,否则无法显示博客。

下一页,点击 创建存储桶

接下来点击刚才创建好的存储桶,选择 属性-静态网站托管 ,选中 使用此存储桶托管网站
在索引文档处填下 index.html ,确定保存。

前期准备就完成了。

点击 概述-上传 然后打开博客文件夹下 public 文件夹,选中全部,直接拖到浏览器界面

点击下一步,选择公开权限,上传即可。

这个时候,再打开刚才选择静态网站托管的位置,点击 终端节点 后边的地址,就能看到自己的博客了~

若有域名,在 DNS 管理处添加一个 CNAME 记录到这个地址,就 OJBK 了~

http 博客已经在 S3 上托管成功~

什么?每次打开浏览器这样上传太麻烦?好吧,我们用 rclone 来使上传工作简单一些~


用 rclone 简化上传操作

·--------------------------------------
2018年8月26日更新
完成下面的操作之后,在ink.exe所在目录新建一个文本文档,输入类似内容:

.\ink build  
rclone copy D:\Blog\blog\public\ s3:blog.my.cc  
pause  

保存为 blog.bat 或者 一键更新博客.bat,以后写完博客扔到 sourse 文件夹里,再双击运行这个 bat 就搞定一切啦~
·---------------------------------------

每次都打开浏览器,打开 S3 控制台来上传文章确实有点麻烦,我们可以利用 rclone 来简化上传过程。
在这其中我也踩了一些坑,记录下来。

官网下载 rclone :https://rclone.org/downloads/

解压,将 rclone.exe 扔到 C:\Windows\system32 中。

打开 CMD 或 PowerShell ,输入 rclone config ,显示:

No remotes found - make a new one  
n) New remote  
s) Set configuration password  
q) Quit config  
n/s/q>  

输入 n ,回车,输入名字,如 s3 ,回车,显示:

Type of storage to configure.  
Choose a number from below, or type in your own value  
 1 / Alias for a existing remote  
   \ "alias"  
 2 / Amazon Drive  
   \ "amazon cloud drive"  
 3 / Amazon S3 Compliant Storage Providers (AWS, Ceph, Dreamhost, IBM COS, Minio)  
   \ "s3"  
 4 / Backblaze B2  
   \ "b2"  
[以下折叠]  

输入 3 ,回车,显示:

Choose your S3 provider.  
Choose a number from below, or type in your own value  
 1 / Amazon Web Services (AWS) S3  
   \ "AWS"  
 2 / Ceph Object Storage  
   \ "Ceph"  
 3 / Digital Ocean Spaces  
   \ "DigitalOcean"  
 4 / Dreamhost DreamObjects  
   \ "Dreamhost"  
 5 / IBM COS S3  
   \ "IBMCOS"  
 6 / Minio Object Storage  
   \ "Minio"  
 7 / Wasabi Object Storage  
   \ "Wasabi"  
 8 / Any other S3 compatible provider  
   \ "Other"  
provider>  

输入 1 ,回车,显示:

Get AWS credentials from runtime (environment variables or EC2/ECS meta data if no env vars). Only applies if access_key_id and secret_access_key is blank.  
Choose a number from below, or type in your own value  
 1 / Enter AWS credentials in the next step  
   \ "false"  
 2 / Get AWS credentials from the environment (env vars or IAM)  
   \ "true"  
env_auth>  

输入 1 ,回车,显示:

AWS Access Key ID - leave blank for anonymous access or runtime credentials.  
access_key_id>  

这个时候需要打开 Amazon IAM ,选择 用户添加用户,随便一个用户名,选择 编程访问 ,下一步。
选中 直接附加现有策略 ,在 筛选策略 后的搜索框搜索 s3 ,回车。
选中 AmazonS3FullAccess 前的复选框然后下一步,最后点击 创建用户
可以将接下来这个页面的密钥 ID 和密钥复制保存一下。
复制 访问密钥ID 到 CMD 或 PowerShell 粘贴,回车,显示:

AWS Secret Access Key (password) - leave blank for anonymous access or runtime credentials.  
secret_access_key>  

回到浏览器点击 私有访问密钥 的显示,将密钥复制,照样粘贴,回车,显示:

Region to connect to.  
Choose a number from below, or type in your own value  
   / The default endpoint - a good choice if you are unsure.  
 1 | US Region, Northern Virginia or Pacific Northwest.  
   | Leave location constraint empty.  
   \ "us-east-1"  
   / US East (Ohio) Region  
 2 | Needs location constraint us-east-2.  
   \ "us-east-2"  
   / US West (Oregon) Region  
 3 | Needs location constraint us-west-2.  
   \ "us-west-2"   
   / US West (Northern California) Region  
 4 | Needs location constraint us-west-1.  
   \ "us-west-1"  
   / Canada (Central) Region  
 5 | Needs location constraint ca-central-1.  
   \ "ca-central-1"  
   / EU (Ireland) Region  
 6 | Needs location constraint EU or eu-west-1.  
   \ "eu-west-1"  
   / EU (London) Region  
 7 | Needs location constraint eu-west-2.  
   \ "eu-west-2"  
   / EU (Frankfurt) Region  
 8 | Needs location constraint eu-central-1.  
   \ "eu-central-1"  
   / Asia Pacific (Singapore) Region  
 9 | Needs location constraint ap-southeast-1.  
   \ "ap-southeast-1"  
   / Asia Pacific (Sydney) Region  
10 | Needs location constraint ap-southeast-2.  
   \ "ap-southeast-2"  
   / Asia Pacific (Tokyo) Region  
11 | Needs location constraint ap-northeast-1.  
   \ "ap-northeast-1"  
   / Asia Pacific (Seoul)  
12 | Needs location constraint ap-northeast-2.  
   \ "ap-northeast-2"  
   / Asia Pacific (Mumbai)  
13 | Needs location constraint ap-south-1.  
   \ "ap-south-1"  
   / South America (Sao Paulo) Region  
14 | Needs location constraint sa-east-1.  
   \ "sa-east-1"  
region>  

输入 9 ,回车,显示:

Endpoint for S3 API.  
Leave blank if using AWS to use the default endpoint for the region.  
endpoint>  

直接留空回车,显示:

Location constraint - must be set to match the Region. Used when creating buckets only.  
Choose a number from below, or type in your own value  
 1 / Empty for US Region, Northern Virginia or Pacific Northwest.  
   \ ""  
 2 / US East (Ohio) Region.  
   \ "us-east-2"  
 3 / US West (Oregon) Region.  
   \ "us-west-2"  
 4 / US West (Northern California) Region.  
   \ "us-west-1"  
 5 / Canada (Central) Region.  
   \ "ca-central-1"  
 6 / EU (Ireland) Region.  
   \ "eu-west-1"  
 7 / EU (London) Region.  
   \ "eu-west-2"  
 8 / EU Region.  
   \ "EU"  
 9 / Asia Pacific (Singapore) Region.  
   \ "ap-southeast-1"  
10 / Asia Pacific (Sydney) Region.  
   \ "ap-southeast-2"  
11 / Asia Pacific (Tokyo) Region.  
   \ "ap-northeast-1"  
12 / Asia Pacific (Seoul)  
   \ "ap-northeast-2"  
13 / Asia Pacific (Mumbai)  
   \ "ap-south-1"  
14 / South America (Sao Paulo) Region.  
   \ "sa-east-1"  
location_constraint>  

输入 9 ,回车,显示:

Canned ACL used when creating buckets and/or storing objects in S3.  
For more info visit https://docs.aws.amazon.com/AmazonS3/latest/dev/acl-overview.html#canned-acl  
Choose a number from below, or type in your own value  
 1 / Owner gets FULL_CONTROL. No one else has access rights (default).  
   \ "private"  
 2 / Owner gets FULL_CONTROL. The AllUsers group gets READ access.  
   \ "public-read"  
   / Owner gets FULL_CONTROL. The AllUsers group gets READ and WRITE access.  
 3 | Granting this on a bucket is generally not recommended.  
   \ "public-read-write"  
 4 / Owner gets FULL_CONTROL. The AuthenticatedUsers group gets READ access.  
   \ "authenticated-read"  
   / Object owner gets FULL_CONTROL. Bucket owner gets READ access.  
 5 | If you specify this canned ACL when creating a bucket, Amazon S3 ignores it.  
   \ "bucket-owner-read"  
   / Both the object owner and the bucket owner get FULL_CONTROL over the object.  
 6 | If you specify this canned ACL when creating a bucket, Amazon S3 ignores it.  
   \ "bucket-owner-full-control"  
acl>  

输入 2 ,回车,显示:

The server-side encryption algorithm used when storing this object in S3.  
Choose a number from below, or type in your own value  
 1 / None  
   \ ""  
 2 / AES256  
   \ "AES256"  
server_side_encryption>  

输入 1 ,回车,显示:

The storage class to use when storing objects in S3.  
Choose a number from below, or type in your own value  
 1 / Default  
   \ ""  
 2 / Standard storage class  
   \ "STANDARD"  
 3 / Reduced redundancy storage class  
   \ "REDUCED_REDUNDANCY"  
 4 / Standard Infrequent Access storage class  
   \ "STANDARD_IA"  
 5 / One Zone Infrequent Access storage class  
   \ "ONEZONE_IA"  
storage_class>  

输入 1 或 2 ,回车,显示:

Remote config  
--------------------  
[s3]  
type = s3  
provider = AWS  
env_auth = false  
access_key_id = XXX  
secret_access_key = YYY  
region = us-east-1  
endpoint =   
location_constraint =  
acl = private  
server_side_encryption =  
storage_class =  
--------------------  
y) Yes this is OK  
e) Edit this remote  
d) Delete this remote  
y/e/d>  

输入 y ,回车,再输入 q ,回车退出。

s3 的连接配置就完成了。

在 cmd 输入 rclone lsd s3: 应当就能看到你的存储桶了~

日后更新博文:

  • 将写好的博文放入 source 文件夹
  • 在 Blog 下打开 PowerShell ,输入 .\ink build ,回车
  • 输入 rclone copy D:\Blog\blog\public\ s3:blog.my.cc ,回车

三步走,就 OJBK 了~
注意更改其中的信息为你自己的(以及使用英文状态下的符号),D:\Blog\blog\public\ 为你本地的public文件夹位置, s3:blog.my.cc远端名字:存储桶名称 。


利用 AWS 的 CloudFront 服务给博客添加 SSL

有两个方式 申请 Amazon 颁发的免费证书或者导入你自己申请的证书。

在控制台界面, 服务-网络和内容分发 下可找到。这项服务和 Route 53 服务是配套的(至少在 AWS 体系里是配套的),不过 Route 53 在这篇文章中用不到。

但是点开之后(或许)会发现…… AWS 说注册已完成正在审核,要你等待……
几个小时或者更久后会收到 AWS 的一封电子邮件,读过才发现,
要使用 CloudFront 和 Route 53 , AWS 还设了另外一道门槛——重新验证信用卡,并通过邮件要求你:

  1. 提供一个 Businesses URL
  2. 用这个 URL 相关的邮箱发送
  3. 并在该邮件中包含相关联的 AWS 账户 ID 或邮箱
  4. 该账户应已添加有效的付款方式

这是一个坑,我用了两天才通过了验证。我第一次发邮件,对方回了同样的信息,提了同样的要求……仿佛没看到我的邮件。

第二次我直接回那封邮件,久久没回复,发现那邮件地址是加了 + 号的一长串,好吧,我又给原地址发了一封,总算通过了。
Business URL 可以直接给我们的博客,没有问题。
域名邮箱也很简单,腾讯企业邮箱、网易企业邮箱等,国内的解决方案一大把,若是不放心国内的服务,也可使用 Yandex 、 Zoho等国外的服务。
我在邮箱这耽误了蛮久……不够干脆利落。
然后直接在邮件里指出自己的 AWS 账号的邮箱,由于之前申请 AWS 账号就已经绑定信用卡,也可直说,于是
用 name@yourdominan.com 给 aws-verification@amazon.com 发送以下内容:

主题 : CloudFront And Route 53  
正文 : Businesses URL: http://blog.pdly.men  
		Associate AWS Account: name@yourdominan.com  
		Non-prepaid payment method:  
			A visa Card ( or a China UnionPay Card ) was added to name@yourdominan.com  

或者客气点:

主题 : CloudFront And Route 53  
正文 : 

Hello,there,  

I have received your email saying that I have not been granted access to Amazon Route 53 or CloudFront.  

Your requirements:  

Businesses URL: http://blog.pdly.men  
Associate AWS Account: name@yourdominan.com  
Non-prepaid payment method:  
	A visa Card ( or a China UnionPay Card ) was added to name@yourdominan.com  

Please help me get access to CloudFront and Amazon Route 53.  

或许需要一两天,或者重发几次,应该问题不大。通过之后 AWS 会发邮件说通过了。
这时候已经可以打开 CloudFront 页面,不过不急,
在控制台界面找到 Certificate Manager ,右上角切换区域到 弗吉尼亚北部 ,点击 预置证书 下的 开始使用
到下一个页面,点 导入证书,可导入自己的证书,点 请求证书 可申请 Amazon 的证书。

然后可能会遇上第二个坑,自定义证书导入无法识别证书链,有几率遇上。
我申请的 Alpha SSL 各种姿势导入都没通过, Trust Asia 随便就通过了(甚至格式都不是按照 AWS 要求的格式),很是诡异,所以推荐申请 Amazon 的证书。
Amazon 的证书在这里有很多好处,时长 13 个月,如果申请的域名一直能打开(ping、tcping), Amazon 还能给你自动续期,很舒心。
不过申请这个也有坑——给你一个 CNAME 记录,不要傻乎乎地就填上去,要去除一点东西。

假如申请 blog.my.cc 的,他给你的记录是 XXXXXXXXXXXX.blog.my.cc ,只要在 DNS 那边填 XXXXXXXXXXXX.blog 就行,否则无法通过验证。(为傻乎乎的我哭泣)

注意 Amazon 的证书没法导出在除 AWS 的地方使用。
其他按照步骤走就行。

接下来打开 CloudFront ,发现没有中文界面了。
点击 Create Disrtibution ,在 Web 项下点击 Get Start
点击 Origin Domain Name 后的输入框就能选中你的存储桶,按照下图操作:

最后点击 Create Disrtibution
将博客域名 CNAME 到下图中的地址,等待 STATUS 变为 Deployed 即可

一个 https 静态博客就这么搞定了,美滋滋啊~
但是,如果想长期做博客,免费期过了之后,花销是多大呢? AWS 这么大的公司,花销应该很大吧!
然而我要告诉你,真的很便宜——每个月 5 块钱都算多了~


免费期外在 Amazon S3 的月花费——真的很少!

AWS 计费是很复杂,不过 AWS 提供了一个 简单月度成本结算器 ,可以用来估算一下成本。
我们的花销只在 S3 和 CloudFront 上,所以在这里只看这两项就可以了。
夸大一个小博客的各项数据,结果如图:

哈哈哈,忍不住笑出声来。


总结

把 静态博客 搬迁到 Amazon S3 上是一个骚操作——既提供了低延迟访问,价格又低到接近于无。
Amazon S3 实在是静态博客的最佳选择。

另外,添加 CloudFront 和 SSL 之后, ping 值会稍高(10ms左右)于未加 SSL 的,影响不大,自行考虑。


THE-END