vuePress-thmee-hope2部署服务器教程

前言

这篇文章主要是完善上篇文章部署服务器的部分，由于最近刚买了服务器，所以才有了今天的内容。废话不多说，下面是正文。

文章同步在公众号：萌萌哒草头将军，欢迎关注

准备工作

1.生成密钥对

在服务器或者其他电脑生成一堆ssh密钥对，命令如下：

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

如果你不想覆盖电脑本身的原始密钥，可以使用这个命令自定义名称：

ssh-keygen -t rsa -b 4096 -C "you_self@example.com" -f ~/.ssh/id_rsa_github

后面新增了 -f 参数，这是指定密钥对的名称和路径，一路回车，就会在指定位置生成密钥对：公钥id_rsa_github.pub、私钥id_rsa_github，

总之你现在已经得到一个私钥一个公钥。

接着你需要将公钥放置在authorized_keys中，如果没有该文件就创建一个。

vi authorized_keys

按下i进入编辑模式，复制之后，按下 esc，输入:wq保存并推出

2. 新增SSH Key

接着你需要进入github对应的博客仓库，选择Settings > Deploy keys > add deploy Key。

deploy key

将你的私钥保存在这里，然后点击保存。

3. 配置 action 变量

接着选择当前仓库的Settings > Secrets and variables > actions > new repository secret

创建名为SERVER_USER的变量，值为你的服务器的登录名称。

创建名为SERVER_SSH_KEY的变量，值为刚才生成的私钥。

如果需要创建名为SERVER_HOST的变量，值为你的主机地址或者域名。

保存之后进行下一步。

注意: 变量名自定义即可，和后面保持一致即可

配置 github action

上篇中我们已经配置了github action，每次提交代码之后自动部署最新的内容。

现在我们需要在末尾加上下面的内容，主要是将 action 打包的内容通过scp功能上传到服务器的指定文件夹

- name: 上传文档到服务器
  uses: appleboy/scp-action@v0.1.1
  with:
    host: ${{ secrets.SERVER_HOST }} # 这个你可以写死，也可以像我这样
    username: ${{ secrets.SERVER_USER }}
    key: ${{ secrets.SERVER_SSH_KEY }}
    source: ./src/.vuepress/dist* # 上传的源路径
    target: /home/blog/ # 临时上传目录

完成的配置如下：

name: 部署文档

on:
  push:
    branches:
      # 确保这是你正在使用的分支名称
      - master

permissions:
  contents: write

jobs:
  deploy-gh-pages:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          fetch-depth: 0
          # 如果你文档需要 Git 子模块，取消注释下一行
          # submodules: true

      - name: 设置 Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: 安装依赖
        run: npm install --frozen-lockfile

      - name: 构建文档
        env:
          NODE_OPTIONS: --max_old_space_size=8192
        run: |-
          npm run docs:build
          rm -rf .gitignore
          > src/.vuepress/dist/.nojekyll

      - name: 部署文档
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          # 这是文档部署到的分支名称
          branch: gh-pages
          folder: src/.vuepress/dist

      - name: 上传文档到服务器
        uses: appleboy/scp-action@v0.1.1
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          source: ./src/.vuepress/dist* # 上传的源路径
          target: /home/blog/          # 临时上传目录

配置服务器 nginx

完事之后，进入自己的服务器，修改nginx.conf文件，查看配置文件路径的命令如下：

nginx -t

输出：nginx: configuration file /etc/nginx/nginx.conf test is successful，里面的路径即是配置文件路径。

根据自己的公共路径配置即可。由于这是我的第二个博客，加了blogs2作为标识了，所以还需要添加静态文件路径的location，完成的配置如下，可以参考下。

server {
    listen 80;
    server_name blog.mmdctjj.top;

    # 指定博客的根目录
    root /home/blog/src/.vuepress/dist;
    index index.html;

    # 主站根目录的默认处理
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 处理 /blogs2/* 静态资源请求
    location /blogs2/ {
        root /home/blog/src/.vuepress/dist; # 指定文件所在目录
        rewrite ^/blogs2(/.*)$ $1 break;    # 去掉 /blogs2 前缀
        try_files $uri $uri/ =404;         # 找不到时返回 404 错误
    }

    # 错误页面配置
    error_page 404 /404.html;
    location = /404.html {
        root /home/blog/src/.vuepress/dist;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html; # 使用 Nginx 默认的 50x 错误页面
    }
}

配置完成后重启nginx，命令如下：

nginx -s reload

结语

好了，今天的文章就到这里了希望可以帮助到你，如果对你有帮助，也可以关注我的公众号：萌萌哒草头将军