【个人博客】Astro 快速搭建个人博客

站长

2022年12月07日 21:36 · 阅读数 20

Astro 介绍

Astro 是一个多合一的 Web 框架，用于构建快速、以内容为中心的网站。

以内容为中心：Astro 专为内容丰富的网站而设计。
服务器优先：网站在服务器上呈现 HTML 时运行速度更快。
默认快速：在 Astro 中构建慢速网站应该是不可能的。
易于使用：您无需成为专家即可使用 Astro 构建某些东西。
功能齐全，但灵活：超过 100 多种 Astro 集成可供选择。

创建

# npm
npm create astro@latest

# yarn
yarn create astro

# pnpm
pnpm create astro@latest

内置themes

我们选择一个主题 clone，目录结构如下

├── src/
│   ├── components/
│   │   ├── Header.astro
│   │   └-─ Button.jsx
│   ├── layouts/
│   │   └-─ PostLayout.astro
│   └── pages/
│   │   ├── posts/
│   │   │   ├── post1.md
│   │   │   ├── post2.md
│   │   │   └── post3.md
│   │   └── index.astro
│   └── styles/
│       └-─ global.css
├── public/
│   ├── robots.txt
│   ├── favicon.svg
│   └-─ social-image.png
├── astro.config.mjs
└── package.json

src通常包含

页面
布局
Astro 组件
前端组件（React 等）
样式（CSS、Sass）
Markdown

案例

src/pages/posts markdown文件目录，项目会自动解析

blog git:(master) ✗ npm run dev

> blog@1.0.0 dev
> astro dev

  🚀  astro  v1.0.0-beta.44 started in 57ms
  
  ┃ Local    http://localhost:3000/
  ┃ Network  use --host to expose
  
  ▶ This is a  beta  prerelease build
    Feedback? https://astro.build/issues
  
上午09:43:45 [astro] reload /src/pages/posts/astro-vercel-blog.md (x30)
上午09:47:20 [astro] update /public/assets/images/.DS_Store (x2)
上午09:58:26 [astro] reload /src/pages/posts/astro-vercel-blog.md (x22)
上午10:02:06 [astro] update /public/assets/.DS_Store (x2)
上午10:05:19 [astro] reload /src/pages/posts/astro-vercel-blog.md (x18)