Lumin Admin 站点预览:一键启动本地与远程预览
📌 概述
站点预览功能允许管理员一键启动本地 Hugo 预览服务器,实时查看博客效果,同时提供远程站点访问和部署入口。系统自动检测服务器运行状态,支持启动/停止操作。
本功能基于 Node.js
child_process.spawn启动 Hugo 服务器,前端每 10 秒轮询状态。
一、功能设计
1.1 本地预览
- 一键启动
hugo server -D --bind 0.0.0.0 - 实时显示服务器运行状态
- 点击直接打开预览页面
- 一键停止预览服务器
1.2 远程站点
- 输入远程站点 URL
- 选择部署方式
- 一键部署按钮(需配置 Git)
- 访问远程站点
1.3 界面布局
1┌─────────────────────┐ ┌─────────────────────┐
2│ 🖥️ 本地预览 │ │ 🌐 远程站点 │
3│ │ │ │
4│ 状态: ● 运行中 │ │ 站点地址: [______] │
5│ 地址: localhost:1313│ │ 部署方式: [______] │
6│ │ │ │
7│ [停止预览] [打开站点]│ │ [一键部署] [访问站点]│
8│ │ │ │
9│ 使用说明: │ │ 部署说明: │
10│ · hugo server -D │ │ · 推送到远程仓库 │
11│ · 自动热更新 │ │ · 自动构建部署 │
12└─────────────────────┘ └─────────────────────┘
二、后端实现
2.1 Hugo 进程管理
使用 child_process.spawn 启动 Hugo 服务器,进程引用保存在模块级变量中:
1import { execSync, spawn } from 'child_process'
2
3let hugoProcess = null
4
5app.post('/api/preview/start', (req, res) => {
6 if (hugoProcess && !hugoProcess.killed) {
7 return ok(res, { status: 'already_running' })
8 }
9
10 hugoProcess = spawn('hugo', ['server', '-D', '--bind', '0.0.0.0'], {
11 cwd: ROOT,
12 shell: true
13 })
14
15 hugoProcess.stdout?.on('data', d => console.log('[HUGO]', d.toString().trim()))
16 hugoProcess.stderr?.on('data', d => console.log('[HUGO]', d.toString().trim()))
17 hugoProcess.on('exit', () => { hugoProcess = null })
18
19 ok(res, { status: 'started', url: 'http://localhost:1313/' })
20})
2.2 停止预览
1app.post('/api/preview/stop', (req, res) => {
2 if (hugoProcess && !hugoProcess.killed) {
3 hugoProcess.kill()
4 hugoProcess = null
5 }
6 ok(res, { status: 'stopped' })
7})
2.3 状态查询
1app.get('/api/preview/status', (req, res) => {
2 ok(res, {
3 running: hugoProcess && !hugoProcess.killed,
4 localUrl: 'http://localhost:1313/',
5 remoteUrl: ''
6 })
7})
2.4 API 接口
| 接口 | 方法 | 说明 |
|---|---|---|
/api/preview/status | GET | 获取预览服务器状态 |
/api/preview/start | POST | 启动本地 Hugo 预览 |
/api/preview/stop | POST | 停止预览服务器 |
三、前端实现
3.1 状态轮询
每 10 秒自动检测服务器状态,确保界面与实际状态同步:
1onMounted(() => {
2 checkStatus()
3 pollTimer = setInterval(checkStatus, 10000)
4})
5
6onBeforeUnmount(() => {
7 if (pollTimer) clearInterval(pollTimer)
8})
3.2 启动/停止
1async function startServer() {
2 starting.value = true
3 try {
4 await startPreview()
5 running.value = true
6 ElMessage.success('本地预览服务器已启动')
7 } catch (e) {
8 ElMessage.error('启动失败: ' + e.message)
9 } finally {
10 starting.value = false
11 }
12}
3.3 部署方式选择
支持 5 种主流部署方式:
| 部署方式 | 值 | 说明 |
|---|---|---|
| GitHub Pages | github-pages | 推送到 gh-pages 分支 |
| Cloudflare Pages | cloudflare-pages | 自动构建部署 |
| Vercel | vercel | Git 集成自动部署 |
| Netlify | netlify | Git 集成自动部署 |
| 自定义服务器 | custom | 自行部署 |
3.4 Hugo 服务器参数
1hugo server -D --bind 0.0.0.0
| 参数 | 说明 |
|---|---|
server | 启动本地开发服务器 |
-D | 包含草稿文章(--buildDrafts) |
--bind 0.0.0.0 | 绑定所有网络接口,允许局域网访问 |
默认端口 1313,如需修改可添加 --port <port> 参数。
四、注意事项
- Hugo 安装:本地预览需要系统已安装 Hugo Extended 版本
- 端口占用:如果 1313 端口被占用,Hugo 会自动选择下一个可用端口
- 进程管理:Hugo 进程随 Node.js 进程退出而终止,不会产生僵尸进程
- 热更新:修改文件后 Hugo 会自动重新构建并刷新浏览器
五、文件变更清单
| 文件 | 变更 |
|---|---|
admin/backend/server.js | 新增 3 个预览 API |
admin/frontend/src/views/Preview/Index.vue | 新建预览页面 |
admin/frontend/src/api/index.js | 新增 3 个预览 API 函数 |
admin/frontend/src/router/index.js | /preview 路由从 Placeholder 改为真实页面 |
留言评论
期待你的想法评论加载中