TinaCMS使えばブラウザぽちぽちでいけてるページ作れちゃう
概要
職場のフロントエンドエンジニアの人にお勧めされて
TinaCMSと言うHeadlessCMS触ってみたのでメモ残しとく
登録してみてから本番公開されるまでほんと30分もかからないし
全然コード書けなくても、Gitコマンドさわれなくても
ブラウザでぽちぽち押してるだけで自分のページできるからすごいなぁと思った🤹♂️
（こんなページがサクッとできて、ブラウザ上で更新できちゃう
インストールからVercelデプロイまで諸々準備
正直ちゃんと理解しきれてないけど、なんかぽちぽちしてくだけで本番で見れる環境まで作れる
以下ページにアクセスして右上のSignUpボタン押下
メアドとパスワードぶち込む
登録したメアドに届いたverification code入れる
なんか可愛いアルパカみたいなんでてきた
Folk and deploy starterってやつ押す
open tina-cloud-starterみたいなボタン押す
とGitHubウィンドウ出てくるのでFork押す！
次はGitHub認証する
ほんでForkしたリポジトリ選ぶ
Deploy to Vercel押す
なんかVercel言われた通りにぽちぽちクリックしてく
ローカル環境でちょこっと作業
ForkしたリポジトリをローカルにCloneしてくる
.env.developmentファイルを以下の通り書き換え
NEXT_PUBLIC_USE_LOCAL_CLIENT=0
以下URLにアクセスして
作成されたアプリのConfigurationボタンを押下
ClientIDをコピペして
ローカル環境で.env.localファイルを作成して以下の通り貼り付ける
NEXT_PUBLIC_TINA_CLIENT_ID=<get this from the app you create at app.tina.io>
ローカル環境の起動
yarn installからの
yarn devをクリック
あとはhttp://localhost:3000/にアクセスする
そいだらこんな感じの認証っぽいの聞かれるんでクリックする
そしたらこんな画面が見れる！！
/adminつけてアクセスすると
左下に鉛筆マークが出てきてブラウザで画面編集できる
左の入力欄変えてsaveすることで画面の内容が変わる
本番環境でみたい
Vercelにアクセスして作成したプロジェクトをクリック
右上にあるvisitを押すと本番で見れる！
これすごいのはローカルで編集した内容がデプロイされてて本番環境にも反映されてたっす
多分本番URLでも/adminとかアクセスしてこちょこちょやれば編集できるんちゃうやろうか。
まとめ
React, Next.js, GraphQLとか今時のツール使った
HeadlessCMSを全然コード理解してなくても
ブラウザぽちぽちで構築できちゃった🙈
非エンジニアの人も交えてなんかドキュメントまとめたり
ちょっとしたサイト上げたい時はいい選択肢なんじゃなかろうか
Discussion