適合人群：入門(mén)級(jí)別教程，如果你想擁有一個(gè)自己的網(wǎng)站，又苦于沒(méi)有云服務(wù)" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

18143453325 或 在線咨詢(xún) 在線咨詢(xún)
18143453325 或 在線咨詢(xún)
所在位置： 首頁(yè) > 營(yíng)銷(xiāo)資訊 > 網(wǎng)站運(yùn)營(yíng) > 基于 Gitee 搭建個(gè)人網(wǎng)站-入門(mén)教程

基于 Gitee 搭建個(gè)人網(wǎng)站-入門(mén)教程

時(shí)間：2023-04-30 15:24:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-04-30 15:24:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

基于 Gitee 搭建個(gè)人網(wǎng)站-入門(mén)教程：

前言

這是一篇基于Gitee搭建個(gè)人網(wǎng)站的保姆級(jí)教程。從零到一。如果你想基于云服務(wù)器搭建，我以前寫(xiě)過(guò)一篇菜鳥(niǎo)篇。

適合人群：入門(mén)級(jí)別教程，如果你想擁有一個(gè)自己的網(wǎng)站，又苦于沒(méi)有云服務(wù)器，這個(gè)是你的不二選擇。

本篇是基于 docsify 搭建，docsify 是一個(gè)文檔類(lèi)博客模板，簡(jiǎn)介且方便使用。

效果預(yù)覽： https://rodert.github.io/JavaPub-Interview/




@










準(zhǔn)備

你需要已有的環(huán)境：node、git、npm

快速安裝腳手架：

npm i docsify-cli -g

搭建預(yù)覽

  1. 新建一個(gè)文件夾
mkdir rodert
  1. 進(jìn)入文件夾并運(yùn)行 docsify 初始化命令：cd rodert -> docsify init ./
你會(huì)發(fā)現(xiàn) rodert 文件夾下面多了一些文件。后面一一解釋

  1. 本地預(yù)覽網(wǎng)站：docsify serve ./ 然后訪問(wèn)：http://localhost:3000/



初始化后效果圖




工程&配置介紹

下面是我們需要的一些基礎(chǔ)配置。建議 clone 這個(gè)地址 https://rodert.github.io/JavaPub-Interview/，運(yùn)行看效果。

1. index.html：入口文件，docsify 的各項(xiàng)配置都在此頁(yè)面設(shè)置。2. README.md：默認(rèn)展示的首頁(yè)就是 README.md 里的內(nèi)容。3. .nojekyll：用于阻止 GitHub Pages 會(huì)忽略掉下劃線開(kāi)頭的文件。<!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,//最大支持渲染的標(biāo)題層級(jí) subMaxLevel: 3, homepage: 'README.md', coverpage: true,//封面 loadSidebar: true,//開(kāi)啟側(cè)邊欄 auto2top: true,//切換頁(yè)面后是否自動(dòng)跳轉(zhuǎn)到頁(yè)面頂部 } </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, // 過(guò)期時(shí)間，單位毫秒，默認(rèn)一天 paths: 'auto', placeholder: '請(qǐng)輸入要搜索的關(guān)鍵字', noData: '沒(méi)有結(jié)果', // 搜索標(biāo)題的最大程級(jí), 1 - 6 depth: 6, }, } </script>OK，有了搜索功能。

復(fù)制copy

需要引入 js 文件：

<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>效果：

分頁(yè)導(dǎo)航，在文檔的最下方會(huì)展示上一個(gè)文檔和下一個(gè)文檔

pagination: { previousText: '上一章節(jié)', nextText: '下一章節(jié)',}需要引入兩個(gè) 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>

自定義配置

官網(wǎng)：https://docsify.js.org/

側(cè)邊欄 loadSidebar

loadSidebar: true,
增加 _sidebar.md 文件，編寫(xiě)文件格式如下：（也就是md語(yǔ)法）

- [CentOS](centos.md)- [Docker](docker.md)- [Mac](mac.md)- [NPM](npm.md)- [推薦](recommend.md)

部署

部署github

  1. 新建倉(cāng)庫(kù)
  2. 提交項(xiàng)目
  3. 開(kāi)啟 Github Pages

同步國(guó)內(nèi)Gitee、訪問(wèn)速度

現(xiàn)在Github網(wǎng)絡(luò)非常不穩(wěn)定，在碼云部署一份

  1. 導(dǎo)入 Github 項(xiàng)目
  2. 選擇 -> 服務(wù) -> Gitee Pages
  3. 慶祝一下，不妨給 JavaPub 留個(gè)言，分享一下喜悅。

關(guān)鍵詞：入門(mén),教程

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉