この記事を書いてる人: 
tea

昨年に新しいブログシステムへ移行しました。早いもので、WordpressからHexoに移行して1年が経ちましたので、ここで少し感想と苦労話を、技術系寄りで書いていきたいと思います。

tea dugong | Sony A7R2 + Sonnar T* FE 55mm F1.8 ZA
 tea dugong | Sony A7R2 + Sonnar T* FE 55mm F1.8 ZA  photo by tea ©

Wordpress(ワードプレス)は有名なブログソフトウェアの一つです。個人のブログを作成する目的以外に、自身でブログ運営が可能なサイトとしてシステムごとお客さんに提供する事もできるのが特徴だと思います。

ですが、個人ブログに限ってはWordpressの大きな枠組みを利用するのが面倒に感じる事がありました。そこで出会ったのが静的サイトジェネレータです。今回は個人ブログのジェネレータ導入実録として参考にしていただければ光栄です。

Ads

目次

このブログについて

まず簡単にこのブログについてご紹介したいと思います。このブログは普段趣味で撮影している写真や機材に関する話題を日記やまとめにしてみたり、Web関連で気になったことを備忘録として残しています。

日記の目的は、撮影した写真を広く見てもらうための窓口の一つと捉えています。また、色んなご縁により写真展に参加させていただく機会が増えてきました。そこでポートフォリオに誘導する役割も備えています。

なぜWordpressを辞めたのか?

ブログは過去にWordpressで運営していました。ところが以下の内容に不満がありました。

  1. 何を始めるにもログインが必要

    当たり前のように感じるかもしれませんが、記事を書くのも、外観を変更するのも、まずは自サイトの管理ログインページに入る必要があります。私はそれだけで億劫に感じる事がありました。また記事を編集するにも管理画面から該当の記事ページ編集画面へ移動する時間が伴うので、その待ち時間がどうにも耐えられなくなりました。

    Wordpressをローカル環境で扱えるツールも存在しますが、これって静的サイトジェネレータ(後述)でローカルサーバー立ち上げるのと同じなのでは?と思うようになってきました。

  2. 定期アップデートやサーバーに関わる更新が頻繁

    Wordpressで避けて通れないのが、頻繁にアナウンスされるアップデートへの対応です。特にセキュリティに関わる更新が多いので、必ず更新しておきたいのですが、使用しているプラグインをカスタマイズしていると、作業はより大変で見通しの悪いものになります。

  3. サーバーを維持する費用がかかる

    これもブログをやってれば当たり前だと言われそうですが、頻繁に更新しない趣味のサイトであっても、Wordpressをサーバーで動かしている限り、サーバーの維持費用が掛かるケースが殆どです。

  4. ページデータの見通しとカスタマイズがスムーズじゃない

    これは、Wordpressへの知識が希薄なのが原因かもしれませんが、Wordpressのテーマのカスタマイズや、結果として生成されるサイトページの把握が直感的ではなく、スピーディーではないと感じていました。

静的サイト・ジェネレータに移行した

前述のような理由で、いつのまにかワードレプスの更新が億劫になってきました。要はめんどシンドかったのです(笑)そんな時出会ったのが、静的サイト・ジェネレーター界隈でした。

静的サイト・ジェネレータとは?

静的サイト・ジェネレーターはその名前の通り、手元のPCでブログで必要となるページを自動生成してくれるプログラムのことです。

生成した表示ページ(静的サイト)は巷にあるホームページと同様に、サーバーへ配置するだけでOKです。Wordpressと決定的に違うのは、管理者用ログイン・ページなどのサーバーで動くプログラムが不要となることです。そもそもログインページが不要となりますので、スパムやセキュリテイの問題を気にせずにブログを長期運用することができます。

もちろん、前述したWordpressへの不満も全て解消されます。

develop or drink ?
 develop or drink ?  photo by tea ©

静的サイト・ジェネレータは用途により様々なものが存在しますが、ブログ用途になるとJekyll(Ruby)Hugo(Go Lang)Hexo(Node.js)Middleman(Ruby+Node.js)Octopress(Ruby)Gatsby(Node.js)が有名だと思います。驚くことに毎年新しいフレームワークが誕生しています。

2016年現在で、個人ブログではJekyllを使っているサイトが多く、企業ではサイト制作で人気の高いMiddlemanを導入しているケースが多いという印象です。今回はjavascriptで完結できる手軽さから、Hexoを選びました。Hexoからページ生成される表示例は以下のような感じになっています。

自身のブログ
【一覧】markdownの記法まとめ・hexoで記事を書く方法

ジェネレータの特徴

静的サイト・ジェネレータの特徴としては、

  1. 記事の元となるファイルは単純なテキストファイル

    静的サイトジェネレータはデータベースサーバーを持ちません。また記事の元なるファイルは、markdownファイルをはじめとした、シンプルなテキストファイルを管理する事になります。つまり、メモ帳やお気に入りのテキストエディタで編集する事ができます。私の場合はSublimeText3で編集しています。

  2. 表示するページを予め生成し、サーバーに静的ページのみを配置

    前述しましたが、静的サイト・ジェネレータはその名の通り、表示する結果ページを予め生成します。手元のPCにはページを生成するためのジェネレーターをインストールして使います。ジェネレーターでは記事の元となるテキストファイルを編集することになります。後は生成されたページをサーバーに転送するだけです。Wordpressと比較して良い点は、記事の編集がテキスト・ファイルなので、サクサク更新作業が行える所や、サイトの表示が高速な点で有利です。

    また、Web制作の経験が有る方にとっては、フロントエンドで使われる流行りの技術をブログにも取り入れ易いのは嬉しいポイントではないでしょうか。

  3. 自身のPCでブログのライブ・プレビューができる

    ジェネレーターが備えているローカルサーバーでは、ページをリアルタイム更新してくれるので、公開する前に自身のPC内でプレビューしたり、変更作業の確認を素早く行う事ができます。これによってテーマのカスタマイズも直感的に進める事ができます。

苦労したこと

さて、ここからは、苦労話です(笑)静的サイト・ジェネレータへ移行したお陰で、Wordpressで不満に感じていた内容がほとんど排除されました。中でも、億劫に感じていた記事の更新作業が快適になったのは有り難いです。

Golden apple | Sony α7 + Sonnar T* FE 55mm F1.8 ZA
 Golden apple | Sony α7 + Sonnar T* FE 55mm F1.8 ZA  photo by tea ©

ところが、良いこと尽くめのように見える話でも、苦労したところが多々ありました。

  • コメントや問い合わせフォーム、動的なサイトが配置できない

    これは静的サイト・ジェネレーターのデメリットであり宿命ですが、お問い合わせページや、コメント欄、記事の関連記事、人気記事の配置ができません難しいです。これらのページはサーバー側で動作するプログラム(=動的サイト)が必要となるからです。

  • テーマやプラグインが充実していない

    歴史が長く、利用者の多いWordpressと比べると、やはり外観を変える事ができるテーマやプラグインが少ないのもデメリットの一つです。Wordpressでは当たり前のように存在するプラグインも、静的サイト・ジェネレータでは存在しなかったりするケースが多々ありました。無いものは諦めて妥協するか、開発者にプレッシャーを与えるか(←おい)、自身で作り出す気概が必要だと思いました。

ということで、上記のデメリットを緩和するために、代替案やプラグインを1年間にコツコツと作ってみました。

無かった機能 代替案や作成したプラグイン
AMP HTML対応 hexo-generator-ampの作成。AMPの生成と妥当性の検証自動化が可能に。
関連記事・人気記事 hexo-related-popular-postsの作成。wordpressのrelated-postsとpopular-posts系プラグインを意識して、機能を一つのプラグインに統合させてみた。
コメント欄 当ブログでは未対応。設置するならdisqusを使おうと思う。Disqusとはブログのコメント機能を拡張できるサービス
問い合わせフォーム 当ブログではフォームズという無料フォームサービスを利用。その他はSNSへ連絡を求める方針で十分かなと妥協。
画像の比較 hexo-tag-twentytwentyの作成
インスタグラムの埋め込み hexo-tag-instagramの作成。instagramの投稿をURLやIDだけで埋め込みできる。
ツイッターの埋め込み hexo-tag-twitterの作成。twitterの投稿をURLやIDだけで埋め込みできる。
flickr画像の埋め込み hexo-tag-flickrの利用と改良。flickrの画像をIDだけで埋め込みが可能になる。
部分的なコンテンツの使い回し hexo-include-markdownの作成。複数の記事の中で使い回したい内容を、外部markdownファイルとして管理し読み込める。複数の記事にカメラリストを表示させているが、そのコンテンツは別々のmarkdownファイルになっており定期的に更新している。更新すると読み込み元の記事の内容も最新の情報へ更新される。
アフィリエイト・リンクの埋め込み hexo-tag-random-embedの作成。jsonファイルで管理しているHTMLコードを指定タグ別、またはランダムに挿入できる。好きな位置にAdsenseを挿入したり、Amazonのリンクを個別・カテゴリー別でランダムに設置できる。

外観(テーマ)はいくつか試したあとで、hexo-theme-apolloを使うことにしました。

自身のブログ
hexoでblogを書くためのオススメtheme一覧

これで、ブログに欲しいなと思った機能はある程度揃ったかなぁという印象です。そのほか、Hexoで使っているプラグインやパッケージについては、興味がございましたら以下をご覧ください。

自身のブログ
Hexoブログで使ってるプラグインを晒してみる

ブログを移行・再開して良かったこと

ブログの移行や再開をして良かったことを簡単にまとめてみたいと思います。

  • 記事の更新意欲が上がった
  • ブログを通して、撮影依頼やSNSの繋がりが生まれた
  • 考えをまとめる力が少し上がった(気がする)
  • 関心のある話題と無いものを知る機会が得られた

Wordpressでブログを書いていた頃から、時代が変わり、今ではSNSによる情報収集が主流なのかなと感じていました。ところが、ブログを再開してみると、色んなワードが切欠で記事や写真を見てもらえることが分かりました。

この気づきが得られただけでも、ブログを移行してよかったなぁと思っています。

アクセス推移について

PV数の推移(4月〜10月)
PV数の推移(4月〜10月) ©

CTRと掲載順位の推移(過去90日間)
CTRと掲載順位の推移(過去90日間) ©

昨年の11月から4月まではリファラー・スパムのフィルタリングや、Google Analyticsの調整を行ってたので正確なビュー数がわかりません(^^;)

ブログを移行して1年でアクセス推移もゆっくりと伸びてきました。最近は大まかに言って100〜150PV/日くらいでしょうか。

サーバー維持に関して

また、Wordpressで運営していた時とは違い、サーバー維持費が全く掛からないのは嬉しいポイントです。個人ブログ、且つ小規模なサイトに限ってはお金を払ってサーバーを維持する時代は終わりを告げたと言っても、言い過ぎではない感触です。

ホスティングサービスとして使ってるGitHub Pagesはサーバー維持費が無料なのですが、10万リクエスト/月という帯域幅制限があるので、ざっくり見て3〜5万PV/月くらいまではGitHub Pagesで問題なく運営できます。

アクセスが増えてきたら同じく無料サーバーのNetlifyへ移行することもできます。Netlifyは、GithubやBitbucketのリポジトリをビルドできるNetlify CIやHTTP/2サポート、日本リージョンのCDNが使えるのが特徴です。

 2017年追記:Netlifyに移行しました

PVが数十倍に増えたので、GitHub PagesからNetlifyへ引っ越しました。Netlifyが快適すぎるので、PVが増える前に早めに移行しておけば良かったです(^-^;)

Netlify移行記:Github pagesから独自ドメイン+Netlifyの引っ越しでやったこと

SEOに関しては、もちろんコンテンツ次第ですが、GitHub Pagesでも問題なく上位に食い込めました。また、後半からコンテンツやリンクのイベントトラッキングを実装したので、ページ遷移や人気のある写真を把握できるようになり、直感的に目につく写真の特徴も知る事ができるようになりました。

写真の話題では、Twitterやfacebookへのシェア、技術系ではtwitter、LINE、はてなブックマークのシェアが多めです。

最後に

ということで、ブログに関する感想を、技術系寄りで振り返ってみました。Wordpressに感じていた不満点や、移行するメリット、デメリット、苦労話などが何かの参考になりましたら幸いです。それでは!

Ads
 記事を書いてる人
gravatar
tea (てぃー)

ゆるふわポートレートや自然風景を撮影しています。その他の趣味は音楽制作/メダカの鑑賞/web。撮影や写真掲載・寄稿等のご依頼もお待ちしてます。お問い合わせは以下のフォームまたはSNSよりお願い致します。

 お問い合わせ

 撮影のご依頼

 ポートフォリオ

 各作例のご紹介

 シェアする
 記事名とURLをコピーする

WordpressからHexoにブログ移行して分かったメリット・デメリット - TPB
https://photo-tea.com/p/wordpress-to-hexo/

 おすすめ記事
Ads
 作例掲載