このブログの作り方

kuwaharu,•web development
Back

使用技術&開発環境

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にデプロイ

    まだ何も変更していませんが、とりあえずデプロイしてみましょう。

    説明がわかりづらいと思うので「vercel github next.js」と調べて出てくる記事等を参考にした方がいいかもしれません。

    1. Vercel (opens in a new tab)にアクセス

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

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

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

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

    6. Deploy をクリック

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

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

README.mdをみて編集をする

作成したプロジェクトの直下にREADME.mdというファイルがあると思います。そこに最初に何を設定すべきかが書いてあるのでまずはその通りに編集をします。

theme.config.jsの編集

Your Name.のところを自分の名前に変更します

また、このファイルを編集することでフッターを変更することもできます。

   footer: (
     <footer>
       <small>
-        <time>{YEAR}</time> © Your Name.
+        <time>{YEAR}</time> © kuwaharu.
         <a href="/feed.xml">RSS</a>
       </small>
       <style jsx>{`

scripts/gen-rss.jsでRSSフィード用の名前とサイトURLを更新

私の場合、自分のドメインを設定したのでこのようになっていますが、設定していない場合は、vercelデプロイ時のURLで更新します。

 async function generate() {
   const feed = new RSS({
-    title: "Your Name",
-    site_url: "https://yoursite.com",
-    feed_url: "https://yoursite.com/feed.xml",
+    title: "kuwaharu my-blog",
+    site_url: "https://tech.kuwaharugo.com",
+    feed_url: "https://tech.kuwaharugo.com/feed.xml",
   });

pages/_document.tsxでメタタグを更新

_document.jsはNext.js プロジェクトにおけるカスタムドキュメントを定義したもので、HTMLの構造全体をカスタマイズすることができます。

今回はbodyには触れず、Headを編集していきます。

SEOやSNSシェアに必要な情報を設定しています。今回はまだ画像を用意していないのでmeta.imageのURLは編集していませんが、ここを編集することでページがシェアされた時のサムネイル画像を変えることができます。

export default function Document() {
   const meta = {
-    title: "Next.js Blog Starter Kit",
-    description: "Clone and deploy your own Next.js portfolio in minutes.",
+    title: "kuwaharu's Tech Blog",
+    description: "Sharing knowledge and insights on web development, programming, and technology.",
     image: "https://assets.vercel.com/image/upload/q_auto/front/vercel/dps.png",
   };
 
   return (
-    <Html lang="en">
+    <Html lang="ja">
       <Head>
         <meta name="robots" content="follow, index" />
         <meta name="description" content={meta.description} />
@@ -17,7 +17,7 @@ export default function Document() {
         <meta property="og:title" content={meta.title} />
         <meta property="og:image" content={meta.image} />
         <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:site" content="@yourname" />
+        <meta name="twitter:site" content="@kuwaharu_it" />
         <meta name="twitter:title" content={meta.title} />
         <meta name="twitter:description" content={meta.description} />
         <meta name="twitter:image" content={meta.image} />

pages/posts/　に新しい.mdファイルを追加して最初の記事を執筆

pages/posts/にfirst-blog.mdを新規作成して最初の記事を書きます。

完成したらリモートレポジトリにプッシュすると自動的にビルドされるので少し待つと新しい記事が反映されます。

---
title: 初めての自作ブログ
date: 2024/11/7
description: 初めて自作ブログを作ってみた。
tag: web development
author: kuwaharu
---

## 初めての投稿
今まで[note](https://note.com/kuwaharu/)の方で記事を執筆していましたが自作でブログを作ってみたくなったのでNext.jsを使用して作ってみました。今後はとりあえずこのサイトをどうやって作ったかなどを記事にしていこうと思います。

初めて投稿した記事を確認すると、最後の「ます」がなぜか「〼」になってしまいます。原因はcssにあるので無効化します。

styles/main.cssを修正

dlig~cv04をコメントアウトしてcpspの末尾を,から;に変更します。

body {
   -webkit-font-smoothing: subpixel-antialiased;
   font-feature-settings:
     "case" 1,
-    "cpsp" 1,
-    "dlig" 1,
+    "cpsp" 1;
+    /* "dlig" 1,
     "cv01" 1,
     "cv02",
     "cv03" 1,
-    "cv04" 1;
+    "cv04" 1; */
   font-variation-settings: "wght" 450;
   font-variant: common-ligatures contextual;
   letter-spacing: -0.02em;

これでREADME.mdに書かれていた設定は終了です。新しい記事を書く際は最初の記事を書いた時のように新しいファイルをpages/posts/に追加していきます。