大家好,今天给大家分享自己最近做的趣事,用vuepress搭建blog网站!挺有意思的,有感兴趣的同学可以去vuepress官网 (opens new window)学习!今天主要给大家分享如何将网站部署到github上!

# 第一步:创建GitHub仓库

注意:没有github账号的同学可以在GitHub官网 (opens new window)注册,登录!

# 登录进github后,

1.点击创建新仓库点击创建新仓库

2.这里创建的仓库名必须是username.github.io username就是你的GitHub用户名

在这里插入图片描述 3.下面的添加文件可以什么都不选直接创建仓库

# 第二步.给仓库配置ssh key

这里我们需要使用到git工具,没有接触的小伙伴可以到git工具网站 (opens new window)去下载!

# 用git工具生成密钥

1.打开git 客户端输入如下命令 一路回车下去

ssh-keygen -o

一般生成的密钥会被存放在user/username/.ssh文件下 如:在这里插入图片描述 2.使用如下命令将key复制到剪贴板上(因为当你直接打开文件复制使用会出现格式问题)

clip < ~/.ssh/id_rsa.pub

如果有小伙伴不太理解的,可以上下面博主推荐的官方网站去深入了解学习!如何用git生成ssh密钥 (opens new window) 3.将剪贴板的ssh key粘贴到仓库中去 在这里插入图片描述 在这里插入图片描述 成功之后就是如下 在这里插入图片描述

# 第三步 在项目文件中创建deploy.sh文件

在这里插入图片描述 大家可以去vuepress部署教程 (opens new window) 学习怎么部署! 我们先看看官网的部署教程 在这里插入图片描述 在这里插入图片描述

注意博主标红的位置 第一处:我在package.json文件中配置了build命令 在这里插入图片描述 第二处 我的文件的.vuepress文件是放在src文件下的 在这里插入图片描述 第三处:要改为自己仓库的用户名

# 第四步 运行deploy文件部署网站到GitHub仓库了

1.在vscode终端选择bash终端运行.sh文件

在这里插入图片描述 然后进入对应的项目目录,执行文件 在这里插入图片描述 最后等待运行结束我们到github上看我们的仓库 在这里插入图片描述 成功的推送部署好了 就可以通过 https://username.github.io/访问了

博主的blog地址:https://wjwyyds.github.io/ 小吴同学的博客 (opens new window)欢迎大家访问学习

总结:GitHub部署的网站访问速度较慢,适合学习使用!(毕竟不花钱) 大家也可以买服务器来部署!!!