如何使用Astro构建我的网站

2024-07-03

之前一直使用的Hexo作为我的博客网站，但是Hexo有个问题就是本地启动服务后，编写Markdown无法实时预览，不支持MDX格式，使用的模板语法构建布局页面，SEO不友好。

于是我决定自己设计一个主题。

选择方案

NextJS
Astro

选择Astro的原因有很多，比如自带集成.mx和.mdx 格式，而NextJS需要手动配置很多东西。这里有我写了半成品的NextJS博客网站可以参考下。

技术栈

Astro

使用Astro作为构建网站的基本框架。

Tailwind、MDX集成。
可以直接基于JavaScript、HTML/CSS编写代码，无UI框架依赖
支持SSG

TypeScript

TypeScript 是一种基于 JavaScript 构建的语言，可以帮助您在代码运行之前验证它是否在编辑器中正常运行。

Shiki

语法高亮库有很多，比如Shiki、Prism、Highlight。选择Shiki的原因是因为它提供了语法标记功能，而且据说性能非常好。

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
function thisIsJavaScript() {
  // This entire block gets highlighted as JavaScript,
  // and we can still add diff markers to it!
  console.log('Old code to be removed')
  console.log('New and shiny code!')
}

Vercel

当我推送代码到Github时，Vercel会自动将我的代码部署到网站。

从网站选型到构建部署花了时间不到一个星期，但是这只是表面，网站还有很多需要细致的打磨的，等打磨好会把这个博客作为主题开源出来。