大学時代の研究をまとめたサイトを WordPress で構築して EC2 でホストしてたのですが、
- ラトビアあたりからの不正ログイン試行のアラートが Wordfence から頻繁に送られてくるようになった
- そもそも更新もしないし PV も少ないし micro インスタンスでも運用するコストが見合わない
という理由で静的化プラグインの StaticPress で静的化して S3 から配信することにしました。
今回作業したのはこちらのサイト。
具体的な作業内容はまたどこかで書ければと思うのですが、諸々の設定が終わった後はまったのがデザイン崩れ。崩れというより css が当たっていない。
テーマが対応していないとダメだ、という記事も見かけたのですが結論としては css のファイルが S3 アップロード時に Content-Type:text/plain になってしまっていたのが原因。Content-Type:text/css に変更することで問題なくデザインが適用されました。
/tmp/static 以下に StaticPress で静的 html を吐いたとして、
s3cmd put -r --acl-public /tmp/static/* s3://<バケット名>
などとするとバケットにファイルが転送されますが、そのままだと css ファイルのメタデータは下記のようになってしまいます。
s3cmd でバケット内のファイルのメタデータを一括変更することが可能ですので、続けて
s3cmd modify --add-header='Content-Type':'text/css' s3://<バケット名>/*/*.css
などとすればバケット内の全 css の Content-Type が書き換わります。
これで WordPress と同じデザインが再現されました。
ちなみに余談ですが、http://jushock.hateblo.jp/entry/2014/08/05/203840 に書かれている
記事のタイトルは 〜.html というリンクになっているがアクセスするとディレクトリになってしまうという事だった。
という問題にもはまり（ページ名.html というディレクトリができてしまう）、試行錯誤した結果、パーマリンク設定のカスタム構造は
http://beniyama.com/%category%/%postname%/
で落ち着きました（%postname%.html などとしなくて良かった）。
参考）
