惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Engineering at Meta
Engineering at Meta
月光博客
月光博客
WordPress大学
WordPress大学
C
Cisco Blogs
Recent Commits to openclaw:main
Recent Commits to openclaw:main
博客园 - 【当耐特】
大猫的无限游戏
大猫的无限游戏
The GitHub Blog
The GitHub Blog
Google DeepMind News
Google DeepMind News
The Cloudflare Blog
有赞技术团队
有赞技术团队
Microsoft Azure Blog
Microsoft Azure Blog
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
小众软件
小众软件
H
Heimdal Security Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
W
WeLiveSecurity
量子位
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
F
Fortinet All Blogs
T
Threat Research - Cisco Blogs
Attack and Defense Labs
Attack and Defense Labs
P
Privacy & Cybersecurity Law Blog
D
Darknet – Hacking Tools, Hacker News & Cyber Security
NISL@THU
NISL@THU
Forbes - Security
Forbes - Security
L
Lohrmann on Cybersecurity
C
CERT Recently Published Vulnerability Notes
L
LINUX DO - 热门话题
Google Online Security Blog
Google Online Security Blog
S
Security Affairs
V2EX - 技术
V2EX - 技术
TaoSecurity Blog
TaoSecurity Blog
N
News and Events Feed by Topic
N
News | PayPal Newsroom
S
Security @ Cisco Blogs
宝玉的分享
宝玉的分享
Project Zero
Project Zero
The Hacker News
The Hacker News
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
PCI Perspectives
PCI Perspectives
G
GRAHAM CLULEY
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Y
Y Combinator Blog
N
Netflix TechBlog - Medium
S
Schneier on Security
Application and Cybersecurity Blog
Application and Cybersecurity Blog
www.infosecurity-magazine.com
www.infosecurity-magazine.com
博客园 - 聂微东

水清无鱼

你看,并不是所有的车贩子都是狼心狗肺、唯利是图! | 水清无鱼 读《生活是很好玩的》 | 水清无鱼 独游上海共青国家森林公园 | 水清无鱼 人生自渡即自愈 | 水清无鱼 我都听些什么歌 | 水清无鱼 先实现自我认同 | 水清无鱼 又是摸鱼的一天 | 水清无鱼 致2026年的自己的一些话 | 水清无鱼 关闭评论的二三事 | 水清无鱼 看淡点,看开点 | 水清无鱼 成长就是自己不断的释怀 | 水清无鱼 简单的活着就是意义 | 水清无鱼 自己才是自己的后盾 | 水清无鱼 实用的博客搭建工具 | 水清无鱼 升级全新UI设计的宝塔11.0 | 水清无鱼 Astro引入FreshRss的方法 | 水清无鱼 干净,是一个人的风骨和修养 | 水清无鱼 生命和生活 | 水清无鱼 离婚这件小事 | 水清无鱼 认知觉醒 | 水清无鱼 放下后的生活 | 水清无鱼 和积极的人相处 | 水清无鱼 用禅修治愈焦虑 | 水清无鱼 如何看待自己和禅修 | 水清无鱼 从零开始装修 | 水清无鱼 博客圈 | 水清无鱼
Astro的一些使用方法 | 水清无鱼
2025-07-18 · via 水清无鱼

从Typecho转到Astro,讲真的,花了我快半个月时间了。相比动态博客的点点点,静态博客更需要去找资料,去摸索,去踩坑。虽然以前也研究过Hugo,但是因为没有实际使用过,所以很多东西都忘记了。而且好多静态博客的教程,大多是部署于Github Pages、vercel、netlify等平台,而我的博客是部署在阿里云的,所以很多东西都要自己去实践。

之所以选择Astro,是因为有一些好友也在用,例如 老麦笔记 1900,既好看,速度还快,所以就决定试试了。

图片来源于Astro官网截图@bosir

Astro 是最适合构建像博客、营销网站、电子商务网站这样的以内容驱动的网站的 Web 框架。Astro 以开创了一种新的前端架构而闻名,与其他框架相比它减少了 JavaScript 的开销和复杂性。如果你需要一个加载速度快、具有良好 SEO 的网站,那么 Astro 就是你的选择。

话不多说,我的流程是本地部署好后,生成文件,上传到阿里云服务器,然后使用宝塔面板管理。下面是我部署Astro需要用到的必要环境,如果配置不一样,你们就参考下就行了。

Node.js®v22.17.1 (LTS) Windows npm 10.9.2 Astro @5.11.0 宝塔面板

图片来源于Node.js官网截图@bosir

准备工作

  1. 安装node.js
  2. 安装npm
  3. 安装VsCode

1和2两项是必须安装的,3项是可选的,因为我用VsCode来调试代码,并且VsCode的插件市场有Astro的插件,安装后可以实时预览,非常方便。同时,我们可以安装通义灵码、Trae、CodeBuddy等插件,可以辅助我们查找和调试代码,对小白用处比较大,十分推荐。

Windows本地命令符安装Astro

如果您使用的是Node.js 18或更高版本,您可以使用npm或yarn安装Astro。

打开系统的CMD命令行界面,并运行以下命令

npm install -g astro
# 或者使用官方的安装命令
npm create astro@latest

安装完成后,运行以下命令,检查是否安装成功。

astro --version

图片来源于Astro安装成功后的欢迎页面截图@bosir

安装完成后,你可以在本地运行Astro项目,并实时预览。本地项目的地址一般在C:\Users\Administrator\你的项目名字,你可以使用命令符 cd 你的项目名字 进入项目文件夹,然后运行npm run dev,启动项目。 打开浏览器,输入http://localhost:4231 (根据运行提示查看本地浏览地址),就可以看到Astro的欢迎界面了。

图片来源于本地命令符使用截图@bosir

安装心仪的Astro主题

进入Astro官网后,选取自己喜欢的主题,然后获取主题,存储于GitHub仓库,我们需要得到主题的仓库地址。例如我使用的主题Retypeset,仓库地址是https://github.com/radishzzz/astro-theme-retypeset.git。然后使用如下命令安装主题。

图片来源于主题GitHub仓库地址截图@bosir

# 克隆主题仓库地址
git clone <repository-url>
# 进入主题目录,注意一定要完整的仓库名称
cd <repository-name>
# 全局安装pnpm
npm install -g pnpm
# 安装依赖
pnpm install
# 进行本地预览
pnpm dev

图片来源于Astro官网主题页面截图@bosir

本地预览并调试

在本地调试项目的时候,VsCode的强大就体现出来了,因为它拥有Astro插件和Ai插件,可以辅助我们查找和调试代码,只要遇到错误,直接在VsCode中查看错误信息,然后根据错误信息进行调试。

图片来源于VsCode使用截图@bosir

比如,我在使用Retypeset主题的时候,遇到了一个错误,主题的[…index].astro的路由配置和index.astro是截然不同的。使用前者在构建dist文件的时候,是无法直接生成index.html文件的。再加上Astro支持i18n,也就是多语言,所以修改的东西就更多了。那么搭配AI,很多问题就可以解决。

部署到宝塔面板

Astro可以部署在任何支持静态网站的主机上,最简单的办法就是构建静态文件,然后上传到服务器。

# 本地生成dist文件夹
npm run build

图片来源于Astro官网主题页面截图@bosir

完成后,会有 [build] Complete! 的提示,然后我们就可以把dist文件夹打包上传到服务器了。

宝塔面板调整

在你创建的站点下,上传dist文件夹,然后解压缩,得到dist目录,修改网站目录为dist文件夹,然后点击保存。在网站设置中php为静态,首页优先index.html,伪静态可使用默认的。也可以如下:

location / {
  try_files $uri $uri/ /index.html;
}

如果不出意外,你应该可以顺利访问你的博客了。

图片来源于宝塔面板截图@bosir

总结

总得来说,经过半个月的摸索,Astro还是很好用的,而且Ai真的很强大,可以辅助我们调试代码,减少很多时间。至少现在我已经可以独立构建独立博客和修改主题了。特别是接触到了很多新的东西,什么路由配置、Unocss、i18n、Astro组件、Astro指令、Astro集成等等,都是我之前没有接触过的,所以学到了很多东西。当然,相较于1900和老麦这样的大佬,我还有很大的不足,不断进步不断学习吧。同时也感谢主题的作者设计了这么漂亮的主题,真的很喜欢。主题也修改了许多小细节,比如添加了分页、上一篇、下一篇、评论、搜索、标签、分类、归档等等,还有其他一些小细节,就不一一列举了。

最后,主题其实有配置好的评论功能,但我还是去除了,因为我最近不喜欢和人互动,也不喜欢打理评论,所以就直接去除了。