1431 字
7 分钟
从零开始搭建博客(一)

封面来源: Fuwari

NOTE

记录下自己从零开始,使用Astro框架以及Fuwari主题搭建博客的过程。

搭建Astro框架#

环境准备#

  1. Node.js——推荐使用pnpm作为node包管理工具

  2. VS Code——安装扩展:Github Actions、Astro

  3. Git——将博客推送到Github上

创建项目#

Astro和Hexo一样拥有非常多的主题,但不同的是,Hexo可以安装多个主题,通过配置文件切换,而Astro每个主题就是一个项目,每位主题作者使用的frontmatter格式可能都不相同。因此,为了避免项目大改,请先选择心仪的主题。

Terminal window
# 通过Github拷贝项目模板(主题):
git clone https://github.com/saicaca/fuwari Astro-Fuwari
# 通过pnpm创建项目模板(主题):
pnpm create astro@<版本> <项目名称> --template <主题作者>/<主题仓库>
pnpm create astro@latest Astro-Fuwari --template saicaca/fuwari

预览博客#

使用VS Code打开刚刚创建的项目,安装扩展:Github Actions、Astro

  • Astro 会在 src/pages/ 目录中查找.astro.md 文件, 编译时将其渲染成 html 页面。每个页面都根据其文件名显示为一个路由。
  • Fuwari主题在 src/pages/ 内设置了.astro文件,路由至 /scr/content/ 内相对应的.md文件。使 /scr/content/ 内的页面能适应主题,所以文章保存在 /scr/content/posts/ 中。
# 项目结构
/
├─ ...
├─ public/ #任何静态文件(如图像)都可以放在public/目录中。
├─ src/
│ ├─ assets/
│ ├─ components/
│ ├─ constants/
│ ├─ content/
│ │ ├─posts/
│ │ │ ├─ 文章1/
│ │ │ │ ├─ cover.jpg
│ │ │ │ └─ index.md
│ │ │ └─ 文章2.md
│ │ └─spec/
│ │ └─ 主页.md
│ ├─ i18n/
│ ├─ ...
│ ├─ page/
│ │ ├─ archive/ (分类、tag设置)
│ │ ├─ posts/ (文章设置)
│ │ └─ 主页设置.astro
│ └─ utils/
├─ astro.config.mjs
├─ package.json
└─...

预览模式启动Astro#

Astro框架带有预览模式,方便我们看到刚修改的项目运行情况。

Terminal window
npm install -g pnpm # 安装pnpm
pnpm add sharp # 向package.json添加依赖项
pnpm install # 根据package.json中的依赖项安装所有依赖
pnpm run dev # 运行预览模式

新建文章#

pnpm new-post <filename>

可以在 src/content/posts/ 目录中编辑

推送到Github#

配置git用户名和邮箱#

Terminal window
# git bash
git config --global user.name <用户名> // 设置全局的git用户名
git config --global user.email <邮箱地址> // 设置全局的git用户邮箱
git config --list // 检查是否设置成功

GitHub创建新的仓库#

最好选择 private ,毕竟上传的是网站的源码。输入仓库名,其他默认

通过ssh连接GitHub#

可以选择https连接,但有可能会出现连接失败,用ssh连接就没问题了。

可能会遇到以下错误信息:

fatal: could not read Username for 'https://github.com': No such device or address'
fatal: unable to access 'https://github.com/xxx/xxx.git': Failed to connect to github.com port 443: Timed out'

说明VSCode无法连接到GitHub,导致操作失败。这种情况可能出现在以下几种情况下:

  1. 没有正确配置GitHub账户信息
  2. GitHub账户验证信息过期或无效
  3. 网络连接不稳定或存在代理问题

生成公钥和私钥

Terminal window
ssh-keygen -t rsa -C <邮箱地址>

打开 C:\Users\用户.ssh 文件夹

图02

配置ssh免密登录#

id_rsa.pub公钥文件内容复制,进入github设置里配置ssh

将复制的内容粘贴到 Key 中,Title 随意。

图4

验证设置是否成功#

使用以下命令验证 SSH 密钥是否配置成功: 显示 successfully 说明配置成功,后面的提示只是告诉你,github 不允许 shell 交互,并非报错。

ssh -T git@github.com
图05

远程仓库初始化#

用VS Code打开项目文件夹,在终端里输入

Terminal window
git init // 本地仓库初始化
git add README.md // 添加readme.md文件
git commit -m "first commit" // 初次提交
git branch -M main // 构建分支
git remote add origin git@github.com:<GitHub用户名>/<GitHub仓库名> // 连接到GitHub仓库
git push -u origin main // 推送

推送到GitHub#

每次修改代码保存后,在源代码管理会有这样的提示。在上方输入本次提交的简述后,点击提交,将本次所有修改都提交到本地仓库

图06

再点击同步更改,或是推送,将本地仓库推送到GitHub上。

图07

图08

Cloudflare Pages 部署博客网站#

进入Cloudflare控制台,点击Workers和Pages面板,选择Pages

图09

图10

Github账号授权后,选择博客项目仓库,设置生产分支main,框架预设选择Astro,其他默认就行,点击“保存并部署”

图11

等待部署完成后,可以看到Cloudflare给了一个二级域名,点击即可公网访问。

图12

设置自定义域(可选)#

进入刚刚创建的Pages项目,点击设置自定义域,填入域名或子域名。

图13

☁️ 自动解析 (限定顶级域名托管于 Cloudflare)#

  1. 点击 “设置自定义域名”
  2. 输入你的域名,Cloudflare 会自动生成 DNS 解析
  3. 等待几分钟,域名生效

✋ 手动解析(域名未托管CF或为子域名)#

  1. 选择“开始CNAME设置”

  2. 根据提示,到域名 DNS 服务商处添加 CNAME 记录(如果你跟我一样使用子域名,那么只需输入 blog 就行了)

  3. 点击“检查 DNS 记录”,等待解析生效

    图14

💬总结#

工具作用
内容生成Astro + Fuwari主题网站页面 + 文章撰写
版本管理Git + Github数据托管,触发Cloudflare构建
网站托管Cloudflare Pages自动构建 + CDN + HTTPS
从零开始搭建博客(一)
https://yez.netlify.app/posts/2025/01-从零开始搭建博客一/
作者
初叶
发布于
2025-04-06
许可协议
CC BY-NC-SA 4.0