Docsify+github/gitee搭建个人博客
关于博客
博客作为个人平时知识总结的空间，不仅帮助我们记录学到的知识内容，也能创造一个自己所用的平台，让更多人认识你,在以后的面试中有一张底牌！
从别人的博客上看到过这样一个小故事： up再一次面试时，HR问他：“作为软件从业者，平时有在上写博客的习惯吗？” 然后没等up说出下一句“我在简书上写文章…”，HR微微一笑要清场了我想这位up的清扬洗发水买成了清场…
个人博客工具选型
在建博客之前我们要了解一下博客的分类。
博客在广义上其实可以分为两类，源码搭建博客和静态配置博客。
前者我们需要自己开发，或者从网上找一个开源的博客项目，之后购买一台服务器，搭建自己的博客项目。
而后者，则是使用一些前端工具，将你的文章生成一个个人博客。
而我用的好像是两者的结合...没有那么强大到自己手撕一个博客，我们需要一个搭建工具...
搭建静态博客工具我们改怎么选择呢？ Hexo Sphinx Docsify Jekyll … … hexo、sphinx、Docsify在使用时需要依赖Nodejs，而Jekyll则依赖Ruby，作为爱国青年(其实是懒得接触)，Ruby我是肯定不会考虑的，难么剩下的三种工具该如何选择呢？Hexo和Sphinx有一个问题，我们每次部署前需要将写好的markdown编译成html后再进行发布，而Docsify无需编译，只要自己简单创建简单的路由，即可支持markdown直接发布网站，那么该怎么选择，你懂了吧…
Docsify安装
刚才说到Docsify需要依赖Nodejs，那么我们的电脑首先需要安装它。这个网上教程就太多了，进入nodejs中文官网下载：
接下来我们就可以通过Nodejs下的npm命令安装Docsify了
输入npm i docsify-cli -g
C:>npm i docsify-cli -g
C:Users
pmdocsify -> C:Users
pm
ode_modulesdocsify-cliindocsify
> docsify@4.11.6 postinstall C:UsersyhuAppDataRoaming
pm
ode_modulesdocsify-cli
ode_modulesdocsify
> opencollective-postinstall
Thank you for using docsify!
If you rely on this package, please consider supporting our open collective:
> https://opencollective.com/docsify/donate
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modulesdocsify-cli
ode_moduleschokidar
ode_modulesfsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ docsify-cli@4.4.1
added 204 packages from 90 contributors in 16.035s
输入docsify -v
>docsify -v docsify-cli version: 4.4.1
初始化博客项目
- 在博客目录下执行初始化操作 首先在你的d盘创建一个文件夹比如"myBlog" 然后在cmd窗口通过cd命令进入myBlog文件夹 输入docsify init . 然后输入y 进行确认，此时我们就创建好了初始目录
- 下来我们启动本地服务，查看下效果： 输入本地启动命令docsify serve . Serving D:myBlog now. Listening at http://localhost:3000 在浏览器中访问 初始页面 如果显示如上表示我们初始化博客的工作已经完成，下面的工作就该丰满它了。
主题配置
个人整理了(好吧别人整理好的，但是我们老师说过现有 拿来用就好了...)8种docsify的主题样式，大家可以一 一替换查看效果：
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css"> <link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css"> <link rel="stylesheet" href="//unpkg.com/docsify/themes/dark.css"> <link rel="stylesheet" href="//unpkg.com/docsify/themes/pure.css"> <link rel="stylesheet" href="//unpkg.com/docsify/themes/dolphin.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-defaults.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-defaults.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">
window.$docsify总结
这里为大家整理好了页面有关的配置，修改内容后，即可使用。 (也是别人的啦)
<script>
window.$docsify = {
// 侧边栏支持，默认加载的是项目根目录下的_sidebar.md文件
loadSidebar: true,
// 导航栏支持，默认加载的是项目根目录下的_navbar.md文件
loadNavbar: true,
// 最大支持渲染的标题层级
maxLevel: 4,
// 自定义侧边栏后默认不会再生成目录，设置生成目录的最大层级，建议配置为1或者2
subMaxLevel: 4,
// 外链表达式
externalLinkTarget: _blank,
// auto2top: true,
search: {
maxAge: 86400000,
paths: auto,
placeholder: {
/: 搜索
},
noData: {
/: 找不到结果
},
depth: 4,
},
flexible-alerts: {
style: flat
},
formatUpdated: {YYYY}/{MM}/{DD} {HH}:{mm}:{ss},
// autoHeader: true,
// relativePath: true,
coverpage: true,
homepage: README.md,
disqus: shortname,
alias: {
/.*/_navbar.md: /_navbar.md,
/.*/_sidebar.md: /_sidebar.md,
},
logo: images/logo.png,
name: 标题名字,
repo: 仓库地址,
}
</script>
这里简单说明下几个关键内容：
-
coverpage: true homepage: ‘README.md’ 展示封面内容 repo: ‘你的github仓库地址’ 即可在封面右上角 添加一个git图标挺好看的 loadNavbar: true, 看标签名字就知道，如果要设置顶部标签，就启用 loadSidebar: true, 侧边连是否要显示
Docsify插件总结
自己百度吧...很多好玩的但是有一些网络接口特别慢，慢慢找
侧边栏路由设置
这里重点说下_sidebar.md，这是Docsify中唯一比较麻烦的点。
如果你是一篇文章涵盖古今中外一口气写到底，比如docsify官网那样的，那么_sidebar.md对你无用，Docsify会根据你文章的标题，自动显示侧边栏目录。
但如果你是编程B，同时学习Java、Python、C++等等，每个编程语言下又区分了很多的知识点，那么_sidebar.md是必须的。
_sidebar.md总体有两种模式：
-
通篇只使用根目录下这一个_sidebar.md，拿我的目录来说，因为文章和目录太多了，所以我使用一个统一路由完成所有目录及文章的跳转，如下面的例子： 这里要注意几点： 针对目录的跳转，在尾部需要添加一个/ 每个目录下需要存在一个README.md文件，否则跳转到这个目录会显示404 路径的地址需要严格按照路径设置，但是可以重新改名下。 另外一种比较细致的方式是， 主节点使用一个_sidebar.md进行目录的跳转，在目录目录下单独设置_sidebar.md ,这种二级路由的方式，会比较直观，但存在一个问题，跳转到子_sidebar.md后，就没有返回主目录的入口了…此时我们可以通过顶部设置_navbar.md提供用户跳转到其他目录的操作。
最终效果展示
我们整理好上面的内容，并且把自己之前写好的markdown文件放到自己创建的markdown文件夹下，博客基本就已经搭建完成了。
最后部署到云服务器/码云Pages
参考我的note: 这个是托管在Github上的 这个是布置在百度智能云BCC上的: