💬

Next.js + GitHub Pagesのブログテンプレートを作った

2022/07/24に公開約2,300字

概要

マークダウンブログのテンプレートを作成しました。

https://github.com/sub-t/blog-template

こちらのテンプレートはGitHub Pagesにデプロイしています。

https://sub-t.github.io/blog-template/posts/motion-slot

特徴

公式のexamplesに含まれるblog-starterをもとに製作しています。

よくある感じの無難なデザインに仕上げました。

技術スタックに依存する特徴

  • Next.jsを使っているのでパフォーマンスが高い
  • GitHub Pagesにデプロイするので費用がかからない

ブログサイトとしての特徴

  • レスポンシブ対応
  • ダークモード
  • 記事の一覧ページにページネーション有
  • 目次付き

その他

  • next-seoでSEO対策済み
  • OGP対応

デプロイ

こちらを参考にGitHub Pagesにデプロイしました。

https://jamband.github.io/blog/2021/08/deploy-nextjs-app-to-github-pages/

修正箇所

使用するにあたって、最低限修正すべき箇所があります。

next.config.js

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  basePath: process.env.GITHUB_ACTIONS ? "/blog-template" : "",
  trailingSlash: true,
};

module.exports = nextConfig;

/blog-templateの部分をリモートリポジトリの名前に置き換えてください。

また、リモートリポジトリの名前を「<user-name>.github.io」とする場合は、不要になりますので、basePathごと削除してしまって構いません。

deploy.yml

リモートリポジトリの名前を「<user-name>.github.io」とする場合は、deploy.ymlのMove 404 to root命令も不要になります。

deploy.yml
-  - name: Move 404 to root
-    run: mv ./out/404/index.html ./out/404.html

トラブルシューティング

デプロイが完了しない場合は、次の2点の原因が考えられます。

個人アクセストークンの未取得

deploy.yml(GitHub Actions)を動作させるためには個人アクセストークンが必要となります。

以下のGitHub Docsの記事を参照してください。

https://docs.github.com/ja/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token

公開するブランチを指定していない

deployは完了したはずなのに、「your site is ready to be published at」と表示されたままでサイトが公開されない、ということがあります。

この場合は、以下のGitHub Docsの記事を参照してください。

https://docs.github.com/ja/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site

「Select branch」にて、「gh-pages」ブランチを指定すると「pages build and deployment」というActionが開始されるはずです。

要参照資料

使い方を詳細に説明できればよかったのですが、長くなりそうなので諦めました。代わりに参考となる資料を掲載して締めたいと思います。

「Next.jsを利用した初めての本格的Markdownブログサイトの構築」

https://reffect.co.jp/react/nextjs-markdown-blog

つい先日Reffectが公開したチュートリアルです。

今回作成したテンプレートは、こちらの作例にもう少し追加の設定や機能を盛り込んだ形になっていると思います。

カスタマイズしたい方は、ぜひ参照してみてください。

「next-seoを使ってNext.jsプロジェクトのSEOを管理する」

https://omkz.net/next-seo/

next-seoの設定はこちらの記事を参考にしました。

tailwindツール集の記事もスタイリングの際、お世話になりました。

Discussion

ログインするとコメントできます