電研ウェブサイトに関する変更と情報など

電研のウェブサイトについて

Next.jsを用いてGitHub Pages上でホスティングしています。

GitHub Pagesでは静的サイトのホスティングが可能であり、この電研ブログもGitHub Pages上でJekyllを用いてホスティングしています。

本来、Next.jsは動的サイト向けのフレームワークですが、静的サイトのエクスポートが使えるため、GitHub Pages上でホスティングが可能です。

変更前

以前は白色ベースのテーマでシンプルな構成でした。

変更後

• 黒色ベースのテーマに変更し、ターミナルもどきを追加しました。
• また、未リンクであったその他をQ&Aに変更しました。
• ナビバーとフッター部に影を追加しました。
• 背景にはアニメーションを加えました。
• about/ で開くために next.config.ts を修正しました。

技術的な情報

詳しくは、README.md - github.com/osu-denken/osu-denken.github.io に記載していますが、現時点までのものを抜粋します。

発生した問題

1. CSSが適用されない
   こちらはNext.js 15 + GitHub PagesでCSSが反映されない問題を解決した話（App Router対応・Tailwind・TypeScript） - Qiitaを参考に修正した。

2. about/ へアクセスできない デフォルトでの静的エクスポートでは about.html として作成されます。
   そのため https://osu-denken.github.io/about/ として開くには next.config.ts を以下のように変更しました。

import type { NextConfig } from "next";
import { env } from "process";

const isExport: boolean = process.env.IS_EXPORT === "1";

const nextConfig: NextConfig = {
  [...]

  trailingSlash: true,
};

module.exports = nextConfig;

デプロイ方法

この手順を踏まなくても基本的には勝手にActionsでGitHub Pagesにデプロイされます

1. npm run exportを実行して静的サイトとしてビルドする
2. 各種gitコマンドを実行してビルドされたファイルをGitHubにプッシュする
   • git add .
   • git commit -m "..."
   • git push origin main

デバッグ

1. npm run devを実行してローカルサーバーを起動
2. ブラウザでhttp://localhost:3000にアクセスする