WordPress+VPSからHugo+さくらのレンタルサーバへ移行

July 7, 2018 by nakkaa

WordPressで動かしていた当サイトですが、ついにHugoへ移行しました。

今回やったこと

  • WordPressからHugoへのコンテンツ移行
  • VPS(IDCFクラウド)からさくらのレンタルサーバ(スタンダードプラン)へ引越し

なぜ移行したか

WordPressやVPSを管理する時間が取れず、アップデートが来ても1ヶ月くらい放置することもあり、セキュリティ上まずいと感じていました。

CMSを使わずHTMLファイルをそのまま置けば良いと思い、静的サイトジェネレータを使うことにしました。HTML置くだけならレンタルサーバでも十分だと考え、サーバの引越し作業も行うことにしました。

作業内容

Hugo導入からさくらのレンタルサーバへアップロードするまでのに実施した作業です。 作業時間は、数日に分けて行ったので、16時間ほどかかりました。

Hugoの導入

Hugoを自分のパソコンに導入します。やり方は公式サイトにあります。

Quick Start | Hugo

WordPressからHugoへコンテンツを移行する

WordPressの固定ページ、投稿などのコンテンツをHugoに移します。やり方は以下のリンクにありますが、公式サイトにある wordpress-to-hugo-exporter を使います。

Migrate to Hugo | Hugo

  1. wordpress-to-hugo-exporter をWordPressのpluginディレクトリに入れます。
  2. ターミナルを開き、WordPressが動いているサーバへアクセスします。
  3. WordPressのpluginディレクトリへ移動し、 php hugo-export-cli.php を実行します。
  4. tmp ディレクトリにエクスポートした結果が保存されるので、ダウンロードしておきます。
  5. ダウンロードしたmdファイルをHugoのcontentディレクトリに格納します。

ブラウザでWordPressの管理画面を開いて、ダウンロードできるものだと思って数時間無駄にしました。Readmeはちゃんと読むべきですね。。。

コンテンツファイルの修正

画像のURLを変更する必要があったため、下記のコマンドを Hugoのcontentディレクトリ配下で実行しました。

grep -lr 'http://xxxhttps://7ka.org/wp-content/uploads' ./* | xargs sed -i -e 's|http://xxxhttps://7ka.org/wp-content/uploads|http://yyy.xxxhttps://7ka.org/wp-content/uploads|g'

記事の投稿日時をJSTにするため下記コマンドも実行。( 実施する必要があるかは要確認 )

grep -lr '+00:00' ./* | xargs sed -i -e 's/+00:00/+09:00/g'

URLが http://hogehoge/kodomo/mago/himago/ のように、孫、ひ孫ページになるページがあったため、markdwonファイルに個別に修正を入れます。

url: /kodomo/mago/himago/

DNS設定変更、SSL証明書発行

ドメインのネームサーバとDNSのレコードを変更します。 1時間ほど放置した後、さくらのレンタルサーバでSSL証明書の申請を行います。

URLリダイレクト

下記サイトを参考にhttpで来たアクセスをhttpsに転送します。

.htaccessによるアクセス制御 – さくらのサポート情報

.htaccess を作りサーバに設置。

SetEnvIf REDIRECT_HTTPS (.*) HTTPS=$1 
<IfModule mod_rewrite.c>
RewriteEngine on 
RewriteCond %{ENV:HTTPS} !on 
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] 
</IfModule>

サーバへアップロード

hugo -D で作成される public ディレクトリの中身をレンタルサーバへFTPでアップロードします。

VPSの閉鎖

お世話になったVPSは、バックアップをとってシャットダウンします。

導入後所感

よかった点

  • WordPressと違い動的にページを作成していないので、ページの表示が早くなりました。
  • エディタを開いて、markdownで記事が書けるので、記事執筆がしやすくなりました。重い管理画面にイラつくことはない。
  • セキュリティアップデートを気にしなくてよくなりました。

悪かった点

  • 記事数が100を越えると、どのファイルがどの記事だったか探すのが大変。一覧性が悪い。
  • スマホやタブレットで更新できない。(私は滅多に更新しないため、デメリットとは感じない)

5月のGW明け頃から、「WordPressやめたい。。。アップデートめんどい。。。」とぼやき続けていたので、やっと導入にたどり着けて私としては満足です。

今後実装したい機能

  • 新規記事を投稿した時に、Twitterへ投稿通知をポストしたい。
  • テーマの改修
    • ヘッダーのアイコンになんのリンクかテキストを入れる。
    • SEO対策。
    • サイドバー実装。
    • 検索機能
    • タグ/カテゴリ名が日本語だとうまく動かないっぽい。
  • アップロードを自動でやってくれるスクリプト作成。

© 2018 nakkaa