將我的博客遷移到亞馬遜云端(1) - huang0925－IT工程師數位筆記本

文章出處

Octopress已經被公認為Geeker的博客框架。它所擁有的特性都很符合Geeker的癖好:強大的命令行操作方式、簡潔的MarkDown語法、靈活的插件配置、美輪美奐的theme（自帶響應式設計哦）、完全可定義的部署……

一般大家都喜歡把博客部署到github pages上，免費速度快，與Octopress無縫結合。但是自己最近迷上了AWS，就捉摸著將自己的Octopress博客部署到AWS的S3上，使用CloudFront做CDN，使用Amazon Route 53做域名映射。倒騰了兩天，終于搞定了，也學到了很多東西。不敢私藏，拿出來和大家分享。

這篇文章主要講如何將Octopress博客部署到S3上去。下一篇文章會講如何將CloudFront做CDN,并與現有域名綁定。

在此之前先普及一些概念。

AWS - Amazon Web Service,亞馬遜提供的云服務簡稱。

S3 - Amazon Simple Storage Service, 亞馬遜提供的一種存儲靜態資源（如css、js、html文件，音視頻文件）的服務。

CDN - Content Delivery Network, 內容分發網絡。

Amazon CloudFront - 亞馬遜提供的一種內容分發服務，提高你的網站訪問速度。

Amazon Route 53 - 亞馬遜提供的一種穩定高效的域名解析系統。

第一步，注冊一個亞馬遜的賬號，注冊地址是https://portal.aws.amazon.com/gp/aws/developer/registration/index.html。注意注冊的時候需要提供一張具備外幣功能的信用卡。

第二步，登陸到Amazon management console里，單擊右上角的名稱，選擇Security Credentials標簽，然后點擊左側標簽按照向導創建一個group,一個從屬于這個group的user，并為該user生成一個Access key，記錄下來Access key Id 及 Secret Access Key。亞馬遜的文檔還是非常詳細的，不懂的可以多看看提示信息和幫助文檔。

第三步，在Amazon management console里選擇Services -> S3 service，并創建兩個bucket。假如你的博客域名為example.com，那么兩個bucket的名稱分別為example.com,www.example.com。為什么要創建兩個那？是因為我們要保證用戶無論輸入www.example.com還是example.com都可以訪問我們的網站。

第四步，選擇www.example.com這個bucket，點擊properties標簽，在Static Website Hosting中選擇Redirect all requests to another host name，并配置‘Redirect all requests to:’為example.com。這樣來自www.example.com bucket的訪問都會自動轉發給example.com這個bucket。我們只需為example.com這個bucket同步我們的博客文件即可。

第五步，選擇example.com這個bucket，在Static Website Hosting中選擇‘Enable Website Hosting’,并配置Index Document，我的是index.html。這個Index Document是默認返回的object名稱。比如如果用戶直接訪問bucket的某個目錄，系統會檢測該目錄下是否存在Index Document中配置的文件名，如果有則會自動返回這個object。

第六步，選擇’Permissions’標簽，點擊’add bucket policy‘按鈕，加入如下的policy.

{
     "Version": "2008-10-17",
     "Statement": [
          {
               "Sid": "AddPerm",
               "Effect": "Allow",
               "Principal": {
                    "AWS": "*"
               },
               "Action": "s3:GetObject",
               "Resource": "arn:aws:s3:::example.com/*"
          }
     ]
}

這個policy其實是給所有匿名用戶訪問該bucket里面文件的權限。

第七步，還是在’Permissions‘標簽里，點擊’Add CORS configuration‘按鈕，加入如下的配置：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

這個是用來配置跨域訪問的權限，即是否允許其他網站訪問這個bucket上的資源。由于Octopress博客集成了很多插件，比如google analiycis, github等，都需要跨域加載JavaScript文件，執行JavaScript文件，所以要加入這些配置。

第八步，下載安裝s3cmd。s3cmd是一款操作AWS S3的命令行工具。通過它可以創建或刪除bucket，上傳或下載object，我們在部署octopress博客時，主要就是通過它來將博客上傳到S3上去。如果是mac系統化可以通過HomeBrew直接安裝。

# brew install s3cmd

如果是windows系統可以從官網下載安裝包進行安裝。

第九步，配置s3cmd與你的S3的連接。在命令行下輸入s3cmd --configure，按照向導來配置與S3的連接。這時候在前面保存的Access key就派上用場了。所有的配置信息其實都存在當前用戶名下的.s3cfg文件中。你也可以隨后修改這些信息。運行s3cmd ls來檢測是否配置成功。

$ s3cmd ls #列出所有的bucket
2013-09-27 05:05  s3://huangbowen.net
2013-09-28 03:24  s3://www.huangbowen.net

第十步，配置Octopress支持向S3的部署。在Octopress目錄下找到Rakefile文件，修改或添加下述配置。

deploy_default = "s3"   #部署task
s3_bucket = "example.com" # bucket名稱

s3_cache_secs = 3600  # header中的cache controll屬性，即緩存時間，后面CloudFront要用到

然后添加一個新的task。

desc "Deploy website via s3cmd"
task :s3 do
  puts "## Deploying website via s3cmd"
  ok_failed system("s3cmd sync --acl-public --reduced-redundancy --add-header \"Cache-Control: max-age=#{s3_cache_secs}\"  public/* s3://#{s3_bucket}/")
end

OK，大功告成，運行rake generate 及&& rake deploy就可以將生成的靜態站點上傳到S3中區。然后就可以通過S3的EndPoint來訪問新站點了。（EndPoint可以在Amazon management console的S3 dashboard的 ‘Static Website Hosting’ 標簽中找到）

當然現在還不能使用自己的域名來訪問，你可以通過配置CNAME來啟用自己的域名。

下篇文章會講如何將CloudFront作為內容分發，并且如何將自己的域名與CloudFront綁定。

現在我的博客已經在云端了，地址是<www.huangbowen.net>

文章列表