为热爱分享者提供强大工具：10分钟快速搭建属于自己的文档网站

2023-11-15 20:59:03

前言

在当今的信息时代，知识的分享和传播变得越来越重要。无论是技术人员、学生还是其他领域的专业人士，都希望能够拥有一个属于自己的文档网站，来记录和分享自己的所学知识。然而，搭建一个文档网站往往需要花费大量的时间和精力。

为此，我将向您介绍一种快速搭建属于自己文档网站的方法，仅需10分钟即可轻松完成。这种方法借助了Docsify工具，它可以轻松地将Markdown文件转换为一个美观的文档网站，并支持实时的预览效果。无论您是想要记录和分享自己的所学知识，还是想要构建一个技术博客，该方法都能满足您的需求。

准备工作

在开始搭建文档网站之前，您需要准备以下几项内容：

一台可以访问互联网的电脑
一个文本编辑器，如Sublime Text、Atom或Visual Studio Code
Docsify工具的安装包（可在其官网下载）

搭建过程

安装Docsify工具

在Docsify的官网上下载与您的操作系统相对应的安装包，并按照说明进行安装。

创建一个新的项目

使用文本编辑器创建一个新的文件夹，并将它命名为“my-docsify-project”。在该文件夹中，创建一个名为“index.html”的文件，并添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />

    <link rel="stylesheet" href="docsify.min.css" />
  </head>
  <body>
    <div id="app"></div>
    <script src="docsify.min.js"></script>
    <script>
      var docsify = new Docsify();
    </script>
  </body>
</html>

添加Markdown文件

在“my-docsify-project”文件夹中，创建一个名为“docs”的子文件夹，并将您想要发布的Markdown文件复制到该文件夹中。
运行Docsify

在“my-docsify-project”文件夹中，打开命令行窗口，并输入以下命令：
```
docsify serve
```
这将启动一个本地服务器，您可以通过在浏览器中访问“http://localhost:3000”来查看您的文档网站。

实例

为了帮助您更好地理解如何使用Docsify搭建文档网站，我提供了一个实例供您参考。在这个实例中，我将创建一个简单的文档网站，来分享一些关于HTML和CSS的基础知识。

创建一个新的项目

我首先创建一个名为“my-html-css-tutorial”的文件夹，并在其中创建一个名为“index.html”的文件。然后，我将以下代码添加到“index.html”文件中：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />

    <link rel="stylesheet" href="docsify.min.css" />
  </head>
  <body>
    <div id="app"></div>
    <script src="docsify.min.js"></script>
    <script>
      var docsify = new Docsify();
    </script>
  </body>
</html>

添加Markdown文件

接下来，我在“my-html-css-tutorial”文件夹中创建一个名为“docs”的子文件夹，并将以下三个Markdown文件复制到该文件夹中：
- html-basics.md ：包含HTML的基础知识，如HTML元素、标签和属性等。
- css-basics.md ：包含CSS的基础知识，如CSS选择器、属性和值等。
- html-css-examples.md ：包含一些HTML和CSS的示例，展示了如何使用HTML和CSS来创建简单的网页。
运行Docsify

最后，我在“my-html-css-tutorial”文件夹中打开命令行窗口，并输入以下命令：
```
docsify serve
```
这将启动一个本地服务器，我可以在浏览器中访问“http://localhost:3000”来查看我的文档网站。