1983 字
10 分钟

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

域名购买#

IMPORTANT

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

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

TIP

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

VPS购买#

IMPORTANT

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

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

TIP

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

挑选博客主题#

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

安装主题#

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

image.png

radishzzz
/
astro-theme-retypeset
Waiting for api.github.com...
00K
0K
0K
Waiting...

在终端中运行

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

新建测试博文#

在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)$$

本地运行#

如果没有结束终端任务,回到浏览器博客页面查看更改是否生效。 如果关闭了终端,在博客根目录下打开终端运行

pnpm dev

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

上传Github仓库#

新建仓库#

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

image.png

新建源码仓库#

源码仓库选择私有

image.png

新建展示仓库#

展示仓库选择公开

image.png

获取Github API#

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

image.png

选择开发者设置。

image.png

选择生成经典令牌。

image.png

写个名字,选择到期时间(建议无过期),勾选repo、workflow权限。

image.png

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

image.png

添加密钥#

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

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

部署到netlify#

安装部署#

进入netlify导入现有项目

TIP

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

image.png

选择Github

image.png

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

image.png

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

配置自己的域名#

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

image.png

选择添加子域

image.png

点击等待外部DNS

image.png

image.png

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

image.png

image.png

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

image.png

waline评论配置#

netlify部署#

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

LeanCloud 设置 (数据库) netlify部署

添加域名#

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

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

安装插件#

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

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

泛域名证书申请#

参考这篇文章啦,非常详细 免费泛域名 SSL 证书申请及自动续期(使用 1Panel 面板) 如果你使用cloudflare账号,那你的域名也要托管到cloudflare。

配置#

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

image.png

角色组设置#

按需修改

image.png

image.png

用户管理#

修改容量

image.png

image.png

picgo#

获取lsky token#

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

配置#

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

TIP

填写 Auth Token 使用 Bearer  拼接

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 面板)

赞助支持

如果这篇文章对你有帮助,欢迎赞助支持!

赞助
astro搭建博客+netlify部署博客+obsidian编辑+lsky图床
https://blog.eecs.app/posts/astro搭建博客netlify部署博客obsidian编辑lsky图床/
作者
( ̄。。 ̄)
发布于
2025-08-22
许可协议
CC BY-NC-SA 4.0
最后更新于 2025-08-22,距今已过 103 天

部分内容可能已过时

评论区

目录