📘

TinaCMS使えばブラウザぽちぽちでいけてるページ作れちゃう

3 min read

概要

職場のフロントエンドエンジニアの人にお勧めされて
TinaCMSと言うHeadlessCMS触ってみたのでメモ残しとく

登録してみてから本番公開されるまでほんと30分もかからないし
全然コード書けなくても、Gitコマンドさわれなくても
ブラウザでぽちぽち押してるだけで自分のページできるからすごいなぁと思った🤹‍♂️

(こんなページがサクッとできて、ブラウザ上で更新できちゃう

インストールからVercelデプロイまで諸々準備

正直ちゃんと理解しきれてないけど、なんかぽちぽちしてくだけで本番で見れる環境まで作れる

以下ページにアクセスして右上のSignUpボタン押下

https://tina.io/

メアドとパスワードぶち込む

登録したメアドに届いた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にアクセスして

https://app.tina.io/apps

作成されたアプリの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つけてアクセスすると

http://localhost:3000/admin

左下に鉛筆マークが出てきてブラウザで画面編集できる

左の入力欄変えてsaveすることで画面の内容が変わる

本番環境でみたい

Vercelにアクセスして作成したプロジェクトをクリック

https://vercel.com/dashboard

右上にあるvisitを押すと本番で見れる!

これすごいのはローカルで編集した内容がデプロイされてて本番環境にも反映されてたっす

多分本番URLでも/adminとかアクセスしてこちょこちょやれば編集できるんちゃうやろうか。

まとめ

React, Next.js, GraphQLとか今時のツール使った
HeadlessCMSを全然コード理解してなくても
ブラウザぽちぽちで構築できちゃった🙈

非エンジニアの人も交えてなんかドキュメントまとめたり
ちょっとしたサイト上げたい時はいい選択肢なんじゃなかろうか

Discussion

ログインするとコメントできます