博客部署
# 博客部署
# 说明
该博客forkxugaoyi/vuepress-theme-vdoing (opens new window).替换原有文章内容和个人信息形成。并且基于Github Pages部署,图片基于https://picx.xpoet.cn/ (opens new window)上传,集成Gitalk参考资料 (opens new window)。
# 一、前提准备
# 1.fork项目
访问vuepress-theme-vdoing (opens new window),完成项目创建。
# 2配置项目Github pages
进入项目仓库主页。
注:有一个gh_page的分支,发布的页面会提交在这个页面。需要在配置github pages时注意。 进入
Setting
配置页面,完成Pages分支的配置
# 3.添加项目secret
首先创建具有仓库访问权限的access token (opens new window)。
然后配置到项目的Setting>General>Security>Secrets>Actions
添加键值对,name默认ACCESS_TOKEN
。
见项目文件
.github>workflows>ci.yml
文件,会将键值对取出作为执行deploy.sh的参数。
# 4.配置GitTalk
参考:https://xugaoyi.com/pages/1da0bf9a988eafe5 (opens new window)
首先创建一个公共repository,这边创建blogComment,需要配置在docs>.vuepress>config.js
关于组件vuepress-plugin-comment
的配置中。
本次创建Application页面及填写内容如下:
填写完成页面会跳转,并显示Client ID 和 Client Secret。这两个值需要配置在docs>.vuepress>config.js
关于组件vuepress-plugin-comment
的配置中。
# 5.配置图床https://picx.xpoet.cn/ (opens new window)
首先创建一个公共仓库作为存储空间,这边为imageStore。
然后配置上文创建的access token,即可上传文件,并获取链接地址。
# 二、修改内容
# 遇到问题
首页顶部目录点击404
问题原因:需要添加目录页,见原项目00.目录页处理
# 三、提交
等待部署完成
# 遇到问题
部署成功,但是访问,资源找不到
问题原因:因为访问路径为:https://wanglantian.github.io/Blog/,需要在config.ts中配置根目录
base
为Blog
。注意大小写。
访问成功:
注:访问路径区分大小写