前言: 上一篇文章我们本地已经搭建好了个人博客,我想部署到免费的Github Page上,该如何操作呢?
1.我们现在Github上创建一个新的仓库
- 我们先找到Repositories上的new按钮,点击
- 然后填入自己的博客名字,最后点击创建
这样我们就成功的创建了一个新的仓库
2.我们在项目中配置代码
我们首先要在config.js中配置一个base路径
module.exports = {
// 路径名为 "/<REPO>/"
base: '/blog/',
//...
}
最终的config.js如下所示
module.exports = {
title: 'person blog',
description: '个人博客',
base: "/blog/",
theme: 'reco',
themeConfig: {
type: "blog",
subSidebar: 'auto',
logo: "/avatar.png", // logo图片
authorAvatar: '/avatar.png', // 头像
search: true, // 搜索配置
nav: [
{text: "首页", link: "/"},
{text: 'Github',link: "https://github.com/fruitGirl"}
],
sidebar: { // 侧边栏
"/css/": [
{
title: "css", // 必要的
sidebarDepth: 2, // 可选的, 默认值是 1
children: [
"重排重绘"
],
},
],
},
valineConfig: {
appId: '...',// your appId 我自己的就不写了
appKey: '...', // your appKey 我自己的就不写了
},
blogConfig: {
category: {
location: 4, // 在导航栏菜单中所占的位置,默认2
text: '分类' // 默认文案 “分类”
},
tag: {
location: 3, // 在导航栏菜单中所占的位置,默认3
text: '文章' // 默认文案 “标签”
},
socialLinks: [ // 信息栏展示社交信息
{ icon: 'reco-github', link: 'https://github.com/fruitGirl' },
{ icon: 'reco-juejin', link: 'https://juejin.cn/user/325111173876509/posts' }
]
},
},
plugins: [ // 插件
[
"vuepress-plugin-cursor-effects", // 鼠标点击特效
{
size: 2, // size of the particle, default: 2
shape: 'circle', // shape of the particle, default: 'star'
zIndex: 999999999 // z-index property of the canvas, default: 999999999
},
],
[ // 彩带
'ribbon',
{
size: 90, // width of the ribbon, default: 90
opacity: 0.8, // opacity of the ribbon, default: 0.3
zIndex: -1, // z-index property of the background, default: -1
},
],
['@vuepress-reco/vuepress-plugin-kan-ban-niang',{ // 看板娘
theme: ["wanko"],
clean: false,
info: 'https://github.com/fruitGirl',
messages: {
welcome: '欢迎来到困芽芽的小空间',
home: '心里的花,我想要带你回家',
theme: '好吧,希望你能喜欢我的其他小伙伴。',
close: '你可以选择关闭我哦'
}
}],
],
}
我们需要在根目录(blog)下创建一个scripts文件夹,下面创建一个deploy-gh.sh脚本
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
yarn build
# 进入生成的文件夹
cd docs/.vuepress/dist
# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
# 把上面的 <USERNAME> 换成你自己的 Github 用户名,<REPO> 换成仓库名,比如我这里就是:
git push -f git@github.com:fruitGirl/person-blog.git master:gh-pages
cd -
为了发布上去方便,我们在package.json中配置一下
"scripts": {
"deploy-gh": "GH=1 yarn build && bash scripts/deploy-gh.sh"
},
执行yarn deploy-gh部署到Github Page上
找到Settings->Pages查看博客地址就可以了