teto tech blog

<a href="https://teto-tech.com/article/newt-blog2">前回（【Newt】スターターを活用したツラくないJamstackブログ開設）</a>はNewtでAPIの設定を行いました。今回はいよいよネット上にブログを公開していきたいと思います。 
ここからフロントエンド開発の前提知識が必要となってきます。この内容が難しいという方はNode.jsとGitHubが最低限分かる状態で再度挑戦してみてください。
それでは以下が準備するものです。フロントエンドを学んでいる方であればおなじみのものばかりです。
<ul>
<li>推奨版のNode.js</li>
<li>お使いのエディタ</li>
<li>GitHubアカウント</li>
<li>Vercelアカウント（デプロイ先として使用します。） 
 </li>
</ul>
<h2>Newtのスターターを自分の環境にクローンする</h2>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/fca498ae-6c30-4026-881c-324022f8e77a%2Fnewt2-12.jpg" alt="newt2-12.jpg"> 
スターターはこちらから（BLOGのNEXT.js用です）<a href="https://github.com/Newt-Inc/newt-blog-starter-nextjs">https://github.com/Newt-Inc/newt-blog-starter-nextjs</a> 
緑の『Code』ボタンからお好きなクローン方法を選びましょう。 
 
<h2>お使いのエディタでスターターテンプレートを開く</h2>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/f0c8df22-50f1-413c-b631-f20c7bbc6734%2Fnewt3-1.jpg" alt="newt3-1.jpg"> 
私はVSCodeを使用しています。左カラムの『.env』ファイルを開きます。 
 
<h2>環境変数を設定する</h2>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/68065cfa-1b79-474d-a6d9-1b0031e85cbe%2Fnewt3-2.jpg" alt="newt3-2.jpg"> 
環境変数とは今回の件でいうと、ブログとNewtを繋ぐためのキーで、このファイルは開発環境でのみ使用します。編集するのは以下の3項目です。対応するキーを取りに行きます。
<pre><code>NEXT_PUBLIC_NEWT_SPACE_UID=スペースUID
NEXT_PUBLIC_NEWT_APP_UID=AppUID
NEXT_PUBLIC_NEWT_API_TOKEN=CDN APIトークン
</code></pre>
 
<h2>スペースUID / AppUID / CDN APIトークンの取得</h2>
<h3>スペースUID / AppUID</h3>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/2ced078b-e86c-4e50-9327-9234c0157c6e%2Fnewt2-16.jpg" alt="newt2-16.jpg"> 
スペースUIDは、常にメイン画面に表示がされているのでわかりやすいと思います。 
AppUIDは左カラムの『Blog』 &gt; 『App設定』と進みます。 
 
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/44ef406b-61e5-4d8d-8007-b5b50313d89e%2Fnewt2-17.jpg" alt="newt2-17.jpg"> 
『一般』の AppUIDに表示されているものとなります。 
 
<h3>CDN APIトークン</h3>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/8716fdb3-8b9e-4ddd-8899-cc853efbead3%2Fnewt2-9.jpg" alt="newt2-9.jpg"> 
メイン画面に戻り左カラムから『スペース設定』をクリックします。 
 
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/5d31c874-0c76-40f1-aa48-2e856aaab274%2Fnewt2-13.jpg" alt="newt2-13.jpg"> 
上の『Newt CDN API Token』の青いボタン『作成』を押します。 
 
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/2bb722fc-fc4c-4b50-bc64-af8c3756c015%2Fnewt2-14.jpg" alt="newt2-14.jpg"> 
好きな名前を入力して、右下の『作成』ボタンクリックで完了です。 
 
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/1de35029-d19a-4547-8272-138ec00fe102%2Fnewt2-15.jpg" alt="newt2-15.jpg"> 
作成したAPIトークンは右側のコピー用紙のマークからコピーができます。 
 
したがって.envファイル内の記述は以下のようになります。
<pre><code>NEXT_PUBLIC_NEWT_SPACE_UID=blog
NEXT_PUBLIC_NEWT_APP_UID=blog
NEXT_PUBLIC_NEWT_API_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXX
</code></pre>
 
<h2>Githubにアップロード</h2>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/fbc94455-e474-40a3-b69a-9903b536a9a8%2Fnewt3-3.jpg" alt="newt3-3.jpg"> 
私はGithub Desktopを使用していますが、いかなる方法でも構いませんので自分のGithubにアップロードしましょう。※画像は先程のスペースUID等の反映前の画像です。ご了承ください。 
 
<h2>Vercelにデプロイ</h2>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/465a7fda-90f2-4866-8433-8027d5d986d5%2Fnewt3-4.jpg" alt="newt3-4.jpg"> 
今回はVercelにデプロイをします。Next.jsをアップロードするにはVercelが一番手間がかかりません。連携さえ終われば、GitHubにアップロードするだけで、自動でビルドを行ってくれるようになります。 
使い方がわかる方は飛ばしてもらって結構です。 
 
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/6380d031-8b10-49fb-86fe-b6fe62d7945b%2Fnewt3-5.jpg" alt="newt3-5.jpg"> 
初めての方はGitHubでの登録・ログインがおすすめです。 
 
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/99c437b6-e661-4644-8bc7-a16709250504%2Fnewt3-6.jpg" alt="newt3-6.jpg"> 
画面右側の『Add New...』から『Project』を選択します。 
 
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/8db2a050-450e-4cba-b58e-768b4e3dabb3%2Fnewt3-7.jpg" alt="newt3-7.jpg"> 
VercelとGitHubをつなげます。 
 
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/b7b57c97-3645-4b0f-a7fb-2fe44ab4e25b%2Fnewt3-8.jpg" alt="newt3-8.jpg"> 
ログインができたら、GitHubのリポジトリが表示されます。Newtのスターターを選んで『import』 
 
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/7ff16022-c2e6-4813-9696-4412a270bc8f%2Fnewt3-9.jpg" alt="newt3-9.jpg"> 
importが完了すると、デプロイの画面になります。フレームワークプリセット等は自動的に最適なものが選ばれていますが、環境変数だけは自分で入力をしないといけません。『Environment Variables』をクリックして入力項目を開きます。下記のように入力して『Add』。すべての環境変数を入力します。 
 
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/c59cd51e-c5f7-4859-b799-8683e676af5e%2Fnewt3-11.jpg" alt="newt3-11.jpg">
<pre><code>//.env

NEXT_PUBLIC_NEWT_SPACE_UID=blog
//NAME = VALUE
</code></pre>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/1f424bba-4467-4476-8562-82a7a2b1f0ee%2Fnewt3-12.jpg" alt="newt3-12.jpg"> 
すべての環境変数を入力し『Deploy』を押すことで、デプロイが始まります。 
 
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/6a009efd-ecbd-4e14-8e80-d14a5a65f56a%2Fnewt3-13.jpg" alt="newt3-13.jpg"> 
 
<h2>これでネットへの公開が完了しました！</h2>
デプロイが完了すると、URLが発行されます。アクセスしてみるとブログが表示されます。お疲れさまでした。 
 
<h2>記事が自動反映されるよう設定にする</h2>
ネット上にブログが表示されているとは思いますが、いくら記事を更新しても再度デプロイをしない限り、ブログに記事は反映されません。 
これは、いわゆるSSG（Static Site Generation）、静的サイトジェネレーターというもので、以下のような流れになっています。
<ol>
<li>事前にサーバー上でビルドとレンダリングを行う</li>
<li>APIの情報を受け取る</li>
<li>クライアント側でリクエストをする</li>
<li>必要な情報がビルドされ、レスポンスが返ってくる</li>
</ol>
事前にある程度作られたサイトに情報を流し込んでいくだけなので、とにかくスピードが速いことがメリットに挙げられます。ブログにアクセスがあるたびに、その場で記事を出力するのですが、最後にデプロイしてビルドされたものが基準となってしまいます（上のリストでいう①）。記事を書くたびにいちいちビルドを行うのは面倒ですよね。 
そこでWebhookというものを利用し『記事が作成/更新されるたびに自動でビルドを行う』といった設定をしていきます。
<h2>VercelでHookを作成</h2>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/4f9cf626-4375-4b68-b47e-78c1e181407c%2Fnewt3-18.jpg" alt="newt3-18.jpg"> 
Vercelでプロジェクトを開き、 
①settings → ②Git → ③Deploy Hooksで入力画面を開きます。Create Hookで『hooksの名前』と『Gitのブランチ名』を入力し、④『Create Hook』ボタンを押ましょう。 
 
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/124d983b-eb5a-40d9-b992-9f84ec6bb493%2Fnewt3-19.jpg" alt="newt3-19.jpg"> 
Hookが作成されましたので、⑤『Copy』でコピーしておきましょう。こちらをNewtに貼り付けに行きます。 
 
<h2>NewtにHookを貼り付け</h2>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/1092a8ae-e4b0-46b0-a361-c67261b7b6c9%2Fnewt3-15.jpg" alt="newt3-15.jpg"> 
Newtメイン画面の左カラムから『Webhook』を選択し、右上の『Webhook』を作成ボタンをクリック。メニューが開きますので『Webhookテンプレート』を選択。 
 
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/7bb373aa-0af4-4eec-927d-562384154fd9%2Fnewt3-16.jpg" alt="newt3-16.jpg"> 
Webhookテンプレートの中から、Vercelを選択し、先程コピーしたHookを入力箇所に貼り付け。右下の『Webhookを作成』ボタンを押したら完了です。これで、Newt上で記事を更新すると、ブログ上にも自動反映されるようになりました。お疲れさまでした。 
 
<h2>Jamstackブログの完成！...やりたいこと全部できる？</h2>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/7a763cbc-00b0-4339-85a1-3292dbe507a7%2Fnewt3-20.jpg" alt="newt3-20.jpg"> 
テンプレートを使用することで簡単にブログを立ち上げることができました。応用すればポートフォリオや自分の作品の展示に活用できると思います。
一つ注意事項がありまして、いわゆるブロガーが使う『ブログ』には使えないということです。簡単にブログを立ち上げるためにVercelを使用しましたが、VercelのHobbyプラン（無料プラン）では個人的かつ非営利な目的でのみの利用に限定されています。つまり、収益化ができません。収益化をした場合はProプランに移行するか、Vercel以外のホスティングサービスを使用するかの2択です。
駆け出しエンジニアでも開発の過程をすっ飛ばして、実際に使えるサービスをデプロイできるとモチベーションが上がりますし、このテンプレートを改造していくうちにどんどんスキルが上がっていくと思います。
今回はスターターテンプレートを使用しましたが、もっと自由にカスタマイズも可能です。国産のヘッドレスCMSはmicroCMSなどがありますが、使用感やプラン内容はどちらが抜きん出ているということはないので、ケースバイケースで使い分けていきたいですね。
それでは今回はこのあたりで締めたいと思います。ありがとうございました。 
 
<h3>ヘッドレスCMSとしてGoogleスプレッドシートを活用したい方はこちらの記事がオススメです。</h3>
<a href="https://teto-tech.com/article/sssapi1">【SSSAPI】スプレッドシートをヘッドレスCMSにしたいなら早めに諦めたほうがいい</a> 
<a href="https://teto-tech.com/article/sssapi1"><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/a725d43f-93b1-429a-bab8-60b89dabbd2a%2FSSSAPI-eyecatch.jpg" alt="SSSAPI-eyecatch.jpg"></a> 
 
<h3>ブログの公開後に必要になってくるキーワード選定ツールは『ラッコキーワード』一択です。</h3>
<a href="https://teto-tech.com/article/racco-keyword1">【実費レビュー】ラッコキーワードの有料版は使える！【エントリーで十分】</a> 
<a href="https://teto-tech.com/article/racco-keyword1"><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/9e7f5390-44cf-4b88-a7ad-7e5ee11683be%2Fracco-keyword1-eyecatch.jpg" alt="racco-keyword1-eyecatch.jpg"></a>

【Newt】できるだけ簡単にJamstackブログをネットに公開

それでは<a href="https://teto-tech.com/article/newt-blog1">前回（【Newt】たった1日で書き初め！実質無料でJamstackブログ開設）</a>から引き続き、国産のヘッドレスCMSである『Newt』を使って爆速でブログを立ち上げていきたいと思います。
今回も長くなってしまったため、APIの準備までになってしまいましたが、参考になれば幸いです。 
 
<h2>NewtでAPIを取得する</h2>
<h3>1. Newtへ登録／ログインする</h3>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/1620bef5-c25d-4e98-aaad-1089708396bf%2Fnewt2-1.jpg" alt="newt2-1.jpg"> 
登録はお好きなメールアドレスで登録もできますが、私はGoogleアカウントで登録をしました。 
 
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/147d304b-2e47-4153-8bf3-67ce139997a5%2Fnewt2-2.jpg" alt="newt2-2.jpg"> 
登録後はこちらの画面からログインをしていきます。 
 
<h3>2. スペースの作成</h3>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/0e415448-17f0-4184-b796-5f02ac679103%2Fnewt2-3.jpg" alt="newt2-3.jpg"> 
まずはスペースを作成しましょう。 
スペースとは各コンテンツを管理するもので、スペース内のAppがこれから作っていくブログのメインコンテンツとなります。 
<img src="https://storage.googleapis.com/newt-files/3dddb71d-2374-47d4-9097-638df2827c0d/space.png" alt="space"> 
出典：<a href="https://www.newt.so/docs/space">Newtドキュメント / スペース</a> 
 
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/25ee62cd-8688-4146-a489-5a8716cc2b53%2Fnewt2-4.jpg" alt="newt2-4.jpg"> 
新規スペース作成をクリックすると2項目の入力を求められます。
スペースUIDはあとから変更ができませんので慎重に決めましょう。
後ほど使用しますが、画面に常に表示されているので覚える必要はありません。 
 
<h3>3. Appの追加</h3>
Appはコンテンツ管理の骨組みの『モデル』、記事投稿をする管理画面のUIである『ビュー』、モデルの内容を元に作成されたAPIの要素である『コンテンツ』から成り立ちます。 
<img src="https://storage.googleapis.com/newt-files/ac34dcef-2b25-4985-b157-d8017049a930/app.png" alt="app"> 
出典：<a href="https://www.newt.so/docs/app">Newtドキュメント / App</a> 
 
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/8efa9213-1a38-45ca-b005-d858e17b25dd%2Fnewt2-6.jpg" alt="newt2-6.jpg"> 
画面中央付近の青いボタンか左上の『Appを追加』より追加します。今回はより簡単に実装できるように『Appテンプレート』を選択してください。 
 
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/d6918aad-d79a-4c97-b204-f5698d726bed%2Fnewt2-7.jpg" alt="newt2-7.jpg"> 
左カラムより、使いたいAppテンプレートを選択し、右側の『このテンプレートを追加』をクリックすることでAppを追加できますが... 
 
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/06431c28-1735-40cd-b30d-f6815b11e3e3%2Fnewt2-8.jpg" alt="newt2-8.jpg"> 
今回目玉のスターターテンプレートは、この画面の最下部にGithubのソースコードで紹介されていますので見逃さないようにしましょう。2022年9月現在は『VUE系のNUXT.js』と『React系のNEXT.js』の２つから選べます。 
 
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/8716fdb3-8b9e-4ddd-8899-cc853efbead3%2Fnewt2-9.jpg" alt="newt2-9.jpg"> 
App追加後は画面が変化します。記事の投稿はこちらから行います。デフォルトで記事が3つ投稿されていますので参考に覗いてみてください。 
 
<h3>4. 投稿画面について（AppテンプレートのBLOG、BLOG2）</h3>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/209bcfa0-9fad-46f3-9406-d6b8988606e1%2Fnewt2-10.jpg" alt="newt2-10.jpg">
<ul>
<li>タイトル... 表示される記事のタイトルです。</li>
<li>スラッグ... 記事のURLとなります。</li>
<li>メタ情報... headタグ内のメタ情報を入力できます。Title、Description、OG画像の設定が可能です。</li>
<li>本文... ブログの内容</li>
<li>カバー画像... アイキャッチの画像です。</li>
<li>著者... 著者を選択します。</li>
<li>カテゴリ（タグ）... 記事に属性を付与できます。 
 </li>
</ul>
<h2>Newt側の初期設定は完了です。</h2>
ここまででとりあえずNewt側の設定は以上です。早い方は10分もかからなかったと思います。
これから各自の環境にスターターテンプレートをクローンして、NewtのAPIを叩くことでコンテンツを取得していきます。
次回はいよいよネットへの公開まで進みます。ここまでご覧いただきありがとうございました。 
 
<a href="https://teto-tech.com/article/newt-blog3">次回 &gt;&gt; 【Newt】できるだけ簡単にJamstackブログをネットに公開</a> 
<a href="https://teto-tech.com/article/newt-blog3"><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/6297fba8-04f4-408b-ac6d-ff4ac1ce4591%2Fnewt-eyecatch3.jpg" alt="newt-eyecatch3.jpg"></a>

【Newt】スターターを活用したツラくないJamstackブログ開設

ある程度フロントエンドの勉強をすると、ブログを始めてみたくなると思います。
話題のJamstackなブログをつくってみたいけど...
<ul>
<li>1から作ると時間がかかる🤔</li>
<li>今更Wordpressでブログを始めるのはちょっと🤔</li>
<li>続くかわからないのにお金をかけたくない🤔</li>
</ul>
とにかく早く記事を書き始めたい...という方は『Newt』というサービスを活用してみてはいかがでしょうか。フロントエンドを勉強している方なら、すぐに始められると思います。
実はこのブログもNewtを活用し、実質1日もかからずに初回の記事まで投稿し、ウェブに公開することができました！ 
 
<h2>Newtは国産のヘッドレスCMSサービスです。</h2>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/112c2781-0566-4ba5-ab50-a9e674a40a9b%2Fnewt1.jpg" alt="newt1.jpg">
簡単にまとめるとヘッドレスCMSはブラウザ上で記事を書き、APIとして吐き出させるシステムです。
今回オススメしたいNewtは国産ということもあり、誰でも直感的にが可能です。しかも無料プランで十分なところもポイントです。
<a href="https://www.newt.so/">新しいコンテンツ管理の体験 ヘッドレスCMS「Newt」</a>
 
<h2>Newtがおすすめな理由</h2>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/1d417c7b-7f75-44a2-9642-acbffa412375%2Fnewt2.jpg" alt="newt2.jpg">
他のヘッドレスCMSとは違い、NewtにはAppテンプレートとスターターが用意されており、爆速でWebサイトの立ち上げが可能です。スターターはMITライセンスの範囲であれば自由に改変が可能ですので、技術さえあれば好きなようにカスタマイズできます。
先程から述べているJamstackなWebサイトとは下記を満たすものです。
<ul>
<li>JavaScriptベースでブログを作る</li>
<li>APIを叩いて情報を取得する</li>
<li>Markアップ言語で記事を書く</li>
<li>Statc（static-静的）なホームページ</li>
</ul>
Newtのスターターを利用することで、上記の上から3つまでを満たすことができます。
4つめはNetlifyやVercelなどの静的コンテンツのホスティングサービスにデプロイするだけです。
webの公開までなんと無料です。1円もお金がかかっていません。
私の場合はgoogleアドセンス申請やその他のメリットのためドメインを追加で契約していますが、それでも年間数百円程度です。 
 
<h2>立ち上げの速さならWordPressでもいいのでは？</h2>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/6249fd85-c65a-44d2-93f7-40f99955981c%2Fwordpress.jpg" alt="wordpress.jpg"> 
はい。ブログを始めるだけならWordPressでも構わないと思います。しかしJamstackなWebサイトに興味を持っている方であれば、JavaScriptに興味がある・勉強してる方やすでにフロントエンドエンジニアの方だと思います。
ネットに情報が溢れているとはいえ、WordPressに拒否反応が出る方も多いかと思います。そのような方ならJamstackなサイトでブログを運営するのはピッタリです。
もちろん、WordPressにもメリットがあり以下のような理由から、利用が減ることはないと断言ができます。
<ul>
<li>圧倒的な使用シェア率で、ネットや書籍の情報の成熟度が段違い。</li>
<li>プログラミング等の専門知識がないライト層でも扱うことができる。</li>
<li>そもそもWordPressをJamstackサイトに組み込める。 
 </li>
</ul>
<h2>WordPressと比べたJamstackのメリット・デメリット</h2>
<img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/e497088e-d444-4fde-b2fb-89cd591d4213%2FJamstack.jpg" alt="Jamstack.jpg">
正確にはWordPressとJamstackを純粋に比べることはできませんので『ブログを立ち上げて、記事を書き、運営する。』という点に絞り、メリットとデメリットを挙げたいと思います。
◎ メリット
<ul>
<li>サイト自体のパフォーマンスが高く、スピードが速いため、Googleの評価が上がる=SEOに有効</li>
<li>自由なデザインでサイトを構築することができる。</li>
<li>WordPressよりセキュリティが高い（WordPressのサイトはURLの末に/wp-adminを足すと管理のログイン画面に行けてしまう・WordPressほど攻撃の標的にならない など）</li>
<li>コンテンツ（記事）を残したまま、ブログの移管やアップグレード・機能追加が簡単にできる ⇒ 規模を小さく始めることができる。</li>
<li>別途サーバーを契約する必要がないため、コストがかからない。</li>
<li>WordPress独自のお作法に時間を取られない。</li>
</ul>
✕ デメリット
<ul>
<li>プログラミング（JavaScript）の知識が必須。⇒ Newtのスターターを使うことで本当に最低限でOK</li>
<li>WordPressと比べ情報が少ない。 
 </li>
</ul>
<h2>Newt + スターターを使用したJAMstackなサイトの立ち上げ</h2>
想定より長くなってしまいましたので、具体的なNewtのスターターを使用したブログの立ち上げについては、次回に持ち越します。ここまでご覧いただきありがとうございました。 
 
<a href="https://teto-tech.com/article/newt-blog2">次回 &gt;&gt; 【Newt】スターターを活用したツラくないJamstackブログ開設</a> 
<a href="https://teto-tech.com/article/newt-blog2"><img src="https://storage.googleapis.com/p_632e7d258834f719d0fd6276/7d877e38-0a05-45b6-ab51-e315041e3de5%2Fnewt-eyecatch2.jpg" alt="newt-eyecatch2.jpg"></a>

#ブログ

【Newt】できるだけ簡単にJamstackブログをネットに公開

【Newt】スターターを活用したツラくないJamstackブログ開設

【Newt】たった1日で書き初め！実質無料でJamstackブログ開設