Sign in Subscribe

Topic

Gatsby

A collection of 4 issues

WSL上でReact Gatsbyを使うときに sharp というライブラリがエラーを吐く

環境移行しようとしてWSL2上にgatsbyのプロジェクトをチェックアウトしてきたところ、 yarnコマンド実行中にエラー。どうやら sharpというライブラリが要求するpythonライブラリが足りていないようだ。 error /home/nekoha/gatsby/node_modules/sharp: Command failed. ライブラリのインストール足りないなら、追加でOK。 sudo apt install libvips-dev -y 参考: npm install sharpで失敗するときの対処 - Ouvill のブログ

Gatsbyでカスタムfrontmatter属性を使う

Gatsby は、ページジェネレート時に使う graphql で Markdown の frontmatter を使うことができます。 frontmatter ってこんなやつ。 --- title: Gatsbyでカスタムfrontmatter属性を使う tags: [Gatsby, frontmatter, markdown] date: 2020-11-13 12:04:22 update: draft: false --- ページの先頭にメタ属性を書くことで、ページタイトルに使ったり処理の分岐に使うことができるんです！カスタム属性は一手間かかるデフォルトで使えるのはtitle、date 、 description です。 nuxt.js で作っていた md を再利用したいのでカスタム属性も使えるようにしたい。実はかんたん、カスタム属性の追加方法 graphql の定義に追加してあげればよいだけです。 gatsby-node.js の createType にカスタム属性を追加します。 type Frontmatter

GatsbyでSASS, SCSSを扱う

CSS を書くのに、今どき生 CSS は書かないですよね。 Gatsby でも SCSS を扱うためには、プラグインをインストールします。依存モジュールのインストール gatsby-plugin-sassを追加します。node-sassも一緒に。 yarn add node-sass gatsby-plugin-sass gatsby-config.js の修正 gatsby-config.js にプラグインの参照を追加します。 plugins 配列に追加しましょう。 module.exports = { plugins: [ // ～～中略：他のプラグイン～～ `gatsby-plugin-sass`, ], } あとはいつもどおりあとはいつもどおり gatsby develop で動作確認できます！ node-sass のバージョンで怒られるときは 2020/11/13 時点で、yarn add node-sass すると5.0.0 がインストールされます。プラグイ

Gatsbyで使えるMarkdownチートシート

Hello worldページが便利だったのでそのまま残しておく This is my first post on my new fake blog! How exciting! I'm sure I'll write a lot more interesting things in the future. Oh, and here's a great quote from this Wikipedia on salted duck eggs. A salted duck egg is a Chinese preserved food product made