かきスタンプ

福岡でフリーランスの物流系のエンジニアやってます。

Netlify:JAMstack templates を使った、お手軽サイト作成

静的サイトのホスティング先として、かなりメジャーな感じになってきた Netlify

GitHub や Bitbuket のリポジトリを指定するだけでデプロイできてしまう手軽さが魅力ですが、リポジトリが無くても、テンプレートを指定するだけで静的サイトを作れたりします。

テンプレートには、Gatsby を使った爆速テンプレートもあったりします。

作り方

以下、Github アカウントは作成済みで、Netlify アカウントと連携している事を前提としています。

1.

JAMstack project templates にアクセスします。
f:id:kakisoft:20190512221221p:plain

2.

テンプレートを選択します。
f:id:kakisoft:20190512221435p:plain

今回は、「Gatsby + Netlify CMS Starter」を選択しています。
『Deploy to netlify』ボタンを押します。

3.

『Connect to Github』ボタンを押します。
f:id:kakisoft:20190512220850p:plain

4.

「Repository name」をデフォルトから変えたければ変更し、
『Save & Deploy』をボタンを押します。
 
f:id:kakisoft:20190512220912p:plain

5.

Site deploy in progress ...
の状態からしばらく待つと、デプロイが完了します。
URLをクリックすると、デプロイされたページに遷移します。
 
f:id:kakisoft:20190512220941p:plain
今回選択したテーマのデモページ(本家)は、こんな感じです。
 
f:id:kakisoft:20190512221008p:plain

6.

GitHub に、新しいリポジトリが自動で作成されています。
masterブランチを push すると、自動でデプロイされます。  
使い方はテンプレートごとに異なるので、各種 Readme をご参照下さい。  
 
自分の GitHubアカウントに自動生成されたリポジトリが、以下のような状態となっていた場合、画面下の方にある「Import Code」ボタンを押すと、ソースがコピーされます。 f:id:kakisoft:20190602111047p:plain (中略) f:id:kakisoft:20190602110906p:plain  
 

実際に作ってみたもの

Gatsby developer blog というテンプレートを使って、サイトを作成してみました。
 
福岡市周辺の、公園などの子供が遊ぶ場所の情報をかいてます。
kaki-playground.com