Next.jsで自作ブログを作る①

kuwaharu

自作ブログ

ブログを自作しようと思った経緯

こちらの記事を拝見して書こうと思いました。
reactを少し学んで何か公開できるものを作りたいと思っていて普段noteで書いている記事を自作ブログで公開できたら面白いし自分の技術をアピールするのにとてもいいと思いました。


使用技術&開発環境

reactについては基礎程度なら学習済みですが、Next.jsはほぼわからないのでChat GPTや様々な記事を参考に少しずつ開発を進める予定です。

使用技術（予定）

  1. Next.js

    • フレームワーク: Reactをベースにしたフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）をサポート。ブログ記事の高速な表示やSEO対策に適しています。

    • 特徴: ページごとのデータ取得方法やルーティング設定、ビルドとデプロイが簡単で、ブログやサイトに必要な基本機能が標準でサポートされている。

  2. Next.js Blog Starter Kit

    • 説明: Next.js Blog Starter Kitは、Next.jsを使ってシンプルなブログを作成するためのテンプレートです。デフォルトでページルーティング、記事投稿、Markdownサポート、SEO対策が組み込まれており、ブログを短期間で立ち上げることができます。

    • 特徴:

      • シンプルなデザイン: 直感的でクリーンなデザインを提供。

      • Markdownサポート: 記事をMarkdown形式で作成・管理できます。

      • SEO最適化: SEOを考慮したページ構成が標準で組み込まれており、Google検索エンジンに最適化された構造を持っています。

      • サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）: 記事のロードが速く、SEOにも強い。

      • 簡単なカスタマイズ: プラグインやコンポーネントを追加して、自分好みのデザインにカスタマイズできます。

  3. React

    • UIライブラリ: Next.jsはReactを内部で使用しています。ReactはコンポーネントベースのUIライブラリで、再利用可能なコンポーネントを作成し、効率的にUIを構築できます。

  4. Markdown

    • コンテンツ管理: ブログの記事をMarkdown形式で作成します。Next.js Blog Starter Kitでは、`posts`ディレクトリにMarkdownファイルを追加して、ブログ記事を管理します。

  5. Git & GitHub

    • バージョン管理とコード管理: Gitはローカルでのコード管理を行い、GitHubはリモートリポジトリとして使用します。GitHubを使用することで、コードのバージョン管理やチームでの協力、公開などが簡単になります。

    • 自動デプロイ: GitHubにプッシュされたコードの変更をVercelが自動的に検知してデプロイします。GitHubとVercelの連携により、コード変更後の手動操作なしでサイトが更新されます。

  6. Vercel

    • デプロイメントプラットフォーム: Vercelは、Next.jsアプリケーションを簡単にデプロイできるプラットフォームです。GitHubとの連携を通じて、リポジトリに変更が加わると自動でデプロイされます。

    • 特徴: サーバーレスアーキテクチャを採用し、パフォーマンスが最適化されているため、ブログや小規模サイトに最適です。

開発環境

  • PC: Mac book Air m2

  • OS: mac os sequoia

  • Node.js: v20.14.0

作ってデプロイする

Node.js、gitのインストールはすでにできてる想定です。

1. Next.jsのプロジェクト作成

以下のコマンドを実行して、Next.js Blog Starter Kitを使用して新しいプロジェクトを作成します。

npx create-next-app@latest my-blog -e blog
cd my-blog

このコマンドは、my-blogという名前のNext.jsプロジェクトを作成し、blogテンプレートを適用します。これにより、シンプルなブログの基本機能がすぐに整います。
その後cdでプロジェクトに移動します

プロジェクトに移動したら依存パッケージのインストールを行います

npm install

試しに以下のコマンドを実行して起動します。

npm run dev

このような画面が表示されれば成功です

2. GitHubリポジトリの作成とプッシュ

1. GitHubでリポジトリを作成
GitHubにログインし、新しいリポジトリ（例: my-blog）を作成します。
先ほど作成したプロジェクトと同じ名前がいいと思います。

2. GitHubリモートリポジトリを追加

コマンドにユーザ名、メールアドレスなど書かれているところは自分のに変更して実行してください

まずユーザ設定を行います

 git config user.name ユーザ名
 git config user.email メールアドレス

GitHubで作成したリポジトリをリモートとして追加します。以下のコマンドでリモートリポジトリを追加し、コードをプッシュします。

 git remote add origin https://github.com/ユーザ名/my-blog.git
 git branch -M main
 git push -u origin main

GitHubでレポジトリを確認して色々追加されていれば成功です。

3. Vercelにデプロイ

まだ何も変更していませんが、とりあえずデプロイしてみましょう。
説明が大変なのでこちらのサイトを参考にしてみてください。

一応簡単に手順を説明すると

  1. Vercelにアクセス

  2. GitHubのアカウントを使ってログイン

  3. 右上での Add New…からProjectを選択

  4. Import Git RepositoryのAdd GitHub Accountで作成したレポジトリを選択

  5. レポジトリが表示されるのでImportをクリック

  6. Deploy をクリック

少し待つと完了します。たったのこれだけで終わりです

Visitでnpm run devを実行した時と同じ画面が出れば成功です

今回はここまでにします。次回以降READMEを読んで自分用に変更していきます。


いいなと思ったら応援しよう！