浅尝辄止 - Dilettante258 | Astro Blog搭建过程及Latex支持配置

参考：How To Render LaTeX In Markdown With Astro.js

创建Vercel项目

应该用Github Pages配置也可以，Vercel分配的vercel.app会被墙。但是可能需要自己配置一下workflow文件。这里我们图省事，选择用Vercel。 Vercel 里 Add New 一个 Project，我们既可以Fork我们喜欢的主题后 Import Git Repository，也可以直接用仓库的地址 Import Third-Party Git Repository →。

我们这里演示用的主题是 Astro-Ink，如果你愿意用其他的主题也可以，我比较喜欢这个主题因为他很简约。

你可以访问作者的示例Demo，也欢迎访问我的博客浅尝辄止。

大约需要34s来部署。

自定义域名

如果你愿意，你可以配置自定义域名。Vercel的项目里，点击Setting，转到Domains，然后绑定你的域名。你需要在你的DNS服务提供商那里同时配置好CNAME。

博客自定义

配置 Latex/Katex 数学公式支持

先安装依赖。我们可以在codespaces里操作，也可以git clone本地后安装依赖。我们的安装操作他会自行修改这个项目的一些配置文件，在Vercel他将自行按照这个配置安装。

npm install remark-math
npm install rehype-katex

接着修改astro.config.mjs。我们需要告诉 Astro，我们想在构建时使用这两个包来渲染 Markdown。同时，我们应该修改site，因为它用来生成sitemap和规范URL。sitemap不一定开启了，比如这个主题，请参考@astrojs/sitemap进行修改。

这里是 How To Render LaTeX In Markdown With Astro.js 写的一个范例，我们需要自定义修改一下。

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';

import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default defineConfig({
	site: 'https://blog.alexafazio.dev',
	integrations: [mdx(), sitemap()],
	markdown: {
		remarkPlugins: [remarkMath],
		rehypePlugins: [rehypeKatex]
	}
});

方便大家复制。

  markdown: {
    syntaxHighlight: 'shiki',
    shikiConfig: {
      theme: 'css-variables',
    },
    rehypePlugins: [rehypeKatex],
    remarkPlugins: [
      remarkCodeTitles, remarkMath
    ]
  },

因为我们只有在博客的内容里面才会用到数学公式，所以只需要修改对应的页面的Astro文件就好了。

我们先根据直觉定位，在pages里面寻找，发现了src/pages/blog/[slug].astro，根据命名猜测这是用来控制blog的slug的，查看内容。可以看到，指向了src/layouts/post.astro

对post.astro进行修改，具体操作如下所示。我们可以看见BaseHead在多个文件里都有作为Head的内容使用，所以我们不应该直接修改BaseHead。而是对post.astro的<head>进行自定义修改。

cdn.jsdelivr.net有时候速度较慢，导致阅读体验不好，可以换成fastly.jsdelivr.net。

<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/katex@0.15.1/dist/katex.css" integrity="sha384-WsHMgfkABRyG494OmuiNmkAOk8nhO1qE+Y6wns6v+EoNoTNxrWxYpl5ZYWFOLPCM" crossorigin="anonymous">

我们再搜索一下，确认我们的猜测是否正确。