Published on

Wordpress から Octopress + Amazon/S3 へ移行

Authors

最近，Wordpress から Octopress に乗り換えました．移行時にやったことのメモです．Wordpress のときと同様に daisukekobayashi.com で運用することを想定しています．

移行理由はいろいろとあるのですが，マークダウン & ローカルで記事を管理したかったというのがあります．記事の編集も vim を使って書けるので楽です．全体の修正も grep などを使って行えるので非常に効率的です．

Wordpress から記事の抽出

この作業が一番大変でした．今までテキストで書いていたのですが，マークダウンの練習と思って，全記事見直しました．自動化ツールとして，検索したところ下記の 2 つのツールを見つけました．

  1. WordPress to Jekyll Exporter
  2. Exitwp

1 は Wordpress のプラグインとしてインストールして記事をエクスポートします．今回はこちらを使用してエクスポートしたのですが，記事のエンコードがバラバラだったり記事の作成日時が入らなかったりしました．今回は全記事を見直しました．

2 は作業完了後に見つけました．標準のエクスポート機能で抽出した xml を解析して記事を抽出する形式みたいです．Linux 系のシステムじゃないとインストールするものがいっぱいあって大変ですが，こちらで抽出したほうが，テキスト上の改行が多いですが文字のエンコーディングなどもしっかりと抽出できていました．ただ記事の投稿日時のタイムゾーンが加味されておらず，-9 時間されていました．

両方とも適当にしか使ってないので，細かな設定とか全く見ていません．

Ruby のインストール

まずは Ruby をインストールします．

$ curl -L https://get.rvm.io | bash -s stable --ruby
$ rvm install 1.9.3
$ rvm use 1.9.3
$ rvm rubygems latest

一度ターミナルから抜けた場合は下記のコマンドを実行します．

$ source ~/.rvm/scripts/rvm
$ rvm use 1.9.3

Octopress のインストール

$ git clone https://github.com/imathis/octopress.git octopress
$ cd octopress
$ gem install bundler
$ bundle install
$ rake install

S3 バケットの作成

S3 でサイト公開用のバケットを作成します．

  1. Create a Bucket
    • Bucket Name: daisukekobayashi.com
    • Region: Tokyo
    • Create
  2. Permissions
    • Add bucket policy
    • Sample Bucket Policies
    • リンク先の Granting Permission to an Anonymous User の部分をコピーして貼り付け
    • bucket 部分を作成したバケット名に置換
    • Save
  3. Static Website Hosting
    • Enable website hosting にチェック
    • Index Document: index.html
    • Error Document: error.html
    • Save

S3 にデプロイ

まずは s3cmd をインストールします．

sudo apt-get install s3cmd

s3cmd インストール後，下記のコマンドで configure を行います．最初にアクセスキーとシークレットキーの入力を求められます．このキーは AWS のアカウントページのセキュリティ証明書のページ中盤に書いてあります．ここ のページの中盤です．設定完了後，接続テストに成功すれば OK です．

$ s3cmd --configure
Enter new values or accept defaults in brackets with Enter.
Refer to user manual for detailed description of all options.
Access key and Secret key are your identifiers for Amazon S3
Access Key:

Rakefile を編集します．デフォルトのデプロイ先を s3 に変更し，設定とコマンドを編集します．


deploy_default = "s3"

## -- S3 Deploy config -- ##
s3_bucket       = "daisukekobayashi.com"
s3_cache_secs   = "3600"
s3_delete       = true

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

下記コマンドを実行すれば，s3 で設定されている Endpoint でページが表示できるはずです．

$ rake generate
$ rake deploy

Route53 で独自ドメイン運用

Hosted Zone を作成します．

  1. Create Hosted Zone
    • Domain Name: daisukekobayashi.com
  2. Go to Record Sets
  3. Create Record Set
    • Type: A - IPv4 address
    • Alias: Yes
    • Alias Targe: -- S3 Website Endpoints -- daisukekobayashi.com
  4. Create Record Set

パーマリンクの修正

今まで Wordpress のパーマリンクは /blog/title にしていました．今回もこのリンクにするつもりで _config.yml で permalink: /blog/:title とていました．プレビュー上では思った通りに動作していたのですが，s3 にアップロードすると/blog/title/ と末尾にスラッシュが付いてしまうという現象に遭遇しました．

いろいろと調べてみたところ，Octopress はデフォルトだと public/blog/title/index.html に記事を生成しています．これを s3 にアップロードするので記事への参照が title フォルダ経由になってしまい，末尾にスラッシュが付いてしまっていました．

Octopress の設定で変えることができるかと思って調べてみたのですが，よくわからなかったので python でスクリプトを書いて調整しました．

後から気づいたのですが，記事ごとに permalink を指定するのでいけるかもです．

#! /usr/bin/env python
# -* coding: utf-8 -*-

import glob
import os
import shutil

public_dir = "public"
blog_dir = "blog"
index_file = "index.html"

exclude_dir = ["archives", "categories"]


if __name__ == '__main__':

    file_pattern = public_dir + os.sep + blog_dir + os.sep + "*"

    for file in glob.glob(file_pattern):
        if not file.split(os.sep)[-1] in exclude_dir:
            shutil.move(file + os.sep + index_file, file + ".html")
            os.rmdir(file)
            os.rename(file + ".html", file)

rake generate を作成後に上記スクリプトを実行しフォルダ構成を変更します．

これでいけるかと思ったのですが，s3cmd はデフォルトの mime-type が binary/octet-stream となっておりリンクをクリックするとファイルのダウンロードメニューが出てしまいます．そこで s3cmd のデフォルト設定を変更します．~/.s3cfg を開きデフォルトの mime-type を変更します．

default_mime_type = text/html

s3cmd の mime-type の予測ように下記のパッケージをインストールします．

$ pip install python-magic

最後に Rakefile を修正します．拡張子から mime-type を予測するオプションを追加しました．これで拡張子がついていれば，そのファイルタイプに，なければ text/html となり，拡張子なしファイルを html として認識するようになります．

desc "Deploy website via s3cmd"
task :s3 do
  puts "## Deploying website via s3cmd"
  ok_failed system("s3cmd sync --acl-public --guess-mime-type #{"--delete-removed" unless s3_delete == false}  --add-header \"Cache-Control: max-age=#{s3_cache_secs}\"  public/* s3://#{s3_bucket}/")
end

Bitbucket でソースコードを管理

まず Bitbucket でリポジトリを作成します．octopress フォルダにて下記のコマンドを実行しコードをプッシュします．

$ git add .
$ git commit -m "Commit message"
$ git add remote bitbucket git@bitbucket.org:<username>/octopress.git
$ git push -u bitbucket master

参考

Discuss on Twitter • View on GitHub