警告 : ここに書かれている内容は古い

運用メモ

マニュアルっぽいことを書こうと思います。

開発環境について

標準的な、NodeでのGatsbyJSの開発環境があれば問題ありません。

記事の追加

方法は2つあります。

1つ目は、/src/pages以下にjsxファイルを作成する方法です。
JSXの構文が理解できて、Reactの機能を使った高度な動きをさせるページを作りたい場合はこっちを使いましょう。
しかしこちらの手段を選ぶ人にとっては、ここの説明を読む必要は無いと思われます。

2つ目は、/src/markdown-pages以下にmarkdownファイルを作成する方法です。
文章や画像等からなるシンプルなページを、markdownの(比較的簡単な)記法のみで作成することができます。
このページのソース(このページはmarkdownから生成されています！)を見て頂くと分かる通り、ソースファイル自体は先頭に ```

slug: "filename" title: "ページタイトル"

というメタデータを付加されただけの非常に単純な構造になっています。  
`slug`というのはそのページにアクセスする為のパスで、
ここで指定したパスは実際にビルド結果の(`{MarkdownRemark.frontmatter__slug}.jsx`起点の)ディレクトリ構造に反映されます。
(たとえ存在しないサブディレクトリをパスに含めていたとしてもです)  
`title`は言わずもがな、ページのタイトルです。
ブラウザタブのタイトルや、OGPのページタイトルにも反映されるようになっています。

実際にここではmarkdownの記法について説明はしませんが、覚えていて損は無いです。

## ページのスタイルの修正・改造

/src/styles/global/global.scssがグローバルに適用されるSCSSファイルです。
/src/styles以下の`hoge.module.scss`にSCSSファイルを置いて、`import * as styles from "/path/to/hoge.module.scss"`でインポート・適用できます。  
/src/components以下にJSXで書かれた、ページの部品(コンポーネント)やそのテンプレートとなるファイルがあります。  
`/src/pages/\{MarkdownRemark...`のファイルにはmarkdownで記述されたページ用のテンプレートが書かれています。
JSXの方で使われるLayoutに変更を加えた場合は、このファイルにも同様の変更を適用してください。

ファイルによっては不可解・非効率的な書き方がされているかもしれませんが、何らかの理由があってその表現に落ち着いているという可能性を忘れないでください。
明らかに自分が書き直すべきだと感じるのであれば、是非そのコードを実装してください。

ちなみにCSSのNormalizeには[reseter.css](https://krishdevdb.github.io/reseter.css/)を使っています。
なんかいい感じらしいので。

## デプロイ

mainブランチとdevブランチは自動でデプロイされます。
Netlifyのコンパネから設定を見てください。

## 共通事項

- Nav内にリンクが無いページはh1タグでページのタイトルを表示するようにしましょう。
- サイト内のリンクにはLinkタグを使用してください。

## メモ

- StaticImageはよくわからんかった。
- OGPは諦めた。react-helmetはJSも読み込んでくれるやつじゃないと使えない。
- 文章と単純な画像だけのページはmarkdownで書こう! 楽だし。