假期折腾记(二)——利用vuepress主题vdoing建立本地wiki站点并托管到Github page

Posted on 2021-10-06  472 Views


一直觉得自己原本的wiki站点没有好看的UI,事实上,设计还是很重要的,特别是对于wiki来说,好看的设计能让人多看几眼,背单词的时候也不会那么痛苦。正好之前看到小伙伴的博客上的一个推荐,觉得很好看,心心念念了有一阵子,所以打算试试看尝尝鲜。

有好几种建立静态wiki站点的方法,可以选择将vuepress安装在VPS上,再设置反向代理让域名指向localhost;也可以在本地安装vuepress,再将网页内容上传到VPS或GitHub page等平台。本来想选择将文件上传到VPS,利用nginx配置多站点的,但是折腾了一天弄得nginx跑不起来了-_-|||,于是打算采用上传到github page的方法。

先记录一下用nginx配置多站点的参考教程:
nginx配置二级域名
Nginx在同一台服务器托管两个网站
Hexo 博客部署到 VPS
将 Hexo 和 Vuepress 静态资源推送至 Ubuntu
教程都挺详细的,就是我太菜了……

进入正文,本地部署vuepress静态博客并发布到github page:
先进入vuepress的官方文档,按照步骤安装vuepress,可以在VS code的terminal里面跑。(注意一下添加scripts的时候,json文件大括号里面行的末尾是要添加逗号的,我添加的时候漏掉了就跑不起来)。

接下来可以安装你喜欢的主题了。打算用之前提到的vdoing的主题,也是按照官方文档跑一遍流程。我用的作者推荐的clone整个项目再替换内容的方法,教程很详细,无需赘述。

在git bash里面运行npm run dev就能在本地预览网页,运行npm run deploy能上传到GitHub page。

不过我的git太久没用了,ssh连接的时候出现了问题,这里详细记录一下:
用命令ssh -T git@github.com报错git@github.com: Permission denied (publickey).,明显是ssh key出问题了,这时候如果强行deploy,会出现如下情况:

git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

首先用命令git config --global user.name查看是否登录,跑出正确的用户名说明已经登录上了git.

那就是ssh连接的问题了。

看到一篇Git学习:如何登陆以及创建本地代码仓库、并提交本地代码至Github,决定依样画葫芦试一试:

原来还要在wiki的文件夹里新建代码仓库的吗?这是什么鬼Σ(っ °Д °;)っ

输入git init初始化文件夹,这样会在文件夹里生成.git文件夹(小白我有点搞不懂为啥要这样套娃,是为了方便版本管理吗?)

然后要创建ssh:

ssh,简单来讲,就是一个秘钥,其中,id_rsa是你这台电脑的私人秘钥,不能给别人看的,id_rsa.pub是公共秘钥,可以随便给别人看。把这个公钥放在GitHub上,这样当你链接GitHub自己的账户时,它就会根据公钥匹配你的私钥,当能够相互匹配时,才能够顺利的通过git上传你的文件到GitHub上。

用命令ssh-keygen -t rsa -C "youremail"即可生成(注意youremail要替换成git 还是 github注册的时候的默认邮箱)。cd ~/.ssh切换到密钥文件位置,cat id_rsa.pub可以查看文件内容。查看内容并复制,在GitHub上的repository的setting中找到“deploy keys”,在里面添加。

在git bash中用上面提到的ssh命令测试,如果出现你的github账号用户名,说明已经成功连接。

这里再记录一个踩坑,我在deploy后一直收到github的错误提示邮件,还是报错Author identity unknown、Process completed with exit code 128.。遂上网google之,发现一篇神帖[原创]VuePress教程之部署到Github Action,里面遇到了几乎一样的问题,并且作者分享了他的deploy.sh文件,照猫画虎修改下,再deploy的时候就能成功上传了。

不过我发布的是在repository的master分支,而原本的设置和帖子里的都是发布到ph-pages分支的,我想着这还要去设置里面再改,有点麻烦,就在deploy.sh文件里改成了master。这里也把文件分享出来:

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成的文件夹
cd docs/.vuepress/dist

msg='deploy'
githubUrl=git@github.com:yourname/yourname.github.io  # 按你的代码仓库信息进行修改

git init
git add -A
git commit -m "${msg}"
git push -f $githubUrl master:master # 推送到github;master可以改成gh-pages等自定义分支

cd -
rm -rf docs/.vuepress/dist

里面的内容已经做了精简,仅仅适用于发布到github page的master分支这一种情况。要选择其他部署方式请参考主题作者的原设置。(虽然我觉得里面的部分注释有些不够清楚?)

参考+致谢:

以及正文内提到的所有文章,一并致谢~