在github上建2个仓库
仓库1，文档源文件（markdown），可以是私有或公有仓库。
仓库2，build生成的文件（发布为github pages），公有仓库。
克隆模板
https://github.com/xugaoyi/vdoing-demo-repository
修改config.js
- 主要是base属性，部署到github pages时用到，要和仓库名字一致。
- markdown属性，主要是解决markdown中的本地文件无法访问到的问题。
markdown中图片保存路径demo
配置文件
module.exports = {title: "知识库演示",description: 'web前端技术博客,简洁至上,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。', // 描述,以 <meta> 标签渲染到页面html中base: '/vdoing-test/', head: [['link', { rel: 'icon', href: '/img/favicon.ico' }],['meta', { name: 'keywords', content: '前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown'}],['meta', { name: 'theme-color', content: '#11a8cd'}], // 移动浏览器主题颜色],markdown: {lineNumbers: true, // 代码行号extendMarkdown: md => {md.use(require("markdown-it-disable-url-encode"));}},
deploy.sh
一键编译，发布静态页到gh-pages分支。
发布到gh-pages分支，github发现有新推送后，会自动部署。
#!/usr/bin/env sh# 确保脚本抛出遇到的错误
set -e# 生成静态文件
npm run build# 进入生成的文件夹
cd docs/.vuepress/dist# deploy to github
# echo 'b.xugaoyi.com' > CNAME
if [ -z "$GITHUB_TOKEN" ]; thenmsg='deploy'githubUrl=git@github.com:kamibababa/vdoing-test.git
elsemsg='来自github actions的自动部署'githubUrl=https://xugaoyi:${GITHUB_TOKEN}@github.com/xugaoyi/vdoing-demo-repository.gitgit config --global user.name "xugaoyi"git config --global user.email "894072666@qq.com"
fi
git init
git add -A
git commit -m "${msg}"
git push -f $githubUrl master:gh-pages # 推送到github# # deploy to coding
# echo 'www.xugaoyi.com\nxugaoyi.com' > CNAME # 自定义域名
# if [ -z "$CODING_TOKEN" ]; then # -z 字符串 长度为0则为true；$CODING_TOKEN来自于github仓库`Settings/Secrets`设置的私密环境变量
# codingUrl=git@e.coding.net:xgy/xgy.git
# else
# codingUrl=https://HmuzsGrGQX:${CODING_TOKEN}@e.coding.net/xgy/xgy.git
# fi
# git add -A
# git commit -m "${msg}"
# git push -f $codingUrl master # 推送到codingcd - # 退回开始所在目录
rm -rf docs/.vuepress/dist
导航页配置示例
module.exports = [{text: '首页', link: '/'},{text: '前端',link: '/web/', //目录页，vdoing主题新增的配置项，有二级导航时，可以点击一级导航跳到目录页items: [{text: '前端文章', items: [{text: 'JavaScript', link: '/pages/8143cc480faf9a11/'}, // 注意link结尾有斜杠和没有斜杠的区别{text: 'Vue', link: '/pages/802a1ca6f7b71c59/'},]},{text: '学习笔记', items:[{text: '《JavaScript教程》笔记', link: '/note/javascript/'},{text: '《ES6 教程》笔记', link: '/note/es6/'},{text: '《Vue》笔记', link: '/note/vue/'},{text: '《TypeScript 从零实现 axios》', link: '/note/typescript-axios/'},{text: '小程序笔记', link: '/note/wx-miniprogram/'},]}]},{text: '页面', link: '/ui/',items: [{text: 'HTML', link: '/pages/8309a5b876fc95e3/'},{text: 'CSS', link: '/pages/0a83b083bdf257cb/'},]},{text: '技术',link: '/technology/',items: [{text: '技术文档', link: '/pages/9a7ee40fc232253e/'},{text: 'GitHub技巧', link: '/pages/4c778760be26d8b3/'},{text: 'Nodejs', link: '/pages/117708e0af7f0bd9/'},{text: '博客搭建', link: '/pages/41f87d890d0a02af/'},]},{text: '归档', link: '/archives/'}
]
目录页
要有目录页
其中key字段要和其他对应的某个目录一致
pageComponent: name: Cataloguedata: key: 01.前端imgUrl: /img/web.pngdescription: JavaScript、ES6、Vue框架等前端技术
title: 前端
date: 2020-03-11 21:50:53
permalink: /web
sidebar: false
article: false
comment: false
editLink: false
----图像的读取以及显示)
)
