使用 Astro、MDX 和 Vercel 创建博客平台

╰半夏微凉° 2024-03-16 21:00 58阅读 0赞

### TLDR ###

[源代码可以在这里][Link 1]找到网站可以[在这里][Link 1]  
找到

### 为什么？ ###

自从我开始写博客，我就想在我的个人网站[thomasledoux.be][Link 1]上做这件事。  
由于在 Remix 和 Next.js（我之前在我的网站上使用的 2 个框架）中设置 Markdown/MDX 支持似乎相当困难，所以我选择在 dev.to 上写我的[博客][Link 1]。  
这在一段时间内非常有效，但现在我想更好地控制我的博客的布局、分析并获得 MDX 支持。[所以我开始建立自己的博客平台，并选择与Astro][Link 1]  
一起做！

### 如何？ ###

#### 设置 Astro ####

设置 Astro 非常简单。  
您只需`npm create astro@latest`在终端中运行，按照步骤操作，几秒钟内即可启动并运行您的项目。  
一旦您的 Astro 项目设置完毕，我们接下来要做的就是添加 MDX 支持。[您可以通过 Astro 中的集成][Link 1]  
添加 MDX 支持。 这就像在终端中运行一样简单。  
`npx astro add mdx`

#### 创建 MDX 博客 ####

一旦安装了 MDX 集成，您就可以开始在您的应用程序中使用 MDX 组件和页面。您可以通过在文件夹中  
添加一个文件夹来开始。 然后在此文件夹中创建文件，例如. 在 MDX 文件的顶部，您可以添加属性。 您可以设置一个，这将使您的博客内容在给定的. 在属性中，您还可以添加自定义属性，例如, , , ... 这看起来像：`/blog``/src/pages`  
`.mdx``best-features-nextjs-conf-2021.mdx`  
`frontmatter`  
`layout``layout`  
`frontmatter``title``date``tags`

<code>---
 title: "'The 3 best features announced at Next.js Conf 2021';"
 layout: '../../layouts/BlogLayout.astro';
 tags: ['nextjs', 'javascript'];
 date: '2021-06-15T15:14:39.004Z';
 ---
 </code>

`Astro.glob()`当您将 MDX 组件/页面导入另一个组件/页面时，或者当您用于从文件系统读取 MDX 文件时，这些属性将可用。  
您可以使用这个博客概览页面来显示博客的标题、创建日期和标签。

<code>---
 let posts = await Astro.glob('./*.mdx');
 /* output: 
 [
 {
 title: 'The 3 best features announced at Next.js Conf 2021',
 layout: '../../layouts/BlogLayout.astro',
 tags: ['nextjs', 'javascript'],
 date: '2021-06-15T15:14:39.004Z'
 }
 ]
 */
 ---
 
 <section>
 {
 posts.map(post => (
 <article>
 {post.frontmatter.title} - {post.frontmatter.title}
 <div class="flex gap-x-4">
 {post.frontmatter.tags.map(tag => (
 <span>{tag}</span>
 ))}
 </div>
 </article>
 ))
 }
 </section>
 </code>

#### 增加博客文章的阅读时间 ####

Astro 让您可以轻松地将[Remark][Link 1]或[Rehype][]插件添加到您的 markdown 中。  
您可以扩展`markdown`向 Astro 配置文件添加一个属性，向该属性添加一个函数/插件`remarkPlugins`（`extendDefaultPlugins`添加该属性以确保默认插件不会被此配置更改覆盖）：

该`./src/utils/calculate-reading-time.mjs`文件将如下所示：

所以你会使用 2 个外部库`reading-time`来`mdast-util-to-string`完成这项工作。不要忘记`npm install`这些！  
将此添加到 Astro 配置中，使此数据在`frontmatter`所有 MDX 文件中可用。  
您现在可以在我们之前的博客概述中开始使用它：

<code><section>
 {
 posts.map(post => (
 <article>
 <h2>
 {post.frontmatter.title} - {post.frontmatter.date}
 </h2>
 <div class="flex gap-x-4">
 {post.frontmatter.tags.map(tag => (
 <span>{tag}</span>
 ))}
 </div>
 <p>{post.frontmatter.minutesRead}ing time</p>
 </article>
 ))
 }
 </section>
 </code>

#### 设置 SEO（元标记，og:image） ####

因为我们正在定义要在我们的 MDX 页面上使用的 a `layout`，所以我们可以开始在 中使用`frontmatter`MDX 页面的属性，`layout`因为它们是在`Astro.props`对象中传递的。 
然后可以使用这些`frontmatter`属性添加类似 a`<title>`和 og:image`<meta>`标签的内容：

<code>---
 const { frontmatter } = Astro.props;
 ---
 
 <head>
 <title>{frontmatter.title}</title>
 <meta content={frontmatter.title} property="og:title" />
 <meta content={frontmatter.title} property="twitter:title" />
 <meta name="twitter:card" content="summary_large_image" />
 <meta
 content={`https://website-thomas.vercel.app/api/og?title=${frontmatter.title}`}
 property="og:image"
 />
 </head>
 </code>

请注意，在示例中我使用的是不同域的 API 路由，这是因为我使用的包是根据我的博客文章的标题`@vercel/og`生成的。[您可以在此处][Rehype]`og:image`阅读文档。 我还根据 Vercel 提供的示例向背景添加了一些闪光。 生成的代码如下所示（在我的[Next.js 站点][Rehype]上的 Next.js API 路由中创建）： 我正在使用字体，所以如果你也想使用它，请确保[下载字体文件][Rehype]并包含他们在你的项目中。  
  
`og:image`  
`Inter`

<code>import {ImageResponse} from '@vercel/og'
 
 export const config = {
 runtime: 'experimental-edge',
 }
 
 const font = fetch(new URL('../../assets/Inter.ttf', import.meta.url)).then(
 res => res.arrayBuffer(),
 )
 
 export default function handler(req) {
 const fontData = await font;
 
 try {
 const {searchParams} = new URL(req.url)
 const hasTitle = searchParams.has('title')
 const title = hasTitle
 ? searchParams.get('title')?.slice(0, 100)
 : 'My default title'
 
 return new ImageResponse(
 (
 <div
 style={{
 background: 'white',
 width: '100%',
 height: '100%',
 display: 'flex',
 textAlign: 'center',
 alignItems: 'center',
 justifyContent: 'center',
 flexDirection: 'column',
 fontFamily: 'Inter',
 backgroundImage:
 'radial-gradient(circle at 25px 25px, lightgray 2%, transparent 0%), radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%)',
 backgroundSize: '100px 100px',
 }}
 >
 <div
 style={{
 width: '80%',
 display: 'flex',
 flexDirection: 'column',
 textAlign: 'center',
 alignItems: 'center',
 }}
 >
 <p style={{fontSize: 32}}>Thomas Ledoux's blog</p>
 <p style={{fontSize: 64}}>{title}</p>
 </div>
 </div>
 ),
 {
 width: 1200,
 height: 600,
 fonts: [
 {
 name: 'Inter',
 data: fontData,
 style: 'normal',
 },
 ],
 },
 )
 } catch (e) {
 console.log(`${e.message}`)
 return new Response(`Failed to generate the image`, {
 status: 500,
 })
 }
 }
 </code>

就是这样，我的博客现在托管在我自己的网站上！[去https://www.thomasledoux.be/blog][Rehype]  
看看吧。 在下一篇博客文章中，我将更深入地探讨我是如何在博客上添加一个评论系统的，以及如何使用 Prisma 和 Planetscale 对数据库进行分析。

[Link 1]: https://zhifj.com
[Rehype]: http://telegeram1.com