個人技術ブログサイトを作ろうかな

技術記事用の個人ブログを作りたいな。しずかなインターネットのように使いやすいやつ。作るか。

しずかなインターネットの技術構成

zenn.dev

要件

• 独自ドメイン

• Post の CRUD

• Image Upload

• Auth(自分だけログインできれば良い)

• Post has many tags

• Published or Draft

• ブラウザで書きたい

• マークダウンで書きたい

• リンクカード表示したい

材料

• Application: Next.js, Deploy to Croud Run

• Database: PlanetScale (MySQL)

• Domain: Google Domain

• CDN: Cloudflare

• Strage: Cloudflare R2

• CI/CD: GitHub Actions

• Auth: NextAuth

• Editor: TipTap

• Test: Vitest, React Testing Library

作り方

1. Create Nest.js Appする

2. PlanetScale の設定をする

3. PostのCRUDを作成する

4. Deploy to Croud Runする (規約的にOKだったらVercel利用するかも)

5. ドメインを設定する

6. Vitest, React Testing Libraryの設定をする

7. GitHub Actionsの設定をする

8. Next Authを追加する

9. 下書き機能を作成する

10. Post has many tags, Tag has many postsを作る

11. Tagに紐づいた、記事を表示するページを作成する

12. TipTap を追加する

13. マークダウンでかけるようにする

14. Cloudflare R2の設定をする

15. Image Uploadできるようにする

16. CDNの設定をする

17. リンクカードを生成できるようにする

初回リリース後

• By me a coffeeのように決済機能を付けてみる

• 動的にOGPを生成できるようにする

• テキスト検索

• ページネーション

参考リンク

GitHub - vercel/examples: Enjoy our curated collection of examples and solutions. Use these patterns…

github.com

GitHub - vercel/satori: Enlightened library to convert HTML and CSS to SVG

github.com

GitHub - vercel/nextjs-postgres-nextauth-tailwindcss-template: Admin dashboard template.

github.com

GitHub - vercel/style-guide: Vercel's engineering style guide

github.com

Find your Template – Vercel

vercel.com

next-learn/dashboard/starter-example at main · vercel/next-learn · GitHub

github.com