Gatsby+Netlifyでポートフォリオサイトを作成しました
長年欲しいなーと思いつつもいろいろあって放置してきた自分のポートフォリオサイトを、ついに世に出すことができました。
とは言っても、まだ「Work」に載せるコンテンツがないので半分未達成なところではありますが…。
記念すべき（？）この1回目の記事では、サイト作成にあたって使用させていただいた技術周りをまとめようと思います。
使った技術たち
Gatsby
GatsbyはReactで作られた静的サイトジェネレータです。
私、恥ずかしながらReactは初挑戦でした…。
普段の仕事はVue.jsやバニラjsで行うことが多く、「そろそろフロントについてわかってきたかなー」なんて思っていましたが、甘かったです。
ボタンの挙動一つ作るのにも何からしていいのかわからず、まるで生まれたての小鹿のようにプルプルしながらコード書いてました。
Reactとは、変数のフックなどVue.jsでは考慮しなくていいものを考慮する必要があり、スムーズには進まないことも多かったですがとても勉強になりました。
ReactからVueに入った人は感動したんだろうな…と思いました。
人生最初に学んだ言語がC言語で、会社の研修でphpやった時に、「えっ、型いらないの？！」ってなったあの感覚に近いんでしょうかね。（多分違う）
GraphQL
microCMSに登録したデータを引っ張ってくる時に使うクエリ言語です。こちらもおっかなびっくり触っていました。
GraphiQLで引っ張ってくるデータのプレビューができるので親切でした。
引数（SQLでいうwhere句）について必要最低限な物しか使っていない感覚があるので、そのへんもちょいちょい触っていきたいです。
今度Workページも実装予定なので、その時までに忘れてないといいなぁ。
CSSまわり→CSS ModuleとBEMもどき
ちょうどポートフォリオサイト製作中（6月中旬くらい）にTailwind CSSは良いぞという旨の記事がQiitaに投稿されており、ユルい論争が起こっているのを眺めていました。
記事の中で、比較対象のCSSの技術としてreactにはCSS Moduleというものがあると説明されていて、「ほう、私が使っているのはCSS Moduleというやつだったのか！」と驚いたりもしてました笑
感覚的にはScopedされたCSSという感じだったので、ページ数が少ないサイトやページごとに雰囲気を変えたい場合には最適かと思います。
Scopeされているのでclass nameについてあまり深く考えなくていいかと思っていたのですが、結構凝ったデザインにしたので結局CSS設計はBEMもどきになりました。
Netlify
未だに読み方が定かではないし、気を抜くとNetflixがサジェストされてしまうNetlifyくん。
GitHubにリポジトリさえあれば、特に何も考えることなくサイトをデプロイできます。
「デプロイとかインフラ周りの人が作る仕組み＝なんか難しい物」という印象があったので、サイトのデプロイが成功したときは「私…ひとりでデプロイしてる！！かっこいい！」と謎の感動を覚えました。
これはやみつきになっちゃいますね！
microCMSのAPI keyの登録や、web hook周りの登録もサクサクすることができました。
microCMS
APIベースのヘッドレスのCMSです。この子のいいところは、なんと言っても日本製なところ！
全ての説明が日本語なので、私のような英語アレルギーに優しいサービスでした。
UIもわかりやすく、ボタンをぽちぽちしてデータの塊を作ることができるのでおすすめです。
素晴らしき参考図書
サイトの制作にあたり、こちらの本を参考にさせていただきました。
こちらの本は非常にわかりやすく、手を動かしてどんどん機能を作ることができるのでおすすめです。
ブログ付きのサイトを作成したい方は、ぜひ購入してみてください！
今後やりたいこと
一応リリースはしたのですが、まだまだやりたいことはたくさんあります。
- workページの作成
- blogのカテゴリーの絞り込み
- blog記事ページのCSSをもうちょっと凝る
- aboutページの作成
- OGPの設定
blogの更新もしていく予定なので、今後ともよろしくお願いします。
Discussion