Next.js + GitHub Pagesのブログテンプレートを作った
概要
マークダウンブログのテンプレートを作成しました。
こちらのテンプレートはGitHub Pagesにデプロイしています。
特徴
公式のexamplesに含まれるblog-starterをもとに製作しています。
よくある感じの無難なデザインに仕上げました。
技術スタックに依存する特徴
- Next.jsを使っているのでパフォーマンスが高い
- GitHub Pagesにデプロイするので費用がかからない
ブログサイトとしての特徴
- レスポンシブ対応
- ダークモード
- 記事の一覧ページにページネーション有
- 目次付き
その他
- next-seoでSEO対策済み
- OGP対応
デプロイ
こちらを参考にGitHub Pagesにデプロイしました。
修正箇所
使用するにあたって、最低限修正すべき箇所があります。
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命令も不要になります。
- - name: Move 404 to root
- run: mv ./out/404/index.html ./out/404.html
トラブルシューティング
デプロイが完了しない場合は、次の2点の原因が考えられます。
個人アクセストークンの未取得
deploy.yml（GitHub Actions）を動作させるためには個人アクセストークンが必要となります。
以下のGitHub Docsの記事を参照してください。
公開するブランチを指定していない
deployは完了したはずなのに、「your site is ready to be published at」と表示されたままでサイトが公開されない、ということがあります。
この場合は、以下のGitHub Docsの記事を参照してください。
「Select branch」にて、「gh-pages」ブランチを指定すると「pages build and deployment」というActionが開始されるはずです。
要参照資料
使い方を詳細に説明できればよかったのですが、長くなりそうなので諦めました。代わりに参考となる資料を掲載して締めたいと思います。
「Next.jsを利用した初めての本格的Markdownブログサイトの構築」
つい先日Reffectが公開したチュートリアルです。
今回作成したテンプレートは、こちらの作例にもう少し追加の設定や機能を盛り込んだ形になっていると思います。
カスタマイズしたい方は、ぜひ参照してみてください。
「next-seoを使ってNext.jsプロジェクトのSEOを管理する」
next-seoの設定はこちらの記事を参考にしました。
tailwindツール集の記事もスタイリングの際、お世話になりました。
Discussion