Astro Blog搭建过程及Latex支持配置

Dilettante258

已于 2023-12-31 15:58:12 修改

阅读量1.2k

点赞数 22

文章标签： serverless github html http 开源开源软件

于 2023-12-29 18:59:02 首次发布

本文链接：https://blog.csdn.net/Admire0v0/article/details/135296952

版权

参考：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。

这里是 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">

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