Github+docsify打造在线文档网站

Xiao J.

已于 2024-03-05 10:41:25 修改

阅读量1.6k

点赞数 2

分类专栏：其他文章标签： github

于 2021-08-23 16:23:54 首次发布

本文链接：https://blog.csdn.net/tsundere_x/article/details/119871385

版权

其他专栏收录该内容

9 篇文章 0 订阅

订阅专栏

写在前面

搭建这个在线文档的目的是方便自己对学习笔记的查看，比较喜欢 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>

5 设置Github Pages

在 Settings 中的 GitHub Pages 中选择 docs 文件夹，点击保存，即可发布刚刚的文档网站。

在这里插入图片描述
至此，文档网站搭建完成！

Xiao J.

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Github+docsify打造在线文档网站

写在前面搭建这个在线文档的目的是方便自己对学习笔记的查看，比较喜欢 docsify 的主题风格，所以没有用 Github Pages 直接给的主题，自己根据官方文档进行了配置，目前已经成功上线。1 效果图可直接访问：https://xiaojing-c.github.io/Learning-records2 什么是docsifydocsify 是一个动态生成文档网站的工具。可以简单、高效、低成本的搭建一个文档网站。中文官方文档：https://docsify.js.org/#/zh-cn/
复制链接

扫一扫

专栏目录