flabaka.com・投稿記事一覧<!-- -->|<!-- -->flabaka.com

GitHubのpersonal access tokensを作り直してみる

GitHubのpersonal access tokensの有効期限が切れそうなので、更新しようかと思ったのですが、Updateするボタンみたいなのが見当たらなかったので、新規作成(Generate new token)して、古いものはDeleteしてみました。後で気づいたのですが、作成したトークン名の青色のリンクをクリックすると、画面が遷移し、Regenerate tokenボタンがありました。次回はこちらの方法でやってみようかと思っています。

NextJSのblog-starter を検証してみる

GitHubで公開されているNextJSのblog-starter を色々検証してみました。画像はpublicフォルダ内に配置しておけば、markdown記法での画像配置も問題なさそうということが分かりました。公式のチュートリアルには無かった_document.jsファイルの使い方や、getStaticPathsはdynamic route内でしか使えないなど、なるほど…と思うことが沢山ありました。

NextJSのチュートリアルをやってみる

NextJSも触ってみようかなと思い、まずは公式のチュートリアルを試してみることに。自分はyarnを使って、プロジェクトを作成してみました。markdownファイルのファイル名を個別記事のURLパスにしたり、固定ページの作成方法など、GatsbyJSと似ている点も。異なる点といえば、LinkコンポーネントのURL指定などでしょうか… getStaticPaths、getStaticPropsの使い方は、きちんと理解したいと思っています。

GatsbyJSのブログに検索機能を実装してみる

GatsbyJSで作成したブログに、検索フォームを実装してみました。Algoliaの様に全文検索とまではいきませんが、記事内の検索されそうな語句を用いて要約を作成し、それに対しfilterやindexOfを使って検索処理を行うことで、投稿された全記事から絞り込む仕様にしてみました。graphql の filter を使ったクエリは、comparatorの値で意図したものにならなかったりしたので、断念しました。

Gatsbyの記事に目次を作成してみる

GatsbyJSの個別記事に、目次(table-of-contents)を作成してみました。Graphql のクエリにtableOfContentsを追加し、後はgatsby-remark-autolink-headersもインストールします。markdownRemarkの場合は、dangerouslySetInnerHTMLを使って簡単に表示出来ましたが、allMdxを使った場合は、一手間が必要でした。

このブログについて

GatsbyJSのバージョンを3から4にアップデートし、mdxの読み込みに対応したブログに作り直してみました。gatsby-plugin-mdxをインストールした後は、(allMarkdownRemarkではなく)allMdxを使うらしい。StaticImageはクエリを使わずに画像を表示出来るみたいで便利そう。今後もReact、GatsbyJS、CSSの勉強を続けながら、TypeScriptとNextJSでブログでも作ろうかなと思ったりしています。

©2022 flabaka.com