⚙️ Example deploy.yml#

1
name: Deploy
2

3
on:
4
  push:
5
    branches: [main]
6

7
jobs:
8
  deploy:
9
    runs-on: ubuntu-latest
10
    steps:
11
      - uses: actions/checkout@v3
12
      - uses: peaceiris/actions-gh-pages@v7
13
        with:
14
          github_token: ${{ secrets.GITHUB_TOKEN }}
15
          publish_dir: ./

💡 Simplified Explanation#

Think of GitHub as a separate machine for every repository. To host and run your website on that machine, you need a deploy file (deploy.yml) to configure it properly.

• The workflow automatically builds and publishes your site whenever you push updates to the main branch.

• This ensures your website runs correctly on GitHub Pages without manual server setup.

✅ Requirements#

Before starting, ensure the following are installed on your system:

1
node
2
npm
3
pnpm

🔧 Installation#

Before starting, make sure Node.js and NPM are installed on your system.

1
node -v   # Should show version >= 20
2
npm -v    # Should show version >= 9

1
npm install -g pnpm
2
pnpm -v   # Verify PNPM installation

🌍 Deploy on GitHub Pages#

1
# On GitHub → New Repository → "blogs" (Public)

1
git clone https://github.com/username/blogs.git
2
cd blogs

1
pnpm create fuwari@latest .
2
cd <created dir>
3
pnpm install

1
pnpm dev

📝 Customize Your Blog#

• src/config.ts → Site config (site name, links, theme, etc.)
• src/content/spec/about.md → About page (edit your profile details)
• astro.config.mjs → Astro settings (update site URL for GitHub Pages)
• public/favicon/* → Favicons (replace with your own logo)

🛠️ Useful pnpm Commands#

1
pnpm new-post my-first-post   # create new post
2
pnpm build && pnpm preview    # build for production
3
pnpm dev                      # run dev server

1
import { defineConfig } from 'astro/config';
2
import tailwind from '@astrojs/tailwind';
3

4
export default defineConfig({
5
  site: 'https://username.github.io/blogs', // GitHub Pages URL
6
  base: '/blogs/',                             // repo name
7
  integrations: [tailwind()],
8
});

1
name: Deploy Astro Blog to GitHub Pages
2

3
on:
4
  push:
5
    branches: [ main ]
6
  workflow_dispatch:
7

8
permissions:
9
  contents: read
10
  pages: write
11
  id-token: write
12

13
jobs:
14
  build:
15
    runs-on: ubuntu-latest
16
    steps:
17
      - uses: actions/checkout@v4
18
      - uses: actions/setup-node@v4
19
        with:
20
          node-version: 20
21
      - uses: pnpm/action-setup@v2
22
        with:
23
          version: 9
24
      - run: pnpm install
25
      - run: pnpm build
26
      - uses: actions/upload-artifact@v4
27
        with:
28
          name: github-pages
29
          path: ./dist
30

31
  deploy:
32
    needs: build
33
    runs-on: ubuntu-latest
34
    environment:
35
      name: github-pages
36
      url: ${{ steps.deploy.outputs.page_url }}
37
    steps:
38
      - uses: actions/download-artifact@v4
39
        with:
40
          name: github-pages
41
          path: ./dist
42
      - id: deploy
43
        uses: actions/deploy-pages@v4
44
        with:
45
          artifact_name: github-pages

📝 Note#

The workflow file deploy.yml is the key configuration that sets up and builds the environment for your GitHub Pages site.

• You can think of it like a Dockerfile: it automates the environment setup, ensuring your site runs smoothly without manual intervention.

1
pnpm build && pnpm preview

1
git init
2
git add .
3
git commit -m "Setup Fuwari Blog with GitHub Pages"
4
git checkout -b main
5
git remote add origin https://github.com/username/notes.git
6
git push origin main

🎉 Result#

Your blog is live at:

👉 https://username.github.io/blogs

Summary#

• Installed Node.js, NPM, and PNPM to set up the environment for Fuwari Astro blog
• Created and cloned a GitHub repository for deployment
• Installed Fuwari, configured site settings, and customized content (config.ts, about.md, favicons)
• Built and ran the blog locally using pnpm dev and pnpm build
• Configured GitHub Actions workflow to automate deployment to GitHub Pages
• Pushed changes to GitHub and enabled GitHub Pages to publish the blog online