部署个人博客到Github Pages

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

前言

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

具体操作

1. 新建仓库

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

image.png

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

image.png

image.png

最终生成的页面链接

遇到的问题

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

image.png

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

git config --global user.email "<[email protected]>"
git config --global user.name "Your Name"

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

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

image.png

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

解决方法:

  • 在C盘下右键点击选择Git Bash Here,打开命令运行工具,输入命令:ssh-keygen -t rsa -b 4096 -C "[email protected]"生成公钥和私钥的文件(文件生成在C:/Users/your_username/.ssh/)

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

image.png

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

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

image.png

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

猜你喜欢

转载自juejin.im/post/7243321262461337659