部署个人博客到Github Pages

我正在参加「掘金·启航计划」

前言

之前使用vuepress2搭建了一个简单的笔记类博客（具体实现可以查看这篇文章），但是一直没有部署到线上，今天抽时间部署到GitHub上，并记录下部署过程。

具体操作

1. 新建仓库

首先登录GitHub，登录之后，点击头像左侧的加号图标选择弹窗中的“New repository”进行新建，在创建页面输入仓库名，其它的默认，点击下面的按钮创建，仓库就建好了。

2. 在项目config.ts文件中配置base路径

module.exports = {
  base: '/tqblogs/',
}

3. 打包上传

在项目根目录下创建一个自动部署脚本 deploy.sh(该文件用于将项目的静态文件部署到Github Pages上，让用户可以通过https://用户名.github.io/仓库名 来访问)

# 生成静态文件，静态文件会被生成在docs/.vuepress/dist目录下
npm run build

# 进入docs/.vuepress/dist目录，初始化Git仓库
cd docs/.vuepress/dist
git init

# 将docs/.vuepress/dist目录下的所有文件添加到Git仓库中
git add -A
# 提交更改并添加提交信息    
git commit -m 'deploy'

# 将本地生成的静态文件推送到Github Pages上(这里使用SSH连接，也可以换成https)
git push -f git@github.com:xxx/xxx.git master   

echo "部署成功"

注：在Windows系统下需要使用Git运行该脚本文件（需要先安装git软件），在该项目根目录文件下右键点击选择Git Bash Here，打开命令运行工具，执行sh deploy.sh命令。

上传成功后，需要在仓库设置页面链接，并打开设置页面，配置Pages

最终生成的页面链接

遇到的问题

一、使用Git时没有设置用户的邮箱地址和用户名信息

解决方法：
输入以下命令，设置邮箱地址和用户名信息

git config --global user.email "<you@example.com>"
git config --global user.name "Your Name"

注：使用自己的githup账号使用的邮箱和用户名来进行设置

二、Git在使用SSH协议连接Github时，没有找到有效的SSH私钥来进行认证

Github需要用户在本地生成SSH密钥对，并将公钥添加到Github账号的SSH设置中，以便于在使用SSH协议时进行身份认证。

解决方法：

• 在C盘下右键点击选择Git Bash Here，打开命令运行工具，输入命令：ssh-keygen -t rsa -b 4096 -C "your_email@example.com"生成公钥和私钥的文件（文件生成在C:/Users/your_username/.ssh/）

公钥文件的文件名通常是 id_rsa.pub，而私钥文件的文件名通常是 id_rsa

• 公钥添加到您的 Github 账户中

复制公钥内容，在 GitHub 的设置页面，选择 SSH and GPG Keys，然后单击 New SSH Key; 输入名称，然后将公钥内容粘贴到 Key 字段中并保存。

• 完成以上步骤后，就可以通过 SSH 连接