十分钟就能搭建的个人博客,含部署上线

13,515 阅读3分钟

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

Docsify初始

docsify 可以快速帮你生成文档网站。不同于 GitBookHexo 的地方是它不会生成静态的 .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 = {
    coverpagetrue
  }
  • 然后创建 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 = {
    coverpagetrue,
    loadNavbartrue
  }
</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