静态博客入门指南

hwishort

关于如何创建静态博客的指南。

指南教程Next.js

静态博客入门指南

创建静态博客比你想象的要简单。这篇文章解释了如何使用 Next.js 构建静态博客。

所需工具

  • Node.js: JavaScript 运行时
  • Next.js: React 框架
  • Tailwind CSS: 样式设计
  • Markdown: 内容编写

安装过程

# 创建项目
npx create-next-app@latest my-blog --typescript --tailwind --eslint

# 安装依赖
npm install gray-matter remark remark-html date-fns

# 运行开发服务器
npm run dev

撰写文章

posts/ 目录中创建 markdown 文件:

---
title: "文章标题"
date: "2024-01-15"
description: "文章描述"
tags: ["标签1", "标签2"]
---

# 文章内容

部署

构建为静态网站并部署到 GitHub Pages、Netlify、Vercel 等平台。

npm run build
npm run export

你的静态博客现在完成了!