ブログを作るブログを書きます！！！
このブログくらいのクオリティでよければ誰でも一瞬で作れます！！！
みんなブログ開設しようううううう！！！！！
そんなにやることは多くないにも関わらず、多少いろいろがんばって書くと記事の分量は多くなりそうなので、前編(ブログ作成編)と中編(ブログ改造編)と後編(ブログ公開編)に分けます！！！
今回はまず、ブログを作成していきましょう！！！
今回は React + Gatsby という技術スタックを用います!
「Nuxt でもいいじゃないか！」
「Hugo はどうした！」
みたいな技術選定に関する文句があることは認めますが、とりあえずここでは無視しますごめんなさい！
どうしても気になる人は気休めにこれでも見ておくといいかと思いますが、まあこれを作成したのが Gatsby さん本人であることを考えると、やはり気休め程度にとらえておくのが無難かと。
こういった比較サイトはいくつもあるので、興味がある人はいろいろ読んでみてください！
僕はフロントエンドプログラミングに関して(というかプログラミング全般に関して)、正直🔰の域を出ないのですが、その僕が実際に使ってみて、「環境を構築したあとなら(まあこれが往々にしてそこそこめんどくさいんですけど…ごめんなさい)」、とてもわかりやすくスムーズにブログを公開するところまでできたように思います！
コマンド一つでブログのひな型を作成できますし、そのカスタマイズも、ビルドからのテストも、デプロイ(ここでは一般公開の意味)も、さほど苦労なく進めることができます。
そしてさほど苦労なく作成した割には、 Gatsby 側が様々な最適化をしてくれるために、かなり速く見心地の良いモダンなサイトが出来上がります！
前置きが長くなったのですが、さっそくはじめます！！！
各項目において疑問等が出てきた場合は、お手数ですが勝手に深く掘り下げて調べてみてください…。
WSL 環境を前提とします。まだ WSL の環境を構築していない方はまずこれ読んでみてください！！！
その上でこの公式ドキュメントを参考に作業を進めていきます。
1. Windows Terminal を開く。
2. npm インストール
sudo apt update
sudo apt -y upgrade
sudo apt install -y build-essential
curl -L https://git.io/n-install | bash※ ちなみに今まで適当に生きてきて知らなかったのですが、 -y オプションはコマンド実行中に投げかけられる質問に対し(たとえば「ここのディレクトリに今からこれインストールするけどいい？」とかいちいち聞かれる)全部「yes」と自動で答えてくれるオプションらしい。
※ わけわからんものを入れられる可能性もあるわけである意味危険なオプションではある...。
※ まあ今回は大丈夫でしょう。
3. Gatsby インストール
npm install -g gatsby-cliとりあえず Gatsby 環境の構築は完了!!!
Mac 環境が現状では手元にないのであんまりわからないのですが、たぶん Windows よりはシンプルなはず。要はnpm をインストールし、Gatsby を npm でインストールするだけ。適当に手順とドキュメントくらいは貼っておきます。
1. Terminal を開く。
2. Homebrew インストール
Homebrew をインストールします。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"を Terminal で入力すればいいらしいよ？
3. node をインストール
下記コマンドを叩く。
brew install nodenode と npm がインストールされたか確認
node -v
npm -v上記を入力してみてなにかバージョンが表示されれば成功。「node とか npm ？？？そんな命令ないけど？？？」とか苦言を呈されたらインストールされてない。その場合 2 からやり直してみてはいかがでしょうか。
4. Gatsby をインストール
npm install -g gatsby-cliとりあえず Gatsby 環境の構築は完了!!!
ディストリビューションによって細かい作法の違いはあると思いますが、まあ Windows 編の WSL 用環境構築と要旨は一緒でしょ。がんばれ！
1. ブログのひな型を作成する。
さっそく下記コマンドを叩く。
gatsby new your_greatest_blog https://github.com/gatsbyjs/gatsby-starter-blogちなみに your_greatest_blog のところは自分のブログ名に自由に変えてください(僕の場合は Vane11ope_blog とかになる)。
いろいろ処理が走ってブログのひな型を Gatsby さんががんばって作ってくれるので、 Twitter でもして暇を潰しましょう。
2. ブログを表示する。
なんともうブログはそこそこできてます。一回試しに表示させてみましょう！！！下記コマンドを入力してみましょう！！！
cd your_greatest_blog
gatsby develop自然とブラウザが開かれ localhost の 8000番 ポートにブログが表示されるかと思いますが、表示されない場合はブラウザで http://localhost:8000/ を開いてみましょう！
下記のようなブログのひな型が表示されるかと思います！
あとはこれの中身を自分用に少し変えればもう完成です(とりあえず)。
すごくないですか？？？
上記のブログひな型はとてもシンプルなものでした。自分でいろいろとたくさんアレンジしたいひとにはぴったりの出発点かと思います。もちろんブログをシンプルに保ちたい方にもぴったりだと思います。 ですが、もっともーーーっと最初から洗練されたデザインのひな型が欲しい、とかいうめんどくさ...贅沢な人もいるでしょう。
そこでなんですが、これとか試されてはいかがでしょうか！！！
上のサイトにも書いてありますが、具体的にはこんなコマンドです。
gatsby new gatsby-starter-hero-blog https://github.com/greglobinski/gatsby-starter-hero-blog見た目こんな感じです。
それからさらなるミニマリストはこれとかどうでしょう！
こんなコマンドです。
gatsby new gatsby-starter-minimal-blog https://github.com/LekoArts/gatsby-starter-minimal-blog見た目こんな感じです。
もっと他にもいろいろと探したい人は、Gatsby の starter がたくさん集まったこのサイトとか楽しいかもしれません！！！
前編であるブログ作成編はこのくらいにしておきます！中編で今回作ったひな型を少し自分用に改造してみましょう！！！