2016年に新しいブログシステムのHexoへ移行しました。早いものでWordPressからHexoに移行して数年が経ちましたので、ここで少し感想と苦労話を技術系寄りで書いていきたいと思います。
WordPress(ワードプレス)は有名なブログソフトウェアの1つです。個人のブログを作成する目的以外に、自身でブログ運営が可能なサイトとしてシステムごとお客さんに提供できるのが特徴だと思います。
ですが、個人ブログに限ってはWordPressの大きな枠組みを利用するのが面倒に感じました。そこで出会ったのが静的サイトジェネレータです。今回は個人ブログのジェネレータ導入実録として参考にしていただければ光栄です。
目次
このブログの運営目的について
まず簡単に、このブログについてご紹介したいと思います。このブログは普段趣味で撮影している写真や機材に関する話題を日記やまとめにしてみたり、Web関連で気になったことを備忘録として残しています。
日記の目的は、撮影した写真を広く見てもらうための窓口の1つと捉えています。また、色んなご縁により写真展に参加させていただく機会が増えてきました。そこでポートフォリオに誘導する役割も備えています。
WordPressを辞めた理由
ブログは過去にWordPressで運営していました。ところが以下の内容に不満がありました。
何を始めるにもログインが必要
当たり前のように感じるかもしれませんが、WordPressの場合は記事を書くのも、外観を変更するのも、まずは自サイトの管理ログインページに入る必要があります。
私はそれだけで億劫に感じる事がありました。更に、記事を編集するにも管理画面から該当の記事ページ編集画面へ移動する時間が伴うので、その待ち時間がどうにも耐えられなくなりました。
WordPressをローカル環境で扱えるツールも存在しますが、後述する静的サイトジェネレータと出来ることが同じなのでは？と思うようになってきました。
定期アップデートが頻繁で面倒
WordPressで避けて通れないのが、頻繁にアナウンスされるアップデートへの対応です。特にセキュリティに関わる更新が多いので、必ず更新しておきたいのですが、使用しているプラグインをカスタマイズしていると、作業はより大変で見通しの悪いものになります。
サーバー維持費用が掛かる
これもブログをやってれば当たり前だと言われそうですが、頻繁に更新しない趣味のサイトであっても、WordPressをサーバーで動かしている限り、サーバーの維持費用が掛かるケースが殆どです。
カスタマイズがスムーズではない
これは、WordPressへの知識が希薄なのが原因かもしれませんが、WordPressのテーマのカスタマイズや、結果として生成されるサイトページの把握が直感的ではなく、スピーディーではないと感じていました。
WordPressを辞めて静的サイト・ジェネレータに移行した
前述のような理由で、いつのまにかワードプレスの更新が億劫になってきました。要はめんどシンドかったのです(笑)そんな時出会ったのが、静的サイト・ジェネレーター界隈でした。
静的サイト・ジェネレータとは？
静的サイト・ジェネレーターはその名前の通り、手元のPCでブログで必要となるページを自動生成してくれるプログラムのことです。
生成した表示ページ(静的サイト)は巷にあるホームページと同様に、サーバーへ配置するだけでOKです。WordPressと決定的に違うのは、管理者用ログイン・ページなどのサーバーで動くプログラムが不要となることです。そもそもログインページが不要となりますので、スパムやセキュリテイの問題を気にせずにブログを長期運用することができます。
もちろん、前述したWordPressへの不満も全て解消されます。
静的サイト・ジェネレータは用途により様々なものが存在しますが、ブログ用途になると次のものが存在します。
- Jekyll(Ruby)
- Hugo(Go Lang)
- Hexo(Node.js) ←これ使ってる
- Middleman(Ruby+Node.js)
- Octopress(Ruby)
- Gatsby(Node.js)
執筆時の2016年現在で有名なものを挙げてみました。驚くことに毎年新しいフレームワークが誕生しています。
個人ブログではJekyllを使っているサイトが多く、企業ではサイト制作で人気の高いMiddlemanを導入しているケースが多いという印象です。どのフレームワークも目立って大きな性能差はありませんので、お好みの環境を選べば良いかと思います。今回はjavascriptで完結できる手軽さからHexoを選びました。Hexoからページ生成される表示例は以下のような感じになっています。
静的サイト・ジェネレータの特徴
静的サイト・ジェネレータの特徴は主に次の3つです。
記事データは単純なテキストファイル
静的サイトジェネレータはデータベースサーバーを持ちません。また記事の元なるファイルは、markdownファイルをはじめとした、シンプルなテキストファイルを管理する事になります。つまり、メモ帳やお気に入りのテキストエディタで編集する事ができます。私の場合はSublimeText3で編集しています。
サーバーに結果ページのみを配置して高速配信
前述しましたが、静的サイト・ジェネレータはその名の通り、表示する結果ページ(=静的サイト)を予め生成します。
手元のPCにはページを生成するためのジェネレーターをインストールして使います。ジェネレーターでは、記事の元となるテキストファイルを編集することになります。あとは生成されたページをサーバーに転送するだけです。
WordPressと比較して良い点は、記事の編集がテキスト・ファイルなので、サクサク更新作業が行える所や、サイトの表示が高速な点で有利です。また、Web制作の経験が有る方にとっては、フロントエンドで使われる流行りの技術をブログにも取り入れ易いのは嬉しいポイントではないでしょうか。実際に私もいくつかのプラグインを作りました。
手元のPCでライブ・プレビューができる
これもジェネレーターの良い所です。手元のPCでブログの表示結果を確認できます。また更新内容もリアルタイムで反映してくれるので、公開する前に変更作業の確認を素早く行う事ができます。これによってテーマのカスタマイズも直感的に進める事ができます。
WordPressからHexo移行後に苦労したこと
さて、ここからは苦労話です(笑)静的サイト・ジェネレータへ移行したお陰で、WordPressで不満に感じていた内容が殆ど排除されました。中でも、億劫に感じていた記事の更新作業が快適になったのは有り難いです。
ところが、良いこと尽くめのように見える話でも、苦労したところが多々ありました。
コメントや問い合わせフォームが配置できない
これは静的サイト・ジェネレーターのデメリットであり宿命ですが、PHPで駆動するような動的ページが配置できません。動的ページは、お問い合わせページや、コメント欄、記事の関連記事、人気記事といった機能を持ったページのことです。
ただし、現在はコメントやお問い合わせが可能なWebサービスが存在するため、そちらで代用する事が可能です。
テーマやプラグインが充実していない
歴史が長く利用者の多いWordPressと比べると、やはり外観を変える事ができるテーマやプラグインが少ないのもデメリットの1つです。特に、Wordpress有料テンプレートのような完成度の高いテンプレートは、私が見る限りで存在していません。カスタマイズや作り込む作業が嫌いな方にとっては導入デメリットの方が目立つ印象かもしれません。
WordPressでは当たり前のように存在するプラグインも、静的サイト・ジェネレータでは存在しなかったりするケースが多々ありました。無いものは諦めて妥協するか、開発者にプレッシャーを与えるか(←おい)、自身で作り出す気概が必要だと思いました。
1年間で作ったHexoプラグイン
ということで、上記のデメリットを緩和するために、代替案やプラグインを1年間にコツコツと作ってみました。
| Hexoに無かった機能 | 代替案や作成したプラグイン |
|---|---|
| AMP HTML生成 | hexo-generator-ampの作成。AMPの生成と妥当性の検証自動化が可能に。 |
| 関連記事・人気記事 | hexo-related-popular-postsの作成。WordPressのrelated-postsとpopular-posts系プラグインを意識して、機能を1つのプラグインに統合させてみました。Google Analyticsのアクセス情報を応用しています。 |
| コメント欄 | 当ブログでは未対応。設置するならdisqusを使おうと思ってます。Disqusとはブログのコメント機能を拡張できるサービス |
| 画像や動画の遅延読み込み | 遅延読み込みは、Webページの高速化手法の1つ。一般的なウェブサイトやWordPressで組み込まれる事が多いLazyLoadをHexoにも採用しました。当ブログでもテンプレートの内部処理で画像やYoutube、Googleマップなどの重いコンテンツをLazyLoad仕様に変換しています。 |
| 問い合わせフォーム | 当ブログではフォームズという無料フォームサービスを利用。その他はSNSへ連絡を求める方針で十分かなと妥協してます。実際に撮影依頼やその他の企業依頼も頂けているので現状で上手くいっているようです。 |
| リンク切れチェック | hexo-auto-link-checkerの作成。Wordpressで言うところのWP Broken Link Checkerのような機能で、記事のリンク切れを定期的に自動調査できる。 |
| 画像の比較 | 画像のBefore Afterを示すことができるhexo-tag-twentytwentyの作成。WorpPressのTwentyTwentyプラグインを最適化して移植しました。 |
| インスタグラムの埋め込み | hexo-tag-instagramの作成。instagramの投稿をURLやIDだけで埋め込み可能に。 |
| ツイッターの埋め込み | hexo-tag-twitterの作成。twitterの投稿をURLやIDだけで埋め込み可能に。 |
| flickr画像の埋め込み | hexo-tag-flickrの利用と高速化などの改良。flickrの画像をIDだけで埋め込みが可能に。 |
| 部分的なコンテンツの使い回し | hexo-include-markdownの作成。WordPressのPHPで言うところのinclude()のような機能。複数の記事の中で使い回したい内容を外部markdownファイルとして管理し読み込むことができます。 |
| アフィリエイト・リンクの埋め込み | hexo-tag-random-embedの作成。JSONファイルで管理しているコードを指定タグ別、またはランダムに挿入が可能に。好きな位置にAdsenseを挿入したり、Amazonのリンクを個別・カテゴリー別でランダムに設置できます。JSONコードはNode.jsからAmazonのAPIを利用して生成。 |
外観(テーマ)はいくつか試したあとで、hexo-theme-apolloをベースにカスタマイズしていく事にしました。
これで、ブログに欲しいなと思った機能はある程度揃った感触です。そのほか、Hexoで使っているプラグインやパッケージについては、興味がございましたら以下をご覧ください。
ブログを移行・再開して良かったこと
ブログの移行や再開をして良かったことを簡単にまとめてみたいと思います。
- 記事の更新意欲が上がった
- ブログを通して、撮影依頼やSNSの繋がりが生まれた
- 考えをまとめる力が少し上がった(気がする)
- 関心のある話題と無いものを知る機会が得られた
WordPressでブログを書いていた頃から時代が変わり、今ではSNSによる情報収集が主流なのかなと感じていました。ところが、ブログを再開してみると、色んなワードが切欠で記事や写真を見てもらえることが分かりました。
さらに、メーカーさんや企業からもご依頼を頂けるようになりました。趣味の活動だけでなく、生活面でも経済的にかなり自由になれる切っ掛けを頂いたので、この気づきが得られただけでも、ブログを新たな環境へ移行させてよかったと思っています。
アクセス推移について
ブログのアクセス数も徐々に増えています。
2016年の11月から4月まではリファラー・スパムのフィルタリングや、Google Analyticsの調整を行ってたので正確なビュー数がわかりません(^^;)
ブログを移行して1年でアクセス推移もゆっくりと伸びてきました。1年目はざっくり100〜150PV/日くらいのアクセスでしょうか。現在のアクセス数はご想像にお任せします(笑)
サーバー維持に関して
また、WordPressで運営していた時とは違い、サーバー維持費が全く掛からないのは嬉しいポイントです。個人ブログ、且つ小規模なサイトに限ってはお金を払ってサーバーを維持する時代は終わりを告げたと言っても、言い過ぎではない感触です。ただし、ドメイン代は必要となります。
ホスティングサービスとして使ってるGitHub Pagesはサーバー維持費が無料なのですが、執筆2016年の時点で10万リクエスト/月という帯域幅制限が設けられています。サイトにもよりますが、ざっくり見て3〜5万PV/月くらいまではGitHub Pagesで問題なく運営できます。
アクセスが増えてきたら同じく無料サーバーのNetlifyへ移行することもできます。Netlifyは、GithubやBitbucketのリポジトリをビルドできるNetlify CIやHTTP/2サポート、日本リージョンのCDNが使えるのが特徴です。
PVが数十倍に増えたので、GitHub PagesからNetlifyへ引っ越しました。Netlifyが快適すぎるので、PVが増える前に早めに移行しておけば良かったです。
SEOに関しては、もちろんコンテンツ次第ですが、GitHub Pagesでも問題なく上位に食い込めました。また、後半からコンテンツやリンクのイベントトラッキングを実装したので、ページ遷移や人気のある写真を把握できるようになり、直感的に目につく写真の特徴も知る事ができるようになりました。
写真の話題では、Twitterやfacebookへのシェア、技術系ではtwitter、LINE、はてなブックマークのシェアが多めです。
ということで、ブログに関する感想を技術系寄りで振り返ってみました。WordPressに感じていた不満点や、移行するメリット・デメリット・苦労話などが何かの参考になりましたら幸いです。