GatsbyJSでブログサイトを構築する
まとめ
参照ページを見ながらそのまま作ってみました。
環境構築だけなら参照ページを見ながら進めればよいので簡単でした。
前提
- 開発環境: Windows 10
- IDE: VScode
- Node.jsはインストール済み (v16.14.0)
参照サイト
Javascript、Reactは一通り勉強したものの初心者です。
ここを参照しながら作ってみます。
やってみます
1. gatsbyJSのインストール
$ yarn global add gatsby-cli
yarn global v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "gatsby-cli@4.7.0" with binaries:
- gatsby
Done in 7.62s.
できました。
2. サイト作成
空のサイトを作りたいので、参照サイトに言われたまま作ります。
$ gatsby new <これから作るサイト名> https://github.com/gatsbyjs/gatsby-starter-hello-world
You can now view gatsby-starter-hello-world in the browser. http://localhost:8000/
できました。
3. 起動確認
$ cd gatsby-site/
$ gatsby develop
できました。
4. 動作確認
参照サイトに書いていることを実際にやってみます。
できました。
Google Cloud Platform (GCP)を有効化
Googleアカウントを持っていれば、簡単に有効化できます。
インスタンスはGatsbyJSに合わせて作っていきます。
ブログサイトを作ってみる
ブログサイトを作る理由
-
将来的にも使えそう
-
仕事に関連する
-
ブログ副業で小遣い稼ぎをしたい
システム構成案
- プラットフォーム: Google Cloud Platform (GCP)
- フレームワーク: GatsbyJS
- コンテンツ管理: Headless CMS
- 使用技術: Javascript, React
作成中にトライすること
- gitの使い方になれる
- テスト駆動開発を実践する
- 使いやすいUI設計をする
- UIテスト自動化
ブログ副業に挑戦
ブログ副業に挑戦します。
自力でWebサイトを立てて、その過程で勉強したことを記事にしていきます。