今朝の9：00です。息子も学校に送ってお茶も沸いたし、旦那さんは会議中。今から一時間、みっちりと勉強します。
目標は、自宅で今のフリーランス以外にもお仕事できるようになること。
では本日のお題【LMこんどはGatsbyCMSにチャレンジだ。】です。
１．今回はCMShttps://nekonya.netlify.com/にLMを使ったイメージファイルを挿入します。
まずはこちらを確認して。。。https://blog.goo.ne.jp/beerneko/e/62a9cd078af31daebaa3142c61e1e170
$ netlify login
Already logged in via netlify config on your machine
Run netlify status for account details
あれ？すでにログインしてるって出てきた。前回はウェブサイトまでいってAuthorizeをクリックしてNetlify CLIでつなげてやらなければならなかたのに。。。
へんだ。。。
前回と同じようにアップデートしろってかいてあったので、そうします。
Update available 2.20.1 → 2.20.2
Run npm i -g netlify-cli to update
Success! Netlify CLI has been installed!
Your device is now configured to use Netlify CLI to deploy and manage your Netlify sites.
Next steps:
netlify init Connect or create a Netlify site from current directory
netlify deploy Deploy the latest changes to your Netlify site
と出てきました。
２．netlify init
$ netlify init
? What would you like to do? ⇄ Connect this directory to an existing Netlify site
（すでにNetlifyにGitと連携してるサイトがありますから。）
netlify link will connect this folder to a site on Netlify
? How do you want to link this folder to a site? Use current git remote origin (https://github.com/beerneko/nekonya)
（Gitのnekonyaに全部ありますね。前回よりGitのLFSにあげたものは勝手にNetlifyのLMにアップロードされることに感激したことを思い出した。）
Looking for sites connected to 'https://github.com/beerneko/nekonya'...
Directory Linked
Admin url: https://app.netlify.com/sites/nekonya
Site url: https://nekonya.netlify.com
Site id saved to D:\webcms5\nekonya\.netlify\state.json
（ローカルとつながって成功してますね。）
Success
This site "nekonya" is configured to automatically deploy via https://github.com/beerneko/nekonya
３．ではGitLFSを確認します。
git lfs
High Level commandとLow Level commandの両方がでてきました。なんだか一度もつかわれてないっぽい。
そして、exampleとしてこんな感じに出てきました。
Examples
--------
To get started with Git LFS, the following commands can be used.
1. Setup Git LFS on your system. You only have to do this once per
repository per machine:
git lfs install
2. Choose the type of files you want to track, for examples all ISO
images, with git lfs track:
git lfs track "*.iso"
3. The above stores this information in gitattributes(5) files, so
that file need to be added to the repository:
git add .gitattributes
3. Commit, push and work with the files normally:
git add file.iso
git commit -m "Add disk image"
git push
でもなぁ、一度確認してみます。
git lfs track
...うんともすんとも言わねぇ。。。
４．.lfsconfig fileをチェックします。
[lfs]
url = https://xxxx-xxxxxx-xxxxxxx.netlify.com/.netlify/large-media
なんか入ってますね。おっ、そうか。
まだトラックしてやってなかった。
その前にNetlifyのコンソールサイトからLMのサイトを確認して何も入ってないか確認しなきゃね。前回失敗してたから、一応ね。
。。。おぅ？
入ってる。。。
img/blackkimono.jpgがきちんとはいってたぞぉーっ！
ってことはこれも時間差なのか？？？時間がかかってたことをねこは勘違いして失敗ときめつけていたのか？？？
早速トラックしてつかってみるぞ。
５．CMSのコンパイルエラーについて。
gatsby develop
でローカルをブラウズして確認しながらblackkimono.jpgをつかってみる。
。。。どこにイメージファイルがあるんだろう。。。「home-jumbotron.jpg」をサーチしてみよう。
src/pages/index.mdにあった。なんかイメージファイル全部ここで宣言してるっぽいですね。おぅ？全ページのコンテンツ内容はここかぁっ！
イメージファイルを変えてやって。。。保存と。
あれ？！
> 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import { Link, graphql } from 'gatsby' 4 | では、もう一度元に戻してやるために、CTL＋Zで元に戻して、保存と。あれっ！？まだエラーがでる＠O＠；
gitには変更が何もない状態で元に戻ってるはずなのに！！！あれぇ～っ！
まだgatsby developは走ってるよね。。。
では、消してみてgatsby buildやってみよう。
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
なんやそれ！
じゃ、gatsby clean そしてもう一度gatsby build.
$ gatsby clean
info Deleting .cache, public
info Successfully deleted directories
あれっ？エラー消えてる。なんか、かってにキャッシュためてたんだね。だからgitに残らんのか。なんやそれ！
。。。そしてなんか消されてる。CSS???じゃぁ、変更なしのgitはいったい？
gatsby-plugin-purgecss:
Previous CSS Size: 190.75 KB
New CSS Size: 19.86 KB (-89.59%)
Removed ~170.90 KB of CSS
では、gatsby developでローカルブラウズして。
パッパカパーンっ！
元に戻った。でもわからん。
とにかく、変更後のエラー解除で元の状態に戻す手順は以下の通り。
① gitを変更前の状態に戻す
② CTL+Cでgatsby developを解除
③ gatsby cleanでキャッシュなどなど掃除
④ gatsby buildでコンパイルしなおす
⑤ gatsby developでサイト確認
６．CMSイメージファイルの変更
では、今回きちんと調べてからCMSのイメージファイルを変更したいと思います。
７．新しい画像をLFSで組み込んでLMへ格納する。
$ git lfs track "beerneko.jpg"
$ git lfs track
Listing tracked patterns
beerneko.jpg (.gitattributes)
Listing excluded patterns
いかん、もっとよい写真をさがさな。
$ git lfs track "gysen.jpg"
version https://git-lfs.github.com/spec/v1
oid sha256:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
size 345609
ってなってる。これは正しい。
なんでサイトに反映されないのかなあ。。。
これも時間差なんだろうか。
今からググります。もうすでに、お昼食べたら1時前になってます。
$ netlify login
Already logged in via netlify config on your machine
Run netlify status for account details
To see all available commands run: netlify help
yurik@DESKTOP-159BVP1 MINGW64 /d/webcms5/nekonya (master)
$ netlify status
──────────────────────┐
Current Netlify User
──────────────────────┘
Email: beerneko@yahoo.com
Github: beerneko
Teams:
beerneko's team: Collaborator
────────────────────┐
Netlify Site Info
────────────────────┘
Current site: nekonya
Netlify TOML: X:\webcms5\nekonya\netlify.toml
Admin URL: https://app.netlify.com/sites/nekonya
Site URL: https://nekonya.netlify.com
Site Id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
一度ログアウトして、適当に変更箇所作ってもう一度ログイン、そしてgit pushしてみます。
そして忘れてはならないのは、Netlifyのサイトをブラウズしていたら消すことです。
netlify logout
netlify login
おや？今度はきちんとサイトへ連れて行ってくれました。AuthorizeをクリックしてNetlify CLIでつなげてと。
やっぱりいかん。。。そうかっ！Netlifyのサイトでログあるかな？前回で「git pushしたらそのままデプロイしてくれます」を学んだよね。
．．．ログありました。
そして、エラーはっきりしました。問題児はgatsbyでした。
https://github.com/gatsbyjs/gatsby/issues/12438
はよゆうてんか。
Hi folks! I work at Netlify and while I didn't create this feature I do know the answer here: large media images are ONLY available at serve time, not build time. Even fetching them with a git lfs pull will be super challenging since we drop git access permissions before you can run that command as part of your build pipeline. There are no plans at this time to provide those assets for use during build.
サーバタイムではLMがつかえるけど、ビルドタイムではつかえない？じゃぁ、どうやってイメージファイルをLMへあげるのさ！？
わからん。。。
wakaran...
https://docs.netlify.com/large-media/requirements-and-limitations/#limitations
Files tracked with Large Media are uploaded directly to the Netlify Large Media storage service on push, completely bypassing the site build. This saves build time, but also means that the files are not available to tools that process asset files during the build, such as Hugo's image processing or the gatsby-image plugin. Depending on your needs, you may be able to replace this functionality with Netlify's image transformation service.
ということは、先にトラックしてLFSでプッシュしてやってから、またIMGタグをプッシュしろってことかな？
よし、もう3時だ。金曜日だ。。。いまから必死のパッチでやったるど。
①.gitattributesからトラックを全部消す。
②コードをもとの状態に戻す。マスターで直でやってたから、もう大変。
③gatsby clean/gatsby buildで元に戻ったか確認
④新しく入れたイメージ全部消す
⑤もう一度名前変えてイメージ（gyosen.jpg）をstatic/imgに挿入
⑥git lfs track "gyosen.jpg"
⑦netlify login
⑧
git add .
git commit -m "the last commit for LFS for today"
git lfs push origin master
git push
⑨netlifyサイトビルドログ確認
こえぇ。。。
うんともすんとも言いやがらねぇ。。
ぉおっ？？？？
LMに入ったぁ～っ！！！！
⑩では調子のって、使ってみませう。。。
(src/pages/index.md)
⑪ローカルチェックOK
⑫
git add .
git commit -m "Successfully added LFS image file into LM"
git push
ほんと、もう少しわかりやすくしておくれよ。。。
その１．LMにファイルを入れるときにはnetlify loginがローカルからなされていること
その２．Git pushは新しいファイルを先にトラックしてやり、netlifyのLMサーバに先にアップロードしておいてから使うこと
その３．（本当はここに「ほらね、怖くない。できた。うふっ💛」と書きたかったが、やっぱりデプロイで同じエラー。。。やっぱり、Netlifyのせいじゃなくって、Gatsbyですな。）
結論
本日の成果は、CMSのgitリポでもLMへイメージファイルをアップロードできることが分かった。
次回はこれを無事にgatsbyに組んでデプロイできるようにすること。
とりあえず、今だれかにきいてます。
https://github.com/gatsbyjs/gatsby/issues/19384
今日は全然T-SQLの勉強できてないから、30分だけでも必死でやるぞ。
その前に、キッチンあらわな。結局9時から4までこれしかしてない。。。かなしい。。。