前言
最近看到了astro博客的fuwari主题显示代码的效果，说实话有点心动，我现在一直用的hugo博客其实已经足够我用了，但是代码显示效果和fuwari主题差距是有点大的，所以考虑新的文章中代码按fuwari主题的格式去写
本文内容基本完全来自利用cnb以及EdgeOne来0成本部署astro博客网页，如果觉得过于简略难以理解可以直接看一下大佬的视频教程
本地部署
-
fork后的仓库clone到本地
-
全局安装pnpm：
npm install -g pnpm（如果npm国内拉取过慢，请尝试cnpm：npmmirror 镜像站） -
在项目目录安装依赖：
pnpm install和pnpm add sharp -
修改
fuwari/src/config.ts和fuwari/astro.config.mjs的第29行网址 -
创建文章，在根目录执行：
pnpm new-post <这里填写你的文章标题> -
本地预览：
pnpm dev -
构建：
pnpm build
在cnb环境开发
配置环境
首先在cnb中创建私有仓库，然后创建两个文件。
创建.cnb.yml文件，粘贴大佬的代码（原链接:.cnb.yml at main · vmss/astro_demo）
$: # vscode 事件：专供页面中启动远程开发用 vscode: - docker: # image: docker.cnb.cool/vmss/hexo build: ./.ide/Dockerfile runner: cpus: 16 # tags: cnb:arch:amd64:gpu services: - vscode - docker stages: - name: ls script: ls -al - name: 安装 script: apt update新建一个.ide文件夹，在该文件中创建Dockerfile文件，同样直接用的教程中的代码去配置vscode环境（原链接：.ide/Dockerfile at main · vmss/astro_demo）
FROM node:20
# 设置时区RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && \ echo "Asia/Shanghai" > /etc/timezone
# 安装 ssh 服务，用于支持 VSCode 客户端通过 Remote-SSH 访问开发环境RUN apt-get update && \ apt-get install -y \ git-lfs sudo curl wget git axel nload libgl1-mesa-glx ffmpeg build-essential gcc g++ \ libgl1 libglu1 libsm6 libxrender1 libxext6 htop unzip openssh-server \ --no-install-recommends tzdata libsox-dev parallel aria2 ninja-build && \ apt-get -y autoremove && \ git lfs install
# COPY /workspace/VSIX/markdown-preview-enhanced.vsix .
# 安装 code-server 和 vscode 常用插件RUN curl -fsSL https://code-server.dev/install.sh > install-code-server.sh && \ chmod +x install-code-server.sh && \ ./install-code-server.sh && \ rm install-code-server.sh && \ # 安装VS Code扩展 mkdir -p /tmp/vscode-extensions && \ cd /tmp/vscode-extensions && \ # 下载扩展 wget -q https://open-vsx.org/api/redhat/vscode-yaml/1.14.0/file/redhat.vscode-yaml-1.14.0.vsix -O yaml.vsix && \ wget -q https://open-vsx.org/api/dbaeumer/vscode-eslint/2.4.2/file/dbaeumer.vscode-eslint-2.4.2.vsix -O eslint.vsix && \ wget -q https://open-vsx.org/api/eamodio/gitlens/14.5.1/file/eamodio.gitlens-14.5.1.vsix -O gitlens.vsix && \ wget -q https://marketplace.windsurf.com/api/shd101wyy/markdown-preview-enhanced/0.8.19/file/shd101wyy.markdown-preview-enhanced-0.8.19.vsix -O markdown-preview-enhanced.vsix && \ # 安装扩展 code-server --install-extension yaml.vsix && \ code-server --install-extension eslint.vsix && \ code-server --install-extension gitlens.vsix && \ code-server --install-extension markdown-preview-enhanced.vsix && \ # 清理 cd / && \ rm -rf /tmp/vscode-extensions
# 指定字符集支持命令行输入中文（根据需要选择字符集）ENV LANG C.UTF-8ENV LANGUAGE C.UTF-8
# 安装 git-lfsRUN git lfs install --force
RUN npm install -g hexo-cli && \ wget -O hugo.deb https://github.com/gohugoio/hugo/releases/download/v0.148.1/hugo_extended_withdeploy_0.148.1_linux-amd64.deb && \ dpkg -i hugo.deb && \ npm install -g pnpm && \ npm install -g edgeone
WORKDIR /workspace等环境配置好后，就可以在vscode中编辑了
不是用WebIDE的原因：astro调试环境绑定localhost
克隆仓库
克隆仓库：git clone https://cnb.cool/vmss/astro_demo
然后将新建的astro_demo文件夹中的所有内容都移动到workspace路径中，然后把空的astro_demo文件夹删除即可
新的文件中：
dev.sh：运行测试环境gitpush.sh：将修改推送到仓库中upload.sh：托管到edgeone
托管到edgeone
直接使用国际版，国内的没有免费额度，两个访问效果差不多
在该页面创建账号然后领取套餐，后面会跳转到腾讯云中使用
「EdgoOne」>「服务总览」>「添加站点」，添加站点后服务总览中可以看见Pages：
「Pages」>「立即开通」>「API Token」>「创建API Token」
填写名字，过期时间选择永久有效即可
复制API Token，粘贴到上面cnb环境的upload.sh文件中，项目名也一并改了，随便填就可以，有一些敏感名不能用（例如blog）
然后就可以在开发环境中运行upload.sh文件来构建并托管到edgeone中了
上传完成后，pages页面可以看见上传的项目，点进来可以预览或者添加自定义域名，添加域名后即可通过自己的域名访问
在ITDOG中ping预览的链接是全绿的，这个全球（除中国大陆）在国内也是一样用的