Gatsby.js+TypeScript+Netlifyでブログサイトを作成する

はじめに

本サイトもGatsby.jsとTypeScriptとNetlifyでサイト構築を行っているが便利すぎたのでそれの紹介をする。TypeScriptにしている記事があまりないように思ったこともあるのと次作る時の私の備忘録用でもある。 ここではサイト構築までの手順のみ紹介するので「Gatsbyとは」とか「Netlifyとは」といったことは言及しない。細かいところは適宜ググってほしい。

Gatsby.jsをインストールする

コマンドプロンプトを開き下記実行（nodeが必要）

npm install -g gatsby-cli

ブログサイト構築

一から作るのは大変なのでこちらのスターターブログから好みのものを選んで実行する。今回はこちらにした。

gatsby new gatsby-starter-typescript-power-blog https://github.com/mhadaily/gatsby-starter-typescript-power-blog

とりあえず確認のため立ち上げる

cd gatsby-starter-typescript-power-blog
gatsby develop

表示されるローカルホストを立ち上げるといい感じのやつがでてくる。

新規でブログを追加したい場合は/blogの下にフォルダを作って、index.mdファイルで記事を保存すればＯＫ

Githubへプッシュ

Nrtlifyではgithubを使うとmasterにpushすればそのままデプロイしてくれるため便利なのでその設定をしていく。 新規リポジトリを作成して下記実行する。

git remote add origin https://github.com/*********/gatsbytest.git
git push -u origin master

これでgithubの設定終わり

Netlifyへのサイト登録

Netlifyのアカウント作って、teamsのところにいき右上のNew site from Gitをクリック

GitHubをクリック

先ほど作成したgithubのリポジトリを選択する

こんな画面が出て特に変更するところはないので下部のDeploy siteをクリック

クリックするとこんな画面になるのでしばらく待つ。

こうなるとデプロイ完了。アクセスすると。

表示されてデプロイが成功したことがわかる。

ドメイン取得

デプロイするだけならそれでもいいが、サイト運営等をしていくのであれば独自ドメインの取得が必須である。 独自ドメインの取得はお名前.comでこちらの記事をみていただきたい。

まとめ

Gatsby+TypeScript+Netlifyでサイト構築することができた。 あとは記事を書いたりデザインいじったりお好みでやればオリジナルなサイトができる。簡単すぎる。