このブログの構築について

ゼロからの構築とデプロイのプロセス（Astro フレームワークに基づくブログ）#

(1) 関連環境依存の構築（Windows での開発デバッグ）#

Git をダウンロード
Node.js
Windows 環境で Node.js を使用して pnpm をインストール
npm install -g pnpm（pnpm をグローバルにインストール）
デフォルトでは、npm と pnpm のグローバル依存は C:\Users\ あなたのユーザー名 \AppData\Roaming\npm にインストールされますが、D ドライブに変更できます。
npm config set prefix "D:\npm-global"

npm config get prefix を確認 # D:\npm-global が返されるべきです

pnpm config set store-dir "D:\.pnpm-store"

pnpm config set store-dir "D:.pnpm-store" を確認

ブログのルートディレクトリで必要な依存関係をインストール

pnpm install
pnpm add sharp

これで、ローカルにこのプロジェクトをデプロイすることに成功しました

(2) 静的ウェブページのデプロイ構築#

CF 公式サイト
Cloudflare の Pages または Workers を使用して構築
GitHub の静的ウェブページホスティングも使用可能

方法 1、Cloudflare（Pages または Workers のいずれかを選択）#

Pages デプロイ
1. 計算された Pages を開き、GitHub にアップロードしたブログリポジトリを開き、デプロイするブランチを選択
2. ビルドコマンドとビルド出力ディレクトリ（astro が出力する静的ウェブページファイル）を記入
3. 保存してデプロイすれば、できれば自分のドメインをバインドすることをお勧めします

Workers デプロイ（現在は移行の必要はありません、後で更新します）

（CF 公式は Pages プロジェクトを Workers に移行することを推奨しています）

方法 2、GitHub 静的ウェブページホスティング（GitHub Action を使用して dist ファイルを自動デプロイ）#

GitHub に主ファイル MyBlog-Main-astro と静的ページを表示するためのリポジトリ ***(GitHub アカウント名).github.io を作成
Settings -> Developer Settings -> Personal access tokensに移動し、トークン（クラシック）を作成
トークンを永遠に期限切れにしないように選択し、repoとworkflowオプションにチェックを入れる

createToken2

セキュリティを確保するために、生成されたトークンをリポジトリの変数に保存し、Settings -> Secrets and variables -> Actionsで設定

createToken3

setToken1

主ファイルに自動デプロイ用のスクリプトを作成（主ファイル出力の dist ファイルを ***.github.io にデプロイ）
.github/workflows/ に astro_auto_deploy.yaml ファイルを新規作成し、以下の内容をコピーして貼り付け、詳細を知りたい場合は【GitHub Action ドキュメント】を参照してください。

name: astro_auto_deploy

# コードがmainブランチにプッシュされたときにGitHub Actionをトリガー
on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Node.jsのセットアップ
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: pnpmのセットアップ
        uses: pnpm/action-setup@v2
        with:
          version: 8
          run_install: false

      - name: 依存関係のインストール
        run: pnpm install

      - name: サイトのビルド
        run: pnpm build

      - name: GitHub Pagesにデプロイ
        uses: peaceiris/actions-gh-pages@v4
        with:
          PERSONAL_TOKEN: ${{ secrets.TOKEN }}
          EXTERNAL_REPOSITORY: あなたのGitHub名/あなたのリポジトリ名
          PUBLISH_BRANCH: main
          PUBLISH_DIR: ./dist
          force_orphan: true 
          commit_message: 自動デプロイ

主ファイルの.gitignoreを変更して、不必要なファイルのコミットを避ける

# ビルド出力
dist/

# 生成されたタイプ
.astro/

# 依存関係
node_modules/

# ログ
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# 環境変数
.env
.env.production

# macOS特有のファイル
.DS_Store

.vercel

package-lock.json
bun.lockb
yarn.lock

.~* // ~形式のバックアップファイルをコミットしない

VSCode の Git を使用してファイルをリポジトリにアップロードし、アップロードが成功すると GitHub Action がトリガーされ、静的ページが自動デプロイされます。

(3) 自分の画像ホスティングを作成する（Cloudflare R2 + Piclist）#

Cloudflare と Piclist を組み合わせて自分の画像ホスティングをデプロイ

(4) 適切な Markdown エディタを選択する#

Markdown エディタの Typora

(5) 関連参考学習リンク#

fuwari テンプレートのアドレス、機能を一緒に Fork して交流できます

Hugo フレームワークを使用している大御所、ウェブページの粒子アニメーション効果も彼を参考にしています～

このテンプレートに私を引き込んだ大御所～