https://github.com/linjonh/techblog
技术博客，软件研发相关的技术文章网站
https://github.com/linjonh/techblog
android blog hugo hugo-site jekyll static-site-generator website
Last synced: 2 months ago
JSON representation
技术博客，软件研发相关的技术文章网站
- Host: GitHub
- URL: https://github.com/linjonh/techblog
- Owner: linjonh
- Created: 2018-05-24T09:34:51.000Z (about 8 years ago)
- Default Branch: nextjs
- Last Pushed: 2026-04-12T10:02:47.000Z (2 months ago)
- Last Synced: 2026-04-12T12:06:55.099Z (2 months ago)
- Topics: android, blog, hugo, hugo-site, jekyll, static-site-generator, website
- Language: TypeScript
- Homepage: https://tech-blogs.web.app/
- Size: 672 MB
- Stars: 26
- Watchers: 1
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next-js Blog Project
# 导入makerdown文件到数据库记录
需要修改js里的 authentication API token 和数据库部署的URL地址
```bash
node create-categories-tags.js
node import-md-with-relations.js
```
# 博客框架：strapi + PostgreSQL + nextjs-blog
我目前情况：
✔ 有非常多文章（上万篇）
✔ 内容以 Markdown 为主
✔ 有技术背景（Node.js、CI/CD、Prisma、Next.js 都熟）
✔ 想要性能好、可扩展
最优解：Next.js + Strapi（Headless CMS） + Meilisearch
优势非常明显：
功能 实现方式
内容管理 Strapi（超级方便）
存储 PostgreSQL
前台展示 Next.js
搜索 Meilisearch（极速）
部署 Vercel/Cloudflare 或你自己的 VPS
性能：
上万篇文章毫无压力
不再有静态构建卡死
可扩展为门户网站级别
**一步一步搭建一个最适合上万篇文章的 Headless CMS 架构**。
## 🚀 推荐的组合
为了简单、稳定、扩展性强，我建议：
### **Strapi（后端 CMS） + PostgreSQL（数据库） + Next.js（前端）**
这是现在“上万篇文章网站”最常用、可扩展性最强的组合。
---
# ✅ 第一步：搭建 Strapi（内容后台）
Strapi 是基于 Node.js 的 Headless CMS，很容易用。
## 1. 安装 Node.js 18+
本地或服务器（建议 Linux）安装 Node.js（18 或以上）。
## 2. 新建 Strapi 项目
```bash
npx create-strapi-app blog-cms --quickstart
```
运行后打开：
```
http://localhost:1337/admin
```
即可进入后台。
---
# ✅ 第二步：创建“文章模型”
在 Strapi 后台里：
1. Content-Type Builder → Create new collection type
2. 名字：`article`
3. 添加字段：
* `title`（文本）
* `slug`（唯一文本）
* `content`（Rich Text 或 Markdown）
* `date`（日期）
* `tags`（多选）
* `category`（单选）
保存后 Strapi 会自动生成 API：
```
GET /api/articles
GET /api/articles/:id
```
你已经有一个可供前端使用的 API 了。
---
# ✅ 第三步：让 Strapi 支持 markdown 批量导入（上万篇文章）
你可能已有大量 markdown 文件。
你可以用命令行脚本批量导入，例如：
```bash
const fs = require('fs');
const axios = require('axios');
async function uploadMD() {
const files = fs.readdirSync('./posts');
for (const file of files) {
const md = fs.readFileSync(`./posts/${file}`, 'utf8');
const title = file.replace('.md', '');
await axios.post('http://localhost:1337/api/articles', {
data: {
title,
content: md,
}
});
}
}
uploadMD();
```
这可以把所有 markdown 文章导入 Strapi 的数据库。
> 你有多少篇文章都没关系，10 万篇都能存。
---
# ✅ 第四步：搭建 Next.js 前端
Next.js 负责展示文章页面。
## 新建 Next.js 项目
```bash
npx create-next-app blog-web
```
## 获取文章列表
在 Next.js 页面中 API 调用：
```js
const res = await fetch('http://localhost:1337/api/articles');
const data = await res.json();
```
## 获取单篇文章
```js
const res = await fetch(`http://localhost:1337/api/articles/${slug}`);
```
### Next.js 里用 ISR（Incremental Static Regeneration）
让页面自动更新而无需全站构建：
```js
export async function getStaticProps() {
const res = await fetch('http://localhost:1337/api/articles');
const data = await res.json();
return {
props: { articles: data },
revalidate: 60, // 每 60 秒自动更新一次
};
}
```
---
# ✅ 第五步：加入搜索（上万篇文章必须要有）
你可以用：
### ⭐ **Meilisearch（极速、开源、强烈推荐）**
安装：
```bash
curl -L https://install.meilisearch.com | sh
./meilisearch
```
或
```bash
docker run -it --rm \
-p 7700:7700 \
-e MEILI_MASTER_KEY="masterKey" \
getmeili/meilisearch:latest
```
同步 Strapi 内容：
* 安装 strapi-plugin-meilisearch
* 自动 push 数据到搜索索引
前端调用搜索 API 即可。
---
# ✅ 第六步：部署方案（最稳）
### Strapi（后端）部署到 VPS 或 Docker：
```bash
docker run -p 1337:1337 strapi/strapi
```
### Next.js（前端）部署到：
* Vercel（最简单）
* Cloudflare Pages（免费）
* Netlify
### 搜索（Meilisearch）部署到：
* VPS 上 Docker
* 或 Meilisearch Cloud
---
# ✅ 整体架构图（超简单版本）
```
你写文章（Markdown）
↓
Strapi (CMS) —— PostgreSQL
↓
Meilisearch (全文搜索)
↓
Next.js 前端网站 (ISR/SSR)
↓
用户访问
```
**无论几千篇、上万篇文章，都能秒级访问、稳定运行。**
---