Astro的一些使用方法
从Typecho转到Astro,讲真的,花了我快半个月时间了。相比动态博客的点点点,静态博客更需要去找资料,去摸索,去踩坑。虽然以前也研究过Hugo,但是因为没有实际使用过,所以很多东西都忘记了。而且好多静态博客的教程,大多是部署于Github Pages、vercel、netlify等平台,而我的博客是部署在阿里云的,所以很多东西都要自己去实践。
之所以选择Astro,是因为有一些好友也在用,例如 老麦笔记 1900,既好看,速度还快,所以就决定试试了。
Astro 是最适合构建像博客、营销网站、电子商务网站这样的以内容驱动的网站的 Web 框架。Astro 以开创了一种新的前端架构而闻名,与其他框架相比它减少了 JavaScript 的开销和复杂性。如果你需要一个加载速度快、具有良好 SEO 的网站,那么 Astro 就是你的选择。
话不多说,我的流程是本地部署好后,生成文件,上传到阿里云服务器,然后使用宝塔面板管理。下面是我部署Astro需要用到的必要环境,如果配置不一样,你们就参考下就行了。
Node.js®v22.17.1 (LTS) Windows npm 10.9.2 VSCode Astro @5.11.0 宝塔面板
准备工作
- 安装node.js
- 安装npm
- 安装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项目,并实时预览。本地项目的地址一般在C:\Users\Administrator\你的项目名字
,你可以使用命令符 cd 你的项目名字 进入项目文件夹,然后运行npm run dev,启动项目。 打开浏览器,输入http://localhost:4231
(根据运行提示查看本地浏览地址),就可以看到Astro的欢迎界面了。
安装心仪的Astro主题
进入Astro官网后,选取自己喜欢的主题,然后获取主题,存储于GitHub仓库,我们需要得到主题的仓库地址。例如我使用的主题Retypeset,仓库地址是https://github.com/radishzzz/astro-theme-retypeset.git
。然后使用如下命令安装主题。
# 克隆主题仓库地址
git clone <repository-url>
# 进入主题目录,注意一定要完整的仓库名称
cd <repository-name>
# 全局安装pnpm
npm install -g pnpm
# 安装依赖
pnpm install
# 进行本地预览
pnpm dev
本地预览并调试
在本地调试项目的时候,VsCode的强大就体现出来了,因为它拥有Astro插件和Ai插件,可以辅助我们查找和调试代码,只要遇到错误,直接在VsCode中查看错误信息,然后根据错误信息进行调试。
比如,我在使用Retypeset主题的时候,遇到了一个错误,主题的[…index].astro的路由配置和index.astro是截然不同的。使用前者在构建dist文件的时候,是无法直接生成index.html文件的。再加上Astro支持i18n,也就是多语言,所以修改的东西就更多了。那么搭配AI,很多问题就可以解决。
部署到宝塔面板
Astro可以部署在任何支持静态网站的主机上,最简单的办法就是构建静态文件,然后上传到服务器。
# 本地生成dist文件夹
npm run build
完成后,会有 [build] Complete! 的提示,然后我们就可以把dist文件夹打包上传到服务器了。
宝塔面板调整
在你创建的站点下,上传dist文件夹,然后解压缩,得到dist目录,修改网站目录为dist文件夹,然后点击保存。在网站设置中php为静态,首页优先index.html,伪静态可使用默认的。也可以如下:
location / {
try_files $uri $uri/ /index.html;
}
如果不出意外,你应该可以顺利访问你的博客了。
总结
总得来说,经过半个月的摸索,Astro还是很好用的,而且Ai真的很强大,可以辅助我们调试代码,减少很多时间。至少现在我已经可以独立构建独立博客和修改主题了。特别是接触到了很多新的东西,什么路由配置、Unocss、i18n、Astro组件、Astro指令、Astro集成等等,都是我之前没有接触过的,所以学到了很多东西。当然,相较于1900和老麦这样的大佬,我还有很大的不足,不断进步不断学习吧。同时也感谢主题的作者设计了这么漂亮的主题,真的很喜欢。主题也修改了许多小细节,比如添加了分页、上一篇、下一篇、评论、搜索、标签、分类、归档等等,还有其他一些小细节,就不一一列举了。
最后,主题其实有配置好的评论功能,但我还是去除了,因为我最近不喜欢和人互动,也不喜欢打理评论,所以就直接去除了。
9003#88.com (#换成@)
如果你想交流或者联系,可以给我邮件。