gatsby入門 ブログ作ってサーバーにアップしてみる

# gatsbyの作業履歴
[gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする](https://qiita.com/3S_Laboo/items/a38536ed1fb976303b47)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（１）](https://qiita.com/3S_Laboo/items/014ca205612f21d830aa)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（２）](https://qiita.com/3S_Laboo/items/4a0f3fdf42c2aa466ed9)
[gatsby入門 チュートリアルをこなす 2.  ギャツビーのスタイリングの概要](https://qiita.com/3S_Laboo/items/41bb0f5f7cabecedc4c2)
[gatsby入門 チュートリアルをこなす 3. ネストされたレイアウトコンポーネントの作成](https://qiita.com/3S_Laboo/items/cc24aae21b22b936488d)
[gatsby入門 チュートリアルをこなす 4. ギャツビーのデータ](https://qiita.com/3S_Laboo/items/49f04f8c9da62a6058cf)
[gatsby入門 チュートリアルをこなす 5. ソースプラグインとクエリされたデータのレンダリング](https://qiita.com/3S_Laboo/items/c9a9a9c3c1e4d0851e6b)
[gatsby入門 チュートリアルをこなす 6.  変圧器プラグイン※Transformer pluginsのgoogle翻訳](https://qiita.com/3S_Laboo/items/226653c9f91cb3a217c7)
[gatsby入門 チュートリアルをこなす 7. プログラムでデータからページを作成する](https://qiita.com/3S_Laboo/items/f80d2c5a36207af71a01)
[gatsby入門 チュートリアルをこなす 8.  公開するサイトの準備](https://qiita.com/3S_Laboo/items/1f50c15a5eddbde6ad18)
[今回：gatsby入門 ブログ作ってサーバーにアップしてみる](https://qiita.com/3S_Laboo/items/7c3ecb0f409fb143f367)
# 基本のチュートリアルはこなした。。。
さて何しましょう？とチュートリアルを見ているとgithubにブログ用のソースが上がっているとの記載が
https://github.com/gatsbyjs/gatsby-starter-blog
とりあえずブログでも作ってみっか！
んで、netlifyとgithubを使うのが主流みたいだけど、nginxの勉強もしたいので
とりあえず自分のGCPのVM環境にアップしてみようと思います。
飽きたらGCPから移行するかな？
#ブログを構築
##22:00作業開始 ローカルにgatsbyサイトを作成
まずは、ローカルにgatsbyサイトを作成します。
以下コマンドを好きなディレクトリで実行。そして風呂。
```gatsby new 3s-laboo-blog https://github.com/gatsbyjs/gatsby-starter-blog```
※3s-laboo-blogは任意です。
![2020-09-07_22h03_24.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/9651b39b-44f9-b383-4672-4049dbf94c8e.jpeg)
なんか、ダウンロードすげぇ時間かかったな。
ダウンロード後サイトを開発モードで起動しながら、ビールをプシュっと。
```cd 3s-laboo-blog```
```gatsby develop```
![2020-09-07_22h48_42.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/5d5d2461-55b1-79c8-9594-7d2172de937f.jpeg)
http://localhost:8000/
![2020-09-07_22h50_15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/93e19a9b-9309-62c2-39a1-460ab7e666ab.jpeg)
おー。。。超シンプル。
まぁ、こっからアレンジすればいいが、今回は最低限にだけとどめよう。
ビール、グビグビ。
##22:50 ブログをちょっとだけ修正
まず、顔が私じゃない！
content/assets/profile-pic.jpgを変更
あとアイコン
content/assets/gatsby-icon.pngを変更
![2020-09-07_22h54_06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/99a2ccc1-0f74-d96f-a550-979d06d2c5f8.jpeg)
確認するとアイコンだけ出ていない。
gatsby-config.jsを少しいじってみる。
![2020-09-07_23h35_21.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/2e94f030-9116-8a70-3d45-c51df09ab204.jpeg)
![2020-09-07_23h37_08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/f7b3e676-d789-00d4-bc34-bfc94d368932.jpeg)
リスタートされたみたい。
改行されてないな。
src/stylesディレクトリを追加
src/styles/global.cssを追加し、以下を記述

```css:src/styles/global.css
html {
    background-color: #e0ffff;
    white-space: pre-wrap;
}
```
pre-wrapは改行コードが反映されるよ！
gatsby-browser.jsを修正

```js:gatsby-browser.js
// custom typefaces
import "typeface-montserrat"
import "typeface-merriweather"
import "prismjs/themes/prism.css"
import "./src/styles/global.css"←これ追加
```
![2020-09-07_23h46_45.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/4f7f6565-6827-32bf-8d1f-547b063f6431.jpeg)
あと、マークダウンファイルをちょいと直して。。。
![2020-09-07_23h52_34.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/afa1ad69-519d-7ae9-291e-83c160db7c17.jpeg)
とりあえずはこんなとこでしょ！
（後でかなり修正しないとな。。。）
ビールなくなった。
とりあえずコンパイル・起動
```gatsby build```
```gatsby serve```
動確問題ない。
## 00:00 winscpでgcpにログインし、nginxのフォルダにアップロード
nginxの配置フォルダはnginxで設定したフォルダです。
アップロードするものは、newしたディレクトリ(ここでいう3s-laboo-blog直下)にあるpublicディレクトリ内のファイル・ディレクトリ。
https://3s-laboo.com/
![2020-09-08_00h43_41.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/7ea96fe0-7d73-1541-9398-d8d7558fe96f.jpeg)
イエーイ！
ということでわたくし3S Labooのブログを立ち上がりました。
時刻は00:46
風呂入ってビール飲んで歯を磨いたのも含めて3時間位で作れたー

今後修正していきまーす。
今回はここまで。

ありがとうございました。