Github+docsify打造在线文档网站

写在前面

搭建这个在线文档的目的是方便自己对学习笔记的查看，比较喜欢 docsify 的主题风格，所以没有用 Github Pages 直接给的主题，自己根据官方文档进行了配置，目前已经成功上线。

1 效果图

可直接访问：https://xiaojing-c.github.io/Learning-records
在这里插入图片描述

2 什么是docsify

docsify 是一个动态生成文档网站的工具。可以简单、高效、低成本的搭建一个文档网站。

中文官方文档：https://docsify.js.org/#/zh-cn/

3 安装docsify

首先确保自己已经有 node 和 npm 环境。

npm i docsify-cli -g

使用 docsify -v 查看是否安装成功

4 使用docsify创建文档网站

4.1 新建项目

在github上新建一个项目，并clone到本地，如之前已经有项目则可跳过此步骤。

4.2 初始化项目

进入文件夹
使用 docsify init ./docs 来初始化一个项目
初始化成功后，该文件夹下会生成 docs 文件夹，包含以下三个文件

1、index.html  入口文件
2、README.md  会做为主页内容渲染
3、.nojekyll  用于阻止 GitHub Pages 会忽略掉下划线开头的文件、

在这里插入图片描述

4.3 本地启动项目

docsify serve docs

在这里插入图片描述
使用 http://localhost:3000 即可访问

4.4 定制化

参考官网即可。
这里给出我的 index.html 配置。
包含封面、侧边栏、导航栏、搜索框等设置。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>XiaoJ's 学习笔记</title><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="description" content="Description"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body><div id="app">Loading...</div><script>window.$docsify = {repo: 'https://github.com/XiaoJing-C/Learning-records.git',name: 'XiaoJ\'s 学习笔记',nameLink: '/Learning-records/#/README',coverpage: true,loadSidebar: true,loadNavbar: true,// subMaxLevel: 3,count:{countable:true,fontsize:'0.9em',color:'rgb(90,90,90)',language:'chinese'},search: 'auto',search: {maxAge: 86400000,paths: '/',placeholder: '搜索',noData: 'No Results',namespace: 'website-1',},}</script><!-- Docsify v4 --><!-- <script src="//cdn.jsdelivr.net/npm/docsify@4"></script> --><script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script><script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script><script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script><script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script><script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script><script src="//unpkg.com/docsify-count/dist/countable.js"></script><script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script><script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-php.min.js"></script><script src="//cdn.jsdelivr.net/npm/prismjs@1.24.1/components/prism-java.min.js"></script><script src="//cdn.jsdelivr.net/npm/prismjs@1.24.1/components/prism-python.min.js"></script><script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script><script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/external-script.min.js"></script><!-- <style type="text/css">.content {overflow: auto;}</style> -->
</body>
</html>