首页 › Github/Gitee开源交流 › Hexo+Gitee搭建个人博客

致命守护者肥熊猫 發表於 2021-3-31 17:47:00

Hexo+Gitee搭建个人博客

<img src="https://gitee.com/caihesheng/caituotuo-image/raw/master/img/20210319212811.png" style="zoom: 67%">
<h2 id="hexogitee搭建个人博客"><code>Hexo+Gitee搭建个人博客</code></h2>
<h3 id="一前言"><code>（一）前言</code></h3>
<ul>
<li>
<p><code>beacuse（事出有因）：</code></p>
<p>很久之前就知道Hexo搭建个人博客，但由于惰性，一直没有行动，在此之前一直用的是博客园。</p>
</li>
<li>
<p><code>but（但是）：</code></p>
<p>今天打开博客园，发现网站进行整改，导致之前的博客无法查看，也无法发布新博客。<br>
<img src="https://gitee.com/caihesheng/caituotuo-image/raw/master/img/20210319212900.png" style="zoom: 100%"></p>
</li>
<li>
<p><code>so（因此）：</code></p>
<p>本着自己动手，丰衣足食的原则，废话不多说，开始搭建自己专属的个人博客网站。</p>
</li>
<li>
<p><code>why（为什么选择Hexo+Gitee）：</code></p>
<ul>
<li>
<p>Hexo官方网站提供详细的中文文档，可以帮助我们快速搭建个人博客。</p>
</li>
<li>
<p>GitHub的镜像在国外，访问速度会受到限制，当然也可以通过CDN加速，这里使用Gitee就不用担心限速问题了。</p>
</li>
</ul>
</li>
</ul>
<h3 id="二前期准备"><code>（二）前期准备</code></h3>
<h4 id="21-注册gitee账号并创建一个仓库"><code>2.1 注册Gitee账号并创建一个仓库</code></h4>
<p>这里建议仓库的名称跟Gitee账号的用户名一致，这样后面生成的网站地址就没有二级目录，要短一些。</p>
<img src="https://gitee.com/caihesheng/caituotuo-image/raw/master/img/20210319212916.png" style="zoom: 67%">
<h4 id="22-开启gitee-page服务"><code>2.2 开启Gitee Page服务</code></h4>
<p>服务 - Git Pages - 提交实名认证信息（之前是不需要实名认证，后面需要实名认证，大约一个工作日）</p>
<img src="https://gitee.com/caihesheng/caituotuo-image/raw/master/img/20210319212932.png" style="zoom: 80%">
<p>开启后如下图所示可以看到生成的网站地址：</p>
<img src="https://gitee.com/caihesheng/caituotuo-image/raw/master/img/20210319212943.png" style="zoom: 67%">
<h4 id="23-安装nodejs"><code>2.3 安装node.js</code></h4>
<p>官网：https://nodejs.org/en/</p>
<p>Node.js 的版本不低于 8.10，这里建议使用 Node.js 10.0 及以上版本。</p>
<img src="https://gitee.com/caihesheng/caituotuo-image/raw/master/img/20210319212954.png" style="zoom: 50%">
<p>下载完安装即可（安装很简单Next --&gt; Next就可以）：</p>
<img src="https://gitee.com/caihesheng/caituotuo-image/raw/master/img/20210319213004.png" style="zoom: 100%">
<p>检查node.js是否安装成功，<code>win+r</code>打开cmd命令行界面，分别输入<code>node -v</code>和<code>npm -v</code></p>
<pre><code class="language-bash">C:\Users\DELL&gt;node -v
v15.12.0

C:\Users\DELL&gt;npm -v
7.6.3
</code></pre>
<p>由于npm默认的镜像是在国外，速度慢且可能出现异常，所以我们需要更换源镜像，这里替换成淘宝镜像：</p>
<ul>
<li>
<p>查看镜像源：<code>npm get registry</code></p>
<pre><code class="language-bash">C:\Users\DELL&gt;npm get registry
https://registry.npm.taobao.org/
</code></pre>
</li>
<li>
<p>修改镜像源：<code>npm config set registry https://registry.npm.taobao.org</code></p>
<pre><code class="language-bash">C:\Users\DELL&gt;npm config set registry https://registry.npm.taobao.org

C:\Users\DELL&gt;npm get registry
https://registry.npm.taobao.org/
</code></pre>
</li>
</ul>
<h4 id="24-安装git"><code>2.4 安装Git</code></h4>
<p>官网地址：http://git-scm.com/</p>
<h4 id="25-安装hexo"><code>2.5 安装Hexo</code></h4>
<p>所有必备的应用程序安装完成后，即可使用npm命令安装Hexo：<code>npm install -g hexo-cli</code>。</p>
<pre><code class="language-bash">C:\Users\DELL&gt;npm install -g hexo-cli

added 66 packages in 3s
</code></pre>
<h4 id="26-建站"><code>2.6 建站</code></h4>
<p>在电脑中创建一个文件夹用来存放博客，如：F:\blog 之后的命令行操作都在这个文件夹的目录下进行。</p>
<p>生成默认博客：<code>hexo init</code></p>
<pre><code class="language-bash">F:\blog&gt;hexo init
INFOCloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
INFOStart blogging with Hexo!
</code></pre>
<p>目录结构：</p>
<img src="https://gitee.com/caihesheng/caituotuo-image/raw/master/img/20210319213024.png" style="zoom: 67%">
<p>本地启动：<code>hexo s</code></p>
<pre><code class="language-bash">F:\blog&gt;hexo s
INFOValidating config
INFOStart processing
INFOHexo is running at http://localhost:4000 . Press Ctrl+C to stop.
</code></pre>
<p>打开浏览器输入：<code>http://localhost:4000</code>，看到如下画面说明建站成功：</p>
<img src="https://gitee.com/caihesheng/caituotuo-image/raw/master/img/20210319213059.png" style="zoom: 67%">
<h3 id="三提交到gitee上"><code>（三）提交到Gitee上</code></h3>
<p>打开根目录/blog下的_config.yml文件</p>
<p>修改以下代码：</p>
<pre><code class="language-bash">deploy:
type: git
repo: https://gitee.com/caihesheng/caihesheng.git   #将地址换成自己的地址
branch: master
</code></pre>
<p>安装部署插件：</p>
<pre><code class="language-bash">F:\blog&gt;npm install hexo-deployer-git --save

added 7 packages in 1s
</code></pre>
<p>清理缓存：<code>hexo clean</code></p>
<p>生成静态文件：<code>hexo g</code></p>
<pre><code class="language-bash">F:\blog&gt;hexo g
INFOValidating config
INFOStart processing
INFOFiles loaded in 108 ms
...
INFOGenerated: js/jquery-3.4.1.min.js
INFOGenerated: css/fonts/fontawesome-webfont.svg
INFO17 files generated in 627 ms
</code></pre>
<p>推送到Gitee：<code>hexo d Gitee的用户名/邮箱 密码</code></p>
<pre><code class="language-bash">F:\blog&gt;hexo d ********* *************
INFOValidating config
INFODeploying: git
...
Branch 'master' set up to track remote branch 'master' from 'https://gitee.com/caihesheng/caihesheng.git'.
INFO  Deploy done: git
</code></pre>
<p>打开Gitee仓库，可以看到我们推送成功的静态文件的目录结构：</p>
<img src="https://gitee.com/caihesheng/caituotuo-image/raw/master/img/20210319213115.png" style="zoom: 67%">
<p>再次修改根目录下的_config.yml文件：</p>
<pre><code class="language-bash"># URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://caihesheng.gitee.io # 修改成自己的Gitee Page的地址
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks
</code></pre>
<p>更新Gitee Pages，每次修改博客内容后都需要做以下操作：</p>
<ul>
<li>
<p><code>hexo clean</code></p>
</li>
<li>
<p><code>hexo g</code>/<code>hexo d -g</code>/<code>hexo deploy -g</code></p>
</li>
<li>
<p><code>hexo d</code></p>
</li>
<li>
<p><code>更新Gitee Pages服务</code></p>
</li>
</ul>
<img src="https://gitee.com/caihesheng/caituotuo-image/raw/master/img/20210319213125.png" style="zoom: 67%">
<p>打开浏览器输入地址：<code>https://caihesheng.gitee.io/</code>，看到如下画面，说明提交成功：</p>
<img src="https://gitee.com/caihesheng/caituotuo-image/raw/master/img/image-20210319154419416.png" style="zoom: 67%">
<h3 id="四装修博客"><code>（四）装修博客</code></h3>
<h4 id="41-下载主题"><code>4.1 下载主题</code></h4>
<p>这里使用到了前面安装的git命令，通过命令来克隆主题文件。</p>
<p>切换到themes目录，右键单击，选择Git Bash Here：</p>
<img src="https://gitee.com/caihesheng/caituotuo-image/raw/master/img/20210319213139.png" style="zoom: 50%">
<p>输入命令：<code>git clone https://gitee.com/yafine66/hexo-theme-matery.git</code></p>
<pre><code class="language-bash">$ git clone https://gitee.com/yafine66/hexo-theme-matery.git
Cloning into 'hexo-theme-matery'...
remote: Enumerating objects: 4860, done.
remote: Counting objects: 100% (4860/4860), done.
remote: Compressing objects: 100% (2021/2021), done.
remote: Total 4860 (delta 3200), reused 4179 (delta 2775), pack-reused 0
Receiving objects: 100% (4860/4860), 14.50 MiB | 1.51 MiB/s, done.
Resolving deltas: 100% (3200/3200), done.
</code></pre>
<h4 id="42-切换主题"><code>4.2 切换主题</code></h4>
<ul>
<li>
<p>修改根目录下的 <code>_config.yml</code> 的 <code>theme</code> 的值：<code>theme: hexo-theme-matery</code></p>
</li>
<li>
<p>修改两个 <code>per_page</code> 的分页条数值为 <code>6</code> 的倍数，如：<code>12</code>、<code>18</code> 等，这样文章列表在各个屏幕下都能较好的显示。</p>
</li>
<li>
<p>中文用户，建议修改 <code>language</code> 的值为 <code>zh-CN</code>。</p>
</li>
</ul>
<h4 id="43-新建菜单页"><code>4.3 新建菜单页</code></h4>
<p>分类categories页、标签tags页、关于我about页（这里演示categories，其他类似创建）：</p>
<p><code>categories</code> 页是用来展示所有分类的页面，如果 <code>source</code> 目录下还没有 <code>categories/index.md</code> 文件，那么就需要新建一个，命令如下：</p>
<pre><code class="language-bash">hexo new page "categories"
</code></pre>
<p>编辑你刚刚新建的页面文件 <code>/source/categories/index.md</code>，至少需要以下内容：</p>
<pre><code class="language-yaml">---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---
</code></pre>
<h4 id="44-其他样式配置"><code>4.4 其他样式配置</code></h4>
<p>更多样式的配置在<code>\hexo-theme-matery\_config.yml</code>中修改。</p>
<h3 id="五新建文章"><code>（五）新建文章</code></h3>
<p>输入命令：<code>hexo new '文章名'</code></p>
<pre><code class="language-bash">F:\blog&gt;hexo new 'Hexo+Gitee搭建个人博客'
INFOValidating config
INFOCreated: F:\blog\source\_posts\Hexo-Gitee搭建个人博客.md
</code></pre>
<p><code>Front-matter</code> 选项中的所有内容均为<strong>非必填</strong>的。但仍然建议至少填写 <code>title</code> 和 <code>date</code> 的值。</p>
<table>
<thead>
<tr>
<th style="text-align: left">配置选项</th>
<th style="text-align: left">默认值</th>
<th style="text-align: left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">title</td>
<td style="text-align: left"><code>Markdown</code> 的文件标题</td>
<td style="text-align: left">文章标题</td>
</tr>
<tr>
<td style="text-align: left">date</td>
<td style="text-align: left">文件创建时的日期时间</td>
<td style="text-align: left">发布时间，应保证全局唯一</td>
</tr>
<tr>
<td style="text-align: left">author</td>
<td style="text-align: left">根 <code>_config.yml</code> 中的 <code>author</code></td>
<td style="text-align: left">文章作者</td>
</tr>
<tr>
<td style="text-align: left">img</td>
<td style="text-align: left"><code>featureImages</code> 中的某个值</td>
<td style="text-align: left">文章特征图</td>
</tr>
<tr>
<td style="text-align: left">top</td>
<td style="text-align: left"><code>true</code></td>
<td style="text-align: left">文章是否置顶，值为 <code>true</code>，则会作为首页推荐文章</td>
</tr>
<tr>
<td style="text-align: left">cover</td>
<td style="text-align: left"><code>false</code></td>
<td style="text-align: left">是否需要加入到首页轮播封面中</td>
</tr>
<tr>
<td style="text-align: left">coverImg</td>
<td style="text-align: left">无</td>
<td style="text-align: left">该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片</td>
</tr>
<tr>
<td style="text-align: left">password</td>
<td style="text-align: left">无</td>
<td style="text-align: left">文章阅读密码，该值必须是用 <code>SHA256</code> 加密后的密码，防止被他人识破。</td>
</tr>
<tr>
<td style="text-align: left">toc</td>
<td style="text-align: left"><code>true</code></td>
<td style="text-align: left">是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。</td>
</tr>
<tr>
<td style="text-align: left">mathjax</td>
<td style="text-align: left"><code>false</code></td>
<td style="text-align: left">是否开启数学公式支持</td>
</tr>
<tr>
<td style="text-align: left">summary</td>
<td style="text-align: left">无</td>
<td style="text-align: left">文章卡片摘要显示的文字，如果无值程序会自动截取文章的部分内容作为摘要</td>
</tr>
<tr>
<td style="text-align: left">categories</td>
<td style="text-align: left">无</td>
<td style="text-align: left">文章分类，建议一篇文章一个分类</td>
</tr>
<tr>
<td style="text-align: left">tags</td>
<td style="text-align: left">无</td>
<td style="text-align: left">文章标签，一篇文章可以多个标签</td>
</tr>
</tbody>
</table>
<h3 id="六自定义连接"><code>（六）自定义连接</code></h3>
<p>Hexo默认文章链接生成规则是按照年、月、日、标题来生成的。一旦文章标题或者发布时间被修改，URL 就会发生变化，之前文章地址也会变成404，而且URL层级很深，不利于分享和搜索引擎收录。<br>
<img src="https://gitee.com/caihesheng/caituotuo-image/raw/master/img/20210319214115.png" style="zoom: 100%"></p>
<ul>
<li>
<p>安装插件：<code>npm install hexo-abbrlink --save</code></p>
<pre><code class="language-bash">F:\blog&gt;npm install hexo-abbrlink --save

added 5 packages in 2s
</code></pre>
</li>
<li>
<p>修改配置</p>
<p>修改博客根目录配置文件 _config.yml 的 permalink：</p>
<pre><code class="language-yaml">permalink: p/:abbrlink.html
abbrlink:
    alg: crc32   #算法： crc16(default) and crc32
    rep: hex   #进制： dec(default) and hex
</code></pre>
</li>
</ul>
<h3 id="七参考"><code>（七）参考</code></h3>
<ul>
<li>闪耀之狐</li>
<li>基于Hexo的matery主题搭建博客并深度优化</li>
</ul><br><br>
来源：https://www.cnblogs.com/caituotuo/p/14602851.html

查看完整版本: Hexo+Gitee搭建个人博客