文章比較長，需要側邊欄目錄的，可以點擊我的個人博客地址：http://zwd596257180.gitee.io/blog

準備環境

安裝 Node
安裝 Git
註冊碼雲
安裝 Hexo

npm install hexo-cli -g

出現下圖表示安裝成功：

搭建本地個人博客

初始化 hexo

新建一個空白文件夾（下文提到的“項目根目錄”是指你新建的文件夾的位置）用於存放 hexo 資源。在空白文件夾裏面打開 Git Bash ，輸入下列命令行進行初始化，初始化成功後會在文件夾生成如下圖的文件。

hexo init

生成靜態頁面

hexo g

啓動本地服務

hexo s

關閉本地服務器在 Git Bash 界面按 Ctrl+C，在瀏覽器輸入：http://localhost:4000 查看

美化個人博客

博客主題設置

克隆主題

在項目根目錄下的 themes 文件中，打開 Git Bash ，用命令行克隆下新的主題。我這裏用的 Next 主題，需要其他主題的自己百度找。

git clone https://github.com/theme-next/hexo-theme-next.git

配置主題

用文本的方式打開項目根目錄下的 _config.yml 配置文件，找到 theme 把原來默認的 ~~landscape~~ 主題名字，改成剛剛克隆的主題名字（主題名字爲上圖中文件夾的名字）。

測試主題

重新回到項目根目錄下，打開 Git Bath ，用命令行啓動服務器。在瀏覽器訪問 http://localhost:4000

發佈文章

**方法一：**在項目根目錄下，打開 Git Bash ，執行新建命令，然後 hexo 會自動在指定目錄下生成對應文件，如下圖所示。然後找到新建好的文件，打開即可進行編輯。

hexo new "此處輸入文章名字"

**方法二：**可以直接把已經準備的 md 格式的文章複製到項目名稱 /source/_posts 目錄下，然後打開文件，在文件頭加入 front-matter 部分，title 表示文章標題，date 表示發佈時間。如圖所示，圖片上用到的其他參數，後面會介紹到。
重要的事情說三遍！！！
front-matte 書寫的時候要注意，冒號後面要跟一個空格號。
front-matte 書寫的時候要注意，冒號後面要跟一個空格號。
front-matte 書寫的時候要注意，冒號後面要跟一個空格號。

---
title: a
date: 2019-04-14 23:10:17
---

準備好 md 格式文件後，使用下面命令生成網站靜態文件到默認設置的 public 文件夾，然後再啓動本地服務器。

hexo g

主題風格設置

打開主題文件夾下的 _config.yml 配置文件（注意：這裏要區別，不是項目根目錄，主題文件夾的路徑爲：新建空白文件夾名稱/themes/主題文件夾名稱）。通過查找功能找到 Schemes 模塊，修改爲 Gemini 風格。如果喜歡其他風格可以自己修改。如下圖所示：
刷新頁面可以看到新風格的界面如下圖所示：

博客左側欄設置

在上面的網站界面，可以發現網站的文字是英文，只要修改一下語言模式即可。打開根目錄文件夾下的 _config.yml 配置文件。找到 language，設置爲 zh-CN。標題等其他參數的設置如下。可以對照效果圖的具體位置，根據自己的實際需求進行修改。（注意：修改了項目根目錄下的 _config.yml配置文件，需要重啓部署項目後才能生效）

分類設置

添加分類列表

在項目根目錄下，執行下面的命令行，新建分類頁面，然後會在項目根目錄下的 source 文件夾中新建一個 categories 文件夾。

hexo new page categories

打開 categories 文件夾中的 index.md 文件，添加 type 字段，設置爲 “categories”。如下圖所示。
接着到主題文件夾下的 _config.yml 配置文件下，找到 menu 模塊，把 categories 的註釋給去掉。如下圖所示。
刷新頁面（如果刷新沒效果，可以重啓服務），可以在頁面左側欄上看到多了一個“分類”列表。

如何將文章添加到對應分類？

文章發佈前，在 front-matter 部分，多寫一個 categories 字段，然後參數寫上類別的名稱，保存後重啓服務，在網頁上點擊“分類”，可以看到分類下已經生成了剛剛設置的類別，並把剛剛發佈的文章歸類在此類別下。如下圖所示。

標籤設置

方法跟分類設置一樣，所以不再贅述介紹。
但是需要補充一點， front-matter 中字段有多個參數的時候，可以使用如下圖的寫法。

Hexo 博客添加站內搜索

NexT主題支持集成 Swiftype、微搜索、Local Search 和 Algolia。下面介紹 Local Search 的安裝吧。注意：安裝的時候要是項目根目錄下安裝。
安裝 hexo-generator-search

npm install hexo-generator-search --save

安裝 hexo-generator-searchdb

npm install hexo-generator-searchdb --save

在項目根目錄下的 _config.yml 配置文件的文末添加下面這段代碼。

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

編輯主題文件夾的 _config.yml 配置文件，設置 Local searchenable 爲 ture。
重啓服務，效果圖如下：

博客頭像設置

添加博客頭像

打開主題文件夾下的 _config.yml 配置文件，通過查找功能找到 avatar，然後把一個在線的頭像圖片地址（百度圖片中直接複製鏈接即可），作爲 url 的參數。如下圖所示：
然後刷新頁面，可以看到網站上已經顯示了相應的頭像了：

設置頭像圓角並旋轉打開

打開主題文件夾的 source\css_common\components\sidebar 目錄下的 sidebar-author.styl 文件，然後把下面的代碼添加進去即可。

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  /* 頭像圓形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;
  /* 設置循環動畫 [animation: (play)動畫名稱 (2s)動畫播放時長單位秒或微秒 (ase-out)動畫播放的速度曲線爲以低速結束 
    (1s)等待1秒然後開始動畫 (1)動畫播放次數(infinite爲循環播放) ]*/
 
  /* 鼠標經過頭像旋轉360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}
img:hover {
  /* 鼠標經過停止頭像旋轉 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/
  /* 鼠標經過頭像旋轉360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
/* Z 軸旋轉動畫 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

效果圖如下：

右上角 fork me 設置

在 GitHub Corners 上選擇你喜歡的掛飾，複製方框內的代碼。
打開主題文件夾下的 layout 文件夾，用記事本的方式打開 _layout.swig，把剛剛複製的代碼放到
下面，並把 href 的參數，修改爲自己的 github 鏈接（放自己要跳轉的網址即可）。
重啓服務器，查看效果圖：

網頁背景設置

動態背景設置

打開主題文件夾下的 layout 文件夾，用文本的方式打開 _layout.swig 文件，在文末加上如下的代碼：

<!-- 動態背景 -->
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

背景圖片設置

打開主題文件夾下的 source 文件夾，進入 css/_custom 文件下，用文本形式打開 custom.styl 文件，然後添加下面這段代碼。代碼中 url 的地址是指到：主題文件夾/source/images/ 。

body{
    background:url(/images/bg.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
    // 設置主題部分的透明度，具體看圖
    opacity: 0.8;
}

效果圖如下：

點擊出現桃心效果設置

在主題文件夾下的 source\js 目錄下新建一個 src 文件夾，在 src 文件中，新建一個 clicklove.js 文件，然後把下面的代碼複製進去。

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

接着，打開主題文件下的 layout 文件夾，用文本的方式打開 _layout.swig 文件，在文末加上如下的代碼：

<!-- 頁面點擊小紅心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

重新部署項目即可看到點擊效果如下：

首頁文章預覽設置

默認情況下，文章在首頁是全文顯示的，這樣肯定是不方便讀者瀏覽。所以需要實現預覽模式。效果圖如下：
方法一：使用 < !–more–> 手動切斷
這種方法可以根據文章的內容，自己在合適的位置添加 < !–more–> 標籤，使用靈活，也是Hexo推薦的方法。
方法二：添加 description
在文章的 front-matter 中添加 description 和 photos 字段，如下圖所示。如果不需要顯示圖片的話，可以把 photos 去掉。
ps：不知道 front-matter 是什麼的話，跳轉到第二章的第4點的發佈文章看下。
方法三：自動形成摘要
在主題文件下的 _config.yml 配置文件中添加默認截取的長度爲 150 字符，可以根據需要自行設定。

auto_excerpt:
  enable: true
  length: 150

RSS 設置

安裝 hexo 插件，需要在 hexo 項目根目錄下進行安裝。

 npm install --save hexo-generator-feed

安裝完成後在項目根目錄下的 _config.yml 配置文件的文末添加下面這段代碼：

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

在主題文件夾下的 _config.yml 配置文件中，找到 rss ，在後面加上 /atom.xml。如下圖所示：
重啓服務，刷新頁面可以看到如下效果圖：

社交小圖標設置

在主題文件夾下的 _config.yml 配置文件中，搜索 Social，然後提示自己增加自己需要的小圖標並設置對應連接。
圖標可以到 Font Awesome Icon 網站查找。
效果圖如下：

友情鏈接設置

在主題文件夾下的 _config.yml 配置文件中，搜索 links_title，然後根據自己的需求自己吸修改。
效果圖如下：

底部隱藏由Hexo強力驅動、主題–NexT.Mist

在主題文件夾下，打開 layout/_partials/footer.swig 文件，註釋掉相關代碼如下所示，位置是文末。

<!-- 用下面的符號註釋，註釋代碼用下面括號括起來 -->
<!-- -->

<!-- 
{% if theme.footer.powered.enable %}
  <div class="powered-by">{#
  #}{{ __('footer.powered', next_url('https://hexo.io', 'Hexo', {class: 'theme-link'})) }}{#
  #}{% if theme.footer.powered.version %} v{{ hexo_env('version') }}{% endif %}{#
 #}</div>
{% endif %}

{% if theme.footer.powered.enable and theme.footer.theme.enable %}
  <span class="post-meta-divider">|</span>
{% endif %}

{% if theme.footer.theme.enable %}
  <div class="theme-info">{#
  #}{{ __('footer.theme') }} – {{ next_url('https://theme-next.org', 'NexT.' + theme.scheme, {class: 'theme-link'}) }}{#
  #}{% if theme.footer.theme.version %} v{{ version }}{% endif %}{#
#}</div>
{% endif %}

{% if theme.footer.custom_text %}
  <div class="footer-custom">{#
  #}{{ theme.footer.custom_text }}{#
#}</div>
{% endif %}
-->

添加底部桃心

在主題文件夾下，打開 layout/_partials/footer.swig 文件，搜索 with-love ，然後在 fontawesom上找到自己喜歡的圖標，把代碼複製到如圖對應的位置。
效果圖如下：

設置網站圖片 Favicon

在阿里巴巴矢量圖標庫中找到自己的喜歡的圖標，下載下來，覆蓋掉主題文件夾下的 source/images 目錄裏面的三張圖片即可。

網頁頂部進度加載條設置

在主題文件夾的 _config.yml 配置文件中，搜索到 pace 後，把其值改爲 true 即可，然後選擇一款你喜歡的樣式。

博客置頂設置

安裝插件

npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

然後在需要置頂的文章的 Front-matter 中加上 top 即可，數值越大表示等級越高，越靠前顯示。

---
title: this is my first blog
date: 2019-04-14
top: 100
---

在主題文件夾中打開 layout/_macro/post.swig 文件，定位到 post-header ，把下面的代碼添加進去即可。

{% if post.top %}
  <i class="fa fa-thumb-tack"></i>
  <font color=7D26CD>置頂</font>
{% endif %}

重啓服務，效果圖如下：

文末顯示微信公衆號設置

在主題文件夾下打開 _config.yml 配置文件，定位到 wechat_subscriber，把微信公衆號的二維碼圖片存放到項目根目錄下的 source/uploads 裏面（若沒有 uploads 文件夾可以自己新建）。然後修改相關配置，如下代碼所示：

# Wechat Subscriber
wechat_subscriber:
  enable: true
  qcode: /uploads/wechat-qcode.jpg
  description: 歡迎您掃一掃上面的微信公衆號，訂閱我的博客！

效果圖如下：

打賞功能設置

在主題文件夾下打開 _config.yml 配置文件中，定位到 reward，把微信收款碼和支付寶收款碼存放到項目根目錄下的 source/uploads 裏面（若沒有 uploads 文件夾可以自己新建）。然後如下圖所示修改相關配置，animation 這個字段是設置字體跳動，可以根據個人需求設置。
效果圖如下：

百度分享設置

在主題文件夾下打開 _config.yml 配置文件中，定位到 baidushare，然後把對應的註釋去掉。然後刷新頁面即可。

文章底部版權信息設置

在主題文件夾的 layout/_macro 目錄下，新建一個 my-copyright.swig 文件，把下面的代碼複製進去。

{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  
  <!-- JS庫 sweetalert 可修改路徑 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>本文標題:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="訪問 {{ theme.author }} 的個人博客">{{ theme.author }}</a></p>
  <p><span>發佈時間:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>最後更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>原始鏈接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="點擊複製文章鏈接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="複製成功！"></i></span>
  </p>
  <p><span>許可協議:</span><i class="fa fa-creative-commons"></i> 轉載請保留原文鏈接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '複製成功',
          icon: "success", 
          showConfirmButton: true
          });
    });
    });  
</script>
{% endif %}

在主題文件夾的 source/css/_common/components/post/ 目錄下，新建一個 my-post-copyright.styl 添加如下代碼。

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

打開主題文加下的 layout/_macro/post.swig 文件，找到如圖所示的位置添加上下面這段代碼。

<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>

打開項目根目錄下的 source/css/_common/components/post/post.styl 文件，在文末加上這句代碼：

@import "my-post-copyright"

在 Markdown 文章中加入 copyright : ture
配置項目根目錄下的 _config.yml 文件，此處配置會在第四章節，對接遠程倉庫（碼農）的時候講到，我們到這裏還是用本的本地服務器進行測試，所以不用修改，默認就行。

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

刷新頁面或重啓服務後，可以在文章尾部看到如下效果圖：

文章代碼主題設置

NexT 使用 Tomorrow Theme 作爲代碼高亮，共有5款主題供你選擇。 NexT 默認使用的是白色的 normal 主題，可選的值有 normal，night， night blue， night bright， night eighties。
在主題文件夾的 _config.yml 配置文件中，定位到 highlight_theme，根據需求修改相應的值即可。

文末標籤樣式設置

打開主題文件夾下的 layout_macro\post.swig 文件，搜索 rel=“tag”>#，將#替換成****。然後需要關閉服務器，先把原來的靜態資源給清除掉，重啓服務才能看到效果。

hexo clean
hexo s

網站底部字數統計設置

npm install hexo-wordcount --save

打開主題文件夾下的 layout/_partials/footer.swig 文件，在文末添加上下面這段代碼。

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

刷新頁面查看效果圖，如下：

網站底部加上訪問量

已經在（網站底部字數統計設置）這一節安裝了相關插件，所以不需要再安裝了。
打開主題文件夾下的 layout/_partials/footer.swig 文件，在文末添加如下代碼，位置如下圖所示：

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<div class="powered-by">
  <i class="fa fa-user-md"></i>
  <span id="busuanzi_container_site_pv">
    本站訪問量:<span id="busuanzi_value_site_pv"></span>次
  </span>
  <span class="post-meta-divider">|</span>
  <span id="busuanzi_container_site_uv">
    本站總訪客量：<span id="busuanzi_value_site_uv"></span>人
  </span>
</div>

效果圖如下：

外鏈網易雲音樂設置

打開網易雲，登錄自己的賬號，選擇自己喜歡的一首歌，然後點擊“生成外鏈播放器”，如下圖所示
根據自己的需求設置音樂的樣式，然後把代碼複製下來。
打開主題文件夾下的 layout/_macro/sidebar.swig 文件，自己找個合適的位置，把剛剛複製的代碼放進去。我放置的位置如下圖所示。
需要重啓服務才能看到效果。效果圖如下所示。

文章內鏈接文本樣式設置

打開主題文件夾下的 source\css_common\components\post\post.styl 文件，然後在文末加上下面這段代碼即可。

// 文章內鏈接文本樣式
.post-body p a{
  color: #0593d3; //原始鏈接顏色
  border-bottom: none;
  border-bottom: 1px solid #0593d3; //底部分割線顏色
  &:hover {
    color: #fc6423; //鼠標經過顏色
    border-bottom: none;
    border-bottom: 1px solid #fc6423; //底部分割線顏色
  }
}

文章顯示閱讀數量設置

在主題文件下的 _config.yml 配置文件中，定位到 busuanzi_count，把 enable 的值修改爲 true。

# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

評論模塊接入

我使用的是來必裏雲跟帖功能來設置評論模塊。
首先得先到來必裏申請一個賬號。
點擊右上角的頭像，進入“管理頁面”，會看到“您確定要獲得來必力安裝代碼嗎?”的提示，直接點擊“實行”即可。
申請 City 免費版，如實填寫信息即可。申請成功後，可以看到“一般網站”下的第二行代碼，有個 data-uid，把後面的值複製下來留着備用。
在主題文件下打開 _config.yml 配置文件，定位到 livere_uid，把剛剛拷貝的data-uid粘貼到相應的位置。

# LiveRe comments system
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: MTAyM8888888888DI3OQ==

重新部署就能看到相應的效果：

對接碼雲的遠程倉庫

在碼雲上創建一個公有倉庫，並把公有倉庫的鏈接保存下來。
打開項目根目錄下的 _config.yml 配置文件，修改 deploy 的值。tpye 設置爲 git，repo 則設置爲剛剛新建的遠程倉庫鏈接。
注意：冒號後面需要再加一個空格，不然會出現格式錯誤。
在項目根目錄下，打開 Git Bash，配置碼雲的用戶和郵箱。

git config --global user.name空格+你的碼雲的名字
git config --global user.email空格+你的碼雲的郵箱

安裝hexo-deployer-git，安裝成功圖如下：

npm install hexo-deployer-git --save

一鍵部署到遠程倉庫，部署成功圖如下：

hexo g
hexo deploy

回到剛剛新建的遠程倉庫，刷新頁面，可以發現本地博客的相關文件已經全部部署到遠程倉庫上了。
配置免費域名
在項目首頁 -> 服務 -> Gitee Pages
第一次用的用戶，需要先綁定手機。
綁定手機後重新進入，選擇對應的分支，然後點擊部署。等待之後，就會生成對應的訪問連接。如下圖所示。
點擊 Gitee Pages 生成的網站地址，即可遠程訪問自己的個人博客，但是，我們會發現博客上的樣式都沒有。
打開項目根目錄下的 _config.yml 文件，修改 URL 部分的參數。
url 字段的值修改爲遠程訪問連接
root 字段的值修改 /+遠程倉庫的名稱
重新部署

hexo clean
hexo g
hexo d

本文參考鏈接

https://www.jianshu.com/p/13f5e4d7099d

http://theme-next.iissnan.com/theme-settings.html#rss

https://www.jianshu.com/p/9f0e90cc32c2

https://www.simon96.online/2018/10/12/hexo-tutorial/

碼雲 + Hexo 搭建個人博客

準備環境

搭建本地個人博客

初始化 hexo

生成靜態頁面

啓動本地服務

美化個人博客

博客主題設置

克隆主題

配置主題

測試主題

發佈文章

主題風格設置

博客左側欄設置

分類設置

添加分類列表

如何將文章添加到對應分類？

標籤設置

Hexo 博客添加站內搜索

博客頭像設置

添加博客頭像

設置頭像圓角並旋轉打開

右上角 fork me 設置

網頁背景設置

動態背景設置

背景圖片設置

點擊出現桃心效果設置

首頁文章預覽設置

RSS 設置

社交小圖標設置

友情鏈接設置

底部隱藏由Hexo強力驅動、主題–NexT.Mist

添加底部桃心

設置網站圖片 Favicon

網頁頂部進度加載條設置

博客置頂設置

文末顯示微信公衆號設置

打賞功能設置

百度分享設置

文章底部版權信息設置

文章代碼主題設置

文末標籤樣式設置

網站底部字數統計設置

網站底部加上訪問量

外鏈網易雲音樂設置

文章內鏈接文本樣式設置

文章顯示閱讀數量設置

評論模塊接入

對接碼雲的遠程倉庫

本文參考鏈接