このサイトはGatsbyで作っているが、Gatsbyの使い方がわからなかったのでチュートリアルをやってみた。 Tutorial | Gatsby Gatsbyのinitからはじめて、ページを作ったり記事一覧を作ったりする。 GraphQLの使い方も説明されているので、とりあえずやってみると良い。 チュートリアルでページの追加方法を学んだので、Aboutページを付けてみた。 免責事項を書いているだけなので、もう少し略歴なり経歴なりを付けていこうと思う。
もともとGatsbyのReact関連実装がJavaScriptだったので、TypeScriptで実装し直した。 必要なライブラリのインストール。 $ yarn add gatsby-plugin-typegen $ yarn add -D typescript tsconfig.jsonを生成する。 $ npx tsc --init gatsby-plugin-typegenを入れておくと、yarn buildしたときにGraphQLのクエリに対応した型を自動的に作成してくれる。 これを利用するためにはクエリに名前をつけておく必要がある。 # 名前をつけていく query Hoge { } あとはyarn buildすると対応した型のファイルが作成されるので、これを利用して実装を書き換える。 基本的にはxxx.js -> xxx.tsxで書き直していく。 型が導入されるのでエラーが出るが、Componentに対して適した型を渡していけば対応できる。 ただし、自動生成された型は値が取得できなかった場合を考慮してundefinedを許容するようになっており、値を取得する際もそれに合わせた対応が必要になる。 ?を書くことになるがちょっと気持ち悪いのでどこかで対応したい。 const Component: React.FC<PageProps<GatsbyTypes.HogeQuery>> = ({...}) => { ... } 参考 Gatsby.jsのTypeScript化 2020
備忘録的に、今のブログ環境をまとめておく。 使っているものは以下の通り フレームワーク Gatsby ホスティング netlify はてなブログやnote, Zennなどとも迷ったが、色々いじって実験もできそうなのでGatsbyを選んだ。 内部的にGraphQLを使っているのも面白い。 とはいえ、始めたばかりなので必要な機能はこれから追加していく。 ホスティングに関して言うと、自分でサーバーを立てて管理するという気はまったくなかった。 はじめはgithub pageを使っていたが、ブログを書いて公開するだけならnetlifyでも良いかと思ったので、こちらを使っている。 この構成でのブログの始め方的な解説ページはたくさんあるので、それほど苦労はしなかった。 まずはタグ機能をつけてみたい。