从 01 开始 从 01 开始
首页
  • 📚 计算机基础

    • 计算机简史
    • 数字电路
    • 计算机组成原理
    • 操作系统
    • Linux
    • 计算机网络
    • 数据库
    • 编程工具
    • 装机
  • 🎨 前端

    • Node
  • JavaSE
  • Java 高级
  • JavaEE

    • 构建、依赖管理
    • Ant
    • Maven
    • 日志框架
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • 环境管理和配置管理-科普篇
    • Servlet
  • Spring

    • Spring基础
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC

    • SpringMVC 基础
  • SpringBoot

    • SpringBoot 基础
  • Windows 使用技巧
  • 手机
  • 最全面的输入法教程
  • 最全面的浏览器教程
  • Office
  • 图片类工具
  • 效率类工具
  • RSS
  • 码字工具
  • 各大平台
  • 校招
  • 五险一金等
  • 职场规划
  • 关于离职
  • 杂谈
  • 📖 读书

    • 读书工具
    • 读书笔记
  • 🌍 英语

    • 从零开始学英语
    • 英语兔的相关视频
    • Larry 想做技术大佬的相关视频
  • 🏛️ 政治

    • 反腐
    • GFW
    • 404 内容
    • 审查与自我审查
    • 互联网
    • 战争
  • 💰 经济

    • 关于税
    • 理财
  • 💪 健身

    • 睡眠
    • 皮肤
    • 口腔健康
    • 学会呼吸
    • 健身日志
  • 🏠 其他

    • 驾驶技能
    • 租房与买房
    • 厨艺
  • 电影

    • 电影推荐
  • 电视剧
  • 漫画

    • 漫画软件
    • 漫画推荐
  • 游戏

    • Steam
    • 三国杀
    • 求生之路
  • 小说
  • 关于本站
  • 关于博主
  • 打赏
  • 网站动态
  • 友人帐
  • 从零开始搭建博客
  • 搭建邮件服务器
  • 本站分享
  • 🌈 生活

    • 2022
    • 2023
    • 2024
    • 2025
  • 📇 文章索引

    • 文章分类
    • 文章归档

晓林

程序猿,自由职业者,博主,英语爱好者,健身达人
首页
  • 📚 计算机基础

    • 计算机简史
    • 数字电路
    • 计算机组成原理
    • 操作系统
    • Linux
    • 计算机网络
    • 数据库
    • 编程工具
    • 装机
  • 🎨 前端

    • Node
  • JavaSE
  • Java 高级
  • JavaEE

    • 构建、依赖管理
    • Ant
    • Maven
    • 日志框架
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • 环境管理和配置管理-科普篇
    • Servlet
  • Spring

    • Spring基础
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC

    • SpringMVC 基础
  • SpringBoot

    • SpringBoot 基础
  • Windows 使用技巧
  • 手机
  • 最全面的输入法教程
  • 最全面的浏览器教程
  • Office
  • 图片类工具
  • 效率类工具
  • RSS
  • 码字工具
  • 各大平台
  • 校招
  • 五险一金等
  • 职场规划
  • 关于离职
  • 杂谈
  • 📖 读书

    • 读书工具
    • 读书笔记
  • 🌍 英语

    • 从零开始学英语
    • 英语兔的相关视频
    • Larry 想做技术大佬的相关视频
  • 🏛️ 政治

    • 反腐
    • GFW
    • 404 内容
    • 审查与自我审查
    • 互联网
    • 战争
  • 💰 经济

    • 关于税
    • 理财
  • 💪 健身

    • 睡眠
    • 皮肤
    • 口腔健康
    • 学会呼吸
    • 健身日志
  • 🏠 其他

    • 驾驶技能
    • 租房与买房
    • 厨艺
  • 电影

    • 电影推荐
  • 电视剧
  • 漫画

    • 漫画软件
    • 漫画推荐
  • 游戏

    • Steam
    • 三国杀
    • 求生之路
  • 小说
  • 关于本站
  • 关于博主
  • 打赏
  • 网站动态
  • 友人帐
  • 从零开始搭建博客
  • 搭建邮件服务器
  • 本站分享
  • 🌈 生活

    • 2022
    • 2023
    • 2024
    • 2025
  • 📇 文章索引

    • 文章分类
    • 文章归档
  • 从零开始搭建博客系列
  • 什么是博客
  • VuePress
  • VuePress 日常使用
  • 主题
  • 插件
  • 更多配置
  • 部署
    • 构建静态文件
    • Nginx 配置
    • GitHub Pages
    • 自动化部署
    • 使用 GitHub Action
    • 其他部署方式
    • 使用思源笔记插件
    • 获取源码
    • 参考
  • 域名、HTTPS 和备案
  • 图床
  • 搜索功能
  • Meilisearch 自建实践
  • 评论区
  • Twikoo 配置表情包
  • CDN
  • 数据统计
  • SEO
  • 友情链接
  • 网站安全

  • SSL 证书续费
  • 配置 RSS 订阅
  • 显示数学公式块
  • 添加 mermaid 支持
  • 关于邮件服务器
  • 我的写作流
  • 增加浏览器控制台输出
  • 从零开始搭建博客系列-终
  • 搭建博客
2023-02-22
目录

部署

# 10.部署

博客写完后,当然是要发布到网络上的。如果想要部署到服务器上,则需编译构建成静态文件,然后将其上传到服务器上的路径(该路径由我们自己决定),然后在 web 服务器(Nginx 等)上配置访问路径即可

这里说的是有自己服务器的情况,如果嫌麻烦和没预算可以使用 GitHub Pages 服务

# 构建静态文件

VuePress 提供了 vuepress build docs ​命令来构建,也就是我们之前在 package.json 里配置的 docs:build​:

"scripts": {
    "docs:dev": "vuepress dev docs --temp .temp",
    "docs:build": "vuepress build docs",
  },
1
2
3
4

我们在命令行里执行,结果如下:

> npm run docs:build

> vuepress-learn@1.0.0 docs:build
> vuepress build docs

wait Extracting site metadata...
tip Apply theme @vuepress/theme-default ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...

√ Client
  Compiled successfully in 14.78s

√ Server
  Compiled successfully in 4.35s

wait Rendering static HTML...
success Generated static files in docs\.vuepress\dist.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

我们观察最后一行,VuePress 告诉我们成功生成了静态文件在这个目录:docs.vuepress\dist​。我们无需关心里面的内容,只需将整个目录上传到服务器上即可(FTP 或者压缩后上传) ‍

# Nginx 配置

这里已经假设读者有了服务器和安装了 Nginx。如果不知道什么是 Nginx,可以参考我的博客:服务器软件 (opens new window)

以笔者部署的过程为例:

  1. 将 dist 文件夹里的内容上传到/opt/myblog 目录下(可以压缩 dist 目录为压缩包,然后上传再解压)

  2. 配置 Nginx:

    location / {
        root   /opt/myblog;
        index  index.html index.htm;
    }
    
    1
    2
    3
    4
  3. 重启 Nginx ‍ 访问服务器 IP,即可看到博客内容,并且可以正常跳转等,和本地运行的效果一致:

​​

# GitHub Pages

‍一个服务器后续的续费高达几千元一年;如果不想要购买服务器和配置域名等等,可以使用 GitHub Pages,也是不少人在使用的方式。

GitHub 是什么就不多解释了。简单来说 GitHub 就是一个 Git 项目的托管服务平台,上面有很多知名项目。其中,每个项目都有一个主页,列出项目的源文件,例如 Linux (opens new window):

但是对于一个新手来说,看到一大堆源码,只会让人头晕脑涨,不知何处入手。他希望看到的是,一个简明易懂的网页,说明每一步应该怎么做。

因此,Github 就设计了 Pages 功能 (opens new window),允许用户自定义项目首页,用来替代默认的源码列表。所以,Github Pages 可以被认为是用户编写的、托管在 Github 上的静态网页。

博主没有用过该功能,因此不展开来讲,感兴趣的读者可参考:

  • 一篇带你用 VuePress + Github Pages 搭建博客_JavaScript_冴羽_InfoQ 写作社区 (opens new window)
  • 搭建一个免费的,无限流量的 Blog----github Pages 和 Jekyll 入门 - 阮一峰的网络日志 (opens new window)

# 自动化部署

如果每次修改了博客内容,都要重新构建、然后上传到服务器上,未免也太麻烦了。为此,我们可以用一些第三方工具,自动将打包后的文件上传到服务器上:

  • scp2:是一个纯 js 编写的 ssh2 协议的 Linux 远程文件拷贝实现
  • ora:是一个优雅的用于命令行 Loading 的 spinner,简单来说就是用来实现命令行环境的 loading 效果,和显示各种状态的图标等,美观一点。 ‍ 安装依赖:
npm i scp2 ora@5.0
1

ora6.0 以上版本不支持 require 方式引入,因为在 node 中使用,使用 5.0 版本

在项目里新建两个文件:

  • deploy.js:用于编写部署命令
  • serverInfo.json:用于存放服务器信息(由于本博客是开源的,不方便将服务器 IP 和密码等敏感信息公开) ‍ deploy.js 的内容:
const fs = require('fs')
const scpClient = require('scp2')
const ora = require('ora')

const serverInfo = JSON.parse(fs.readFileSync('serverInfo.json'))
const loading = ora('正在部署至 ' + serverInfo.host )
loading.start()
scpClient.scp('./docs/.vuepress/dist/', serverInfo ,(err)=>{ 
loading.stop()
    if(err) { 
        console.log('部署失败')
        throw err
    }else { 
        console.log('部署成功')
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

‍ serverInfo.json:存放服务器信息,注意在 .gitignore 文件里添加 serverInfo.json,不要将敏感信息公开了。读者需按需修改这些信息

{
  "host":"替换成你的IP",
  "port":"22",
  "username":"替换成你的用户名",
  "password":"替换成你的密码",
  "path":"/opt/myblog"
}
1
2
3
4
5
6
7

‍ 在 package.json 中的 script 中添加 deploy 命令:

"scripts": {
    ...
    "deploy": "npm run docs:build && node ./deploy.js",
    ...
},
1
2
3
4
5

‍ 测试:可以删除之前的/opt/myblog 目录里的文件

$ cd /opt
$ rm -r myblog/
1
2

‍ 然后在命令行里执行 npm run deploy​ ,观察是否正常部署了。

> node .\deploy.js
部署成功
1
2

注意:

  1. 后续想要部署,直接执行命令即可,会覆盖之前的博客内容。
  2. 使用 GitHub Pages 也可以实现自动化部署,这里不展开,可参考:GET 新技能!自己的网站突然就不香了 (opens new window) 第 3.2 节。
  3. 读者也可以在服务器上,使用 git clone 拉取项目,然后 npm run docs:build 来运行,不过这样也很麻烦。

# 使用 GitHub Action

什么是 GitHub Action?这里引用阮一峰大佬的说明:GitHub Actions 入门教程 - 阮一峰的网络日志 (opens new window)

大家知道,持续集成由很多操作组成,比如抓取代码、运行测试、登录远程服务器,发布到第三方服务等等。GitHub 把这些操作就称为 actions。

很多操作在不同项目里面是类似的,完全可以共享。GitHub 注意到了这一点,想出了一个很妙的点子,允许开发者把每个操作写成独立的脚本文件,存放到代码仓库,使得其他开发者可以引用。

如果你需要某个 action,不必自己写复杂的脚本,直接引用他人写好的 action 即可,整个持续集成过程,就变成了一个 actions 的组合。这就是 GitHub Actions 最特别的地方。

希望读者看完阮一峰大大的博客后再往下看。 ‍ 简单来说,就是我们可以使用别人写好的功能,在每次代码推送到 Git 后,GitHub 会自动帮助我们完成编译构建,自动上传到服务器上,重启服务等等操作

一句话:可以实现提交代码到服务器上后,自动更新博客。俗称持续集成、自动化部署。读者也可使用 Gitee Action。接下来我们来实践下。

# 服务器准备

首先是服务器得准备下环境,安装 rsync,读者使用的 Centos,root 用户,安装命令如下:

yum install rsync
1

‍ 然后在服务器上生成公钥和私钥,用来授权

$ ssh-keygen -t rsa -C "peterjxl@qq.com"
1

然后一直回车即可,执行情况:

Generating public/private rsa key pair.
Enter file in which to save the key (/root/.ssh/id_rsa): 
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /root/.ssh/id_rsa.
Your public key has been saved in /root/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:Pt6bEV/LpmNU5ibmsyJjEstK4DHL2kjAaQvNbz8urok peterjxl@qq.com
The key's randomart image is:
+---[RSA 2048]----+
|                 |
|                 |
|                 |
|.o.           o  |
|o+*     S .  +.  |
|+o.*  ..   o+oo. |
| o+ +. oo .+.o+  |
|.= +..=.+o.o=o   |
|E +oo+o+.o++o+   |
+----[SHA256]-----+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

可以看到公钥和私钥的位置。id_rsa 就是私钥,id_rsa.pub 是公钥。我们需要用到私钥的内容:

cat /root/.ssh/id_rsa
1

笔者这里就不贴出来了,也算是一种敏感信息 ‍ 然后修改本机关于 ssh 的一些配置:如此便完成了公钥的安装。

$ cd /root/.ssh
$ cat id_rsa.pub >> authorized_keys
1
2

打开密钥登录功能:编辑 /etc/ssh/sshd_config 文件,在文件末尾添加如下几行:

$ RSAAuthentication yes
$ PubkeyAuthentication yes
$ PermitRootLogin yes
1
2
3

‍ 最后,重启 SSH 服务:

$ service sshd restart
1

# GitHub 准备

‍ 在项目所在的仓库中配置: 打开 Settings->Secrets->New secret

​​ ‍

然后将上一步的私钥内容添加进去:

​​​​​

我们再新建一个 secret,名字为 MY_SERVER_IP​,值为我们的服务器的 IP,IP 也是一种敏感字段。

# 流水线配置

接下来我们就可以配置流水线了。新建 .github/workflows 文件夹,然后再新建 main.yml,内容如下:

name: Deploy My Server

on:
  push:
    branches:
      - master # 只在master上push触发部署
    
jobs:
  deploy:
    runs-on: ubuntu-latest # 使用ubuntu系统镜像运行自动化脚本

    steps: # 自动化步骤
      #下载代码仓库
      - uses: actions/checkout@v1 
      # 使用action库,安装node
      - name: use Node.js  # 使用action库  actions/setup-node安装node
        uses: actions/setup-node@v3
        with:
          node-version: 16
      # 安装依赖
      - name: npm install 
        run: npm install 
    
      #打包项目
      - name: Build
        run: npm run docs:build

      #部署到服务器
      - name: Deploy to Staging My server
        uses: easingthemes/ssh-deploy@v2.1.6
        env:
          # 使用GitHub仓库里的secret设置的值
          SSH_PRIVATE_KEY: ${{ secrets.MY_SERVER_PRIVATE_KEY }} 
          # 源目录,编译后生成的文件目录
          SOURCE: './docs/.vuepress/dist/'
          #服务器公网地址
          REMOTE_HOST: ${{ secrets.MY_SERVER_IP }}
          #服务器用户名-一般默认root
          REMOTE_USER: 'root'
          #服务器中,代码部署的位置
          TARGET: '/opt/myblog'
          #去除的文件
          EXCLUDE: "/dist/, /node_modules/" 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

这里简单说明下文件的内容

  • 第一行:本次流水线的名字,可自行更换
  • 第 3~6 行:说明只有当 master 分支有提交到远程库(push)的时候,才更新(也就是执行本次流水线)
  • 第 8 行:jobs,本次我们只用了一个 job,也就是第 9 行的 job
  • 第 10 行:指定要在哪个操作系统的环境下编译出包(一般是 Linux)
  • 接下来就是 deploy 这个 job 的 steps,每个 step 做了不同的事情,例如安装 node,然后安装依赖和执行构建命令
  • 第 31 行开始就是一些环境变量的设置,例如读取我们上一小节设置的 IP 和私钥信息

# 测试流水线

每次提交代码到远程仓库,这条流水线就会运行:可以在 GitHub 项目的 Actions 选项卡里查看

​​​​ ‍ 我们点击本次运行的 workflow,可以看到目前正在运行的 job:

​​ ‍

再点进去,就可以看到这个 job 里的 step 执行情况:打勾的说明已完成,黄色的转圈圈的表示还在运行中

​​

如果流水线执行失败了,会有邮件告知,并且可以在 Action 里查看失败的原因。

​​ ‍

还可以重跑失败的 jobs:

​​ ‍

# 部署失败:​babel-preset-app​

如果你遇到了 GitHub Action 部署失败了,报错信息类似这样的:

2023-02-18T12:11:00.0564591Z [BABEL] Note: The code generator has deoptimised the styling of /home/runner/work/vuepress-learn/vuepress-learn/node_modules/lodash/lodash.js as it exceeds the max of 500KB.
2023-02-18T12:11:18.4372148Z [success] [webpackbar] Server: Compiled successfully in 31.22s
2023-02-18T12:11:27.6215689Z [success] [webpackbar] Client: Compiled with some errors in 40.43s
2023-02-18T12:11:27.8557348Z (undefined) ./node_modules/@vuepress/core/.temp/style.styl
2023-02-18T12:11:27.8558854Z Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
1
2
3
4
5

这是因为 @vue/babel-preset-app ​的版本问题,解决方法:

npm i @vue/babel-preset-app@4.5.18
1

更多参考:fresh new 1.x project fails to build (but dev works OK) · Issue #3065 · vuejs/vuepress (opens new window)

# 部署失败:JavaScript heap out of memory

当你的博客数量越来越多,那么构建时需要的内存也越来越多,最后你可能会发现内存不够:

<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 0xb090e0 node::Abort() [node]
 2: 0xa1b70e  [node]
 3: 0xce19d0 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
 4: 0xce1d77 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
 5: 0xe993e5  [node]
.....
1
2
3
4
5
6
7
8
9

‍ 解决方法:构建前设置内存参数,例如在 package.json 中添加:

"scripts": {
    "build": "node --max_old_space_size=8192 ./node_modules/vuepress/cli.js build docs"
  }
1
2
3

‍ 注:方法来自二丫讲梵的博客项目 (opens new window)。

# 其他部署方式

如果你生成密钥的时候,输入了密码进行保护:

$ ssh-keygen
...
Enter passphrase (empty for no passphrase):     # In here I input a password
1
2
3

那么部署的时候可能会报错(因为没密码),目前暂无找到其他方法;一般是用没有密码保护的密钥来部署。

如果你不想用密钥登录,而是用密码登录,可以用这个 action:appleboy/scp-action: GitHub Action that copy files and artifacts via SSH. (opens new window)

# 使用思源笔记插件

如果你有使用思源笔记,还可以使用 terwer (opens new window) 开发的思源笔记插件:sy-post-publisher (opens new window), ‍

# 获取源码

本文介绍了几种部署方式,最推荐的是使用 GitHub Action,非常方便,一劳永逸。

为了写本系列的博客,博主特地新建了一个项目用于演示,相关代码已放到 Gitee (opens new window) 和 GitHub (opens new window) 上。

并且,不同功能创建了不同分支,想要获取本篇文章演示的源码只需切换分支即可!

例如,你想运行本篇文章所创建的博客,可以这样做:

  1. 打开命令行
  2. 拉取代码:git clone git@gitee.com:peterjxl/vuepress-learn.git​ (也可拉取 GitHub 的)
  3. 跳转目录:cd vuepress-learn​
  4. 切换分支:git switch -c VuePressDemo6Deploy origin/VuePressDemo6Deploy​
  5. 安装依赖:npm i​
  6. 运行博客:npm run docs:dev​

# 参考

  • 前端项目自动化部署_前端自动化部署_众生皆苦唯有我甜的博客-CSDN 博客 (opens new window)
  • 通过 GitHub Actions 自动部署 vuepresss 项目到云服务器_居無何的博客-CSDN 博客_vuepress 部署在服务器上 (opens new window)
  • rsync exited with code 255.Load key “...“: invalid format Permission denied, please try again._rsync 255_沧州刺史的博客-CSDN 博客 (opens new window)
上次更新: 2025/5/9 14:55:39
更多配置
域名、HTTPS 和备案

← 更多配置 域名、HTTPS 和备案→

最近更新
01
吐槽一下《僵尸校园》
05-15
02
2025 年 4 月记
04-30
03
山西大同 “订婚强奸案” 将会给整个社会带来的影响有多严重? - 知乎 转载
04-26
更多文章>
Theme by Vdoing | Copyright © 2022-2025 | 粤 ICP 备 2022067627 号 -1 | 粤公网安备 44011302003646 号 | 点击查看十年之约
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式