轻量级博客—使用 remix + mdx 绝佳选择

如果你想体验一个轻量化的博客，追求轻量与简洁化，没有数据交互，直接书写 markdown， 同时又自己开发博客功能的需求，remix + mdx 可能是你很好的选择。

博客特点

没有数据库，使用 mdx 文件，书写静态文件路由，基于 Remix 进行开发，目前目录结构设计

.
├── __test__ // 单元测试用例
├── components // 组件库
├── config // 配置库
├── entry.client.tsx
├── entry.server.tsx
├── root.tsx
├── routes // 路由组件
├── styles // 全局样式
├── types.d.ts
└── utils

博客主页

所有博客页

标签页

标签文章列表页

博客页

关于页

项目地址：

remix-mdx-blog

试用

更多的 remix-mdx-blog 时一个轻量级博客的模板，如果你有一定的开发能，需要展示什么样的内容，完全可以自己定义。

git clone https://github.com/yyong008/remix-mdx-blog.git

• 安装依赖

pnpm i

• 运行服务

pnpm install dev

• 打开端口 http://localhost:3000/

技术讲解

本项目借助 Remix + mdx 的优势，打造一个简单轻量的博客项目。扩展博文只需要在 app/routes/posts/<your_blog>.mdx 扩展文件即可，无需手动导入。必要的博客信息为包含在 mdx 的 frontmatter 中，支持的类型：

export type Frontmatter = {
  title: string
  summary: string
  date: string // '2022-08-17',
  tags: string[]
  image: string[]
}

---
title: "Remix 介绍文档库"
summary: "Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience that deploys to any Node.js server and even non-Node.js environments at the edge like Cloudflare Workers."
date: "2022-09-29"
tags: ["javascript"]
image: "/logo.svg"
---

小结

本文使用主要介绍轻量级，基于 Remix + mdx 博客项目创建以及使用方法。如果这个项目能够帮助你，欢迎 🌟🌟🌟，有问题也可以 Issues。欢迎关注公众号 进二开悟 分享各种技术。