Docsify可以快速帮助搭建个人博客，你只需要会使用Markdown语法即可使用。借助GitHub or Gitee平台部署上线。参考团队组员优秀模板

❞

Docsify初始

docsify 可以快速帮你生成文档网站。不同于 GitBook、Hexo 的地方是它不会生成静态的 .html 文件，所有转换工作都是在运行时。如果你想要开始使用它，只需要创建一个 index.html 就可以开始编写文档并直接部署在 GitHub Pages

特性

  • 无需构建，写完文档直接发布
  • 容易使用并且轻量 (压缩后 ~21kB)
  • 智能的全文搜索
  • 提供多套主题
  • 丰富的 API
  • 支持 Emoji
  • 兼容 IE11
  • 支持服务端渲染 SSR (示例)

本地安装使用

这边使用的是npm安装，直接全局安装脚手架工具docsify-cli，安装慢的话可以使用中国镜像cnpm安装

安装

npm i docsify-cli -g
复制代码

使用docsify脚手架，直接使用相关命令就行 ，注意这里的文件名约定为docs 也是官方推荐

docsify init docs
复制代码

成功显示如下并且docs 文件目录下会生成以下 3 个文件

Initialization succeeded! Please run docsify serve docs
复制代码
  • index.html 入口文件
  • README.md 会做为主页内容渲染
  • nojekyll用于阻止 GitHub Page 会忽略掉下划线开头的文件

启动

  • docs 同级目录下执行以下命令，运行本地服务，默认地址 http://localhost:3000/
docsify serve docs
复制代码

成功打开默认生成页面如下

编写

设置封面

设置我们的封面图，需要两步

  • 首先在 docs/index.html文件中$docsify属性设置 coverpage: true
//docs/index.html
<script>
  window.$docsify = {
    coverpage: true
  }
复制代码
  • 然后创建 docs/_coverpage.md文件
//docs/_coverpage.md
<img width="180px" style="border-radius: 50%" bor src="https://xxx/logo.jpg"> //图片最好使用个人logo
<p>愿你的指下有![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/04dbfe7a9d91425d9d73d4b32f76161d~tplv-k3u1fbpfcp-watermark.image)![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0fcf4f44683b4d239b127b57f6265b0f~tplv-k3u1fbpfcp-watermark.image)![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/370675f42dab41b188ca8ce7448fa1a5~tplv-k3u1fbpfcp-watermark.image)![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b5ba36f9901940168c9571651e375a88~tplv-k3u1fbpfcp-watermark.image)代码</p>
<p>眼里有星辰</p>
复制代码

就可以生成相对应封面图

定制导航栏

官方支持两种方式，可以在 HTML 里设置，但是链接要以#/ 开头，另外一种通过 Markdown 配置导航，我更推荐的是后者

  • 首先配置 loadNavbar: true
<script>
  window.$docsify = {
    coverpage: true,
    loadNavbar: true
  }
</script>
复制代码

然后创建 docs/_navbar.md文件编写导航

//注：创建相对应的md文件跳转
* 导航一
    * [描述一](test.md)

* 导航二
    * [描述一](/nav2/test1.md)
    * [描述二](/nav2/test2.md)

...
复制代码

创建相对应的文件夹

效果如下

其他操作

以上是docsify基本的操作，也足够我们去编写自己的个人博客，如果想换主题或则更多的操作可以参考官方

部署上线

Gitee

  • 创建博客的相关仓库
  • 推送本地编写好的docs项目，不知道git命令可以去学习下~
//docs同级目录
git init
git add README.md
git commit -m "first commit"
git remote add origin 自己仓库远程地址
git push -u origin master
复制代码

  • 部署Gitee Pages，点击仓库 服务 -> Gitee Pages 设置如下

  • 成功部署后会显示地址如下浏览器输入 http://agoniquan.gitee.io/blog 即可访问，agoniquan 为您的用户名，blog为您的项目名称。

GitHub

  • 创建博客的相关仓库
  • 推送本地编写好的docs项目，不知道git命令可以去学习下~
//docs同级目录
git init
git add README.md
git commit -m "first commit"
git remote add origin 自己仓库远程地址
git push -u origin master
复制代码

  • 部署GitHub Pages，点击仓库 settings -> GitHub Pages 设置如下

  • 成功部署后会显示地址如下浏览器输入 https://250786898.github.io/blog/ 即可访问，250786898 为您的用户名，blog为您的项目名称。

GitHub示例

https://github.com/250786898/blogs


作者：肥仔快乐水
链接：https://juejin.cn/post/6903353799646117902
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。