博客的部署方法论

news2024/10/7 2:32:36

博客写完后,当然是要发布到网络上的。如果想要部署到服务器上,则需编译构建成静态文件,然后将其上传到服务器上的路径(该路径由我们自己决定),然后在 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",
  },

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

> 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.

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

Nginx 配置

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

以笔者部署的过程为例:

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

  2. 配置 Nginx:

    location / {
        root   /opt/myblog;
        index  index.html index.htm;
    }
    
  3. 重启 Nginx

访问服务器 IP,即可看到博客内容,并且可以正常跳转等,和本地运行的效果一致:

在这里插入图片描述

GitHub Pages

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

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

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

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

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

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

自动化部署

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

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

安装依赖:

npm i scp2 ora@5.0

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('部署成功')
    }
})

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

{
  "host":"替换成你的IP",
  "port":"22",
  "username":"替换成你的用户名",
  "password":"替换成你的密码",
  "path":"/opt/myblog"
}

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

"scripts": {
    ...
    "deploy": "npm run docs:build && node ./deploy.js",
    ...
},

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

$ cd /opt
$ rm -r myblog/

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

> node .\deploy.js
部署成功

注意:

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

使用 GitHub Action

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

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

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

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

希望读者看完阮一峰大大的博客后再往下看。

简单来说,就是我们可以使用别人写好的功能,在每次代码推送到 Git 后,GitHub 会自动帮助我们完成编译构建,自动上传到服务器上,重启服务等等操作

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

服务器准备

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

yum install rsync

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

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

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

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]-----+

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

cat /root/.ssh/id_rsa

笔者这里就不贴出来了,也算是一种敏感信息

然后修改本机关于 ssh 的一些配置:如此便完成了公钥的安装。

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

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

$ RSAAuthentication yes
$ PubkeyAuthentication yes
$ PermitRootLogin yes

最后,重启 SSH 服务:

$ service sshd restart

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/" 

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

  • 第一行:本次流水线的名字,可自行更换
  • 第 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):

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

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

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

部署失败: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]
.....

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

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

注:方法来自二丫讲梵的博客项目。

其他部署方式

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

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

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

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

使用思源笔记插件

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

获取源码

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

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

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

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

  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 博客
  • 通过 GitHub Actions 自动部署 vuepresss 项目到云服务器_居無何的博客-CSDN 博客_vuepress 部署在服务器上
  • rsync exited with code 255.Load key “…“: invalid format Permission denied, please try again._rsync 255_沧州刺史的博客-CSDN 博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1889643.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

1688商品点击率和转化上不去,这9个细节你肯定没优化!

一、点击率上不去的原因 1、主图设计不佳 ✘问题&#xff1a;主图不够吸引人&#xff0c;无法迅速抓住顾客的注意力。 ✔解决方案&#xff1a; 通过店雷达主图分析&#xff0c;查询市场上目前在此关键词下的所有商品主图&#xff0c;一键对比多个关键销售指标数据&#xff…

go-redis源码解析:cluster模式如何选择节点

1. 如何选择节点 1.1. 确定slot 1.1.1. 通过cmdSlot方法确定在哪个槽上, 这一步只是本地计算 首先入口方法_process&#xff0c;先通过cmdSlot方法用key计算此次应该落在哪个槽上 通过crc16sum算法计算key应该属于哪个槽&#xff0c;slotNumber为16384 func Slot(key strin…

【设计模式】策略模式(定义 | 特点 | Demo入门讲解)

文章目录 定义策略模式的结构 QuickStart | DemoStep1 | 策略接口Step2 | 策略实现Step3 | 上下文服务类Step4 | 客户端 策略模式的特点优点缺点 定义 策略模式Strategy是一种行为模式&#xff0c;它能定义一系列算法&#xff0c;并将每种算法分别放入到独立的类中&#xff0c…

Unity Shader技巧:实现带投影机效果,有效避免边缘拉伸问题

这个是原始的projector 投影组件,边缘会有拉伸 经过修改shader 后边缘就没有拉伸了 (实现代码在文章最后) 这个着色器通过检查每个像素的UV坐标是否在定义的边界内,来确定是否应用黑色边框。如果UV坐标处于边缘区域,那么像素颜色会被强制设为黑色,从而在投影图像周围形成一…

技术成神之路:设计模式(三)原型模式

1. 定义 原型模式&#xff08;Prototype Pattern&#xff09;是一种创建型设计模式&#xff0c;旨在通过复制现有对象来创建新对象&#xff0c;而不是通过实例化类的方式。这个模式可以提高对象创建的效率&#xff0c;尤其是在创建对象的过程非常复杂或代价高昂时。 2. 结构 原…

三分钟看懂SMD封装与COB封装的差异

全彩LED显示屏领域中&#xff0c;COB封装于SMD封装是比较常见的两种封装方式&#xff0c;SMD封装产品主要有常规小间距以及室内、户外型产品&#xff0c;COB封装产品主要集中在小间距以及微间距系列产品中&#xff0c;今天跟随COB显示屏厂家中品瑞一起快速看懂SMD封装与COB封装…

Let‘s Encrypt 申请免费 SSL 证书(60天以后自动更新证书)

文章目录 官网文档简介安装 Nginxacme.sh生成证书智能化生成证书 安装证书查看已安装证书更新证书 官网 https://letsencrypt.org/zh-cn/ 文档 https://letsencrypt.org/zh-cn/docs/ 简介 Let’s Encrypt 是一个非营利组织提供的免费SSL/TLS证书颁发机构&#xff0c;旨在促…

滚珠花键促进汽车产业整体升级与发展!

滚珠花键能够实现高效的传动和连接&#xff0c;确保物体在运动过程中的精确位置和稳定性&#xff0c;被广泛应用于机械制造、航空航天、工业自动化、工业汽车、工业机器人、高速铁路等领域。为各个行业的发展提供了重要支持&#xff0c;尤其是在工业汽车领域中&#xff0c;为我…

Spring系统学习-什么是AOP?为啥使用AOP?

问题思考 我们为啥要使用AOP? 来看一个案例&#xff1a; 声明计算器接口Calculator&#xff0c;包含加减乘除的抽象方法 public interface Calculator {int add(int i, int j);int sub(int i, int j);int mul(int i, int j);int div(int i, int j); }public class Calculat…

HNU电子测试平台与工具2_《计算机串口使用与测量》

&#xff08;这个有留word哈哈&#xff09; 4.1 4.2 Linux 操作系统平台 一、实验目的 了解 Linux 系统文件系统的基本组织了解 Linux 基本的多用户权限系统熟练使用 ls、cd、cat、more、sudo、gcc、vim 等基本命令会使用 ls 和 chmod 命令查看和修改文件权限 二、实…

使用机器学习,通过文本分析,轻松实现原本复杂的情感分析

01、案例说明 本期分享案例是&#xff1a;文字分析-情感分析&#xff0c;内容是关于某部电影评论好坏的分析&#xff0c;使用大量的已知数据&#xff0c;通过监督学习的方法&#xff0c;可以对于未知的评论进行判断其为正面还是负面的评价。 对于数据分析&#xff0c;原来都是…

contrastive loss and triplet loss

contrastive loss 想要positive pair 的距离接近0 而triplet loss只需要postive pair的距离 和 negtaive pair 的距离相差m以上, postive pair的距离不一定为0, 所以条件更松驰, 为网络训练更友好一点 reference: https://www.youtube.com/watch?vBcF6FfZHDqA

图书管理系统(含登录验证码操作)

文章目录 登录需求分析登录界面注册功能&#xff1a;登录功能&#xff1a;忘记密码&#xff1a;验证码规则&#xff1a; 图书管理系统需求Book包Book类BookList类 IOperation包IOperation接口查找图书新增图书删除图书显示图书借阅图书归还图书退出系统 User包user类Users类adm…

【Java】如果让你设计一个分布式链路跟踪系统?你怎么做?

一、问题解析 分布式链路跟踪服务属于写多读少的服务&#xff0c;是我们线上排查问题的重要支撑。我经历过的一个系统&#xff0c;同时支持着多条业务线&#xff0c;实际用上的服务器有两百台左右&#xff0c;这种量级的系统想排查故障&#xff0c;难度可想而知。 因此&#…

大数据------JavaWeb------JSP(完整知识点汇总)

JSP 定义 JSP&#xff08;Java Server Pages&#xff09;&#xff0c;即Java服务端页面。它是一种动态的网页技术&#xff0c;其中可以定义HTML、CSS、JS等静态内容&#xff0c;还可以定义Java代码的动态内容JSP HTML Java 说白了JSP就是一个页面&#xff0c;它既可以写HTML标…

昇思第8天

保存与加载 保存模型使用save_checkpoint接口&#xff0c;传入网络和指定的保存路径 要加载模型权重&#xff0c;需要先创建相同模型的实例&#xff0c;然后使用load_checkpoint和load_param_into_net方法加载参数。 使用静态图加速 AI编译框架分为两种运行模式&#xff0c…

红酒与建筑:品味历史与艺术的交汇

在时间的长河中&#xff0c;红酒与建筑都是人类智慧的结晶&#xff0c;它们各自承载着历史的厚重与艺术的韵味。当这两者交汇时&#xff0c;仿佛是一场穿越时空的对话&#xff0c;将我们带入一个既古老又现代、既深沉又温柔的世界。今天&#xff0c;就让我们一起走进这个奇妙的…

鸿翼FEX文件安全交换系统,打造安全高效的文件摆渡“绿色通道”

随着数字经济时代的到来&#xff0c;数据已成为最有价值的生产要素&#xff0c;是企业的重要资产之一。随着数据流动性的增强&#xff0c;数据安全问题也随之突显。尤其是政务、金融、医疗和制造业等关键领域组织和中大型企业&#xff0c;面临着如何在保障数据安全的同时&#…

Windows11 安装MySQL

MySQL下载官网 安装教程参考 选择Windows离线安装 典型安装

springboot大学生请假管理系统-计算机毕业设计源码17453

摘 要 从20年代开始&#xff0c;计算机疯狂的出现在人们的生活以及工作当中&#xff0c;成为人们生活、工作的好帮手&#xff0c;计算机深入到每家每户当中&#xff0c;网络办公&#xff0c;网络教学更是替换了传统手工记录管理的方式&#xff0c;使用计算机办公可以不必局限于…