logo

Next.jsで作る無料ブログの始め方（基本のカスタマイズ編）

投稿 2021.10.11

目次

以下の記事でNext.jsのテーマを使ってブログを構築しました。
デフォルトのままでは使い物になりませんので、基本的な部分のカスタマイズ方法を書きます。

https://24365.dev/posts/20211008-nextjs-start/

タイトル周り、ページングの変更

サイトタイトルやサイト名、サイト説明文などを修正。

src/utils/Config.ts
export const Config = {
-  site_name: 'Starter',
-  title: 'Next.js Boilerplate',
-  description: 'Starter code for your Next.js blog Boilerplate with Tailwind CSS',
-  url: 'https://example.com',
-  locale: 'en',
-  author: 'Anonymous',
-  pagination_size: 5,
+  site_name: 'Kekke Vod',
+  title: 'Kekke Vod',
+  description: '人気のアニメやドラマ、英語のレビューサイト！',
+  url: 'https://kekke.dev',
+  locale: 'jp',
+  author: 'kekke',
+  pagination_size: 20,
};

ヘッダー、フッター周辺の変更

サイト説明や、Githubリンク、フッターのリンクなどは不要なので削除します。

src/templates/Main.tsx
import React, { ReactNode } from 'react';

import Link from 'next/link';

import { Navbar } from '../navigation/Navbar';
import { Config } from '../utils/Config';

type IMainProps = {
  meta: ReactNode;
  children: ReactNode;
};

const Main = (props: IMainProps) => (
  <div className="antialiased w-full text-gray-700 px-3 md:px-0">
    {props.meta}

    <div className="max-w-screen-md mx-auto">
      <div className="border-b border-gray-300">
        <div className="pt-16 pb-8">
          <div className="font-semibold text-3xl text-gray-900">{Config.title}</div>
-          <div className="text-xl">{Config.description}</div>
        </div>
        <div>
          <Navbar>
            <li className="mr-6">
              <Link href="/">
                <a>Home</a>
              </Link>
            </li>
            <li className="mr-6">
              <Link href="/about/">
                <a>About</a>
              </Link>
            </li>
-            <li className="mr-6">
-              <a href="https://github.com/ixartz/Next-js-Blog-Boilerplate">GitHub</a>
-            </li>
          </Navbar>
        </div>
      </div>

      <div className="text-xl py-5">{props.children}</div>

      <div className="border-t border-gray-300 text-center py-8 text-sm">
        © Copyright
        {' '}
        {new Date().getFullYear()}
        {' '}
        {Config.title}
-        . Powered with
-        {' '}
-        <span role="img" aria-label="Love">
-          ♥
-        </span>
-        {' '}
-        by
-        {' '}
-        <a href="https://creativedesignsguru.com">CreativeDesignsGuru</a>
-        {/*
-         * PLEASE READ THIS SECTION
-         * We'll really appreciate if you could have a link to our website
-         * The link doesn't need to appear on every pages, one link on one page is enough.
-         * Thank you for your support it'll mean a lot for us.
-         */}
      </div>
    </div>
  </div>
);

export { Main };

英語サイトになってるので日本語サイトを明示する

「en」となってる部分を「jp」に変更。

src/pages/_document.tsx
import React from 'react';

import Document, {
  Html, Head, Main, NextScript,
} from 'next/document';

class MyDocument extends Document {
  render() {
    return (
-      <Html lang="en">
+      <Html lang="jp">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

aboutの内容を書き換え

サイトの内容を書いていきます。

src/pages/about.tsx
import React from 'react';

import { Content } from '../content/Content';
import { Meta } from '../layout/Meta';
import { Main } from '../templates/Main';

const About = () => (
  <Main meta={<Meta title="Lorem ipsum" description="Lorem ipsum" />}>
    <Content>
-      <p>
-        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione fuga recusandae quidem.
-        Quaerat molestiae blanditiis doloremque possimus labore voluptatibus distinctio recusandae
-        autem esse explicabo molestias officia placeat, accusamus aut saepe.
-      </p>
      <p>
-        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione fuga recusandae quidem.
-        Quaerat molestiae blanditiis doloremque possimus labore voluptatibus distinctio recusandae
-        autem esse explicabo molestias officia placeat, accusamus aut saepe.
+        このサイトではアニメやドラマ、映画のレビューを掲載していきます。
      </p>
    </Content>
  </Main>
);

export default About;

各コンテンツの変更

以下ファイルを削除 or 変更していきます。

ディレクトリ構成
my-blog-project/_posts/2020-02-02-my-first-post.md
                      /2020-03-03-my-second-post.md
                      /2020-06-06-my-third-post.md
                      /2020-07-07-my-forth-post.md
                      /2020-08-08-my-fifth-post.md
                      /nextjs-blog-boilerplate-presentation.md

記事収集箇所の修正

Macだけの事象かもしれませんが、記事を変更すると以下のエラーが発生しました。

エラーMSG
Server Error
Error: ENOENT: no such file or directory, open '/Users/keisato/github/nextjs/my-blog-project/_posts/.DS_Store.md'

.DS_Store というファイルがマークダウンファイルとして読み込まれてしまっているので、読み込まないように変更します。
ついでに

「_posts/記事slug.md」

の構成を

「_posts/記事slug/index.md」

という構成に変えていきます。
以下のような構成です。

ディレクトリ構成
my-blog-project/_posts/2021-10-11-my-first-post/index.md

以下ファイルを修正していきます。
「.」「_」で始まるファイル名はスキップするようにしています。

src/utils/Content.ts
 export function getPostSlugs() {
-  return fs.readdirSync(postsDirectory);
+  var slugs: string[] = []
+  fs.readdirSync(postsDirectory).forEach(function (filePath) {
+    if (filePath.charAt(0) !== "." && filePath.charAt(0) !== "_") {
+      slugs.push(filePath)
+    }
+  });
+  return slugs
 }
 
 export function getPostBySlug(slug: string, fields: string[] = []) {
   const realSlug = slug.replace(/\.md$/, '');
-  const fullPath = join(postsDirectory, `${realSlug}.md`);
+  const fullPath = join(postsDirectory, `${realSlug}/index.md`);
   const fileContents = fs.readFileSync(fullPath, 'utf8');
   const { data, content } = matter(fileContents);
   const items: PostItems = {};

これで最低限の変更ができたと思います。


before


after

この記事を書いた人

avatar

にいよん

WEBエンジニアで0&2歳娘のパパです。フルリモートでちいたまに引きこもり中。密かにFIRE目指してます。こんな情報を発信中→投資、IT技術、副業、仮想通貨、暗号資産、NFT、メタバース、ブロックチェーン

関連のある記事

オススメ記事

カテゴリ

© 2021 - 2023 24365.dev