Docsify+github/gitee搭建个人博客

关于博客

之前在群里听过这么一个笑话，一个大佬的知乎文章被别人剽窃，然后他申诉举报该用户。然后第二天，他和那个人的账号都被封停了，因为举报提供的原文链接中有自己公众号的二维码(宣传自己的公众号…)，多么反转的一个故事。。。

博客作为个人平时知识总结的空间，不仅帮助我们记录学到的知识内容，也能创造一个自己所用的平台，让更多人认识你,在以后的面试中有一张底牌！

从别人的博客上看到过这样一个小故事：
up再一次面试时，HR问他：“作为软件从业者，平时有在CSDN上写博客的习惯吗？”

up回答:“没有，CSDN上满篇的广告。”

然后没等up说出下一句“我在简书上写文章…”，HR微微一笑要清场了我想这位up的清扬洗发水买成了清场…

其实很早就开始在CSND上关注一些大佬们自己搭建博客写文章的操作(看他们行云流水的操作让我羡慕的不要不要的…)，在大二上的寒假悄悄的学习linux(其实也没学会多少，皮毛还是有的)。在大二下开了互联网前端，又因为疫情在宿舍上网课，实在无聊(主要原因玩LOL 王者老被虐)想着边学边练，更重要的是碰上百度智能云活动(乞丐版BCC贼便宜并且新人域名BCD服务.top域名第一年就一块钱),于是这个页面就有了

个人博客工具选型

在建博客之前我们要了解一下博客的分类。

博客在广义上其实可以分为两类，源码搭建博客和静态配置博客。

前者我们需要自己开发，或者从网上找一个开源的博客项目，之后购买一台服务器，搭建自己的博客项目。

而后者，则是使用一些前端工具，将你的文章生成一个个人博客。

而我用的好像是两者的结合...没有那么强大到自己手撕一个博客，我们需要一个搭建工具...

搭建静态博客工具我们改怎么选择呢？

Hexo

Sphinx

Docsify

Jekyll

… …

hexo、sphinx、Docsify在使用时需要依赖Nodejs，而Jekyll则依赖Ruby，作为爱国青年(其实是懒得接触)，Ruby我是肯定不会考虑的，难么剩下的三种工具该如何选择呢？Hexo和Sphinx有一个问题，我们每次部署前需要将写好的markdown编译成html后再进行发布，而Docsify无需编译，只要自己简单创建简单的路由，即可支持markdown直接发布网站，那么该怎么选择，你懂了吧…

Docsify安装

刚才说到Docsify需要依赖Nodejs，那么我们的电脑首先需要安装它。这个网上教程就太多了，进入nodejs中文官网下载：
http://nodejs.cn/download/

接下来我们就可以通过Nodejs下的npm命令安装Docsify了

输入npm i docsify-cli -g

C:>npm i docsify-cli -g
C:\Users\npm\docsify -> C:\Users\npm\node_modules\docsify-cli\bin\docsify> docsify@4.11.6 postinstall C:\Users\yhu\AppData\Roaming\npm\node_modules\docsify-cli\node_modules\docsify
> opencollective-postinstallThank you for using docsify!
If you rely on this package, please consider supporting our open collective:
> https://opencollective.com/docsify/donatenpm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\docsify-cli\node_modules\chokidar\node_modules\fsevents):
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 -vdocsify-cli version:4.4.1

初始化博客项目

在博客目录下执行初始化操作

首先在你的d盘创建一个文件夹比如"myBlog"
然后在cmd窗口通过cd命令进入myBlog文件夹

输入docsify init .

然后输入y 进行确认，此时我们就创建好了初始目录
下来我们启动本地服务，查看下效果：

输入本地启动命令docsify serve .
```
Serving D:\myBlog now.
Listening at http://localhost:3000
```
在浏览器中访问 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或者2subMaxLevel: 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，拿我的目录来说，因为文章和目录太多了，所以我使用一个统一路由完成所有目录及文章的跳转，如下面的例子：

这里要注意几点：
1. 针对目录的跳转，在尾部需要添加一个/
2. 每个目录下需要存在一个README.md文件，否则跳转到这个目录会显示404
3. 路径的地址需要严格按照路径设置，但是可以重新改名下。
另外一种比较细致的方式是，主节点使用一个_sidebar.md进行目录的跳转，在目录目录下单独设置_sidebar.md ,这种二级路由的方式，会比较直观，但存在一个问题，跳转到子_sidebar.md后，就没有返回主目录的入口了…此时我们可以通过顶部设置_navbar.md提供用户跳转到其他目录的操作。

最终效果展示

我们整理好上面的内容，并且把自己之前写好的markdown文件放到自己创建的markdown文件夹下，博客基本就已经搭建完成了。

最后部署到云服务器/码云Pages

参考我的note: 点这里
这个是托管在Github上的
这个是布置在百度智能云BCC上的:lovemiaow.top

个性化方面，点赞关注，加我qq或者私信我(☆▽☆)