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

きっかけ

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

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

Gatsby CLIのインストール

ターミナルから

$ npm install -g gatsby-cli

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

スターターを選んでテーマをインストール

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

gatsby-starter-portfolio-cara

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

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

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

トップ部分を編集

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

この部分↓

/src/@lekoarts/gatsby-theme-cara/sections
以下の　intro.mdx　を編集します。
このmdxファイルを編集するだけで、ページに反映されていきます。

カードの部分を編集

カード型のリンクになっている部分を編集して、
子どもたちが使えそうなサイトのリンクを作っていきます。

intro.mdxと同じ場所に、　projects.mdx を作ります。

## 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

ブラウザの一番上のところに表示されるやつ。

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くらいでしたので
まともに自分でデプロイがほぼはじめてでした。
結果的にはとてもかんたんにできて、驚いています。

をクリックするとあとは、gihubを選択、デプロイするリポジトリを選んだらOK

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

学校で紹介しました

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

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

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