30分钟快速搭建并部署一个免费的个人博客

1前言

现如今网上有许多完善的博客平台，如博客园、掘金、思否、知乎等。有人会说为什么现在网上有这么多成熟的博客平台，你还要浪费时间搭建一个自己的博客系统呢？首先我相信每一个程序员都会想要拥有一个属于自己的博客系统，其次使用Docsify能够快速构建一个自己的博客文档系统，最后我们可以通过Github Pages免费托管我们的博客系统文档（连域名和服务器都省了）这样的一次难得的实战机会我们又怎么能够错过呢。废话不多说，接下来步入正题。

2什么是Docsify？

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

3Docsify的特性

• 无需构建，写完文档直接发布

• 容易使用并且轻量 (压缩后 ~21kB)

• 智能的全文搜索

• 提供多套主题

• 丰富的 API

• 支持 Emoji

• 兼容 IE11

• 支持服务端渲染 SSR (示例[1])

4Docsify使用配置指南

Docsify使用指南（打造最快捷、最轻量级的个人&团队文档）👉[2]

5轻量&完善开箱即用的Docsify模板

Docsify-Guide是一个简洁、完善、开箱即用的Docsify模板基本上可以满足百分之八十多的个人和团队需求，你可以按照文章中的Docsify环境配置教程把运行Docsify所需要的环境配置起来，通过命令即可查看效果（配置环境顺利的话只要十来分钟）有帮助的话别忘了给作者来一个Star支持一下哦🤞。

• 模板源码地址：github.com/YSGStudyHar…[3]

• 模板预览地址：ysgstudyhards.github.io/Docsify-Gui…[4]

6选择对应的存储库单击设置（Settings）

7点击左侧的Pages

8选择对应分支的发布源文件夹

9保存发布即可访问

10个人博客在线预览

Github Pages在线访问地址：ysgstudyhards.github.io/Docsify-Gui…[5]

参考资料

[1]

https://github.com/docsifyjs/docsify-ssr-demo: https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fdocsifyjs%2Fdocsify-ssr-demo

[2]

http://mp.weixin.qq.com/s?__biz=MzIxMTUzNzM5Ng==&mid=2247484187&idx=1&sn=13960a4639320a971b52f185b78ae54b&chksm=97529f80a0251696c8d712c1cc0061bc497525e417067db572d7f8281cfa65005ec559fc04e6&scene=21#wechat_redirect: https://link.juejin.cn/?target=http%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzIxMTUzNzM5Ng%3D%3D%26mid%3D2247484187%26idx%3D1%26sn%3D13960a4639320a971b52f185b78ae54b%26chksm%3D97529f80a0251696c8d712c1cc0061bc497525e417067db572d7f8281cfa65005ec559fc04e6%26scene%3D21%23wechat_redirect

[3]

https://github.com/YSGStudyHards/Docsify-Guide: https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2FYSGStudyHards%2FDocsify-Guide

[4]

https://ysgstudyhards.github.io/Docsify-Guide/#/: https://link.juejin.cn/?target=https%3A%2F%2Fysgstudyhards.github.io%2FDocsify-Guide%2F%23%2F

[5]

https://ysgstudyhards.github.io/Docsify-Guide/: https://link.juejin.cn/?target=https%3A%2F%2Fysgstudyhards.github.io%2FDocsify-Guide%2F