レンタルサーバーとAstroでブログサイトを構築してそこにGitHub Actionsを使ったCI/CDで投稿する環境を構築してみました。
レンタルサーバーでGitHub Actionsを使ってCI/CDする部分はこちらの記事で書いています。
今回は、前回の記事で作ったサンプルサイトにAstroを導入します。
環境と事前準備
環境
- シン・レンタルサーバー
- GitHub
- GitHub Actions
- Astro
Astroのファイルを作成してGitHubへ配置する
まずはローカル環境でAstroをインストールして、表示確認用のページを準備します。
先に、Node.js と Git が入っていることを確認します。
node -v
git --versionnode -v が v22.23.4 以上なら、この先へ進みます。
GitHubからリポジトリをCloneします。ユーザー名とリポジトリは、各自の環境に合わせて読み替えてください。
git clone https://github.com/ユーザー名/リポジトリ.git
cd リポジトリ
次に、npmでAstro をインストールします。
npm init -y
npm pkg set scripts.dev="astro dev" scripts.build="astro build" scripts.preview="astro preview"
npm install astro
Astroのインストールができたら、表示確認用のページを作ります。
mkdir src\pages -Force
$utf8 = New-Object System.Text.UTF8Encoding $false
[System.IO.File]::WriteAllText("$pwd\src\pages\index.astro", @"
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
Astroで作ったページ
</body>
</html>
"@, $utf8)
[System.IO.File]::WriteAllText("$pwd\astro.config.mjs", @"
import { defineConfig } from "astro/config";
export default defineConfig({});
"@, $utf8)
[System.IO.File]::WriteAllText("$pwd\tsconfig.json", @"
{
"extends": "astro/tsconfigs/base"
}
"@, $utf8)
[System.IO.File]::WriteAllText("$pwd\.gitignore", @"
.astro/
.env
dist/
node_modules/
"@, $utf8)
ここまでできたら、ブラウザで表示を確認します。
コマンドを実行してローカルサーバーを起動します。
npm run devブラウザで http://localhost:4321/ を開きます。
「Astroで作ったページ」と出れば成功です。確認したら、PowerShell で Ctrl + C を押してサーバーを止めます。
ここまで作成したファイルをGitHubへPushします。
git add .
git commit -m "Astroのファイルを追加"
git push origin mainGitHub のリポジトリに package.json、astro.config.mjs、src/pages/index.astro が見えれば完了です。
サブドメインは、まだ前の index.html のままです。
Astroが作ったファイルをCI/CDで公開する
.github/workflows/deploy.yml を置き換えて、GitHub Actionsで自動公開できるようにします。
name: deploy
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v7
- uses: actions/setup-node@v7
with:
node-version: 22
- name: HTMLを作る
run: |
npm ci
npm run build
- name: サブドメインへ送る
env:
SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
SSH_HOST: サーバーID.wpx.jp
SSH_USER: サーバーID
DEPLOY_PATH: /home/サーバーID/ドメイン名/public_html/
run: |
sudo apt-get update
sudo apt-get install -y rsync
mkdir -p ~/.ssh
echo "$SSH_PRIVATE_KEY" > ~/.ssh/deploy_key
chmod 600 ~/.ssh/deploy_key
ssh-keyscan -p 10022 "$SSH_HOST" >> ~/.ssh/known_hosts
rsync -avz -e "ssh -p 10022 -i ~/.ssh/deploy_key" \
./dist/ \
"${SSH_USER}@${SSH_HOST}:${DEPLOY_PATH}/"./dist/ は、dist フォルダの中身を送ります。サブドメインの index.html が、Astroで作ったページに置き換わります。
npm ci は、リポジトリにある package-lock.json を使います。
修正ができたらPushします。
git add .github/workflows/deploy.yml
git commit -m "Astroのファイルを公開する"
git push origin mainActions を開き、緑のチェックが付いた実行が成功です。
サイトURLを開いて、「Astroで作ったページ」と出ていれば完了です。
Markdownでサンプル記事を書いてみる
Astroの特徴でもあるMarkdownでサンプル記事を書いていきます。
ファイル名が、公開後のURLになります。例えば、sample.md なら /sample/ になります。
PowerShellで以下のコマンドを実行します。
$utf8 = New-Object System.Text.UTF8Encoding $false
[System.IO.File]::WriteAllText("$pwd\src\pages\sample.md", @"
---
title: サンプル記事
---
# サンプル記事
これはサンプル記事です。
"@, $utf8)
ファイルを作成したらローカルサーバーで表示を確認します。
npm run devブラウザで http://localhost:4321/sample/ を開きます。「サンプル記事」と出れば成功です。
確認したら、Ctrl + C でローカルサーバーを止めておきます。
GitHubへPushすると、GitHub Actionsが記事を公開します。
git add src/pages/sample.md
git commit -m "サンプル記事を追加"
git push origin main
まとめ
今回は、AstroのファイルをGitHubへ置き、pushするとレンタルサーバーへ公開されるところまで作りました。
あまり難しいことなく導入できました。
試してみたい方は是非チャレンジしてみてください。
