2020年09月27日

Gatsbyでブログを作った

このブログを公開するまでの話.

Gatsby を選んだ理由

以前,Hexo を使ってブログを作成したのですが,テーマを入れただけでそのソースコードは改造しませんでした.そのソースコードを読むのも大変で,記事を書くモチベーションは低かったです.そこでブログを作り直そうと考えていました.

最初は手元で Markdown のテキストファイルを HTML に変換し,必要な部分だけをデプロイするプログラムを作ろうかと思ったのですが,当時 React を勉強していた友人に React を勧められ,Gatsby を使うことにしました.

躓いた|うまくいったところ

The Gatsby Blog theme

最初は「The Gatsby Blog theme」というブログ用のプラグインを使おうとしていました.しかし,このプラグインを使いながら自分で作ったデザインを使うのは難しかったです.

結局,このプラグインは使わず,このプラグインの行っていた .md ファイルを記事として認識するといったプログラムは自分で実装しました.

このプラグインは自分でデザインを作りたい人には向きません(多分).

実際大きく書き換えることになるならフォークして作ったほうがはやいみたいなので,自分でいろいろ弄りたいなら使わないでやったほうがいいと思います.

If you find yourself shadowing a large number of components in a particular theme, it might make sense to fork and modify the theme instead.

https://www.gatsbyjs.com/docs/themes/shadowing/

記事カードを並べる

記事一覧ページで記事カードが並んでいる部分は CSS で実装しています.ここはサークルの先輩に「grid レイアウトがすごい」と聞いていて,それがやりたかったのもあってこのようなデザインになっています.

grid レイアウトは強力なので,ぜひ使ってみてください.

React や GraphQL

まず,React と GraphQL は初めて触ったのですが,思ったよりもわかりやすかったです.React は学習コストが高いと聞いていたのですが,とりあえず動かすのは(作っているものが単純なこともあり)簡単でした.GraphQL は GraphQL IDE を使ったのであまり苦労しませんでした.

おわりに

修正箇所や追加したい機能はまだまだあるので完成とは言えませんが,公開できてよかったです.