1.终端

你将使用终端来创建你的 Astro 项目并运行命令来构建、开发和测试你的网站。

你可以通过操作系统的自带的终端程序访问命令行。常见的应用程序包括 Terminal (MacOS/Linux)、命令提示符 (Windows) 和 Termux (Android)。其中一些可能已经在你的设备上了。

2.Node.js

要在你的系统上运行 Astro,你还需要安装一个兼容版本的 Node.js。Astro 支持偶数版本号的 Node.js。当前各自的最低支持版本为:v18.20.8、v20.3.0 和 v22.0.0。(注意:v19 和 v21 版本不受支持。)

要检查是否已安装兼容版本,请在终端中运行以下命令:

终端窗口
node -v

// 输出示例

v18.20.8

如果该命令返回的是 Astro 所支持的版本号,那么你就可以继续了!

如果命令返回错误信息如 Command 'node' not found,或者版本号低于所需版本,那么你需要安装兼容的 Node.js 版本。

3.代码编辑器

此外,你需要下载并安装代码编辑器来编写你的代码。

我们将用到……

本教程将使用 VS Code,但你可以使用适合你操作系统的任何编辑器。

下载并安装 VS Code 或选择的其他代码编辑器。

哈哈哈哈哈宇宙第一编辑器!

启动 Astro 设置向导

在终端的命令行中,使用你首选的包管理器运行以下命令:

终端窗口
npm create astro@latest
# 使用 npm 创建新项目

然后一路回车默认的就好了需要什么依赖回y后一路回车吧!

打开 VS Code。系统将提示你打开一个文件夹。选择你在安装向导期间创建的文件夹。

如果这是你第一次打开 Astro 项目,你应该会看到一条通知,询问你是否要安装推荐的扩展。点击查看推荐扩展,选择 Astro 语言支持。这将为你的 Astro 代码提供语法提示和自动代码补全功能。

打开 VS Code 终端,可以看到类似如下提示:

终端窗口
user@machine:~/tutorial$

快捷键

按 Ctrl + J(macOS: Cmd ⌘ + J)在 VS Code 中打开终端。

笔者之前已经安装过扩展了所以我直接在vscode里打开了该默认文件夹即former-flare

启动开发服务

  1. 通过在 VS Code 的终端中输入以下命令来启动 Astro 开发服务:

    终端窗口
    npm run dev

    现在你应该能在终端中看到 Astro 正在以开发模式运行的提示信息。🚀

查看你网站的预览

你的项目文件包含显示 Astro 网站所需的所有代码,但浏览器负责将你的代码显示为网页。

点击终端窗口中的 localhost 链接,查看 Astro 网站的实时预览!

(如果端口 4321 可用,Astro 默认使用 http://localhost:4321。)

以下是 Astro“初始项目”入门网站在浏览器预览中的样子:

在 GitHub 上创建一个仓库

尽管有几种方法可以将你的本地代码存储在 GitHub 中,但本教程将指导你完成一种不需要在命令行中使用 git 的方法。

  1. 在浏览器中登录 GitHub.com,点击屏幕右上角的 + 新建一个代码仓库(Repository)。

  2. 为你的仓库起一个名称。不必与你的项目文件夹同名。

  3. 你将看到一些选项,但无需更改任何默认设置。向下滚动并单击按钮以 Create Repository(创建仓库)。

  4. 你将看到各种后续的选项步骤,但你不需要更改其中的任何一个。记下仓库的地址 URL。现在可以不执行任何操作然后退出页面。

将本地代码提交到 GitHub

在上一节中,你对页面内容进行了更改。这意味着你的项目文件已更改,VS Code 应在 “源” 菜单 Source Control 图标顶部显示一个数字。这个源选项卡是你定期去更新 GitHub 上的文件的地方。

  1. 单击 VS Code 中的 “源代码管理” 选项卡 Source Control 以查看已更改文件的列表。如果你看到需要安装 git 的消息,请按照提供的说明进行操作,然后重新加载 VS Code。

  2. 单击提交消息上方的 ••• “3个点” 的菜单并选择 Remote > Add Remote。

  3. 选择 Add remote from GitHub。如有必要,请执行任何身份验证步骤,然后返回 VS Code 并重复此操作。

  4. 你应该在 GitHub 上看到所有仓库的列表。选择你为此项目创建的那个。如果你没有看到你的项目,请直接粘贴其 GitHub URL。你可能还会被要求为该仓库指定一个本地名称。可以选择任何你喜欢的名称。

  5. 在菜单窗格的顶部,将有一个地方可以输入提交消息commit message(你的文件更改的描述)。输入 initial commit 并按 Commit 按钮提交这些更改。

  6. 你可能会看到一条消息,告诉你没有 “staged” 提交,并询问你是否要暂存它们。单击 Always(总是)并继续。

  7. 最后,更改文件列表应替换为 Publish 按钮。单击此按钮将你提交的更改发送到 GitHub。

就是把代码push到远程仓库就行了,这个上面在说怎么commit不用理会

创建一个新的 Netlify 站点(暂时不用可以跳过)

  1. 如果你还没有账号,请在 Netlify 创建一个免费账号。

    记下你的用户名。你可以在 https://app.netlify.com/teams/username 查看仪表板和你创建的网站

  2. 单击Add new project > Import an existing project。

    系统会要求你连接到 Git 提供商。选择 GitHub 并按照屏幕上的步骤验证你的 GitHub 账号。然后,从提供的列表中选择你的 Astro 项目的 GitHub 仓库。

  3. 在最后一步,Netlify 将向你显示应用程序的站点设置。对于你的 Astro 项目,默认值应该是正确的,因此你可以向下滚动并单击 Deploy site。

恭喜你拥有一个 Astro 网站!

傻瓜操作直接链接到自己的github仓库傻瓜deploy就ok!

在 GitHub 创建发布仓库

这个仓库专门用于提供 https://yourname.github.io 这个网站地址。你的 Astro 源代码仍然保存在 Lwhite_blog 中。

打开 GitHub 创建仓库页面

点击下面的链接:

打开 GitHub:创建新仓库

按下面填写:

Repository name(仓库名称)

yourname.github.io

必须完全一致,使用小写字母。

Description(描述,可选)

例如:My Astro blog website

Visibility(可见性)

选择 Public(公开)。GitHub Free 的公开仓库可以使用 GitHub Pages。

Initialize this repository(初始化仓库)

  • Add README:不要勾选

  • Add .gitignore:No .gitignore

  • Choose a license:No license

    我们稍后通过 GitHub Actions 发布生成的网站,保持仓库为空即可。

创建部署工作流

在终端执行

打开 Mac 上 VS Code 的终端,复制执行以下命令:

cd /Users/ur user name/former-flare     #需要改为你的路径

mkdir -p .github/workflows

cat > .github/workflows/deploy.yml <<'EOF'
name: Deploy Astro to GitHub Pages

on:
  push:
    branches:
      - main
  workflow_dispatch:

permissions:
  contents: read

jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      contents: read

    steps:
      - name: Checkout source
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm

      - name: Install dependencies
        run: npm ci

      - name: Build Astro site
        run: npm run build

      - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    permissions:
      pages: write
      id-token: write

    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4
EOF

echo "===== 检查部署文件 ====="
cat .github/workflows/deploy.yml

echo
echo "===== 检查 Git 状态 ====="
git status

这份配置会在 main 分支更新时运行 Astro 构建,并把 dist 目录发布到 GitHub Pages,不需要把生成文件手动复制到第二个仓库。

确认输出

正常情况下,Git 状态中会出现一个新文件:

.github/workflows/deploy.yml

这一步还没有推送代码,也没有改变你现有的线上网站。

先停一下等我吃个饭再回来!

cd /Users/yourusername/former-flare

git add .github/workflows/deploy.yml

git commit -m "Add GitHub Pages deployment workflow"

如果提交成功,再执行:

git push origin main

注意:这次推送只会更新原来的源码仓库,不会修改你刚创建的 yourname.github.io 仓库

很好,第 3 步完成了。部署配置文件已经创建成功,Git 也正确识别到了新增的 .github/ 目录。

接下来先不要动 Netlify,也不要向 yourname.github.io 手动上传文件。

提交并推送部署配置

在同一个终端中,逐条执行以下命令。

提交配置

git add .github/workflows/deploy.yml

git commit -m "Add GitHub Pages deployment workflow"

正常情况下,会显示新建了 .github/workflows/deploy.yml 文件。

4.3 推送到原来的源码仓库

git push origin main

这一步会把部署配置推送到:

https://github.com/xxxxxx/xxxxxxx

不会把源码仓库改名,也不会删除任何文件。

然后继续执行下面的命令:

cd /Users/xxxxxx/former-flare

git add .github/workflows/deploy.yml

git commit -m "Add GitHub Pages deployment workflow"

如果提交成功,再执行:

git push origin main

修改本地部署文件

现在请在 Mac 的终端中执行下面的命令。它会进入你的 Astro 项目,并先检查当前部署文件,不会修改任何内容。

cd /Users/xxxxxxxx/former-flare

echo "===== 当前分支 ====="
git branch --show-current

echo
echo "===== 当前工作区状态 ====="
git status --short

echo
echo "===== 当前部署文件 ====="
cat .github/workflows/deploy.yml

替换部署文件

请在 Mac 终端中完整复制并执行下面这段命令。它只会替换 .github/workflows/deploy.yml,不会修改你的 Astro 源代码。

配置 xxxxx.github.io

1. 打开目标仓库的 Pages 设置

xx xx x xx x x xxxxxx.github.io → Settings → Pages

2. 找到 Build and deployment

在 Source 下拉菜单中选择:

Deploy from a branch

3. 设置发布分支和目录

按照下表选择:

设置项

选择

Branch

gh-pages

Folder

/(root)

然后点击 Save。

如果 Branch 下拉菜单里没有 gh-pages,先不要随意选择其他分支,告诉我你看到的选项。

第 10 步:验证网站

保存设置后,等待一两分钟,再打开:

https://xxxxxx.github.io

如果首次打开暂时显示 404,可以稍等片刻后刷新。

中间还有一个隐私的事情,由于太多隐私关系shell删了很多

还有就是从一个仓库到另一个仓库 content ➕read write 用token

如果这篇帖子有赞以后会出一个简单版的教程

我的已经部署好了哈哈哈!