前言
這是一篇基於Gitee搭建個人網站的保姆級教程。從零到一。如果你想基於雲服務器搭建，我以前寫過一篇菜鳥篇。
適合人群：入門級別教程，如果你想擁有一個自己的網站，又苦於沒有雲服務器，這個是你的不二選擇。
本篇是基於 docsify 搭建，docsify 是一個文檔類博客模板，簡介且方便使用。
效果預覽：
https://rodert.github.io/JavaPub-Interview/
@
目錄
准備
你需要已有的環境：node、git、npm
快速安裝腳手架：
npm i docsify-cli -g
搭建預覽
- 新建一個文件夾
mkdir rodert
- 進入文件夾並運行 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="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body>
<div id="app"></div>
<script src="//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="//cdn.jsdelivr.net/npm/docsify@4"></script>
<!--Java代碼高亮-->
<script src="//unpkg.com/prismjs/components/prism-java.js"></script>
<!--Json代碼高亮-->
<script src="//unpkg.com/prismjs/components/prism-json.min.js"></script>
</body>
</html>
一些好用的插件
全文搜索功能
<!--全文搜索-->
<script src="https://cdn.bootcss.com/docsify/4.5.9/plugins/search.min.js">
配置方式：
<script>
window.$docsify = {
......
//全文搜索
search: {
maxAge: 86400000, // 過期時間，單位毫秒，默認一天
paths: 'auto',
placeholder: '請輸入要搜索的關鍵字',
noData: '沒有結果',
// 搜索標題的最大程級, 1 - 6
depth: 6,
},
}
</script>
OK，有了搜索功能。
復制copy
需要引入 js 文件：
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
效果：
分頁導航，在文檔的最下方會展示上一個文檔和下一個文檔
pagination: {
previousText: '上一章節',
nextText: '下一章節',
}
需要引入兩個 js 文件：
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>
自定義配置
側邊欄 loadSidebar
loadSidebar: true,
增加 _sidebar.md 文件，編寫文件格式如下：（也就是md語法）
- [CentOS](centos.md)
- [Docker](docker.md)
- [Mac](mac.md)
- [NPM](npm.md)
- [推薦](recommend.md)
部署
部署github
- 新建倉庫
- 提交項目
- 開啟 Github Pages
同步國內Gitee、訪問速度
現在Github網絡非常不穩定，在碼雲部署一份
- 導入 Github 項目
- 選擇 -> 服務 -> Gitee Pages
- 慶祝一下，不妨給 JavaPub 留個言，分享一下喜悅。