💻
マリオ Blog
GitHub

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

Rei Ishikawa

Share this post

はじめまして
フリーランスエンジニアの、れい（@mario031）です。

都内ベンチャー企業で4年半エンジニアとして働き、今年9月にフリーランスとして独立しました。

フリーランスとして生きていくためにも、もっと積極的に発信しなきゃだめだなと思い、ブログを書くことを決心しました💪

ということで初めての投稿は、今ブログを書いているこのWebページを30分で作成から公開までした方法を書くことにしました！

目次

1. 30分クッキングスタート
　1-1. 準備するもの
　1-2. Newtの設定
　1-3. ブログ表示用ページの作成
　1-4. Webサイトを公開する
　1-5. ドメインを設定
2. 最後に

1. 30分クッキングスタート

ちなみに、今回はこの後紹介するヘッドレスCMSのNewtが用意しているテンプレートをそのまま使わせてもらったので、コードはほとんど書いてません。
Next.jsで書かれたテンプレートをちょちょっといじっただけです🤓

1-1. 準備するもの

ブログを投稿する上で必要なページは、ブログを表示する閲覧者用のページと、投稿する管理者用のページの２つです。

今回は以下のサービスを利用しました。

  1. Newt : ブログ投稿用のヘッドレスCMS
  2. Vercel: Webサイト公開用のWebホスティングサービス

それぞれアカウントを作成してください。
独自ドメインを設定したい方のみお名前.comでドメインを取得しておいてください。

※ ちなみにこのアカウント作成の時間は30分に含まれていません。3分クッキングでも野菜切ったり調味料用意したりするのは時間に含まれてないよね😎

Newtとは

Newtとは、メンバー数・モデル数・コンテンツ数、全てが無制限の国産ヘッドレスCMSです。
個人で使う分には無料の範囲内で十分使えるし、UIもわかりやすくテンプレートもいくつか用意されています。
国産ということもあり、ドキュメントが日本語でわかりやすいので今回はこちらを使ってみることにしました。

Vercelとは

Vercelとは、CI/CDとWebサーバーが合わさったサービスで、GitHubリポジトリを連携してドメイン設定をするだけで公開と独自ドメインSSL対応が簡単にできるめちゃ便利なサービスです。

こちらも個人で開発する分には無料プランで十分ですが、一つ注意が必要なのが、広告などで収益化したいと考えている方は有料のProプランを利用する必要があります。
私は今のところ収益化は考えていないので、しばらくは無料プランで運用したいと思ってます！

お名前.comとは

こちらは言わずと知れたドメイン登録・ドメイン管理ができるサービスですね。
ドメインにこだわらないでとりあえず公開だけしたいということであれば、Vercelが独自ドメインを発行してくれるのでそちらで十分です。

1-2. Newtの設定

まずはブログ投稿用のCMSである Newt を設定してきましょう。

  1. 「Appを追加」から「Appテンプレート」を選択
    ブログ用のテンプレートは二種類ありますが、私はBlog2の方を使いました。
    スクリーンショット2022-11-2717.22.23.png
    テンプレートが追加されると、「投稿データ」「タグデータ」「著者データ」が追加されます。
    スクリーンショット2022-11-2717.25.03.png

  2. スペースUID、AppUID、CDN APIトークン の３つをコピー
    スペースUIDはスペース作成時に設定したIDで、「スペース設定 -> 一般」から確認できます。
    AppUIDは上記画像上部にあるblog2にあたる部分です。こちらは変更可能です。


    CDN APIトークン は「スペース設定 -> APIキー」から作成、確認できます。
    スクリーンショット2022-11-2717.27.32.png

以上でブログ投稿の準備がきました。
Newtのドキュメントはこちらをご参考ください。

1-3. ブログ表示用ページの作成

それではいよいよWebサイトを作っていきましょう！！
といっても先ほども言った通りコードは書きません笑

  1. こちらのNewtの開発チームが用意したテンプレートを Forkしてローカルに Clone
    Blog2のテンプレートではなくBlogを利用する場合はこちら。

  2. **envファイルを書き換える** [1-2](#1-2)でコピーしたスペースUID, AppUID, CDN APIトークン`で環境変数を書き換えます

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
  1. yarn install からの yarn dev を実行
    https://localhost:3000にアクセスしたらテンプレート通りのページが表示されるはずです。
    Newtの管理画面でブログのタイトルなどを編集してみたください。即座に反映されるはずです。
    スクリーンショット2022-11-2717.16.44.png

さていよいよ、後は公開するだけですね。ここまでで10分ほどでしょうか。
そんなにかかってないかもしれないですね🏃💨

1-4. Webサイトを公開する

Webサイトの公開は先ほども紹介した Vercel を利用します。

  1. 新しいプロジェクトを作成
    Vercel の管理画面に入り、右上の「New Project」を押します。
    スクリーンショット2022-11-2718.00.32.png

  2. 対象のGithubレポジトリを選択
    「Import Git Repository」から「Continue with GitHub」を選択
    スクリーンショット2022-11-2718.00.54.png
    対象のレポジトリが表示されたら「Import」を選択
    スクリーンショット2022-11-2718.04.55.png

  3. デプロイして公開する
    後は「Deploy」ボタンをポチッと押すだけで Vercel が自動でデプロイから公開までやってくれます。
    私はレポジトリを公開したかったので、.envファイルを直接編集せず、「Environment Variables」にNewt用の環境変数を設定しました。
    スクリーンショット2022-11-2718.02.15.png


    デプロイが完了するまでは数分かかるのでコーヒー☕️でも飲んで待ちましょう。
    公開が完了したら、Vercelの管理画面で「Visit」を押せば公開されたページにアクセスできます。
    スクリーンショット2022-11-2718.14.23.png

おめでとうございます🎉

これで晴れて投稿用のページが公開されました
はい、ここまでたった20分。爆速！！

後はNewtの管理画面から好きな記事を投稿するだけですね。

さて、ここからは独自ドメインを設定したい方のみお進みください。

1-5. ドメインを設定

  1. Vercel に Domain を追加する
    Settings > Domains から Domains 追加画面を開きます。

    入力ボックスに お名前.com で取得したドメインを入力して Add ボタンを押して下さい。
    スクリーンショット2022-11-2718.25.23.png
    まだこのように 「Invalid Configuration」 と表示されるはずです。
    お名前.com のコンソールで使うので、Value を控えておいてください。
    ちなみに私はサブドメインを利用しているので Value ですが、そうでない場合は A Record(Recommended) Value を控えておいてください。

  2. お名前.comのCNAMEもしくはA レコードを設定
    お名前.com のコンソールを開き、DNS設定/転送設定 > DNSレコードを設定する の設定するボタンからレコード追加画面を開いてください。
    スクリーンショット2022-11-2718.33.53.png
    CNAMEを設定する場合は、TYPEをCNAMEを選択、TTL はデフォルト、VALUEは先程 Vercel のコンソールで控えた Value を入力してください。
    スクリーンショット2022-11-2718.35.10.png
    A レコードを設定する場合は同様に、TYPEにAを選択してVALUEを入力してください。

  3. 確認画面へ進み、 設定するボタンを押して完了
  4. Vercel のコンソールへ戻り、Valid Configuration になっていることを確認
    同時に SSL 証明書が発行されるのでしばし待ちます。
    https 対応も自動で行ってくれます。← 便利〜
    私の場合 5分程で完了しました。
    スクリーンショット2022-11-2718.23.54.png

完了したら変更後のドメインにアクセスしてみてください。
無事アクセスできたら完了です！

ということで改めまして

おめでとうございます🎉

これで完全に完了しました。
ここまでで30分！！
いやー早かった。簡単でしたね笑

最後に

以上でブログ投稿用のページの作成から公開までが完了しました。
NewtもVercelもUIは直感的でわかりやすいし、無料で使いやすいし最高ですね。

後は好きにコードをいじったりして自分好みの画面にカスタマイズするもよし、そのままでブログを書き始めてもよし。
私はヘッダーやフッターを少しだけ書き換えただけでほとんど変えてません笑
時間があったらカスタマイズしたいなとは思ってますが。。。


今後はこのページでブログを書いていきたいと思うので気になる方はブックマークや、よかったら記事のShareなどお願いします！！


それではまた次回の記事で🙂

Share this post