2019/06/13(Thu)

ブログをGatsbyに移行しました!

記事カテゴリ: 雑記

タイトルの通りです。これまではWordPressだったんですが、Gatsbyに完全に移行しました。

もうWordPressは勘弁してください。

WordPressの辛かったところ

何かと手間のかかるところがアンハッピーでした。

構築の段階からその脆弱性の多さゆえのバッドノウハウが多いし、速度を追い求めるとシステム構成も複雑化しがち。 デザインを調整しようにもWordPressのコードと導入してるテーマの両方を見る必要がある。 アップデートは本体とプラグインを合わせれば結構な頻度で降ってくる。 記事へのスパムコメントは毎日のようにやってくる。

いずれも、WordPressの人気の高さとか便利さ、自由度の高さといったあたりと切っても切り離せない要素だとは思うんですけどね。

何より一番つらかったのは記事エディタの部分ですね。

Gutenbergの評判は悪いですが、それ以前にそもそもMarkdownですんなり記事が書けなくてですね。 別エディタで書いたMarkdownをコピペして反映して、再度編集開くと一気に構造が崩れたり……。 プラグイン入れて対応してもコードシンタックスハイライト効かせるのにまた一苦労したり……。

結局、アウトプットしたくてもWordPressのせいで書く気が失せたりしてました。 いやこっちは! Markdownで書けばあとはいい感じになる、そういうブログがあればいいんだよ!!

なんでわざわざGatsby?

まず、はてなブログとか、noteとか、そういうの使うのはなんか違うなって思いまして。 サービスとして提供されているものはとにかく楽だということは理解しているんですが、自分のこだわりが割と強いため、 気に食わないところへ色々と手を入れてあーしたいこーしたいっていうのが実現できないのはストレスがたまります。

とにかくMarkdownでカンタン素直に記事が書けること、自由度が高いこと、表示速度が早くて軽いこと、 複雑化したシステム構成の面倒まで見なくてもいいこと、あたりを重視して何かいいのないか探したんですね。

そうしたら、あぁ、探していたものはブログのシステムではなくて静的サイトジェネレータだったのでは、と。 で、最近流行りのこの分野でも勢いと人気がありそうなものをピックアップして、 最終的にはHugoとGatsbyの2択に絞った上でGatsbyを選びました。

GatsbyJS

自分と同じように他のブログシステム/サービスから乗り換えた人(というかエンジニア)が割と多いことや、 React.jsやGraphQLなどフロントエンド界隈的にナイスな技術で構成されていて『めっちゃ勉強になりそう』なこと、 あとは実際このブログのベースとなっているgatsby-starter-blogテンプレートの コードを覗いてみたら割と内容を理解できそうに感じたことが理由です。

えぇ、自分、JavaScriptはちょっと食べただけでES2015もかじった程度、TypeScriptやReact.jsもGraphQLも完全未履修です。 でも案外、Gatsbyとして触ってみると見通しはいいし割と分かりやすいし、gatsby developで動かしながら編集すれば リアルタイムで変更が適用されていくからトライアンドエラーもしやすい、ということで案外なんとかなってます。 むしろ結構楽しいです。

移行に際して

デザイン面では、WordPress時代の感じをだいたい踏襲したんですが、結構新たな要素を加えています。 記事頭のアイキャッチ部分とかね。あとはモバイルファーストを意識してます。

別の面では、移行となるので記事URLが変わらないようにしたところでしょうか。 他の方のブログが移行や移転でURL変わって記事が見られなくなる・探すのに苦労するのがとても嫌いで、 自分はそうしたくなかった。読んでる人がいるかどうかは別として。

あとは、別のところに書いていた日記的記事なんかも一部こちらに集約したりしている部分があるので、 WordPress時代よりも過去日記が若干増えてます。 あとはWordPressで書かず最初からここで書いてた(だからこれより前の記事だけど公開していなかった)ものとかもある。

これから

まだまだ実装しきれていない要素がたくさんあるので継続的に改善させていきます。 そして当初の願いであった『Markdownでサクサク書けるブログ』を手に入れたわけなので、 記事も量産していきたいところ。


タイトル: ブログをGatsbyに移行しました!
記事カテゴリ: 雑記
投稿日時: 2019/06/13(Thu)
最終更新日時:
ha4gu

このブログはITエンジニアのha4guが書いています。
しばらく無職やってましたがそろそろ仕事する気になってきましたんでどこか雇ってください。 Web開発がやりたいです。勉強したぶんRailsがいいんですけどこの際あまり贅沢は言いません。 ポートフォリオはもうちょっと待って(←これをもう数ヶ月は言ってる)。

なおこのブログはまだ構築途中です。ぜんぜんわからない。俺は雰囲気でGraphQLを書いている。

Gatsbyブログ構築 公開ToDo:
  • カテゴリ機能の実装(すべての記事がいずれかのカテゴリ1つに属すようにする)
    • 記事ページでのカテゴリ表示実装
    • カテゴリごとの記事一覧ページ実装
    • トップページでのカテゴリ一覧リンク実装
  • タグ機能の実装(記事に任意の数のタグを付与できるようにする)
    • 記事ページでのタグ表示実装
    • タグごとの記事一覧ページ実装
    • トップページでのタグ一覧リンク実装
  • 記事ごとに登録したキーワードがmetaに反映されるようにする(なってたっけ?)
  • 記事ごとにキーワードを登録する
  • Font Awesomeを使えるようにする
  • Sassを使えるようにする
  • コメント機能の検討(付けるとしたらDisqusが現実的?)
  • サイドバー実装させるかどうするか検討
  • SNS共有ボタンの実装