利用 docsify 免费搭建自己的文档类型网站

简介: 利用 docsify 免费搭建自己的文档类型网站

前言

在开始之前,请先确保你已经满足以下两个条件:


自己的电脑上安装了 Node.js ,如果还没有安装,可以参照我的另一篇教程 Node.js 的安装(多图版);


拥有自己的 Github/Gitee 账号;


快速安装并开始

安装

首先使用如下命令在自己的电脑上安装 docsify-cli 工具,方便后续的创建和预览自己的文档网站;


npm i docsify-cli -g

image.png

项目初始化

在自己的电脑上创建一个项目文件夹,比如我的是 Docsify,然后进入该文件夹并打开命令行工具,通过如下命令来初始化项目;

docsify init ./

image.png项目目录结构

经过初始化后,可以发现项目文件夹的目录结构如下,主要有三个文件,其功能如下:


.

   .nojekyll

   index.html

   README.md


index.html : 入口文件,也叫配置文件,相关配置均在其中;


README.md : 作为主页内容渲染;


.nojekyll : 防止 Github Pages 忽略下划线开头的文件;


本地预览

当我们编辑好文档后,想要在本地预览时,可通过如下命令运行本地服务器,然后在浏览器中访问 http://localhost:3000 进行实时预览(其中 3000 端口是 docsify 默认访问端口);


docsify serve ./

image.pngimage.png

项目配置

配置文件 index.html

该文件中主要配置了文档网站的名字以及开启一些配置选项,比如我修改后的配置如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>村雨遥</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/dark.css">
</head>
<body>
  <div id="app"></div>
  <!-- docsify-edit-on-github -->
  <script src="//unpkg.com/docsify-edit-on-github/index.js"></script>
  <script>
    window.$docsify = {
      name: '村雨遥',
      repo: 'https://gitub.com/cunyu1943/cunyu1943',
      maxLevel: 5,//最大支持渲染的标题层级
      subMaxLevel: 3,
      homepage: 'README.md',
      coverpage: true, // 封面
      loadSidebar: true, // 侧边栏
      autoHeader: true,
      notFoundPage: true, // 找不到页面时
      auto2top: true,//切换页面后是否自动跳转到页面顶部
      //全文搜索
      search: {
        //maxAge: 86400000, // 过期时间,单位毫秒,默认一天
        paths: 'auto',
        placeholder: '搜索',
        noData: '未找到结果',
        // 搜索标题的最大程级, 1 - 6
        depth: 3,
      },
      plugins: [
        EditOnGithubPlugin.create('https://githee.com/cunyu1943/cunyu1943/')
      ],
    }
  </script>
  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
  <!--Java代码高亮-->
  <script src="//unpkg.com/prismjs/components/prism-java.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-python.js"></script>
  <!--全文搜索,直接用官方提供的无法生效-->
  <script src="https://cdn.bootcss.com/docsify/4.5.9/plugins/search.min.js"></script>
  <!-- 复制到剪贴板 -->
  <script src="//unpkg.com/docsify-copy-code"></script>
  <!-- emoji -->
  <script src="//unpkg.com/docsify/lib/plugins/emoji.js"></script>
  <!-- 图片缩放 -->
  <script src="//unpkg.com/docsify/lib/plugins/zoom-image.js"></script>
  <!-- 字数统计 -->
  <script src="//unpkg.com/docsify-count/dist/countable.js"></script>
</body>
</html>

侧边栏

上述配置中侧边栏已经打开,即 loadSidebar: true,此时新建一个 _sidebar.md 文件,在其中加入你所要显示的内容;image.png

封面

上述配置中封面已经打开,即 coverpage: true,此时新建一个 _coverpage.md 文件,在其中加入你所要显示的内容,比如我的封面;image.png

主页内容

README.md 的内容,比如我的最终结果显示如下;

image.png

更多

如果还需要了解更多详情,可以访问官网教程

部署

进行上述操作之后,我们就可以将其部署到 GitHub Pages,然后供别人访问了是不是很激动,部署详情如下:

新建仓库

即和平常创建的步骤一样,但是要注意打开 Github Pages 功能;

image.png

提交项目

将本地的项目提交到远程;image.png

预览

在浏览器中访问创建仓库时的给的网址即可在线预览我们的网站了,比如我的是:https://cunyu1943.github.io/cunyu1943,默认会显示封面页;image.png

总结

经过上述的配置之后,我们就成功利用 docsify 成功搭建自己的文档类型网站了。

目录
相关文章
|
11天前
|
UED
如何使用网站模版制作网站。
使用模板快速搭建网站,省时省力。选择模板、自定义编辑、发布上线。注意模板匹配、内容原创、遵守平台法规。
|
3月前
|
API 区块链
获取指定网页基础信息【TDK】免费API接口教程
该接口用于从标准网页中提取标题、关键词、描述和图标等信息。支持POST/GET请求,需提供用户ID、KEY及目标网址等参数,可选指定访问节点。返回状态码、信息提示及提取的内容。示例与详细文档见官网。
|
4月前
|
搜索推荐 UED 索引
如何选择网站模版创建网站?
PageAdmin CMS作为老牌的网站模版开发厂商,拥有一个丰富的网站模版库,里面有各大行业的企业、有政府、有学校、有资讯类网站模版,为各大的用户提供选择的资源。
|
6月前
|
自然语言处理 JavaScript 网络协议
简单使用vitepress快速搭建一个文档网站
VitePress 是一个静态站点生成器 (SSG),类似的项目有docsify、VuePress、hexo。用 Markdown 编写的内容生成可以轻松部署到任何地方的静态 HTML 页。
110 9
|
9月前
|
自然语言处理 JavaScript 前端开发
VuePress与Docusaurus:构建高效文档站点
VuePress和Docusaurus是用于构建技术文档的静态站点生成器。VuePress基于Vue.js,适合Vue开发者,提供Markdown增强和即时预览;Docusaurus使用React,有内置多语言支持和版本管理。两者都有活跃社区,VuePress适合深度定制,Docusaurus注重开箱即用。选择取决于技术栈和需求。
128 1
|
域名解析
用vitepress搭建文档网站踩坑记录
之前用 vuepress2 + vite 成功搭建了一个博客网站,这不 vue3 的文档改用 vitepress 搭建的,看着挺好看的,就想着也来折腾折腾搭建一个工作的文档网站
167 0
WordPress建站教程:页面与帖子有什么区别?
WordPress建站教程:页面与帖子有什么区别? 学习 WordPress 的过程中,您不可避免地会在某个时候对 WordPress 帖子与页面感到疑惑。网上有很多关于在 WordPress 中执行各种任务的教程,但他们经常跳过像这样的基本问题。 了解页面和帖子之间的主要区别,并了解选择其中一个选项而不是另一个选项的含义,是使用 WordPress 的基础知识。
WordPress建站教程:页面与帖子有什么区别?
|
JavaScript API
Docsify使用指南(打造最快捷、最轻量级的个人&团队文档)
Docsify使用指南(打造最快捷、最轻量级的个人&团队文档)
1403 0
Docsify使用指南(打造最快捷、最轻量级的个人&团队文档)
|
前端开发 JavaScript
docsify生成文档网站
docsify生成文档网站
107 0