ぼっちサーファーのブログ

一人海外サーフトリップの記録と雑記

はてなブログからWordPressへの移行とhttps(SSL)化の手順まとめ

2018/6/6〜25までバリ島一人サーフトリップの記録

リアルタイム更新の記事はこちら

当ブログを「はてなブログ」から「WordPess」へ移行する。


【現状の環境】
はてなブログ + 独自ドメイン + 非https

【移行後】
さくらのVPS + Kusanagi + WordPress + 独自ドメイン + https


移行に伴う条件
・パーマリンクは「/(スラッシュ)」を含まない形式に301リダイレクトを行うこととする。
・Kusanagaiコマンドを使ってSSL化する











WordPressのパーマリンク設定

移行準備が完全に完了するまでhostsファイルを編集して新サーバを仕上げておけば移行時のダウンタイムをほぼゼロにすることができる。
DNS切り替え前にドメイン名で新サーバにアクセスする「hostsファイルの変更方法」 : ビジネスとIT活用に役立つ情報



設定 → パーマリンク設定 → カスタム構造 → /%postname%/
f:id:Apps:20181225145100p:plain


この設定により移行後のURLは下記のようになる。
※数字は投稿日時

【カスタムURL】
http://[ドメイン名]/entry/[カスタムURL]

http://[ドメイン名]/[カスタムURL]

【標準のフォーマット】
http://[ドメイン名]/entry/2011/11/07/161725

http://[ドメイン名]/2011-11-07-161725

【タイトル】
http://[ドメイン名]/entry/2011/11/07/週末は川に行きました

http://[ドメイン名]/2011-11-07-週末は川に行きました

【ダイアリー形式】
http://[ドメイン名]/entry/20111107/1320650325

http://[ドメイン名]/20111107-1320650325

当ブログでは【カスタムURL】【標準のフォーマット】が混在しているため記事URLに「/(スラッシュ)」が含まれている記事がある。

しかしWodPressでは「/(スラッシュ)」を含む記事URLは許されていない。

プラグインやfunctions.phpで関数を作れば「/」を利用するようにもできるが今回の移行では301リダイレクトさせる。


その理由は3つ。

1.パーマリンクはWordPressの重要な部分なので標準仕様に従う
2.記事URLから/entry/ディレクトリも抜きたい
3.最終的にhttps化により301リダイレクト必須となるため


リダイレクト方法については後述。



はてなブログからデータエクスポート

はてなブログ標準のエクスポート機能を使う。

はてなブログ管理画面のダッシュボードから設定→詳細設定→エクスポート(記事のバックアップと製本サービス)
f:id:Apps:20181225144432p:plain



MT(MovableType)形式のテキストファイルとしてダウンロードしておく。


WordPressにインポート

ツール→インポート → Movable Type と TypePad → 今すぐインストール → インポーターの実行

記事URLの「スラッシュ」が「ハイフン」に変換された形インポートされる。



見出しタグ置き換え(H3〜H5)

はてなブログは記事タイトルがH1。なぜかH2が飛んでH3、H4、H5となっている。

H3 → H2
H4 → H3
H5 → H4


にそれぞれ置換する。

postデータを正規表現を使った置換ができるプラグイン「Search Regex」を使う。

Search Regex

H3 → H2を行う。
f:id:Apps:20181225152712p:plain

Searchは検索のみ。検索後にReplase(置換)を行う。Search & Save を行うまでは保存されない。

H3から順次H5まで行う。


「はてなフォロライフ」から「WordPess」内に画像を複製

はてなブログに貼り付けた画像は
https://cdn-ak.f.st-hatena.com/images/fotolife/○/○○○/画像URL.jpg
というようなURLとなってる。


①記事中に使われているURLを抜き出す
②URLを元に一括でダウンロード
③WordPressにアップロードする。

①記事中に使われているURLを抜き出す

MT形式のファイルをメモ帳などで開き下記サイトで画像srcのみを抜き出す。

リンクと画像の抜き出しツール

1.ソースに記事のテキスト貼り付け
2.タグ取得
3.テキスト出力 <一覧>
4.ソースにimg srcリストが出力される
f:id:Apps:20181225161810p:plain



4.のリストは重複しているため下記のようなサイトでユニークなリストを作っておくと良い。
ソート&重複削除オンラインツール : メールリストやテキストの重複行を一発削除 | 初代編集長ブログ―安田英久 | Web担当者Forum




②URLを元に一括でダウンロード

Chromeの拡張機能を使って一括ダウンロードを行う。

1. Chrono ダウンロードマネージャーのインストールと有効化
Chrono Download Manager - Chrome Web Store

2.Chromeのダウンロード設定を変更する。
f:id:Apps:20181225164123p:plain
保存先の指定と保存場所の確認をOFFにしておく



3. Chrono ダウンロードマネージャーに①で取得したリストを貼り付け→開始
f:id:Apps:20181225162428p:plain


今回は1500個程の画像がダウンロードされた。

圧縮せずアップロードしていた画像もあるならこの機会に圧縮しておくとよい。


「画像 圧縮 一括 WEB」などでググると類似サービスがたくさんヒットする。



③WordPressにアップロードする。

WordPress → メディア → 新規追加 → マルチファイルアップローダー にまとめてドラックアンドドロップ。

f:id:Apps:20181225163330p:plain

1,500枚で10分ほどかかったような気がする。



WordPress記事のimgタグのsrc置き換え

記事中の画像srcをWordPress内のURLにSearch Regexを使い置換する。

https://cdn-ak.f.st-hatena.com/images/fotolife/○/○○○/画像URL.jpg

http://ドメイン/[アップロード年4桁]/[アップロード月2桁]/画像URL.jpg


f:id:Apps:20181225153239p:plain

アイキャッチ作成

記事のアイキャッチはインポートされないので作成する。

WordPressプラグイン「Auto Post Thumbnail」をインストール → 有効化 → 実行
ja.wordpress.org

記事中に最初に出てくる画像をアイキャッチとして自動設定される。
f:id:Apps:20181226085851p:plain

一度実行すればプラグインは削除してOK。


301リダイレクト設定

Googleからの評価を引き継ぐため元記事URLから新記事URLにリダイレクトさせる。

リダイレクト方法はいくつかある。
なお今回の設定は記事のカスタムURLには「/(スラッシュ)」が含まれていないことを条件としている。


1.WordPressプラグイン「Redirection」

Redirection | WordPress.org

WordPress側でリダイレクトする。

【メリット】
・設定が簡単

【デメリット】
・下位レイヤーでの処理になるので処理コストが高い

ソースURL /entry/([0-9]{4})/([0-9]{2})/([0-9]{2})/(.*)$
ターゲットURL http://[ドメイン]/$1-$2-$3-$4
f:id:Apps:20181226093247p:plain



2.サーバ設定でリダイレクトする
Apacheなら.htaccessかhttpd.conf。nginxならnginx.confによりリダイレクトさせる。

【メリット】
・処理が高速

【デメリット】
・設定を間違えるとWebサーバが起動しなくなる



なお処理速度はconfファイルでの設定が最も早い。

httpd.conf or nginx.conf < .htaccess <<< プラグイン


今回の環境ではKusanagi+nginxなのでnginx.confによる設定を行う。

Kusanagi環境でのプロビジョニング毎のnginx.conf設定

Kusanagi環境では/etc/nginx/conf.dにプロビジョニングごとのnginx.confファイルが保存されている。

[プロビジョニング名]_http.confを編集する。


server節に下記を追記
rewrite "^/entry/([0-9]{4})/([0-9]{2})/([0-9]{2})/(.*)$" http://[ドメイン]/$1-$2-$3-$4 redirect;
f:id:Apps:20181226094430p:plain



kusanagiコマンドを使用しnginxを再起動して設定反映
kusanagi nginx




ココまで出来たら新サイトのデザインなどを作り込む。

完成すればDNSを新サーバに向け設定する。


DNSを新サイトへ向ける

DNS設定を変更し新サイトへアクセスを流す。

はてなブログで独自ドメインを設定しているならDNSにCNAMEレコードを登録しているはず。

はてなブログを独自ドメインで利用する - はてなブログ ヘルプ

このレコードを削除し、新サイトへAレコードを設定する。


https化 + hsts設定 その他

DNS設定がある程度浸透したらKusanagiコマンドによりSSL化とhsts設定、httpsのwwwあり・なしの統一なども行う。

手順は下記。
www.lonely-surfer.com





まとめ & 移転のご挨拶 & 今後について

この記事は「はてなブログ」で書いているし公開時もDNSは「はてな」に向けたまま。


近日中ににDNS設定を変更します。


いままで「はてなブログ」で絡んでくれた方本当にありがとう。


今後はTwitterなんかでよろしくお願いします。
ぼっちサーファー@冬は真面目に仕事 (@Apps_surf) | Twitter



移転の理由

このブログはサーフィンネタが多いので冬にはアクセスが落ちる。

https化のタイミングを見計らっていたらPro更新まで半年を切り「ついでに移転も行おうか」となった。


他に運営しているブログは全て「さくらのVPS+Kusanagi+WordPress」。

「さくらのVPS」に年間4万円強払っているので「はてなブログ Pro」との2重課金が無駄だと思ったのも大きい。



「はてなブログ」歴1年半ではあるけど大きな不満を持っていたわけではない。

数百万PV/月を超えるようなブログを問題なくホスティングして600円/月なら激安なぐらいだろう。


しかしVPSに比べると不自由であるのも事実。

その不自由さは「記事執筆に集中できる」という意味では大きなメリットでもあるんだろうけどね。


デザインやサーバの設定してる時間あれば有用な記事書いたほうがよっぽどリターンが大きい。



でもサーバをいじって息抜きしたいときもあるのだよ。

仕事してる感あるしw


はてなブログへの感謝

月20万円を目標にブログを始めたが、このブログでは到底届かなかった。

最高でも月7万PV。3〜4万円ぐらいだろうか。


でも「記事を書く習慣」、「アクセスを集めるキーワード」や「ジャンル」の当て感?的なものを手に入れられた。

また「アクセスの伸び方」を身をもって知ったのが大きい。


「3ヶ月〜半年で伸びてくる」と「知って」いても、アクセスのないサイトに記事を投入し続けるのは本当に難しい。

たぶん「はてなブックマーク」や「言及」のシステムがなかったらブログを続けられなかったと思う。

「はてブ」の仕様が変わった今でもブログ初心者に「はてなブログ」がオススメなのは変わりない。



強くてニューゲーム

ブログは「強くてニューゲーム」がメチャクチャ効く。

このブログの経験を元に昨年12月に始めた収益に全フリした新サイトの収益が100万円/月を突破した。

これぐらいの利益になると複業フリーランスの自分にとっても大きな柱になってる。

まぁこんな収益何年も続けないけどね。

ネットは年商4,500万円が2年でゼロになるような世界だから。

いつ無くなってもいいように別のミニ事業も育て中。


ミニ事業なんて月10万円でいいんだよ。

10個あれば。


「お金持ち」より「時間持ち」がモットーなので時間に縛られず出勤なんかしなくて良くて、その気になったら1ヶ月ぐらい休める。

そんなミニ事業をたくさん増やしていきたい。


また、遊べるうちに家族と旅行や海外サーフィンもドンドンいこう。


今後もそんな生活をキープできるよう努力しようと思う。


このブログは残す

このサーフィン+雑記ブログは残しておこう。

このサイトでちょくちょく紹介しているバリのレンタルバイク屋さんから「ぼっちサーファーのブログ見たってお客さん来たよ!」というのを何回も聞かせてもらった。

前回のバリトリップで作ったサーフィンガイドプランも半年で10人以上の申し込みが来ている。


「誰かの役に立てれば」と思って書いているブログなのでこんな嬉しいことはないよね。



収益ブログは儲からなくなったら辞めるだろう。

でもこのブログは続けるんじゃないかな?