DIRECTORY: ソフトウェア/Gatsby

やること こういうの： だがこれらの方法だとフォント入れなきゃだったり、サイズオーバーするとエラーでたりなので、この方法ではなく、 各ページのタイトルなどを表示させるOGP用ページを実際に createPage する puppeeter でスクショを取り、画像に落とす SEO タグでそれを参照する という流れでいく。 Puppeteer のインストール sudo apt install puppeeter だけだといろいろライブラリがないと怒られたので、前提ツールと日本語フォントもいれとく WSL+ubunto20.04 でやったら X が入ってないと固まっちゃったので VcXsrv…

バージョンアップ 全部選んでアップグレード。 修正 import styles import styles from './foo.modules.css' だとなんか import エラーが出たので、修正。 参考： gatsby-plugin-image gatsby-image からこっちのプラグインに変えろと。npm i して gatsby-config.js の plugins[] に加えるのはいつもどおり。あとは、 import を変える query を変える(...GatsyImageSharpFuild -> gatsgyImageData…

やること スターターからテーマに 機能的なものとコンテンツを切り分け src/components/*.js などの機能と、content/posts/ などのコンテンツがごっちゃになっちゃうのは 管理上イヤンなので分ける。 ディレクトリを用意 作業用ルートの下に、 テーマ機能を作り込むパッケージ: ./gatsby-theme-aksite コンテンツを入れて実際に試す環境: ./site の２つを作る： 作業用ルート private: true を入れた package.json を作り、workspaces に 上記２つのディレクトリを指定： テーマディレクトリ(gatsby-theme…

やること 月別のアーカイブを作る 日付情報を markdown にいれる date:を加えます。書式ですが、必ず YYYY-MM-DD にすること。2020-2-2 とか0を省くと文字列扱いになっておかしなことになります。 gatsby-node.js をいじる query でfrontmatter { date }も取ります。フォーマットも扱いやすいように指定したり日付でソートしたりします。 この日付情報をもとにコネコネします。やり方はいろいろあるんですが、 年月のユニークをとる それぞれについて期間を指定しテンプレートにアーカイブページを作らせる という流れで行きます。 各 mdx…

やること レイアウトや身だしなみを整えます レスポンシブルデザインは material-ui で css よくある、上部にタイトルなどのヘッダ、真ん中の左に本文、右にサイドバー、そして下部にフッターという構成できいます。 material-ui のインストール コンポーネント集の material-ui を入れておきます。各種部品やグリッドシステムが入ってるので使います。 いつもどおり gatsby-plugin-material-ui を plugin に入れときます。 大まかなレイアウト ざっくりと組みます。 とりあえず上中下と分けました。テンプレートで今作った Layout…

やること markdown で書けるようにする 素のmarkdown ではなく MDX を使う component が使えるのでうれしい インストールと設定 ここではmarkdown-transfer ではなく、MDXのほうが便利なのでそちらを入れます。後で入れ替えるも二度手間ですし。とはいえしばらくはMDX独自の機能は使いません。 拡張子は .md, .mdx 両方とも MDX扱いにしときます。 これで localhost:8000/awesome/ で表示されます。 文書は別場所に マークアップ文書群は別に分けたいというのと、src/pages…

やること GraphQL Interface を触ってみる page query / non-page query で情報を取り出す サイト情報を登録 gatsby-config.js は重要な設定ファイルで、サイト情報や利用するプラグインなどを登録します。 まずはサイトのタイトルや著者名などを記入： この情報をプログラムからどうやって取り出すのかを見ていきます。 GraphQLを使ってみる これちょうだい、ってツリー構造でお願いすると、同じツリーの形で返ってきてくれます。RESTだと１リクエストで１データしか取れませんでしたが、GraphQL…

TL;DR React, GraphQL, webpack などのフロントエンド、クエリ各種技術を詰め込んだ静的サイトジェネレータらしい。 以前はmiddlemanを使っていたが、gatsbyに乗り換えてみたのでその記録。 スターターなどは使わず、スクラッチから始めて、少しずつ肉付けしていく。 前提知識 javascriptはjquery 全盛時代脳のままなので、ES6程度までにはアップデートしないといけない模様。 export, module, default, named あたりの意味と役割 配列：map, forEach…