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

水晶猎龙者 發表於 2022-3-13 16:41:00

<h1 id="前言">前言</h1>
<p>这是一篇基于Gitee搭建个人网站的保姆级教程。从零到一。如果你想基于云服务器搭建，我以前写过一篇菜鸟篇。</p>
<p><strong>适合人群</strong>：入门级别教程，如果你想拥有一个自己的网站，又苦于没有云服务器，这个是你的不二选择。</p>
<p>本篇是基于 docsify 搭建，docsify 是一个文档类博客模板，简介且方便使用。</p>
<p>效果预览：<br>
https://rodert.github.io/JavaPub-Interview/<br>
<img src="https://img-blog.csdnimg.cn/b0a347cb347842a78dada9fb0cbb4fb8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASmF2YVB1Yi1yb2RlcnQ=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述" loading="lazy"></p>
<p>@</p><div class="toc"><div class="toc-container-header">目录</div><ul><li>前言</li><li>准备</li><li>搭建预览</li><li>工程&配置介绍</li><li>一些好用的插件<ul><li>全文搜索功能</li><li>复制copy</li><li>分页导航，在文档的最下方会展示上一个文档和下一个文档</li></ul></li><li>自定义配置<ul><li>侧边栏 loadSidebar</li></ul></li><li>部署<ul><li>部署github</li><li>同步国内Gitee、访问速度</li></ul></li></ul></div><p></p>
<h1 id="准备">准备</h1>
<p>你需要已有的环境：node、git、npm</p>
<p>快速安装脚手架：</p>
<blockquote>
<p>npm i docsify-cli -g</p>
</blockquote>
<h1 id="搭建预览">搭建预览</h1>
<ol>
<li>新建一个文件夹</li>
</ol>
<blockquote>
<p>mkdir rodert</p>
</blockquote>
<p><img src="https://img-blog.csdnimg.cn/ab6433e100254a52bfe39c36197c2eb0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASmF2YVB1Yi1yb2RlcnQ=,size_13,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述" loading="lazy"></p>
<ol start="2">
<li>进入文件夹并运行 docsify 初始化命令：cd rodert -> docsify init ./</li>
</ol>
<p>你会发现 rodert 文件夹下面多了一些文件。后面一一解释</p>
<ol start="3">
<li>本地预览网站：docsify serve ./ 然后访问：http://localhost:3000/</li>
</ol>
<p><img src="https://img-blog.csdnimg.cn/71bbc930f4584fd48721a5153b11b790.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASmF2YVB1Yi1yb2RlcnQ=,size_15,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述" loading="lazy"><br>
初始化后效果图<br>
<img src="https://img-blog.csdnimg.cn/2dbcd75b5de8424498fc1f2e8edffa91.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASmF2YVB1Yi1yb2RlcnQ=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述" loading="lazy"></p>
<h1 id="工程配置介绍">工程&配置介绍</h1>
<p>下面是我们需要的一些基础配置。建议 clone 这个地址 <code>https://rodert.github.io/JavaPub-Interview/</code>，运行看效果。</p>
<p><img src="https://img-blog.csdnimg.cn/57559f008aa147ba8d7cb74ace79c2a9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASmF2YVB1Yi1yb2RlcnQ=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述" loading="lazy"></p>
<pre><code class="language-bash">1. index.html：入口文件，docsify 的各项配置都在此页面设置。
2. README.md：默认展示的首页就是 README.md 里的内容。
3. .nojekyll：用于阻止 GitHub Pages 会忽略掉下划线开头的文件。
</code></pre>
<pre><code class="language-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 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>

<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>

<script src="//unpkg.com/prismjs/components/prism-java.js"></script>

<script src="//unpkg.com/prismjs/components/prism-json.min.js"></script>
</body>
</html>

</code></pre>
<h1 id="一些好用的插件">一些好用的插件</h1>
<h2 id="全文搜索功能">全文搜索功能</h2>
<pre><code class="language-json">
<script src="https://cdn.bootcss.com/docsify/4.5.9/plugins/search.min.js">
</code></pre>
<p>配置方式：</p>
<pre><code class="language-html"><script>
window.$docsify = {
   ......
   //全文搜索
   search: {
   maxAge: 86400000, // 过期时间，单位毫秒，默认一天
   paths: 'auto',
   placeholder: '请输入要搜索的关键字',
   noData: '没有结果',
   // 搜索标题的最大程级, 1 - 6
   depth: 6,
   },
}
</script>
</code></pre>
<p>OK，有了搜索功能。</p>
<h2 id="复制copy">复制copy</h2>
<p>需要引入 js 文件：</p>
<pre><code class="language-bash"><script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
</code></pre>
<p>效果：</p>
<p><img src="https://img-blog.csdnimg.cn/a7f301b9ce9847a2af37caa3fce776dd.png" alt="在这里插入图片描述" loading="lazy"></p>
<h2 id="分页导航在文档的最下方会展示上一个文档和下一个文档">分页导航，在文档的最下方会展示上一个文档和下一个文档</h2>
<pre><code class="language-bash">pagination: {
previousText: '上一章节',
nextText: '下一章节',
}
</code></pre>
<p>需要引入两个 js 文件：</p>
<pre><code class="language-bash"><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>
</code></pre>
<h1 id="自定义配置">自定义配置</h1>
<p>官网：https://docsify.js.org/</p>
<h2 id="侧边栏-loadsidebar">侧边栏 loadSidebar</h2>
<blockquote>
<p>loadSidebar: true,</p>
</blockquote>
<p>增加 _sidebar.md 文件，编写文件格式如下：（也就是md语法）</p>
<pre><code class="language-bash">- (centos.md)
- (docker.md)
- (mac.md)
- (npm.md)
- [推荐](recommend.md)
</code></pre>
<h1 id="部署">部署</h1>
<h2 id="部署github">部署github</h2>
<ol>
<li>新建仓库</li>
<li>提交项目</li>
<li>开启 Github Pages</li>
</ol>
<h2 id="同步国内gitee访问速度">同步国内Gitee、访问速度</h2>
<p>现在Github网络非常不稳定，在码云部署一份</p>
<ol>
<li>导入 Github 项目</li>
<li>选择 -> 服务 -> Gitee Pages</li>
<li>庆祝一下，不妨给 JavaPub 留个言，分享一下喜悦。</li>
</ol><br><br>
来源：https://www.cnblogs.com/JavaPub/p/16000918.html

頁: [1]

琼殿技术论坛's Archiver

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