构建个人简历网站之Astro初体验

发表于 更新于 分类于 阅读次数： 本文字数： 1.1k 阅读时长 ≈ 1 分钟

Astro建立更快的网站，一个现代化的轻量级静态站点生成器。

image-20230204192719583

本地创建

1
pnpm create astro@latest

输入项目名，然后一路回车键

运行体验:

1
pnpm dev

浏览器访问：http://localhost:3000/

组件传参

详见

路由规则

详见

交互

solid-js

详见

1
2
3
pnpx astro add solid
# 或
pnpm astro add solid

然后一路回车键

互动组件

详见

客户端指令

详见

Astro 群岛

https://docs.astro.build/zh-cn/concepts/islands/

需要额

tailwind

Tailwind 允许您使用实用程序类而不是编写 CSS。将实用 CSS 类引入项目中的每个.astro文件和框架组件，同时支持 Tailwind 配置文件。

1
pnpm astro add tailwind

详见

部署

详见

Github Pages

详见

不一样的部署体验

  1. 本地代码推到远程创建的仓库，如resume
  2. 然后仓库下的 Settings（非我的设置 Settings） > Pages > Build and deployment 下选择 GitHub Actions
  3. 接着选择 Static HTML > Configure
  4. 当前页面下注意需要部署的分支名，默认是 master（有的可能没有设置远程仓库，默认是 main）
  5. 在 Edit new file 区域内，找到 path，路径值改为项目打包的路径名，默认名是**.dist**
  6. 最后 Start commit 确认提交，别忘了这个提交需同步到本地仓库
  7. 访问静态页面站点，再次打开仓库下的 Settings（非我的设置 Settings） > Pages，已经可以看到访问地址了

注意：

默认 astro 创建的项目，忽略文件.gitignore配置了**dist/**，需要注释掉，不然 Github Pages 静态网页站点找不到文件内容就 404 了

访问静态站点时，发现样式没生效，F12 查下 html 中引入的 css，访问下，发现找不到文件，加上仓库名（项目名）前缀路径，css 资源有了。这里就需要配置 astro.config.mjs 了

1
2
3
4
5
// https://astro.build/config
export default defineConfig({
    base: "resume", // 加上基础路径（项目名）
    integrations: [solidJs(), tailwind()],
});

Demo 源码

Demo 展示

相关链接

[1] Astro 2.0 正式发布，现代化静态站点生成器

[2] 构建个人简历网站 | Astro 初体验 | 五分钟人人都可以拥有属于自己的个人简历网站