GatsbyJS はじめての投稿

とりあえず、初めての投稿。

GatsbyJS はじめての投稿までの流れ

超初心者なので、おかしな部分があるかもしれませんが、無事に動作しているので個人的なメモ。

GatsbyJSのインストール、動作をすることが前提。

制作環境

• パソコン: ThinkPad X230(Lenovo)
• OS: xubuntu 18.04.4 LTS (Bionic Beaver)

GatsbyJSのバージョン確認

gatsby -v

Gatsby CLI version: 2.12.44

GatsbyJSの初期設定

gatsby new

gatsby-starter-blogをチョイス。

サイト設定の修正・編集など

gatsby-config.js

/src/components/bio.js

/content/assets/の「gatsby-icon.png」「profile-pic.jpg」を同じ名前で上書き

• gatsby-icon.png（元の値:512px、正方形）
• profile-pic.jpg（元の値:400px、正方形）

※今回は、PNGのアイコン画像を使うので「/src/components/bio.js」の profile-pic.jpg を「profile-pic.png」へ修正。

記事作成のメイン

/content/blog/の「hello-world」コピペ

フォルダ名はURLとなる。（英数字がベター）

フォルダの中にある「index.md」は記事になるので、修正・作成など。（マークダウンが利用できる）

ローカル確認

gatsby develop

http://localhost:8000

Ctrl+C（終了時）

ビルド

gatsby clean

gatsby build

まとめ

publicをFTPなどでサーバーへアップロードすれば公開となる。

Netlifyを事前登録しておくと便利。

まったくのOSクリーンインストールからだと、おおむね2-3時間くらいで公開まで可能。

細かいところなどは、少しずつ学習しながら修正へつづく。