マリオ Blog

はじめまして 
フリーランスエンジニアの、れい（<a href="https://github.com/mario031">@mario031</a>）です。
都内ベンチャー企業で4年半エンジニアとして働き、今年9月にフリーランスとして独立しました。
フリーランスとして生きていくためにも、もっと積極的に発信しなきゃだめだなと思い、ブログを書くことを決心しました💪
ということで初めての投稿は、今ブログを書いているこのWebページを30分で作成から公開までした方法を書くことにしました！
<h2>目次</h2>
<blockquote>
<a href="#1">1. 30分クッキングスタート</a> 
　<a href="#1-1">1-1. 準備するもの</a> 
　<a href="#1-2">1-2. Newtの設定</a> 
　<a href="#1-3">1-3. ブログ表示用ページの作成</a> 
　<a href="#1-4">1-4. Webサイトを公開する</a> 
　<a href="#1-5">1-5. ドメインを設定</a> 
<a href="#2">2. 最後に</a>
</blockquote>
<a id="1"></a>
<h1>1. 30分クッキングスタート</h1>
ちなみに、今回はこの後紹介するヘッドレスCMSのNewtが用意しているテンプレートをそのまま使わせてもらったので、コードはほとんど書いてません。 
Next.jsで書かれたテンプレートをちょちょっといじっただけです🤓 
<a id="1-1"></a>
<h2>1-1. 準備するもの</h2>
ブログを投稿する上で必要なページは、ブログを表示する閲覧者用のページと、投稿する管理者用のページの２つです。
今回は以下のサービスを利用しました。
<ol>
<li><a href="https://www.newt.so/">Newt</a> : ブログ投稿用のヘッドレスCMS</li>
<li><a href="https://vercel.com/">Vercel</a>: Webサイト公開用のWebホスティングサービス</li>
</ol>
それぞれアカウントを作成してください。 
独自ドメインを設定したい方のみ<a href="https://navi.onamae.com/">お名前.com</a>でドメインを取得しておいてください。 
 
※ ちなみにこのアカウント作成の時間は30分に含まれていません。3分クッキングでも野菜切ったり調味料用意したりするのは時間に含まれてないよね😎
<h3>Newtとは</h3>
Newtとは、メンバー数・モデル数・コンテンツ数、全てが無制限の国産ヘッドレスCMSです。 
個人で使う分には無料の範囲内で十分使えるし、UIもわかりやすくテンプレートもいくつか用意されています。 
国産ということもあり、ドキュメントが日本語でわかりやすいので今回はこちらを使ってみることにしました。 
<img width=550 src="https://storage.googleapis.com/p_6235a943ea00a400180b805c/a26c7c94-d8fc-45a4-bb1b-fd9a7325375c%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882022-11-2715.58.01.png">
<h3>Vercelとは</h3>
Vercelとは、CI/CDとWebサーバーが合わさったサービスで、GitHubリポジトリを連携してドメイン設定をするだけで公開と独自ドメインSSL対応が簡単にできるめちゃ便利なサービスです。
こちらも個人で開発する分には無料プランで十分ですが、一つ注意が必要なのが、広告などで収益化したいと考えている方は有料のProプランを利用する必要があります。 
私は今のところ収益化は考えていないので、しばらくは無料プランで運用したいと思ってます！
<h3>お名前.comとは</h3>
こちらは言わずと知れたドメイン登録・ドメイン管理ができるサービスですね。 
ドメインにこだわらないでとりあえず公開だけしたいということであれば、Vercelが独自ドメインを発行してくれるのでそちらで十分です。
<a id="1-2"></a>
<h2>1-2. Newtの設定</h2>
まずはブログ投稿用のCMSである <code>Newt</code> を設定してきましょう。
<ol>
<li>
「Appを追加」から「Appテンプレート」を選択 
ブログ用のテンプレートは二種類ありますが、私は<code>Blog2</code>の方を使いました。 
<img src="https://storage.googleapis.com/p_6235a943ea00a400180b805c/50d095dd-d406-435f-8f0a-975834cab430%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882022-11-2717.22.23.png" alt="スクリーンショット2022-11-2717.22.23.png"> 
テンプレートが追加されると、「投稿データ」「タグデータ」「著者データ」が追加されます。 
<img src="https://storage.googleapis.com/p_6235a943ea00a400180b805c/7e03e1ba-4927-4ce1-ab28-99956084cfd6%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882022-11-2717.25.03.png" alt="スクリーンショット2022-11-2717.25.03.png">
</li>
<li>
スペースUID、AppUID、CDN APIトークン の３つをコピー 
スペースUIDはスペース作成時に設定したIDで、「スペース設定 -&gt; 一般」から確認できます。 
<code>AppUID</code>は上記画像上部にある<code>blog2</code>にあたる部分です。こちらは変更可能です。 
 
<code>CDN APIトークン</code> は「スペース設定 -&gt; APIキー」から作成、確認できます。 
<img src="https://storage.googleapis.com/p_6235a943ea00a400180b805c/fccf43b3-d6f4-4a9e-800b-4bee2bbb5f02%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882022-11-2717.27.32.png" alt="スクリーンショット2022-11-2717.27.32.png"> 
 
</li>
</ol>
以上でブログ投稿の準備がきました。 
Newtの<a href="https://www.newt.so/docs/">ドキュメントはこちら</a>をご参考ください。
<a id="1-3"></a>
<h2>1-3. ブログ表示用ページの作成</h2>
それではいよいよWebサイトを作っていきましょう！！ 
といっても先ほども言った通りコードは書きません笑
<ol>
<li>
<a href="https://github.com/Newt-Inc/newt-blog2-starter-nextjs">こちら</a>のNewtの開発チームが用意したテンプレートを Forkしてローカルに Clone 
Blog2のテンプレートではなくBlogを利用する場合は<a href="https://github.com/Newt-Inc/newt-blog-starter-nextjs">こちら</a>。
</li>
<li>
<code>**envファイルを書き換える** [1-2](#1-2)でコピーした</code>スペースUID<code>, </code>AppUID<code>, </code>CDN APIトークン`で環境変数を書き換えます
</li>
</ol>
<pre><code>NEXT_PUBLIC_NEWT_SPACE_UID=スペースUID
NEXT_PUBLIC_NEWT_APP_UID=AppUID
NEXT_PUBLIC_NEWT_API_TOKEN=CDN APIトークン
NEXT_PUBLIC_NEWT_API_TYPE=cdn
NEXT_PUBLIC_NEWT_ARTICLE_MODEL_UID=article
NEXT_PUBLIC_NEWT_TAG_MODEL_UID=tag
NEXT_PUBLIC_NEWT_AUTHOR_MODEL_UID=author
NEXT_PUBLIC_PAGE_LIMIT=12
</code></pre>
<ol start="3">
<li>yarn install からの yarn dev を実行 
<code>https://localhost:3000</code>にアクセスしたらテンプレート通りのページが表示されるはずです。 
Newtの管理画面でブログのタイトルなどを編集してみたください。即座に反映されるはずです。 
<img src="https://storage.googleapis.com/p_6235a943ea00a400180b805c/e29099b2-bec4-4d0c-852b-243801e3b165%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882022-11-2717.16.44.png" alt="スクリーンショット2022-11-2717.16.44.png"></li>
</ol>
さていよいよ、後は公開するだけですね。ここまでで10分ほどでしょうか。 
そんなにかかってないかもしれないですね🏃💨
<a id="1-4"></a>
<h2>1-4. Webサイトを公開する</h2>
Webサイトの公開は先ほども紹介した <code>Vercel</code> を利用します。
<ol>
<li>
新しいプロジェクトを作成 
<code>Vercel</code> の管理画面に入り、右上の「New Project」を押します。 
<img src="https://storage.googleapis.com/p_6235a943ea00a400180b805c/513ceb0b-7333-45d1-8b96-6d3d0e8e7806%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882022-11-2718.00.32.png" alt="スクリーンショット2022-11-2718.00.32.png">
</li>
<li>
対象のGithubレポジトリを選択 
「Import Git Repository」から「Continue with GitHub」を選択 
<img src="https://storage.googleapis.com/p_6235a943ea00a400180b805c/10b971bd-c6c1-453c-8cb3-816585aebb87%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882022-11-2718.00.54.png" alt="スクリーンショット2022-11-2718.00.54.png"> 
対象のレポジトリが表示されたら「Import」を選択 
<img src="https://storage.googleapis.com/p_6235a943ea00a400180b805c/0ccfbd14-156b-4602-b92e-93d7bf677121%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882022-11-2718.04.55.png" alt="スクリーンショット2022-11-2718.04.55.png">
</li>
<li>
デプロイして公開する 
後は「Deploy」ボタンをポチッと押すだけで <code>Vercel</code> が自動でデプロイから公開までやってくれます。 
私はレポジトリを公開したかったので、<code>.env</code>ファイルを直接編集せず、「Environment Variables」に<code>Newt</code>用の環境変数を設定しました。 
<img src="https://storage.googleapis.com/p_6235a943ea00a400180b805c/5f2c1c8b-3f6b-4603-9ce5-3a917668ecf3%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882022-11-2718.02.15.png" alt="スクリーンショット2022-11-2718.02.15.png"> 
 
デプロイが完了するまでは数分かかるのでコーヒー☕️でも飲んで待ちましょう。 
公開が完了したら、Vercelの管理画面で「Visit」を押せば公開されたページにアクセスできます。 
<img src="https://storage.googleapis.com/p_6235a943ea00a400180b805c/075f4fea-be41-4e5d-887a-6158116c5336%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882022-11-2718.14.23.png" alt="スクリーンショット2022-11-2718.14.23.png"> 
 
</li>
</ol>
<h2>おめでとうございます🎉 </h2>
これで晴れて投稿用のページが公開されました 
はい、ここまでたった20分。爆速！！
後はNewtの管理画面から好きな記事を投稿するだけですね。 
 
<hr>
さて、ここからは独自ドメインを設定したい方のみお進みください。
<a id="1-5"></a>
<h2>1-5. ドメインを設定</h2>
<ol>
<li>Vercel に Domain を追加する 
<code>Settings</code> &gt; <code>Domains</code> から Domains 追加画面を開きます。 
入力ボックスに <code>お名前.com</code> で取得したドメインを入力して Add ボタンを押して下さい。 
<img src="https://storage.googleapis.com/p_6235a943ea00a400180b805c/b1ba2a22-b9cf-4cc3-be27-a87a7a229803%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882022-11-2718.25.23.png" alt="スクリーンショット2022-11-2718.25.23.png"> 
まだこのように 「Invalid Configuration」 と表示されるはずです。 
<code>お名前.com</code> のコンソールで使うので、<code>Value</code> を控えておいてください。 
ちなみに私はサブドメインを利用しているので <code>Value</code> ですが、そうでない場合は <code>A Record(Recommended) Value</code> を控えておいてください。 
 </li>
<li>お名前.comのCNAMEもしくはA レコードを設定 
<code>お名前.com </code>のコンソールを開き、<code>DNS設定/転送設定</code> &gt; <code>DNSレコードを設定する</code> の設定するボタンからレコード追加画面を開いてください。 
<img src="https://storage.googleapis.com/p_6235a943ea00a400180b805c/4de94166-7ea2-431e-9dfe-db31f1ac6201%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882022-11-2718.33.53.png" alt="スクリーンショット2022-11-2718.33.53.png"> 
<code>CNAME</code>を設定する場合は、TYPEを<code>CNAME</code>を選択、<code>TTL</code> はデフォルト、<code>VALUE</code>は先程 <code>Vercel</code> のコンソールで控えた <code>Value</code> を入力してください。 
<img src="https://storage.googleapis.com/p_6235a943ea00a400180b805c/e4a2a6ac-36f8-4d3a-8524-3b49d0b49fd5%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882022-11-2718.35.10.png" alt="スクリーンショット2022-11-2718.35.10.png"> 
<code>A レコード</code>を設定する場合は同様に、TYPEに<code>A</code>を選択して<code>VALUE</code>を入力してください。 
 </li>
<li>確認画面へ進み、 設定するボタンを押して完了</li>
<li>Vercel のコンソールへ戻り、Valid Configuration になっていることを確認 
同時に SSL 証明書が発行されるのでしばし待ちます。 
https 対応も自動で行ってくれます。← 便利〜 
私の場合 5分程で完了しました。 
<img src="https://storage.googleapis.com/p_6235a943ea00a400180b805c/bbbf9338-58c1-43da-9df6-2ed10c01b791%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882022-11-2718.23.54.png" alt="スクリーンショット2022-11-2718.23.54.png"> 
 </li>
</ol>
完了したら変更後のドメインにアクセスしてみてください。 
無事アクセスできたら完了です！
ということで改めまして
<h2>おめでとうございます🎉</h2>
これで完全に完了しました。 
ここまでで30分！！ 
いやー早かった。簡単でしたね笑
<a id="2"></a>
<h1>最後に</h1>
以上でブログ投稿用のページの作成から公開までが完了しました。 
NewtもVercelもUIは直感的でわかりやすいし、無料で使いやすいし最高ですね。
後は好きにコードをいじったりして自分好みの画面にカスタマイズするもよし、そのままでブログを書き始めてもよし。 
私はヘッダーやフッターを少しだけ書き換えただけでほとんど変えてません笑 
時間があったらカスタマイズしたいなとは思ってますが。。。 
 
今後はこのページでブログを書いていきたいと思うので気になる方はブックマークや、よかったら記事のShareなどお願いします！！ 
 
それではまた次回の記事で🙂

Articles in 2022

【Newt + Next.js + Vercel】ブログサイトを30分しかも無料で作成から公開までする方法