基于doscify的静态博客创建_doscify 可用编辑器-优快云博客

本文链接：https://blog.youkuaiyun.com/ljq24857/article/details/108743080

本文介绍了如何使用docsify创建静态博客，包括所需工具（Java、Tomcat、浏览器、文本编辑器）、博客创建步骤、目录结构解析以及文章管理。通过配置Java环境，下载Tomcat，设置目录和文件，你可以轻松搭建属于自己的博客。后续只需更新_sidebar.md和markdown文件，即可添加新内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址：www.bluedoragon.site

因为是自己写得，在这里也稍稍改了下，就写“原创”了…

心血来潮做了个博客，找来找去选定了doscify来进行博客的创建。

要创建这个博客你至少需要以下工具：

Java、Tomcat、浏览器(FireFox、Chrome、Edge等)，文本编辑器(VS Code等)

这个静态博客主要是通过docsify来进行创建的

官网使用的是node，如果对node有一定的了解可以通过node并参照官网来创建

官网地址：https://docsify.js.org

GitHub： https://github.com/docsifyjs/docsify

我个人认为不使用node比较简单，所以就用简单的环境创建一下，以下为流程:

1.Java的安装及配置

推荐我之前写的一篇关于OpenJDK的配置的博文

关于openjdk的安装和配置: https://blog.youkuaiyun.com/ljq24857/article/details/99704011

2.下载Tomcat

Tomcat官方网站：http://tomcat.apache.org/

关于Tomcat的详细配置、使用就不再赘述。

3.目录构成

blogTest //文件夹，名称随意

│ .nojekyll //这个文件是防止GitHub Pages忽略以"_"开头的文件用的，可忽略

│ index.html //主要文件

│ README.md //首页的说明

│ _sidebar.md //导航栏

└─Test //导航栏内容及指定文章地址，可随意命名

└─Test.md //文章，后缀为.md，为markdown文件，会被“翻译”成html

4.目录文件详解

README.md:博客首页，进入博客先显示它

index.html:可以看作主体，进入各个文章均需从这里开始，可以如下照抄

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>blogTest</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="//cdn.jsdelivr.net/npm/docsify@4/themes/vue.css" />
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: 'demo',
      repo: '',
      loadSidebar: true,
      alias: {
      '/.*/_sidebar.md': '/_sidebar.md'
      },
    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
</html>

单独说一下这里

alias: {
      '/.*/_sidebar.md': '/_sidebar.md'
      },

我把每篇文章按照分类进行排放，例如有"Test"分类，相关的文章就全放在"Test"文件夹下

要想显示分类及其内容则需要有"_sidebar.md"文件进行对导航栏声明

如果缺少上述代码会在进行导航栏迁移文章时发生异常信息

原因是docsify会在迁移的文件夹内寻找"_sidebar.md"文件

上述代码是让docsify"强制"只寻找根目录下的"_sidebar.md"文件

_sidebar.md:导航栏内容以及文章标题显示，建议文件夹及文件均用英文

- Test(这个可以为中文)
  - [测试内容](Test/Test.md)

当你点击"测试内容"时会在"Test"文件夹寻找"Test.md"文件并构成文章

后缀为.md的markdown文件即为各个"页面"

5.为博客添砖加瓦

以后每次写新的东西只要更改_sidebar.md、添加分类下的markdown文件即可

之后需要部署项目到Tomcat上，成功启动Tomcat后在浏览器输入 “localhost:端口号” 即可
也可以选择发布到GitHub或者租个服务器进行发布。

以上，感谢阅读！
如有不对烦请指正，不胜感激！