📢 新文章推送 · 每周更新优质内容 · 订阅更新 →
向下滚动
开发编程

Lumin Admin 站点预览:一键启动本地与远程预览

AI 智能总结

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/statusGET获取预览服务器状态
/api/preview/startPOST启动本地 Hugo 预览
/api/preview/stopPOST停止预览服务器

三、前端实现

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 Pagesgithub-pages推送到 gh-pages 分支
Cloudflare Pagescloudflare-pages自动构建部署
VercelvercelGit 集成自动部署
NetlifynetlifyGit 集成自动部署
自定义服务器custom自行部署

3.4 Hugo 服务器参数

1hugo server -D --bind 0.0.0.0
参数说明
server启动本地开发服务器
-D包含草稿文章(--buildDrafts
--bind 0.0.0.0绑定所有网络接口,允许局域网访问

默认端口 1313,如需修改可添加 --port <port> 参数。

四、注意事项

  1. Hugo 安装:本地预览需要系统已安装 Hugo Extended 版本
  2. 端口占用:如果 1313 端口被占用,Hugo 会自动选择下一个可用端口
  3. 进程管理:Hugo 进程随 Node.js 进程退出而终止,不会产生僵尸进程
  4. 热更新:修改文件后 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 改为真实页面
版权声明

本文作者 Lumin

本文链接 https://www.zhengquan.xyz/code/lumin-admin-preview/

许可协议 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!

请作者喝杯咖啡 ☕

  • 微信打赏
    微信支付
  • 支付宝打赏
    支付宝
点击按钮查看打赏二维码
🎁 推荐工具
试试这些实用在线工具,提升工作效率
前往工具集 →

留言评论

期待你的想法

评论加载中