二叉树上的河马

astro搭建博客+netlify部署博客+obsidian编辑+lsky图床

12 min

域名购买

IMPORTANT

非必需，netlify会提供免费域名。

找一家域名商，挑选一个心仪的域名购买即可。 常见的有namecheap,godaddy,cloudflare,阿里云,腾讯云。 博主是在porkbun购买

TIP

在购买前，推荐先去搜索一下优惠券，直接搜索porkbun优惠券就能搜到现在有减1$Porkbun 优惠券 & 促销 (Extrabux)。其他家也可以试着搜一下。

VPS购买

IMPORTANT

非必需，本文中用来搭建lsky图床，就图床而言也有很多免费方案。

供应商很多，根据需求选择购买即可，具体可以去各大论坛关注下，黑5、复活节、圣诞等基本都有活动。

TIP

在购买前，也推荐先去搜索一下优惠券。

挑选博客主题

进入astro.build 选择顶部资源，挑选喜欢的主题。

安装主题

以本博客使用的主题为例，点击开始使用跳转到github，也可以点击下方卡片直接进入。

image.png
image.png
radishzzzastro-theme-retypeset

Loading repository data...

-- -- --

在终端中运行

image.png
image.png
# Clone the repository
git clone https://github.com/radishzzz/astro-theme-retypeset

重命名博客文件`blog`

# Navigate to the project directory
cd blog

# Install pnpm globally (if not already installed)
npm install -g pnpm

# Install dependencies
pnpm install

# Start the development server
pnpm dev

此时浏览器应该会打开博客

TIP

建议先在本地修改调试再上传GitHub仓库以及部署。

本地修改调试

删除原有的文章

删除posts下的原有文章。

blog/
└── src/
    └── content
		└── posts

个性化配置

参考博客指南进行，如果你不知道怎么做可以问问AI，

image.png
image.png

新建测试博文

在posts文件夹下新建test.md文件

---

title: zen95

draft: false

tags:

  - 日记

  - zen

published: 2025-08-22

---

# 对称区间非奇非偶

  

$$\int_{-a}^{a} f(x) \, dx = \int_{0}^{a} [f(x) + f(-x)] \, dx \quad (a > 0)$$

本地运行

如果没有结束终端任务，回到浏览器博客页面查看更改是否生效。

image.png
image.png

如果关闭了终端，在博客根目录下打开终端运行

pnpm dev

在本地确保配置完成，博客运行正常进入下一步

上传Github仓库

新建仓库

需要新建源码仓库和展示仓库

image.png
image.png

新建源码仓库

源码仓库选择私有

image.png
image.png

新建展示仓库

展示仓库选择公开

image.png
image.png

获取Github API

点击右上角头像，进入设置。

image.png
image.png

选择开发者设置。

image.png
image.png

选择生成经典令牌。

image.png
image.png

写个名字，选择到期时间（建议无过期），勾选repo、workflow权限。

image.png
image.png

复制API暂时保存好，一会要用。

image.png
image.png

添加密钥

打开源码仓库，进入设置，选择Actions，新建Repository secrets。

image.png
image.png

写个名字（后面要用哦），填入前面复制的密钥（找不到就再申请一个吧）。

image.png
image.png

添加Github Workflow配置文件

再.github文件夹下新建workflows文件夹添加deploy.yml文件

blog/
└── .github/
    └── workflows/
    		└── deploy.yml
IMPORTANT

NAME_BLOG换成上面Repository secrets的名字 NAME/taweret_blog换成你的博客展示仓库

name: Build and Deploy Astro Blog

  

on:

  push:

    branches:

      - main

  

jobs:

  build-and-deploy:

    runs-on: ubuntu-latest

    steps:

      - name: Checkout Source Code

        uses: actions/checkout@v4

  

      # 第一步：安装 pnpm (关键！)

      - name: Setup pnpm

        uses: pnpm/action-setup@v4

        with:

          version: 10.14.0 # 换成你本地 pnpm -v 的版本号，比如 9.1.0

  

      # 第二步：安装 Node.js

      - name: Setup Node.js

        uses: actions/setup-node@v4

        with:

          node-version: '20'

          cache: 'pnpm'

  

      # 第三步：安装依赖并构建

      - name: Install Dependencies and Build

        run: |

          pnpm install --frozen-lockfile

          pnpm run build

  

      # 第四步：部署到展示仓库

      - name: Deploy to Display Repository

        uses: peaceiris/actions-gh-pages@v4

        with:

          personal_token: ${{ secrets.NAME_BLOG }} #TAWERET_BLOG换成上面Repository secrets的名字

          external_repository: NAME/taweret_blog #Djkeof/taweret_blog换成你的博客展示仓库

          publish_branch: main

          publish_dir: ./dist

上传GitHub仓库

在终端运行

git add .
git commit -m "first commit"
git branch -M main
git remote remove origin
git remote add origin https://github.com/GitHub名字/blog_source.git
git push -u origin main

一切顺利的话，稍等一会，就可以在源码仓库和展示仓库看到文件。 可以进入源码仓库Actions查看workflow运行情况，如果显示未开启，点击enable

image.png
image.png

部署到netlify

安装部署

进入netlify导入现有项目

TIP

我已经注册过，新注册流程大差不差。

image.png
image.png

选择Github

image.png
image.png

选择展示仓库，如果你使用netlify的域名，注意项目名称。

image.png
image.png

部署完成，稍等一会，就可以通过项目名称.netlify.app访问你的博客啦:）

配置自己的域名

打开项目，选择域管理，添加自己的域。

image.png
image.png

选择添加子域

image.png
image.png

点击等待外部DNS

image.png
image.png
image.png
image.png

把这条CNAME记录加到porkbun（我没有更改DNS托管，你用的是cloudflare…都是一样的添加CNAME记录）（吐槽一句，太隐秘了找了半天）

image.png
image.png
image.png
image.png

添加完耐心等待就好了，netlify会自动配置网站证书。

image.png
image.png

waline评论配置

netlify部署

这个我也放到了netlify。 参考：

LeanCloud 设置 (数据库) netlify部署

添加域名

参考前面博客添加域名步骤。

image.png
image.png

复制添加的域名，在config.ts中的waline部分修改server url。

// waline - Waline评论系统

    // https://waline.js.org/en/

    waline: {

      // server url - 服务器URL

      serverURL: 'https://comment.taweret.fyi', #在这里修改

      // emoji url - 表情包URL

      emoji: [

        'https://unpkg.com/@waline/emojis@1.2.0/tw-emoji',

        // 'https://unpkg.com/@waline/emojis@1.2.0/bmoji',

        // more emojis: https://waline.js.org/en/guide/features/emoji.html - 更多表情包

      ],

      // gif search - GIF搜索

      search: true, // true, false - 开启、关闭

      // image uploader - 图片上传

      imageUploader: true, // true, false - 开启、关闭

    },

Obisidian编辑

安装obsidian

obsidian download

添加仓库

在obsidian选择打开本地仓库，添加content文件夹。

blog/
└── src/
    └── content
image.png
image.png

安装插件

点击左下角设置，进入第三方插件市场，下载Git,image auto upload,Editing Toolbar插件。

image.png
image.png

编辑流程

image.png
image.png

1panel安装

ssh连接到服务器 执行以下安装脚本，根据命令行提示完成安装。

bash -c "$(curl -sSL https://resource.fit2cloud.com/1panel/package/v2/quick_start.sh)"

安装成功后，控制台会打印面板访问信息，可通过浏览器访问 1Panel：

http://目标服务器 IP 地址:目标端口/安全入口

TIP
  • 如果使用的是云服务器，请在安全组中开放对应的目标端口
  • ssh 登录 1Panel 服务器后，执行 1pctl user-info 命令可获取安全入口（entrance）

配置lsky

安装

在商店搜索安装

image.png
image.png
image.png
image.png

新建数据库

image.png
image.png

反代

image.png
image.png
image.png
image.png

泛域名证书申请

参考这篇文章啦，非常详细

免费泛域名 SSL 证书申请及自动续期（使用 1Panel 面板）

配置

在浏览器地址栏输入服务器地址:lsky服务端口或者是你做完反代的域名。 填写数据库配置，创建管理员账户

image.png
image.png

角色组设置

按需修改

image.png
image.png
image.png
image.png

用户管理

修改容量

image.png
image.png
image.png
image.png

picgo

获取lsky token

image.png
image.png
image.png
image.png

依次输入以下代码，会返回一个token，复制它下面会用。

curl --location --request POST 'https://your.domain/api/v1/tokens' \  
--form 'email="your_email@address"' \  
--form 'password="your_passwd"'

安装

在这里

安装插件

image.png
image.png

配置

点击左侧图床设置，选择lankong编辑。

TIP

填写 Auth Token 使用 Bearer  拼接

image.png
image.png
image.png
image.png
TIP

由于前面在obsidian安装了image auto upload插件，把图片直接复制到obsidian就会上传到图床。

TODO

obsidian同步

鸣谢与参考文献

chatgpt，gemini，claude

【大学生提高课】3 hexo与hugo博客搭建与github自动化推送和服务器推送

1panel+雨云服务器+https配置lsky-pro（兰空图床）

免费泛域名 SSL 证书申请及自动续期（使用 1Panel 面板）

博客 netlify 域名 obsidian lsky 图床 github astro vps 1panel picgo astro-theme-retypeset