本站搭建步骤

一、安装Node.js

提示

安装node.js是在CentOS7上的步骤，在windows的环境下同理，安装后需要配置环境变量。

建议安装最新的LTS版本的Node.js

1. 下载node

必须安装12以上的版本，这里我选择了最新的LTS版本，v16

wget https://registry.npmmirror.com/-/binary/node/v16.15.0/node-v16.15.0-linux-x64.tar.gz

2. 解压并重命名文件夹

tar -xvf node-v16.15.0-linux-x64.tar.gz
mv node-v16.15.0-linux-x64 node

3. 添加环境变量

vim /etc/profile

export NODE_HOME=/usr/local/node  
export PATH=$NODE_HOME/bin:$PATH

source /etc/profile

4. 验证结果

node -v
npm -v
#发现npm的版本是6，需要升级到8
npm install npm -g

二、git ssh配置

提示

git ssh配置是CentOS7上的操作，windows同理。

1. 将git和github个人信息进行绑定：

yum install git
git config --global user.name "xwzbupt"
git config --global user.email "xwze@bupt.cn"
git config --list

2. 生成公钥：

ssh-keygen -t rsa -C "xwze@bupt.cn"
cd ~/.ssh
vim id_rsa.pub

3. 打开github个人账号，在设置中找到github ssh，然后粘贴密钥信息。
4. 验证是否成功

ssh -T git@github.com

配置这一步的目的是，不再需要在机器上进行繁琐的github账号的验证工作。

三、生成项目

在github上创建仓库personal-site，然后选择ssh的方式克隆到本地，此时就已经将local和remote端连起来了。

选择项目放置的路径，在该路径下运行如下命令，拉取github的空项目以及将local和remote端连起来。

git clone git@github.com:xwzbupt/personal-site.git

进入该空项目的路径中，初始化该项目。初始化以及后续的开发步骤见网站开发步骤。

开发完毕后，可以运行pnpm docs:dev来生成开发服务器，接着就可以通过浏览器访问localhost:8080来访问网站了。此时如果修改了源代码，保存代码后开发服务器也会进行热更新。

如果在开发环境中看到项目无误后，可以构建项目进行布署。构建项目的命令是pnpm docs:build。

四、 开发和布署项目

提示

有三种布署项目的方式，其中最推荐的也是我采用的方式是3。

1. 云服务器上开发和构建，并布署在云服务器上
2. 在本地操作系统开发和构建，将build后的dist目录中的内容布署到云服务器上
3. 在本地操作系统开发，利用Github Actions在Github上构建，并将build后的dist目录放到gh-pages分支上。此时可以选择布署到Github Pages上，也可以在云服务器上拉取该分支内容并部署到该云服务器上。该步骤均为脚本自动执行。

4.1 CentOS上开发、构建和布署

在云服务器上开发，需要在云服务器上配置NodeJS以及pnpm的环境，但是在构建项目的时候，云服务器的内存太小，会出现OOM的问题，虽然可以修改环境变量调整某个参数，这样不仅麻烦但还是有失败的可能。所以不太推荐用这种方法来开发。

4.2 本地开发，手动构建和布署

在本地开发项目，使用pnpm docs:dev生成开发服务器，访问localhost:8080预览网站，准确无误后执行pnpm docs:build命令构建项目。将构建好的dist目录扔到云服务器中，将Nginx服务器的root指向该dist文件夹。

4.3 本地开发，自动构建和布署

在本地开发项目，使用pnpm docs:dev生成开发服务器，访问localhost:8080预览网站，无误后将代码push到github仓库中，github actions会自动执行yml脚本。脚本代码如下所示：

name: 部署文档

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

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


      - name: 安装 pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 7
          run_install: true


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

      - name: 安装依赖
        run: pnpm install --frozen-lockfile
      
      # - name: 安装typescript
      #   run: pnpm install typescript

      - name: 构建文档
        env:
          NODE_OPTIONS: --max_old_space_size=4096
        run: pnpm run docs:build

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

      # 切换分支
      - name: Checkout
        uses: actions/checkout@master
        with:
          ref: gh-pages

	  # 下面secrets的静态变量对应的内容需要在github配置
      - name: Deploy to Aliyun Server
        uses: easingthemes/ssh-deploy@v2.1.5
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_KEY }}
          ARGS: "-avz --delete"
          SOURCE: ${{ secrets.SOURCE }}
          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
          REMOTE_USER: ${{ secrets.USER_NAME }}
          TARGET: ${{ secrets.TARGET }}

配置nginx相关信息可以参考这一篇博客，唯一需要注意一点的是，github仓库中gh-pages分支存放的就是dist文件夹的东西，切换到该分支，将该分支pull到云服务器中，修改nginx的conf文件，将root指向dist。

五、TroubleShooting

https://github.com/easingthemes/ssh-deploy/issues/18