静态博客入门指南
•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
你的静态博客现在完成了!