Skip to content

たくさんの自由帳の中身。自作ブログ。Next.js と Tailwind CSS と Unified でできている。

Notifications You must be signed in to change notification settings

takusan23/ziyuutyou-next

Repository files navigation

ziyuutyou-next

たくさんの自由帳 Next.js リメイク版

Netlify Deploy

AWS Deploy

Imgur

Imgur

Next.js / Tailwind CSS / unified で出来ている。

開発環境構築

必要なもの

  • Node.js
    • v20.9.0 以降?
    • LTS の最新版を入れておけば良さそう
    • 本番環境へデプロイするならその環境のNode.jsのバージョンも確認してね

開発環境の起動まで

  • このリポジトリをクローンします
  • クローンしたフォルダ内でターミナルを立ち上げます
  • 以下を実行します(初回時)
npm i
  • 開発サーバーを立ち上げます
npm run dev
  • (多分) localhost:3000をブラウザで開きます
  • スマホで確認したい場合はローカルIPアドレス:3000で見れるはず
    • ipconfigifconfig?でIPアドレスの確認ができると思います

記事の書き方

マークダウンで書きます。
contentフォルダ内postsフォルダへマークダウンのファイルを作成することで、記事を作ることが出来ます。

対応している記法は以下です

  • CommonMark
  • GitHub Flavored Markdown
    • CommonMark にはテーブル作れないので
  • HTML 埋め込み
  • シンタックスハイライト(shiki)
  • 見出しに id 属性付与

また、Next.jsのキャッシュ機能を利用し、できる限りマークダウン→HTMLの変換回数が少なくなるようになっています。
その影響で開発サーバーを立ち上げて記事を開いても、リロードしても反映されないことがあります。
その場合は スーパーリロード(force refresh / force reload) を試してみてください。多分キャッシュが消えるはず。

本番環境でビルドして動作確認をする

本番環境でビルドして開発サーバーを立ち上げます。
next/linkのプリフェッチ機能、Google Analyticspagefindの検索機能とかは本番ビルドしか動かないので

静的書き出しをします

npm run deploy

そのあと、静的書き出し結果を指定して開発サーバーを起動します。

npm run start

検索機能

pagefindを利用して、静的サイトでも全文検索が出来るようになっています(不思議!)
検索結果の対象になるのは、app/posts/[blog]/page.tsxだけです。理由はdata-pagefind-bodyを付けているのがそのファイルだけなので。
他の画面も検索対象にしたい場合はdata-pagefind-bodyを付けてください。

全文検索がつきましたが、もちろんこのサイトは静的サイトとして配信できます。

静的HTML書き出し(意味深)

サーバーでのレンダリング(Server Side Rendering)機能は使っていないので、
全て静的サイト(Static Site Generation)として書き出せます。

以下のコマンドを叩くと

  • すべてのページの html 書き出し
  • OGP 画像の生成
  • サイトマップとか
  • pagefind のインデックス が行われます。

CPU 使用率が書き出し中は 100% で張り付くけどしゃあない。

npm run deploy

静的書き出し先

outフォルダに成果物が入っています。
このフォルダを公開すればいいと思います。

環境変数

.envファイルに公開先の URL などの値を入れています。
EnvironmentTool.tsから値を参照できるようにしています。

名前 説明
SITE_BASE_URL WebサイトのURLのドメインまで。https://takusan.negitoro.dev/みたいな。
SITE_NAME サイト名です。<title>タグとかで使われます。
GITHUB_REPOSITORY_URL GitHubのリポジトリです。記事本文ページのGitHubで開くで使われます。
GA_TRACKING_ID Google アナリティクスGA4測定IDです。
GOOGLE_SEARCH_CONSOLE Google Search Consoleの所有権確認のために、HTML タグcontentの値を入れてください。任意なので無くても動くはず。
NO_INDEX_MODE 検索結果にでないように、<meta>タグでnoindexを指定したい場合は true を入れる。任意です。
DISABLE_OGP_IMAGE OGP 画像を配信しない場合は true。<head>から OGP 画像の URL を消します。任意です。

GitHub Actions

Netlify (ビルドは GitHub Actions でやってホスティングは Netlify)Amazon S3 + Amazon CloudFrontの2種類があります。
Netlifyビルド機能はなんかこのリポジトリだと動かなくなったので、GitHub Actions書きました。

もし使わない場合はActionsの画面で無効にしたいワークフローを押して、Disable workflowを押すことで無効にできます。

Imgur

Netlify で公開する

必要なシークレットはこの2つです

名前
NETLIFY_AUTH_TOKEN Netlify のアカウント画面 > Applications > New access tokenから生成する
NETLIFY_SITE_ID Netlify のサイト詳細画面 > Site configuration > Site ID をコピー

Imgur

詳しくは昔書いたのでそっち見てください:
https://takusan.negitoro.dev/posts/github_actions_netlify/

Amazon S3 + Amazon CloudFront で公開する

必要なシークレットはこの4つです。
OpenID Connectを使う方法で認証するのでちょっとややこしいです。(アクセスキー使うように直してもいいんじゃない?)

名前
AWS_CLOUDFRONT_DISTRIBUTION Amazon CloudFrontのディストリビューションのIDです
AWS_REGION リージョン、多分東京でいいはず? ap-northeast-1
AWS_ROLE IAM ロールARNの値です
AWS_S3_BACKET ビルド成果物を保存するS3 バケットの名前です

Imgur

詳しくは書いたので見てください:
https://takusan.negitoro.dev/posts/aws_sitatic_site_hosting/

ファイル構造

  • .github/workflows
    • GitHub Actions にやらせる作業を書いたファイルです
    • GitHub の Web 上で編集することをおすすめします
  • app
    • 画面遷移時のページや共通レイアウト
    • Android の Fragment みたいな
  • content
    • 記事の Markdown とか書き出し時に呼び出す JSON とか
  • components
    • 共通して使うコンポーネント
  • public
    • アイコン等のリソース
  • src
    • components でも app でもないTypeScriptファイルの置き場所
    • 記事読み込みクラスとか
  • styles/css
    • Tailwind CSS でちょっと書いた、記事本文とか
  • .env
    • 環境変数。サイトの URL など

About

たくさんの自由帳の中身。自作ブログ。Next.js と Tailwind CSS と Unified でできている。

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published