ブログはWordPressは辞めて、全て静的サイトジェネレーターに移行したい

# 概要
簡単にブログを作ることができる静的サイトジェネレーターが沢山あるのに、使いづらいWordPressを使った案件が多いのと、静的サイトジェネレーターの魅力を紹介している記事が少ないかな？と思ったので、今回記事を書いてみました。

~~ちなみに、私のポートフォリオサイトはHUGOで実装していますが、無料で運用出来ています（正確には、HUGO + PostCSS + Netlify）~~
かかっているお金はドメイン代のみです（独自ドメインじゃなければ、全て無料で利用可能）
[ポートフォリオサイト](https://shinya-sato.com/?link=qiita)

2019/01に、認証を導入したいと思ったので、GatsbyJSにリプレースしました。
昔のHUGOのポートフォリオサイトは、[GithubのRepository](https://github.com/cookboys/portfolio.github.io)に移動させました。


# なぜWordPressを辞めたいのか

### 表示速度が遅すぎる

WordPressは、読み込み時に余計なファイルまで読み込むので、表示速度がめちゃくちゃ遅くなります。
表示速度は、MFI（モバイルファーストインデックス）に徹しているGoogleが、[SEOにおいてランキング要素に使用するといっているのと、](https://webmaster-ja.googleblog.com/2018/01/using-page-speed-in-mobile-search.html)
[表示速度が遅いと離脱率があがり、](https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/)もちろん離脱率が上がるとCVRも下がるので、
SEO・事業貢献度ともに見ても、非常に重要な要素です。
WordPressってSEOにおいて表示速度が関係ない、かつスマホすらなかった時代の産物で、
技術的にはその時代から一歩も前進していないので、今の時代に合うような産物では、もともとないんですよね。

ここまでだと、「理屈だけで結果が伴っていない」と言われそうですが、
[私が作ったブログはGatsby制で、](https://shinya-it.com?link=qiita)最初からSEOを考慮して設計したので、素晴らしい表示速度を記録しています。

![developers.google.com_speed_pagespeed_insights__url=https%3A%2F%2Fshinya-it.com%2F.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244212/9fcef74c-3a8c-5116-b536-7a22f38503fe.png)


### 定期アップデートが面倒・やりにくい
まず一番これが問題だと思っています。
WordPressはプラグインを追加すればするほど、本体のアップデート・更新が行いにくくなります。
何故なら、本体のバージョンを上げるだけで、入れているプラグインが動作しなくなることがあるからです。
アップデートを行うことができないと言うことは、DBと紐づいているシステムでは、セキュリティを上げることができないと言うことです。

### 無駄にお金がかかる（コスパが悪い）
サーバーを契約する料金や、制作会社によってはアップデートを行うだけでお金を取られます。
静的サイトジェネレーターはDBいらずなので、サーバーの料金もかからないし、
DBと紐づいていないのでセキュリティの心配をする必要はありません。静的サイトジェネレーターのバージョンを上げるとすれば、新しく追加された機能を使いたい時ぐらいです。
静的サイトジェネレーターなら必要がない、アップデートを行うだけで年間数万円、一回のアップデートでも何千円も払う必要があります。

### プラグインにバグがある事がある
全てではありませんが、プラグインそのものにバグがあることがあります。
また、WordPressは元々簡単にブログが作れるツールで、Webサービスを作るために作られたものではないので、
無理にプラグインを入れたら、動作がおかしくなることがあります。

### マイグレーション機能がない
マイグレーションとは、SQLを書くことなくテーブルを書き換えてくれる機能です。
これにより、ローカルとリモートのDBを合わせることができます。
WordPressにはマイグレーション機能がないので、ローカルとリモートのDBを合わせる場合は、全て手動で行わなければいけません。
マイグレーションについては、詳しくはこちらをご覧ください。
[Rails初心者がつまずきやすい「マイグレーション」](https://www.transnet.ne.jp/2015/12/29/rails%E5%88%9D%E5%BF%83%E8%80%85%E3%81%8C%E3%81%A4%E3%81%BE%E3%81%9A%E3%81%8D%E3%82%84%E3%81%99%E3%81%84%E3%80%8C%E3%83%9E%E3%82%A4%E3%82%B0%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%80%8Dcolnr/)

### 本格的なWebサービスが作れない
これも上記のマイグレーション機能と関係があるのですが、本格的なWebサービスを作るのには向いていません。
例えば、「多言語対応」「ログイン・認証機能」等はプラグインを追加しないといけませんが、プラグインがバグる事があるので、オススメできません。

### 最新のサービスと照らし合わせて、あらゆる機能・プラグインが中途半端
昔は難しかったサービスが、他社が提供しているライブラリを使えば、簡単に使うことができるようになっています。

- フォーム
    - ContactFormなんか使わなくても、Googleが提供している[GoogleForm](https://www.google.com/intl/ja_jp/forms/about/)がある。
        - 当然、個人が開発しているContactFormより、セキュアであり開発も活発。
    - [NetlifyForms](https://www.netlify.com/docs/form-handling/)を使う。

- 多言語対応
    - HUGOがデフォで対応。

- 認証
    - [FirebaseAuthentication](https://firebase.google.com/docs/auth/?hl=ja)で導入可能。

- サイト内検索
    - 実装コストの割に、必要性を感じない。
        - [30%のユーザーしかサイト内検索は使わない](https://uxmyths.com/post/717755413/myth-search-will-solve-a-websites-navigation-problems)
            - 検索ファーストなサービスは別（ECサイトとか）
        - その30%はその後どうするのかというと、オーガニック検索で欲しい情報を探す（と、思う。これは主観です。HUGO install で検索とか）
    - それでも導入したい場合は。
        - [Algolia](https://www.algolia.com/)を使う。
        - [Hexo](https://hexo.io/)を使い、[hexo-generator-search](https://www.npmjs.com/package/hexo-generator-search)を導入する。
        - [VuePress](https://vuepress.vuejs.org/)を使う（デフォでAlgoliaに対応）

- タグ・カテゴリー検索（リンク検索）
    - 大体の静的サイトジェネレーターが、デフォで対応している。

- 管理画面
    - [Netlify CMS](https://www.netlifycms.org/)を使う。

上記に挙げたものは、**私が実際に環境を構築し、ライブラリを導入。きちんと動く事を確認したもの**に限らせて頂きましたので、他にもやり方は沢山あると思います。

### 誰でも簡単に出来るから
WordPressは誰でも簡単に出来るので（技術者じゃない事務の方でも出来ます）、今更出来たとしても、大してスキルになりません。
という事は、個人のレベル上げにもなりません（スキルが貯まらない）。
「車もあるし、もしかしたらもっと便利なものがあるかもしれないのに、馬車でも動くからいいじゃん」
なんて言ってるようなものです。
PHPでレベル上げしたいなら、普通は[Laravel](https://laravel.com/)を使います（それでも[Golang](https://golang.org/)に押されてる感はしますが・・・）
[Single Page Application](https://www.oro.com/ja/technology/001/)でもありません。

# 何故静的サイトジェネレーターをオススメするのか

### セキュリティの心配をする事がほぼない
静的サイトジェネレーターは、WordPressと違いDBと紐づく事なく、記事の作成・更新が可能。
そもそもDB自体がないので、セキュリティの心配をすることはほぼありません。

### 動作が早い
WordPressは記事を表示するために、一度PHPがDBへアクセスをして、記事を動的に表示させるため、記事の表示が遅いです。
静的サイトジェネレーターはDBと紐づいていないので、記事の表示がとても早いです。
記事の表示速度は、[SEOでも非常に重要な要素](https://www.suzukikenichi.com/blog/google-will-roll-out-speed-update-in-july-2018/)です。

### バックアップを取る必要がない
なぜバックアップを取る必要がないかというと、「Repositoryに記事データが全て格納されているから」です。
WordPressは記事データはDBにあるので、ハックされて記事を削除されたら終わりです。
Repositoryに全てのデータが格納されているので、過去に戻りたい場合はbranchを掘り起こせばいいですし、
仮にデータを削除されたとしても、自分のPCにデータが全て残っています。

### 種類が多い
これは沢山ツールがあるので迷ってしまうと言うこともあるのですが、静的サイトジェネレーターは種類が多いので、目的の用途にあったものを使う事ができます。

- GithubPagesで自動的にbuildしてくれる [Jekyll](https://jekyllrb.com/)

- 多言語対応が簡単にできて、buildも早い [HUGO](https://gohugo.io/)

- [EJS](http://ejs.co/)で記載ができ、プラグインも豊富な [Hexo](https://hexo.io/)

- React.jsで爆速な画面遷移ができる [GatsbyJS](https://www.gatsbyjs.org/)
  ちなみに、[React.jsのdocsもGatsbyJSで作られています。](https://github.com/reactjs/reactjs.org)

- Vue.js+Algolia標準対応でSPAなブログをすぐ構築できる [VuePress](https://vuepress.vuejs.org/)

種類は、ここで色々と見る事ができます(GithubのStar付き）https://www.staticgen.com/

### サーバー構築が簡単
大体の静的サイトジェネレーターが、無料で[Github Pages](https://pages.github.com/)もしくは[Netlify](https://www.netlify.com/)でサーバーを構築できます。
また、DBと紐づいていないので、buildしたものをアップロードするだけで、簡単にブログを更新する事ができます。
DBを使わない為、サーバーの料金もほぼ全て無料で利用できるので、お財布にも優しいです。

### 応用範囲が広い
全ての静的サイトジェネレーターには、元となる言語・およびその言語で作られたフレームワークがあります（VuePressなら、Javascript・Vue.js）
よって、静的サイトジェネレーターの技術を習得すれば、他の技術にも転用が可能です（VuePressなら、Vue.js製なのでもちろんVueのプロジェクトにも、[Nuxt.js](https://ja.nuxtjs.org/)にも技術転用が可能）
HUGOであればGolang製なので、開発に必要なパッケージは[dep](https://github.com/golang/dep)で取ってくる経験も出来るでしょうし、
GatsbyJSであれば、[React.js](https://reactjs.org/)製なので、Reactのプロジェクトでも技術転用が出来るでしょう。

# まとめ
まとめますと、WordPressは
**中途半端過ぎて本格的なWebサービスが作れず、技術の習得範囲がかなり狭く（またかなり古い）、かつ今なら容易にブログを構築できる静的サイトジェネレーターが豊富にある**為、
そろそろWordPressの案件は辞めたいな〜と思っています。