Netlify, Gatsbyのお勉強➡Large MediaとCMSで奮闘してました。CMS不可能、ただのGatsby可能

Netlify を使ってGatsby で完全無料の（事実は100GBバンドワイズ以上はアクセス度によって請求されるけど、伸びしろは大きいのでほぼ無料）の使い方を考えてみる。

NetlifyはGithubなどで直接ウェブをデプロイしてくれて、とっても便利

ノート代わりに勉強したことをここに記入します。Netlifyの始め方はまた書きます。

１．Gatsbyとは何ぞや。

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

知らんかった。Reactでつくったフレームワークのことやったんやな。VUE.jsはつかったことあったけど、完全に始める方向間違って、CMSのことやと思った。NetlifyさんのCMSリストにはCMSって書いてあったもん。

２．GatsbyのCMSもあります。

これはどうやら、ローカルで編集するんでなく、Netlifyさんのサイトのコンソール画面でできるようだ。でも試してないから次やるリストに追加（https://www.netlifycms.org/docs/gatsby/）

３．NetlifyさんのLarge Mediaの使い方を勉強しました。もち、無料。こんな具合で教えてくれます。

CMSのイメージはどうしても変えられなかったけど、Gatsbyのまっさらから始めたTUTORIAL (STEP-BY-STEP)（こちらも次やるリストhttps://www.gatsbyjs.org/tutorial/）で構築したローカル環境ではオッケーでした。

そして、こちらから（https://docs.netlify.com/large-media/overview/#large-media-docs）気長に丁寧にNetlify Large Mediaへ接続環境を整えてやります。

必須環境

➞Git

➞GitHub など

➞Netlify　CLI　https://docs.netlify.com/cli/get-started/#installation

npm install netlify-cli -g

https://docs.netlify.com/site-deploys/create-deploys/#drag-and-drop

➞Git LFS　

https://git-lfs.github.com/

➞Netlify Large Media plugin

netlify plugins:install netlify-lm-plugin 

netlify lm:install

➞もちろん、Gatsby　https://www.gatsbyjs.org/tutorial/part-zero/

node.js

npm installも忘れずに

npm install -g gatsby-cli

では、コマンド打ちます。

Netlify Login （きゅーにサイトに飛んで、権限を与えるかどうか聞かれます）

Netlify Link （すでにGitにレポジトリがあってそこでよいか、リンクの確認をしてくれます）

Netlify lm:setup

Netlify lm:info（接続を確認してね）

git lfs track "apple4.jpg" （.lfsconfigのなかに書かれます）

git lfs track （これで確認できます）

git add .

git commit -m "Added apple4.jpg to Large Media"

git lfs push origin master

Gitにはこんな感じでアップロードされているはずです。本体はNetlifyのLarge Mediaのなか。

Netlify logout （これをしないでウェブコンソールからデプロイすると、接続が切れてつながらないからPCリブートすか、なんとか接続を切らなければならない） 

 

４．別にGitに小っちゃいイメージファイルいれるし、Large Mediaいらねくね？

の場合は、

①CMSをダウンロード（別にフレームワークインストールして最初から作ってもよし）

②Gitにpush③NPMをリポジトリ内にインストール

④ついでにGatsbyもインストール（だいたいいらん）

⑤gatsby develop

これで、LIVE　Serverも使わずに、ふつーにlocalhost:8000でブラウズできます。

 

次やるリスト

１．gatsbyをCMSでウェブコンソールからいじってみたい

https://www.netlifycms.org/docs/gatsby/

２．フレームワークとしてのgatsbyをいじってみたい。Vue.jsとよくにてる。あたりまえか。。。

https://www.gatsbyjs.org/tutorial/