tanaken.metanaken.mePortfolioPosts2/17/2019個人ブログをWordPressからHugo+Netlifyへ移行した際の知見をまとめるこれまでは、WordPress+Xserverで個人ブログを運用していました。投稿頻度、アクセス数に対して、年間1万円近くのサーバ運用代はオーバースペックな感じがしたため、ブログをWordPressからGO製の静的サイトジェネレータHugo+Netlifyへと移行しました。移行の際に得られた知見をまとめておきます。最近Goばかり書いてるので、Go製って所が結構響きました。テーマ数はWordPressと比較すると多くはないですが、シンプルでかっこいいデザインが多い印象をうけました。他の静的サイトジェネレータを使用したことがないため、実感はないのですが、生成速度が速いという特徴があります。他のエディタを使って、マークダウンでブログ記述できる点も強みです。Netlifyホスティングサイトの選定に関しては、NetlifyとGithubPages、FirebaseHostingの三者で悩みました。どのサービスも素晴らしく、その上無料枠に収まりそうでしたので、選ぶに選びきれないのですが、こちらのサイトを参考にして、Netlifyを使用することにしました。検索流入数を下げたくないので、スピード優先でFirebaseHostingにしようかと迷ったのですが、アフィリエイトを目的としたサイトでもないので、兼ねてから使ってみたいと思っていたNetlifyを採用しました。Hugoの導入Mac本体にhugoをインストールします。hugoプロジェクトを作成したいディレクトリ上で、コマンドを打ち込んでサイトを作成します。プロジェクト名テーマを追加します。今回はシンプルでかっこいいtaleというテーマを使っています。themes/taleこれだけで、サーバは起動します。-Dテーマのカスタムフォントやデザインなど、カスタマイズしたい点が少なからずあると思います。Hugoでは、thems以下を書き換えることなく、見た目を調整できます。HTMLのカスタムthemes以下のHTMLファイルを直接編集することはありません。上書きしたいファイルをオーバライドすることでHTMLファイルをカスタムすることができます。次のような/themes/tale/layouts/partials/single/post-info.htmlから著者情報を取り除きたいとします。}}</div>layouts以下のディレクトリ構造が同じになるように気をつけながら、/layouts/partials/single/post-info.htmlを作成し次のように編集することで、上書きできます。}}</div>CSSのカスタムCSSを上書きする際には、/static/css以下に配置します。,/static/css/costom.cssというファイルを作成し、CSSを上書きしたとします。すると、配置したCSSをHTMLからスタイルシートとして呼び出さなくてはなりません。したがって、同様に/layouts/single/header.htmlを作成して、以下を追記することで、スタイルシートを呼び出すことが可能です。/>触ったプロパティによっては、トップページにだけCSSが反映されないことがあります。その時は、/layouts/partials/head.htmlを作成して、直にリンクを書き込むと反映されました。i18nのカスタム標準で日本語対応のja.ymlやja.tomlは用意されていないかもしれません。en.toml等を参考にしてja.yamlを作成したら、/i18n/を作成して配置することで、反映することができます。Hugoには、標準でハイライト機能が備わっています。テーマは自分で設定しないと反映されません。自分のコードをかっこよく表示したいですよね?まずは、config.tomlに以下を追記します。trueこれで、コードをマークダウン記法にしたがって、```で囲うことで、ハイライトが適用されます。続いて、Syntaxテーマをカスタムしていきます。私は、長年Monokaiを愛用してるため、Styleをmonokaiとしていますが、選べるテーマは他にたくさん存在します。次のコマンドを打ち込んでください。syntax.cssルートディレクトリ以下にsyntax.cssが生成されたはずです。これを/static/css/に配置します。CSSのカスタムで触れたのと同様に、ヘッダーにリンクを貼ります。/layouts/single/header.htmlに以下を追記しておきます。}あとは、エディタで以下のように記述すると、うまくテーマが反映されているのがわかるはずです。```ブラウザでは、このように表示されるはずです。world")}```の後に使用している言語を描き忘れないようにしましょう。FooterをカスタムしてGithubとTwitterアイコンを付与します。SVG形式のアイコンをフッターに貼り付けます。pointer;}こんな感じになります。NetlifyへデプロイNetlifyへのデプロイは本当にあっという間でした。プロジェクトをリモートリポジトリにプッシュしてNetlifyと連携するだけです。会員登録の5分後にはデプロイが完了していました。NetlifyのUIが洗練されているため、指示に従えば、迷うことはないでしょう。一つ注意するとしたら、Hugoのバージョンを指定する箇所です。デプロイの際にバージョンを指定する箇所があるのですが、デフォルトだと少し古いバージョンをさしているため、ローカルのバージョンを確認した上で、手動で一致させる必要がありそうです。WordPressのデータを移行WordPressのコンテンツをMarkDownに変換してくれるツールをオープンソースで作成してくれていく方がいたので、ありがたく使わせていただきました。SchumacherFM/wordpress-to-hugo-exporterまずGithubからzip形式でダウンロードします。zip形式でアップロードします。Hugoを選択すると、これまで投稿したWordPressのコンテンツがマークダウン形式に変換されてzip形式でダウンロードされます。あとは、これらをcontent以下に配置すれば、苦労することなく記事を引き継ぐことが可能です。写真のサイズなど少し修正すべき箇所は見当たります。アクセス数の多かった10記事を修正てアップしました。ドメインの移行お名前.comにドメインを登録します。configurationの欄にしたがってDNSの設定をしていきます。私は、お名前.comを利用してドメインを取得しました。以下の記事が参考になりました。【Netlify】カスタムドメインを設定するNetlifyとGithubで独自ドメインのサイトをHTTPS化したメモ反映まで、数十分かかります。SEOについてSEOについては、あまり詳しくありませんが、WordPressから移行してきた記事のURL構造が変わらないように意識しました。アクセス数の推移は今後注目していきます。まとめ移行で週末を丸々使ってしまいましたが、引き締まっていてカッコいいブログになったので、かなり満足度が高いです。個人ブログの所有は記事執筆のモチベーションにもなるのでかなり良いですね!!また、Qitaとブログの使い分けが未だ自分の中で確立されていませんが、2019年は、Qitaには簡単なメモ書き、ブログにはそれなりのボリュームになりそうな記事を執筆するという使い分けでひとまず進めていきたいと考えています。