当前位置： 首页 > news >正文

docsify gitee 搭建个人博客

news 2026/4/18 10:47:58

docsify & gitee 搭建个人博客

文章目录

  • docsify & gitee 搭建个人博客
    • 1.npm 安装
      • 1.1 在Windows上安装npm：
      • 1.2 在macOS上安装npm：
      • 1.3 linux 安装npm
    • 2. docsify
      • 2.1 安装docsify
      • 2.2 自定义配置
        • 2.2.1 通过修改index.html，定制化开发页面
      • 2.2.2 顶部导航栏和侧边栏
        • 2.2.3 新建 _navbar.md 文件
        • 2.2.4 侧边栏设置
        • 2.2.5 全文检索
        • 2.2.6 一键仿制插件
        • 2.2.7 代码高亮
        • 2.2.8 代码高亮
        • 2.2.9 自定义封面
    • 3.gitee 搭建库
    • 4 设置Github Pages

1.npm 安装

npm是Node.js的包管理器，用于安装和管理JavaScript包。要安装npm，需要先安装Node.js。以下是在不同操作系统上安装npm的步骤：

1.1 在Windows上安装npm：

  1. 访问Node.js官方网站（https://nodejs.org）。
  2. 在下载页面上，选择适用于Windows的LTS版本（长期支持版本）的Node.js安装程序。
  3. 下载安装程序并运行它。
  4. 在安装过程中，确保选中"npm package manager"选项。
  5. 完成安装后，打开命令提示符或PowerShell，并运行npm -v命令，确认npm已成功安装。

1.2 在macOS上安装npm：

  1. 打开终端应用程序。
  2. 使用Homebrew包管理器安装Node.js。运行以下命令：
  brew install node
  1. 完成安装后，运行npm -v命令，确认npm已成功安装。

1.3 linux 安装npm

在Linux上安装npm：

  1. 打开终端。
  2. 使用包管理器安装Node.js。根据你使用的Linux发行版，运行以下命令之一：
  • Debian/Ubuntu：
	sudo apt-get install nodejs npm
  • Fedora：
    sudo dnf install nodejs npm
  • CentOS/RHEL：
     sudo yum install nodejs npm

安装完成后，你可以使用npm install 命令来安装JavaScript包。例如，要安装名为"lodash"的包，可以运行npm install lodash命令。

2. docsify

2.1 安装docsify

# 安装 docsify-cli
npm i docsify-cli -g
# 初始化项目
docsify init ./docs
# 发动项目
docsify serve docs

image-20230812092252353

image-20230812092328875

image-20230812092420688

http://localhost:3000/#/ 成功截图：

image-20230812092559318

2.2 自定义配置

2.2.1 通过修改index.html，定制化开发页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="description" content="Description"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body><div id="app"></div><script>window.$docsify = {name: '',repo: ''}</script><!-- Docsify v4 --><script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
</html>

2.2.2 顶部导航栏和侧边栏

   window.$docsify = {name: '东小西', // 侧边栏顶部显现的称号repo: 'https://gitee.com/chen_1953981601', // 右上角Github图标链接,这是例子，需要具体换为自己的loadNavbar: true, // 默许加载 _navbar.md，作为顶部导航栏loadSidebar: true // 默许加载 _sidebar.md，作为侧边栏}

2.2.3 新建 _navbar.md 文件

- [**目录**](README.md)- [**环境安装**](source/env/env.md)- [**编程相关学习**](source/books/books.md)- [**人工智能**](source/DL/DL.md)- [**工程部署相关问题**](source/project/project.md)- [**相关开源工具**](source/openTech/openTech.md)- **论文阅读笔记**
* [**文章集合**](paper/README.md)

2.2.4 侧边栏设置

 window.$docsify = {name: '东小西', // 侧边栏顶部显现的称号repo: 'https://gitee.com/renxiaoshi', // 右上角Github图标链接loadNavbar: true, // 默许加载 _navbar.md，作为顶部导航栏loadSidebar: true, // 默许加载 _sidebar.md，作为侧边栏subMaxLevel: 3, // 目录的最大层级}

2.2.5 全文检索

  window.$docsify = {name: '东小西', // 侧边栏顶部显现的称号repo: 'https://gitee.com/c_1953981601', // 右上角Github图标链接loadNavbar: true, // 默许加载 _navbar.md，作为顶部导航栏loadSidebar: true, // 默许加载 _sidebar.md，作为侧边栏subMaxLevel: 3, // 目录的最大层级search: {paths: 'auto',placeholder: '检索',noData: '没有找到喔！',depth: 3,},}<!-- 检索插件 --><script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>

2.2.6 一键仿制插件

 <!-- 一键仿制插件 --><script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>

2.2.7 代码高亮

<!-- 代码高亮 --><script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script><script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-c.min.js"></script><script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-json.min.js"></script><script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-shell-session.min.js"></script><script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-python.min.js"></script><script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-http.min.js"></script><script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-java.min.js"></script>

2.2.8 代码高亮

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css">

2.2.9 自定义封面

window.$docsify 中添加 coverpage: true，默许会加载 _coverpage.md。

新建_coverpage.md文件，内容如下：

# Blogs for SWPUCWF> 如果不是为了让她哭，那么卷人又有什么意义？[CSDN](https://blog.csdn.net/weixin_42917352?spm=1000.2115.3001.5343)email: swpucwf@126.com[滚动鼠标](#)

3.gitee 搭建库

Gitee Pages服务，代码托管网站将用户的库房文件以网页方式发布。

image-20230812105527551

4 设置Github Pages

在 Settings 中的 GitHub Pages 中选择 docs 文件夹，点击保存，即可发布刚刚的文档网站。

相关文章：

docsify gitee 搭建个人博客

docsify & gitee 搭建个人博客 文章目录 docsify & gitee 搭建个人博客1.npm 安装1.1 在Windows上安装npm&#xff1a;1.2 在macOS上安装npm&#xff1a;1.3 linux 安装npm 2. docsify2.1 安装docsify2.2 自定义配置2.2.1 通过修改index.html&#xff0c;定制化开发页面…...

编程日记 2023/8/13 20:16:48

SpringBoot2-Tomcat部署

1.排除内置 Tomcat 在pom.xml文件中的下添加以下代码&#xff0c;用于排除SpringBoot内置Tomcat <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><exclusions><exclusion&…...

编程日记 2023/8/13 20:15:46

Docker查看、创建、进入容器相关的命令

1.查看、创建、进入容器的指令 用-it指令创建出来的容器&#xff0c;创建完成之后会立马进入容器。退出之后立马关闭容器。 docker run -it --namec1 centos:7 /bin/bash退出容器&#xff1a; exit查看现在正在运行的容器命令&#xff1a; docker ps查看历史容器&#xff0…...

编程日记 2023/8/13 20:14:45

leetcode1. 两数之和

题目&#xff1a;leetcode1. 两数之和 描述&#xff1a; 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中…...

编程日记 2023/8/13 20:13:44

温室花卉种植系统springboot框架jsp鲜花养殖智能管理java源代码

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 基于Git无线传感网络的温室花卉种植智能控制系统 系统…...

编程日记 2023/8/13 20:12:43

测试老鸟经验总结，Jmeter性能测试-重要指标与性能结果分析（超细）

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 Aggregate Report …...

编程日记 2023/8/13 20:11:42

IDEA设置Maven自动编译model

IDEA设置Maven自动编译model 项目工程结构IDEA maven设置 项目工程结构 假设我们的项目结构是下图这样&#xff0c;也就是一个父工程下包含多个子模块&#xff0c;其中dubbo-01-api是公共模块&#xff0c;其它两个模块要想使用必须在pom文件中引入。 本地开发要想不会报错&am…...

编程日记 2023/8/13 20:10:41

关于本地mockjs的使用

安装mockjs npm install mockjs -s在src下新建目录mockData&#xff0c;所有mock请求可以放该文件夹下面。例如在mockData文件夹下新建一个home.js文件。用来处理首页的请求数据 home.js export default {getHomeData:()>{return{code:200,data:{tableData:[{name:张三,se…...

编程日记 2023/8/13 20:09:39

hive 中最常用日期处理函数

hive 常用日期处理函数 在工作中&#xff0c;日期函数是提取数据计算数据必须要用到的环节。哪怕是提取某个时间段下的明细数据也得用到日期函数。今天和大家分享一下常用的日期函数。为什么说常用呢&#xff1f;其实这些函数在数据运营同学手上是几乎每天都在使用的。 技术交…...

编程日记 2023/8/13 20:08:39

记录一下Java实体转json字段顺序问题

特殊需求&#xff0c;和C交互他们那边要求字段顺序要和他们定义的一致(批框架) 如下&#xff1a; Data public class UserDto {private String name;private Integer age;private String addr; }未转换前打印&#xff1a; 转换后打印&#xff1a; 可以看到转换为json顺序打印…...

编程日记 2023/8/13 20:07:37

微积分入门：总结归纳汇总（一）

基础 标准符号约定： ( s i n x ) n (sinx)^n (sinx)...

编程日记 2023/8/13 20:06:36

ubuntu python虚拟环境venv搭配systemd服务实战（禁用缓存下载--no-cache-dir）

文章目录 参考文章目录结构步骤安装venv查看python版本创建虚拟环境激活虚拟环境运行我们程序看缺少哪些依赖库&#xff0c;依次安装它们接下来我们配置python程序启动脚本&#xff0c;脚本中启动python程序前需先激活虚拟环境配置.service文件然后执行部署脚本&#xff0c;成功…...

编程日记 2023/8/13 20:05:23

案例15 Spring Boot入门案例

1. 选择Spring Initializr快速构建项目 ​ 2. 设置项目信息 ​ 3. 选择依赖 ​ 4. 设置项目名称 ​ 5. 项目结构 ​ 6. 项目依赖 自动配置了Spring MVC、内置了Tomcat、配置了Logback(日志)、配置了JSON。 ​ 7. 创建HelloController类 com.wfit.boot.hello目录下创建HelloCo…...

编程日记 2023/8/13 20:04:18

物联网是下一个风口吗？

随着科技的持续进步&#xff0c;物联网行业正在迅速兴起&#xff0c;展现出巨大的潜力。那么&#xff0c;物联网行业的未来是什么样的呢&#xff1f; 1. 5G技术的广泛应用和普及 随着5G技术的快速发展和商业化推广&#xff0c;物联网行业将迎来一个巨大的飞跃。5G技术的高速传…...

编程日记 2023/8/13 20:03:16

8月9日上课内容 nginx反向代理与负载均衡

负载均衡工作当中用的很多的&#xff0c;也是面试会问的很重要的一个点 负载均衡&#xff1a;通过反向代理来实现&#xff08;nginx只有反向代理才能做负载均衡&#xff09; 正向代理的配置方法&#xff08;用的较少&#xff09; 反向代理的方式&#xff1a;四层代理与七层代…...

编程日记 2023/8/13 20:02:14

易服客工作室：Elementor AI简介 – 彻底改变您创建网站的方式

Elementor 作为领先的 WordPress 网站构建器&#xff0c;是第一个添加本机 AI 集成的。Elementor AI 的第一阶段将使您能够生成和改进文本和自定义代码&#xff08;HTML、自定义代码和自定义 CSS&#xff09;。我们还已经在进行以下阶段的工作&#xff0c;其中将包括基于人工智…...

编程日记 2023/8/13 20:01:07

ClickHouse的数据类型

1.整数型 固定长度的整型&#xff0c;包括有符号整型或无符号整型。整型范围&#xff08;-2n-1~2n-1-1&#xff09;&#xff1a; Int8 - [-128 : 127] Int16 - [-32768 : 32767] Int32 - [-2147483648 : 2147483647] Int64 - [-9223372036854775808 : 9223372036854775807]无符…...

编程日记 2023/8/13 20:00:04

计算机网络—IP

这里写目录标题 IP的基本认识网络层与数据链路层有什么关系IP地址基础知识IP 地址的分类什么是A、B、C类地址广播地址用来做什么什么是D、E类广播多播地址用于什么IP分类的优点IP分类的缺点 无分类地址CIDR如何划分网络号和主机号怎么进性子网划分 公有 IP 地址与私有 IP 地址公…...

编程日记 2023/8/13 19:59:03

Java 的 Stream

一、创建 Stream 1.1、创建 Stream 流 1.1.1、List 集合获取 Stream 流 Collection<String> list new ArrayList<>(); Stream<String> s1 list.stream(); 1.1.2、Map 集合获取 stream 流 Map<String, Integer> map new HashMap<>(); // …...

编程日记 2023/8/13 19:58:01

SolidUI社区-Discord

背景 随着文本生成图像的语言模型兴起&#xff0c;SolidUI想帮人们快速构建可视化工具&#xff0c;可视化内容包括2D,3D,3D场景&#xff0c;从而快速构三维数据演示场景。SolidUI 是一个创新的项目&#xff0c;旨在将自然语言处理&#xff08;NLP&#xff09;与计算机图形学相…...

编程日记 2023/8/13 19:56:59

WeKnora入门教程：零基础搭建个人知识管理系统

WeKnora入门教程&#xff1a;零基础搭建个人知识管理系统 1. 引言 你是不是经常遇到这样的情况&#xff1a;电脑里存了几百个文档&#xff0c;想找某个资料时却像大海捞针&#xff1f;或者团队的知识分散在各个成员的电脑里&#xff0c;新人来了根本不知道从哪里学起&#xf…...

编程新知 2026/4/18 10:06:24

MelonLoader终极指南：3步掌握Unity游戏模组加载的完整解决方案

MelonLoader终极指南&#xff1a;3步掌握Unity游戏模组加载的完整解决方案 【免费下载链接】MelonLoader The Worlds First Universal Mod Loader for Unity Games compatible with both Il2Cpp and Mono 项目地址: https://gitcode.com/gh_mirrors/me/MelonLoader 作为…...

编程新知 2026/4/18 9:53:58

UnrealPakViewer：三步掌握UE4 Pak文件分析工具，实现高效虚幻引擎资源管理

UnrealPakViewer&#xff1a;三步掌握UE4 Pak文件分析工具&#xff0c;实现高效虚幻引擎资源管理 【免费下载链接】UnrealPakViewer 查看 UE4 Pak 文件的图形化工具&#xff0c;支持 UE4 pak/ucas 文件 项目地址: https://gitcode.com/gh_mirrors/un/UnrealPakViewer 你…...

编程新知 2026/4/18 9:41:23

如何快速构建Python金融数据采集系统：完整实战指南

如何快速构建Python金融数据采集系统&#xff1a;完整实战指南 【免费下载链接】pywencai 获取同花顺问财数据 项目地址: https://gitcode.com/gh_mirrors/py/pywencai 在量化投资和金融数据分析领域&#xff0c;获取高质量的金融数据是每个分析师和投资者的核心需求。传…...

编程新知 2026/4/18 9:17:24

终极指南：如何用UnrealPakViewer深度解析UE4 Pak文件结构

终极指南&#xff1a;如何用UnrealPakViewer深度解析UE4 Pak文件结构 【免费下载链接】UnrealPakViewer 查看 UE4 Pak 文件的图形化工具&#xff0c;支持 UE4 pak/ucas 文件 项目地址: https://gitcode.com/gh_mirrors/un/UnrealPakViewer UnrealPakViewer是一款专为虚幻…...

编程新知 2026/4/18 8:37:01

鸿蒙Flutter混合开发实战：跨平台UI无缝集成

鸿蒙应用采用混合开发模式集成 Flutter Module&#xff0c;主要是为了解决代码复用、跨平台一致性以及利用 Flutter 丰富的 UI 生态。对于已有 Flutter 业务&#xff08;如复杂动画、图表组件&#xff09;或需要同时覆盖 Android、iOS 和鸿蒙的场景&#xff0c;直接复用 Flutte…...

编程新知 2026/4/18 8:34:59

LeetCode 插入排序 题解

LeetCode 插入排序 题解 题目描述 实现插入排序算法&#xff0c;对一个整数数组进行排序。 示例 1&#xff1a; 输入&#xff1a;nums [5,2,3,1] 输出&#xff1a;[1,2,3,5]示例 2&#xff1a; 输入&#xff1a;nums [5,1,1,2,0,0] 输出&#xff1a;[0,0,1,1,2,5]解题思路 方…...

编程新知 2026/4/18 6:38:38

Flutter 入门第八课：网络请求与数据解析（对接后端实战）

这节课是 Flutter 实现前后端交互的核心&#xff0c;也是从「本地模拟数据」到「真实业务开发」的关键一步。我们会系统学习 Flutter 最主流的网络请求库Dio&#xff0c;掌握GET/POST 基础请求、请求 / 响应拦截器&#xff08;统一处理请求头、错误、加载状态&#xff09;、JSO…...

编程新知 2026/4/18 5:47:27

别再死磕数学公式了！用C++手搓一个遗传算法求解器（附完整代码与避坑指南）

用C实战遗传算法&#xff1a;从原理到避坑指南 遗传算法作为模拟自然进化过程的优化方法&#xff0c;在工程优化、机器学习等领域有着广泛应用。但许多开发者虽然理解其理论框架&#xff0c;却在具体实现时频频踩坑。本文将用C带你完整实现一个遗传算法求解器&#xff0c;重点解…...

编程新知 2026/4/18 5:22:54

手把手教你调TSL1401线性CCD的曝光时间，让STM32智能小车循迹更稳

STM32智能小车CCD循迹曝光时间优化实战指南 从理论到实践&#xff1a;曝光时间对CCD循迹的影响机制 调试过TSL1401线性CCD的开发者都深有体会——曝光时间这个看似简单的参数&#xff0c;实际影响着整个循迹系统的稳定性。当小车在赛道上出现"蛇形走位"或突然丢线时&…...

编程新知 2026/4/18 5:16:47