在校园网内搭建个人笔记知识网站

腾云ntl

已于 2022-05-30 17:04:22 修改

阅读量1.5k

点赞数 1

分类专栏：个人学习纪录文章标签： nginx 经验分享学习

于 2022-05-30 16:58:07 首次发布

本文链接：https://blog.csdn.net/qq_38417528/article/details/125049025

版权

个人学习纪录专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在校园网内搭建个人笔记知识网站

主要参考 b 站 CodeSheep 前辈的部署视频进行搭建，视频链接
原计划在学校局域网内部署自己的知识库网站，后由于网络安全考虑关闭了此网站，遗留经验文一篇
使用 docsify + Nginx 在 Ubuntu 上进行搭建，截至发文 docsify 官网已经无法访问（见下文 220517 官方 CDN 被攻击），配置过程仍然可行
frp 事小，校园网被攻击事大，个人笔记搭建后还是自己用内网自己访问为好，不要随意宣扬 ip 为好
此文不涉及 ssl 证书配置内容，不建议在公网完成此流程

文章目录

在校园网内搭建个人笔记知识网站

使用 docsify 启动本地网站

# 1. Node.js & npm 工具下载
# 安装前确保安装源已经切换为国内镜像源且完成所有更新
# 下载 Node.js
sudo apt-get install node.js -y
# 下载 npm 工具
sudo apt-get install npm -y
# 下载成功可用以下命令检查
nodejs -v
npm -v

# 2. 利用 npm 下载 docsify-cli
sudo npm install -g docsify-cli
# 下载成功可用以下命令检查
docsify -v

# 3. 在桌面新建知识库的文件夹并进入该文件夹，使用 docsify 对该文件夹初始化
mkdir NodeRepository
cd NodeRepository
docsify init # 初始化该文件夹，弹出的提示输入 y

# 20220517：此处需要修改引用主题，否则无法正常启动，见下文 220517 官方 CDN 被攻击
# 4. 启动该网站
docsify serve
# 启动完成后在本机浏览器输入 localhost:3000 即可访问网站
# 关闭网站只需要 ctrl + c 关闭进程即可

启动原理

docsify 在执行 docsify init 后将在该文件目录下生成两个文件分别为 index.html 与 README.md 文件，docsify 将将会把 markdown 文件渲染成网页后进行显示，因此只要更新 Markdown 的内容即可更新网站的内容（同步更新，不需要手动刷新网页）

修改主题

index.html 中包含有 <link rel="stylesheet" ...> 的样式表设置引用，将末尾的 vue.css 修改成对应的官方主题即可，默认可使用的主体包括 vue.css / buble.css / dark.css / pure.css / dolphin.css

修改默认显示的封面

在文件目录中添加 _coverpage.md ，内容如下

欢迎来到 TYNTL 的知识库
## @TYNTL
[**README**](README.md)

在 index.html 中开启封面功能

window.$docsify = {
	name: '',
	repo: '',
    coverpage: true
}

开启导航栏

在文件目录中添加 _navbar.md ，内容如下

- 编程相关
  - Linux
- 琐事小记
  - [**摘抄**](摘抄.md)

在 index.html 中开启导航栏功能

window.$docsify = {
	name: '',
	repo: '',
    coverpage: true,
    loadNavbar: true
}

使用 nginx 配置网站

Nginx 配置教程 - CSDN

# 1. 下载 Nginx
sudo apt-get install nginx -y
# 下载成功可用以下命令检查
nginx -v
# 使用 apt 下载的 nginx 的文件存放在以下位置
/usr/sbin/nginx  #主程序
/etc/nginx   #存放配置文件
/usr/share/nginx  #存放静态文件
/var/log/nginx  #存放日志

# 2. 配置 Nginx
# 2.1 修改服务器配置
cd /etc/nginx/sites-available
# 优先对配置文件做好备份
sudo cp default default.backup
# 修改 default
# - 注释原有 root，添加以下代码（注意有分号结尾）
root /home/tyntl/Desktop/NodeRepository;
# - 在 location / {} 中添加以下代码以关闭缓存存储保证文件（注意有分号结尾）
add_header Cache-Control "no-cache, no-store";

# 3. 重启服务器，检查服务器状态，访问服务器
# 重启服务器
sudo nginx -s reload
# 检查服务器状态
systemctl status nginx
# 根据 ip 访问知识库！

下载 docsify-cli 时产生报错提示

利用 npm 下载 docsify-cli 时产生报错提示

# 产生以下报错提示
npm WARN lifecycle docsify@4.12.2~postinstall: cannot run in wd %s %s (wd=%s) docsify@4.12.2 opencollective-postinstall /usr/local/lib/node_modules/docsify-cli/node_modules/docsify
npm WARN optional Skipping failed optional dependency /docsify-cli/chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@2.3.2
npm WARN node-fetch@2.6.7 requires a peer of encoding@^0.1.0 but none was installed.
npm WARN ws@7.5.7 requires a peer of bufferutil@^4.0.1 but none was installed.
npm WARN ws@7.5.7 requires a peer of utf-8-validate@^5.0.2 but none was installed.

# 但是仍然能够正常使用，暂时略过警告

npm安装docsify报错，记录解决过程 - CSDN

关于配置后修改文件内容无法同步更新网页

配置教程评论区 - 知乎

以下为引用的原文

博主，你好。我和你使用同样的方法，在centos7上完成知识库的搭建。但是后续我发现修改md文件无法更新网页，即便替换其他md文件，nginx刷新出的页面仍然是最初的。这是什么情况，你们平时更新网站内容是直接修改md文件吧？
这个是由于浏览器会对静态网页进行缓存，你需要清楚下缓存，或者F12开发者模式下禁用缓存即可。我也遇到过

解决方式 - 掘墓人的小铲子的个人博客配置禁用 cache 缓存存储

server {
  listen 80;
  server_name  localhost;
    location / {
      root /usr/local/wiki;
      index  index.html index.htm;
      add_header Cache-Control "no-cache, no-store";
  }
}

220517 官方 CDN 被攻击及解决办法

CDN Content Delivery Network 内容分发网络
解决方法为临时性的，若需要永久保持可以将对应的 script 下载到本地后再进行静态引用

昨晚发现网站挂了，原以为是主机又挂了，检查 F12 后发现网站的 CDN 获取出现问题，尝试访问 docsify 官网发现官网也连带挂了，到 github.com/docsifyjs/docsify 看到不止一条 issues 谈论此事，路过 docsify-cli 内有人说中国的默认 docsify CDN 的 DNS 遭到攻击无法正常访问，故寻求解决办法

在 Gitee 上下载 docsify 的源码后，查阅帮助手册后发现 docs/CDN.md 有配置备用的 CDN 链接，将其依次尝试修改 index.html 后改为以下配置保证基本功能正常使用，插件暂时关闭等待解决方案

<!-- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@latest/lib/themes/vue.css"> -->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/docsify/4.12.2/themes/vue.css">

<!-- Docsify v4 -->
<!-- <script src="//cdn.jsdelivr.net/npm/docsify@latest"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/docsify/4.12.2/docsify.js"></script>

220530 追加插件

剪贴板

<script src="https://cdnjs.cloudflare.com/ajax/libs/docsify-copy-code/2.1.1/docsify-copy-code.min.js"></script>

字数统计 & 阅读预计

<script> // 追加 conut 配置
    window.$docsify = {
        count: {
            countable:true,
            fontsize:'0.9em',
            color:'rgb(90,90,90)',
            language:'chinese'
        }
    }
</script>
<script src="https://unpkg.com/docsify-count/dist/countable.js"></script>