このブログのつくりかた

はじめに

ちわ。です。(リンクはTwitter)

このブログは、NotionとNext.jsで作られています。

めちゃくちゃ簡単に作成できたので、手順を共有できればと。

ざっくり手順

  1. GitHubからブランチをClone
  2. Notionで秘密鍵を作成
  3. NotionでDBを作成してリンクを取得
  4. CloneしたリポジトリをGitHubにPush
  5. 簡単に記事を作っておく
  6. Vercelで公開
  7. Route53でドメイン取得
  8. Vercelでドメイン設定

以上です。

フロント好き放題できる自由度考えたらめっちゃ速くない?

必要なもの

  • 開発用エディタ
  • GitHub
  • Notion
  • Vercel
  • AWS

手順

利用したリポジトリはこちら

https://github.com/samuelkraft/notion-blog-nextjs

masterブランチをもらっちゃったので、時期が大きく開いてこの記事を参考にしようとしている方はもしかしたら色々状況が違うかも…

ちなみに執筆日は2024/02/10です。

このリポジトリの存在を知ったのはこの人の動画から

https://www.youtube.com/watch?v=My9rXHRn8zc

種明かしなんですけど、上の出来上がってるリポジトリを引っ張ってきたから爆速だったってコトです。

ほぼほぼ全部書いてるので特に説明することないんですけど、ちょっと詰まった点があったのでそれだけ補足します。

1. GitHubからブランチをClone

ここはなにもないです、表題ままやってください。

自分の作ったGitHubのリポジトリに対して初めてのpushをするときはforce pushをするとスムーズです。開発途中でやるのはあんまり望ましくないけどね。

5. 簡単に記事を作っておく

ここが個人的に一瞬詰まったポイントです。

作成したてのDBというかテーブルについているカラム名って「名前」と「タグ」になっているんですけど、今回Cloneしてきたプロジェクトはこのカラム名を参照して文字を引っ張ってきてます。

名前とか付けてるはずなんですけど、どうも

はい、コード中で外国人の方がわざわざカタカナとか漢字を指定するわけがないですね?

コードを見たところ、TitleとSlugが必要そうでしたので

  • “名前”を”Title”に変更
  • “Slug”を追加

の2点を実施しています。

tagについては特に反映されていないですが、以後コードに変更をかければおそらく表示させられると思うので一応裏側では入れておこうかなと…ってくらいのものです。

7. Route53でドメイン取得

以降の手順8についてもですが、こちらを参考にしています。

https://zenn.dev/hayato94087/articles/07e1d7c34d1bb6

← Go home