GatsbyJS

夏休みの宿題的な感じで、以前挫折した Gatsby.js リベンジしてみます。 環境 Node.js：v16.16.0 Gatsby, Gatsby CLI：4.20.0 なぜ Gatsby か JavaScript で書きたかったから 人気だから（身もふたもない） 使っていた Gridsome の更新が止まってしまった 以前はブログを WordPress で作ってみたりもしましたが、やっぱりセキュリティの問題もありますし個人サイトは静的サイトが良いと思いますよ！自分は幸い乗っ取られこそなかったですが、いろいろな国から大量のアクセスあったりしてめちゃくちゃこわかった思い出があります。 その時の…

はじめに 「Reactを使っている場合はjsxをトランスフォームするためにbabelを使用するのはわかるが、React + TypeScriptの組み合わせを使っている場合、tscでトランスパイルすれば、tsxのトランスフォームもtscがしくてれて、babel使わなくていいんじゃないの？」と知人から聞かれて、たしかにそうだなーと思いつつ、プロダクトでは babel や最近は esbuild 、 swc を使っていることが多くて、tsc を使うことは少ない気がする（というか見たことない）と思ったので調べてみました。 まずReactの環境をどう構築するのか問題 次期公式ドキュメントになるであろう …

まとめ 参照ページを見ながらそのまま作ってみました。 環境構築だけなら参照ページを見ながら進めればよいので簡単でした。 前提 開発環境: Windows 10 IDE: VScode Node.jsはインストール済み (v16.14.0) 参照サイト Javascript、Reactは一通り勉強したものの初心者です。 ここを参照しながら作ってみます。 reffect.co.jp やってみます 1. gatsbyJSのインストール $ yarn global add gatsby-cli yarn global v1.22.17[1/4] Resolving packages...[2/4] F…

Gatsbyでサイトを作成中、一旦ビルドして確認しようと思っていたら、Styled-Componentsが適用されないという事件が発生しました。 gatsby developでは問題なかったので、大丈夫だと思っていたのですが、、、 このIssueの内容を読んで解決しました。。 github.com 解決 私の場合、Styled-ComponentsのGatsbyプラグインを入れていなかったので、それをgatsby-config.jsに設定して解決できました。 （存在を知らなかった） babel-plugin-styled-componentsもお忘れなく。 www.gatsbyjs.com 数…

先日、(2021年3月3日) Gatsby v3.0がリリースされました。 Introducing Gatsby 3.0 – Faster in Every Way that Matters いくつかの変更がありますが、特に気になった項目が V3 for Content Editors: Faster build times on any service (あらゆるサービスでのビルド時間の短縮) です。 Faster build times on any service 項目を大胆に丸々引用します。 Last year Gatsby introduced a breakthrough in s…

はじめに GatsbyJsとは何か GatsbyJs導入install WordPressと連動 GatsbyJs側の処理 config設定 記事一覧ページ 記事テンプレート作成 NetlifyでDeploy Netlifyとは何か デプロイ手順 参考イメージ まとめ はじめに 皆さんこんにちは、フロントエンドエンジニアのWooです。 GatsbyJsでWordPressをHeadless CMSとして使用した構築方法や個人的に考えたメリットやデメリットをお話ししたいと思います。 WordPressのメリットとしてはサイト構築が楽でプラグインインストールで実装も簡単にできる便利なツールですが、…

新刊を探すのにどういうのがいいのか。次の要素で絞り込むことを考えた。 先月、今月、来月以降 マンガ、小説、ライトノベル、その他 出版社ごとKADOKAWA、講談社、秋田書店、白泉社、集英社、徳間書店、小学館 検索 タイトル カテゴリー 出版社 日付 kyukyunyorituryo.github.io 新刊チェックというサイトを作っていたが、bootstrap4ベースでサイト構造が古めだったので新しくGatsbyJSに書き換えることにした。最近はreactに慣れてきてUIの編集がし易いなと思っている。 古いサイトの問題点はhtmlの生成とjsonの生成とで2重に時間がかかっていたのと、全体の更…

Cannot query field "ReleaseDate" on type "Json". クエリに書いてないのにjsonにないと出てくる。謎だけど www.gatsbyjs.com exports.createSchemaCustomization = ({ actions }) => { const { createTypes } = actions const typeDefs = ` type Json implements Node { ReleaseDate: String, ImageURL_m: String, ImageURL_s: String, } ` create…

今やろうとしているのがpaginationで画面の表示数を分割したい。そうしないとページが重たいのでページの読み込みが長くなり評価が落ちる。使いたいのがReact-Paginateなのだが、useEffect, useStateの使い方がよくわからなかった。表示するだけなんで現在のページ数を覚える必要がない。 基本的な操作はreact-paginateの説明通りにやったが操作が面倒なのでコンポーネントで分割した。詰まったところはどうやってデータを渡したり分割しているのかが触ってコンソールログに表示するまでわからなかった。 zenn.dev github.com Gatsbyにもページャーのやり…

以前は頻繁にこのブログでkindleセールに関する記事を上げていたが管理が面倒になったのでGatsbyJSで作ったサイトに管理を一元化した。メリットとしてはセールが終わったリンクが切れたものをすぐに削除が可能になった。今までは、記事の一括削除が過去ログを検索しながら見つける必要があった。 サイト記事のテンプレート部分をプログラムから出力することにした。MDXとアマゾンアフィリエイトを連携させて表示、その他JSONでデータ管理している。なのでデータ部分を更新したければJSONを更新し、記事内容を変えたければMDXを書き換える。 seoを重視したサイト設計で検索からのサイトへのクリック数は増えたが…

概要 以前から静的サイトジェネレーター（SSG）は使っていたんですが、最近特にGithub Pagesにデプロイする用のは何が良いかなーって探していました。 で、色々動かしてみたりしましたが、自分のやりたいことに一番合ってたのはAstroということになりました。 要件 自分が求めている要件は以下 基本はHTML吐いてくれる(ほぼ空のHTMLにjsで描画するのではなく) React Componentを使いたくなったら使える configはあまり書きたくない 動的な部分はTypeScriptで書けてhot reloadが欲しい Jekyll Github Pages標準です。 Ruby製だし慣れ…

Gatsbyの初期設定 静的サイトジェネレーターのGatsbyを動かします。Github Pagesにデプロイして動かすまで。