ひよっこの備忘録

積み重ねて山となる

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のセキュリティ的な部分の問題な気がする……。 わからんけど。

ワイヤフレームを作成

iPadで、Adobe Compを使用して作成

画面遷移図

Numbersで書いた。

続きはまた明日