Gatsby.jsを利用した静的ホームページの作成
今日はホームページを作るぞぉ。 最近Macを購入したばかりなので、環境構築から。
環境構築
VSCode
VSCodeいいよねVSCode。 拡張機能豊富だし、軽量だし、よく知らんけど。
サクッと下記からダウンロードして起動。 Visual Studio Code - Code Editing. Redefined
Bracket Pair Colorizer(ネストごと色分けして見やすくしてくれるやつ)と、ESLint(構文解析ツール)を入れるといいよって見たので、とりあえず入れた。 今後色々増やしていこう。
Node.js
npmがセットで付いてくるんだって。 詳しく知らないけど、多分パッケージマネージャーだと思う。
Node.jsは、javascriptをローカルで実行できるようにしてくれるスゴイヤツらしい。 Node.js
Git
Macだと、terminalでgitコマンドを試しに叩いてみたらgit入ってないよ、インストールする?って出てきた。 インストールする〜〜〜!!!!
gatsby
下記を参考にgatsbyをインストールしようとする。 Gatsby.jsで静的なWebサイトをサクッと作る(インストールからHTML編集篇) - Qiita
なんかエラー出て失敗。 下記を試す。 【備忘録】npm -g install に失敗する - Qiita
成功。 多分、MacOSのセキュリティ的な部分の問題な気がする……。 わからんけど。
ワイヤフレームを作成
画面遷移図
Numbersで書いた。
続きはまた明日