基于Linux服务器Docsify配置搭建个人学习网站（笔记）

最新推荐文章于 2024-10-11 00:08:50 发布

天l志

最新推荐文章于 2024-10-11 00:08:50 发布

阅读量768

点赞数

文章标签：服务器 linux 学习

本文链接：https://blog.csdn.net/qq_38347393/article/details/126633742

版权

写在前面

有日子没写文章了，正好最近在梳理学习体系，使用Docsify来搭建个人学习网站，记录梳理知识，这里记录下建站过程。

Docsify 是什么

Docsify 可以快速帮你生成文档网站。不同于 GitBook、Hexo 的地方是它不会生成静态的 .html 文件，所有转换工作都是在运行时。通过改写Markedown文件实现页面内容的变化。

环境部署

Node.js 配置

本人采用的是腾讯云服务器，操作系统是Ubuntu 18.04.4 LTS (GNU/Linux 4.15.0-118-generic x86_64)。配置Docsify 首先需要安装Node.js，本人借鉴了菜鸟教程上推荐的安装方式：
首先需要先下载，下面几行代码是下载解压并进入解压目录

wget https://nodejs.org/dist/v10.9.0/node-v10.9.0-linux-x64.tar.xz // 下载
tar xf node-v10.9.0-linux-x64.tar.xz // 解压
cd node-v10.9.0-linux-x64/ // 进入解压目录

下载解压

进入解压目录

随后建立软连接：解压文件的 bin 目录底下包含了 node、npm 等命令，我们可以使用 ln 命令来设置软连接，你可以理解为将该目录下的两个程序放在了系统环境变量里。

ln -s /usr/software/nodejs/bin/npm /usr/local/bin/
ln -s /usr/software/nodejs/bin/node /usr/local/bin/

OK，Node.js配置完成

Docsify 配置

在任意目录下运行

npm install -g docsify-cli

即可完成安装。

可以看到在node-v10.9.0-linux-x64/lib/node_modules/目录里存在了docsify-cli

使用

接下来是使用方式，
首先我先建立了webSite文件夹，意味着我以后所有的网站文件都会放在这里。
在这里插入图片描述
随后，进入该文件夹，执行

docsify init

该文件夹下会生成建站必须的模板文件
在这里插入图片描述
这个文件夹可以认为是网站主页面目录，在该文件夹执行

docsify serve

按照界面返回的网址端口号输入浏览器即可访问这个网站。
在这里插入图片描述
PS:对于服务器来说需要将localhost更换为服务器IP，云服务器的话还要配置安全组，允许对应端口开放。

默认页面大概是长这个样子的。

如果我还想做许多次级页面，例如，在这个主页面中罗列我知识体系等目录，点击目录进行转跳。那么可以这样做：
首先，在这和主目录Website里建立自己想展示的次级页面文件夹，例如我建立了
在这里插入图片描述
随后，进入这三个文件夹里分别执行

docsify init

次级页面就建立好了。
最后，在主页面链接它们
打开Website目录下的README.md文件，清空原来内容，输入以下内容

# Main Menu
> [Statistical Learning 统计学习](http://IP:3000/statistical_learning/)
> [Circuit 电路](http://IP:3000/Circuit/) 
>  <a href="http://IP:3000/docsify_demo/">Docsify Demo 测试用例</a>

访问主页面
在这里插入图片描述
点击转跳

这里我是有添加次级页面等内容，所以有显示其他内容。
PS:注意 http://IP:3000/docsify_demo/ 这里的链接，docsify_demo是指你建立的次级页面文件夹名字。

插入公式

Docsify默认不支持Latex公式显现，如有公式显示需要，需要配置

<script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
<script src="//cdn.jsdelivr.net/gh/upupming/docsify-katex@latest/dist/docsify-katex.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css"/>

第1，2行的代码二选一加入到index文件里（其实1，2行代码实现了同一个功能，只不过有些环境不适用某一行代码，需要自己根据添加等结果修改加入），第3行必须加入。
我是放在了这里
在这里插入图片描述
OK，整体我的建站过程就这些，后续只需要改写每个Markedown文件就可以修改页面内容了。
久违的写作！