基于 Gitee 搭建个人网站-入门教程

【基于 Gitee 搭建个人网站-入门教程】犀渠玉剑良家子，白马金羁侠少年。这篇文章主要讲述基于 Gitee 搭建个人网站-入门教程相关的知识，希望能为你提供帮助。
前言这是一篇基于Gitee搭建个人网站的保姆级教程。从零到一。如果你想基于云服务器搭建，我以前写过一篇菜鸟篇。
适合人群：入门级别教程，如果你想拥有一个自己的网站，又苦于没有云服务器，这个是你的不二选择。
本篇是基于 docsify 搭建，docsify 是一个文档类博客模板，简介且方便使用。
效果预览：
https://rodert.github.io/JavaPub-Interview/

文章图片

@[toc]
准备你需要已有的环境：node、git、npm
快速安装脚手架：
搭建预览

新建一个文件夹

文章图片

进入文件夹并运行 docsify 初始化命令：cd rodert -> docsify init ./

你会发现 rodert 文件夹下面多了一些文件。后面一一解释

本地预览网站：docsify serve ./ 然后访问：http://localhost:3000/

文章图片

初始化后效果图

文章图片

工程& 配置介绍下面是我们需要的一些基础配置。建议 clone 这个地址 https://rodert.github.io/javaPub-Interview/，运行看效果。

文章图片

1. index.html：入口文件，docsify 的各项配置都在此页面设置。 2. README.md：默认展示的首页就是 README.md 里的内容。 3. .nojekyll：用于阻止 GitHub Pages 会忽略掉下划线开头的文件。

< !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="https://www.songbingjia.com//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css"> < /head> < body> < div id="app"> < /div> < script src="https://www.songbingjia.com//unpkg.com/docsify-edit-on-github/index.js"> < /script> < script> window.$docsify = name: rodert, repo: https://gitee.com/rodert/rodert, maxLevel: 5,//最大支持渲染的标题层级 subMaxLevel: 3, homepage: README.md, coverpage: true,//封面 loadSidebar: true,//开启侧边栏 auto2top: true,//切换页面后是否自动跳转到页面顶部< /script> < !-- Docsify v4 --> < script src="https://www.songbingjia.com//cdn.jsdelivr.net/npm/docsify@4"> < /script> < !--Java代码高亮--> < script src="https://www.songbingjia.com//unpkg.com/prismjs/components/prism-java.js"> < /script> < !--Json代码高亮--> < script src="https://www.songbingjia.com//unpkg.com/prismjs/components/prism-json.min.js"> < /script> < /body> < /html>

一些好用的插件全文搜索功能

< !--全文搜索--> < script src="http://img.readke.com/220609/0319346324-9.jpg">

配置方式：

< script> window.$docsify = ...... //全文搜索 search: maxAge: 86400000, // 过期时间，单位毫秒，默认一天 paths: auto, placeholder: 请输入要搜索的关键字, noData: 没有结果, // 搜索标题的最大程级, 1 - 6 depth: 6, ,< /script>

OK，有了搜索功能。
复制copy需要引入 js 文件：

< script src="https://www.songbingjia.com//cdn.jsdelivr.net/npm/docsify-copy-code"> < /script>

效果：

文章图片

分页导航，在文档的最下方会展示上一个文档和下一个文档

pagination: previousText: 上一章节, nextText: 下一章节,

需要引入两个 js 文件：

< script src="https://www.songbingjia.com//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"> < /script> < script src="https://www.songbingjia.com//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"> < /script>

自定义配置官网：https://docsify.js.org/
侧边栏 loadSidebar增加 _sidebar.md 文件，编写文件格式如下：（也就是md语法）