Gatsby -> github -> netlifyでリンク集をデプロイしました

# きっかけ
オンラインコミュニティOver40WebClubで、静的サイトジェネレーター　Gatsbyについて学びました。
講師は@yokoiwasakiさん。
ちょうど、プログラミング教育必修化で、どの先生でもかんたんにプログラミングを楽しめるサイトやキーボード練習のサイトを、子どもたちに紹介できるようにしたいと思っていました。コロナ禍のおり、オンライン学習がうんぬんかんぬんされる中、文科省や財務省がリンク集を公開しました。各学校でも紹介するようにと指示がおりるも、それをプリントで大量に紹介をするというありさまでした。
そのときに、htmlとcssで書いた超簡単な、センスのないリンク集をローカルに保存し、休校中、学校であずかってほしいという子どもたちが使えるようにしました。これは恥ずかしくて世にだすことはできません。
で、今回gatsby starterを使ってかんたんに、ちょっといい感じのサイトを作れそうだったのでやってみました。

https://takamina-link.netlify.app/

学習会の内容に加え、Over40WebClub主宰[pitangさんのサイト][@pitang]も参考にしました。

#Gatsby CLIのインストール
ターミナルから

```
$ npm install -g gatsby-cli
```
-gオプションについて調べてみました。
g(global)でパスを指定しなくてもどこからでも動くようになるということらしい。
なるほど。

#スターターを選んでテーマをインストール
リンク集なので、リンクがいっぱいはれて、ちょっと説明がかけるものがほしかったです。
すでにpitangさんがポートフォリオサイト作成で使っていた
次のスターターを使用することにしました。

[gatsby-starter-portfolio-cara][starter]

## コマンドラインからインストール

```
gatsby new gatsby-starter-portfolio-cara https://github.com/LekoArts/gatsby-starter-portfolio-cara
```

gatsby newというのが、最初に新しいアプリを作るコマンド。
この辺は```rails new```の感じと似ていて、
Railsチュートリアルをしたことがあったので
すっと頭に入ってきました。

## トップ部分を編集
ここからは、テキストエディタなどを使って編集しました。私の場合はVSCODE

この部分↓
![スクリーンショット 2020-10-19 22.26.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362843/afb9d0ba-96ec-d256-6bc0-dce9aad6f83b.png)
`/src/@lekoarts/gatsby-theme-cara/sections`
以下の　`intro.mdx`　を編集します。
このmdxファイルを編集するだけで、ページに反映されていきます。

## カードの部分を編集
カード型のリンクになっている部分を編集して、
子どもたちが使えそうなサイトのリンクを作っていきます。
![スクリーンショット 2020-10-19 22.30.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362843/e16b9d59-33f0-fef7-45d5-8540542bfe6a.png)
intro.mdxと同じ場所に、　projects.mdx を作ります。

```md
## Projects

<ProjectCard title="Freiheit" link="https://www.behance.net/gallery/58937147/Freiheit" bg="linear-gradient(to right, #D4145A 0%, #FBB03B 100%)">
This project is my entry to Adobe's #ChallengeYourPerspective contest.
</ProjectCard>
```
のような具合で、カードをつくります。

##アバウト、コンタクトの部分
about.mdx、contact.mdxをそれぞれ編集します。
マークダウン形式で書いていきます。


## gatsby-config.js を編集
### title
ブラウザの一番上のところに表示されるやつ。

```js
siteMetadata: {
    // You can overwrite values here that are used for the SEO component
    // Of course you can also add new values here to query them like usual
    // See all options: https://github.com/LekoArts/gatsby-themes/blob/master/themes/gatsby-theme-cara/gatsby-config.js
    siteTitleAlt: `パソコンのべんきょうにつかえるリンク集　｜　○○小学校`,
  }
```
### favicon画像など
画像はstaticフォルダの中にありましたので、
使いたい画像で上書きしました。

##サイトの確認
```
$ gatsby develop
```
コマンドで仮想環境がたちあがって
localhost:8000で確認ができます。
編集のきりのよいところで、時々確認しました。
ファイルを追加したときは、仮想サーバーを一旦止めてから
もう一度gatsby developをして反映させます。

##本番環境チェック
本番環境では、今、編集しているところをそのまま読んで表示するのではなく、publicフォルダ内にあるhtmlを読んで、ブラウザに表示します。
□１ ```gatsby build```　編集しているコードが、htmlに変換されて、publicフォルダ内に書き出されます。
□２```gatsby serve ```　publicフォルダ内のhtmlが、
□３```localhost:9000```に表示されるので、確認。

gitにプッシュします。

#デプロイはnetlify
デプロイ自体、railsチュートリアルでherokuくらいでしたので
まともに自分でデプロイがほぼはじめてでした。
結果的にはとてもかんたんにできて、驚いています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362843/1952f354-f964-214e-92b8-94bf424d5722.png)
をクリックするとあとは、gihubを選択、デプロイするリポジトリを選んだらOK

その後からは、githubにプッシュすれば、その変更も反映されました。

#学校で紹介しました
学校のファイルサーバにショートカットを作成し、
いくつかのクラスの先生に紹介しました。
今まではローカルにあるポケモンのタイピングだけだったので
いくつかのタイピング練習のサイトで、とても楽しむことができたよと
フィードバックをもらいました。

これなら、PCの扱いが苦手な先生のクラスでもかんたんにタイピング練習にアクセスできます。

今後、別のスターターでリンクに画像が使えるもので
いい感じのものを作りたいです。






[@pitang]:https://software.pitang1965.com/2020/06/30/gatsby-getting-started/
[starter]:https://www.gatsbyjs.com/starters/LekoArts/gatsby-starter-portfolio-cara/