码云 + Hexo 搭建个人博客

桃扇骨 2021-06-26 16:06 590阅读 0赞

--------------------

文章比较长，需要侧边栏目录的，可以点击我的个人博客地址：http://zwd596257180.gitee.io/blog  
如果有什么问题想问的，请在 CSDN 上留言。

--------------------

# 准备环境 #

1.  安装 Node
2.  安装 Git
3.  注册码云
4.  安装 Hexo

npm install hexo-cli -g

*  出现下图表示安装成功：

![Markdown][]

# 搭建本地个人博客 #

## 初始化 hexo ##

*  新建一个空白文件夹（下文提到的“项目根目录”是指你新建的文件夹的位置）用于存放 hexo 资源。在空白文件夹里面打开 Git Bash ，输入下列命令行进行初始化，初始化成功后会在文件夹生成如下图的文件。

hexo init

![Markdown][Markdown 1]

### 生成静态页面 ###

hexo g

### 启动本地服务 ###

hexo s

*  关闭本地服务器在 **Git Bash** 界面按 Ctrl+C， 在浏览器输入：http://localhost:4000 查看

![Markdown][Markdown 2]

# 美化个人博客 #

## 博客主题设置 ##

### 克隆主题 ###

*  在项目根目录下的 **themes** 文件中，打开 **Git Bash** ，用命令行克隆下新的主题。我这里用的 Next 主题，需要其他主题的自己百度找。

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

![Markdown][Markdown 3]

### 配置主题 ###

*  用文本的方式打开项目根目录下的 \_config.yml 配置文件，找到 **theme** 把原来默认的 **landscape** 主题名字，改成刚刚克隆的主题名字（主题名字为上图中文件夹的名字）。

![Markdown][Markdown 4]

### 测试主题 ###

*  重新回到项目根目录下，打开 **Git Bath** ，用命令行启动服务器。在浏览器访问 http://localhost:4000
    
    ![Markdown][Markdown 5]

### 发布文章 ###

*  \*\*方法一：\*\*在项目根目录下，打开 **Git Bash** ，执行新建命令，然后 hexo 会自动在指定目录下生成对应文件，如下图所示。然后找到新建好的文件，打开即可进行编辑。

hexo new "此处输入文章名字"

![Markdown][Markdown 6]

*  \*\*方法二：\*\*可以直接把已经准备的 md 格式的文章复制到 项目名称 /source/\_posts 目录下，然后打开文件，在文件头加入 front-matter 部分，**title** 表示文章标题，**date** 表示发布时间。如图所示，图片上用到的其他参数，后面会介绍到。
 *  重要的事情说三遍！！！
 *  front-matte 书写的时候要注意，冒号后面要跟一个空格号。
 *  front-matte 书写的时候要注意，冒号后面要跟一个空格号。
 *  front-matte 书写的时候要注意，冒号后面要跟一个空格号。

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

![Markdown][Markdown 7]

*  准备好 md 格式文件后，使用下面命令生成网站静态文件到默认设置的 public 文件夹，然后再启动本地服务器。

hexo g

## 主题风格设置 ##

*  打开主题文件夹下的 \_config.yml 配置文件（注意：这里要区别，不是項目根目录，主题文件夹的路径为：新建空白文件夹名称/themes/主题文件夹名称）。通过查找功能找到 **Schemes** 模块，修改为 **Gemini** 风格。如果喜欢其他风格可以自己修改。如下图所示：  
    ![Markdown][Markdown 8]
 *  刷新页面可以看到新风格的界面如下图所示：

![Markdown][Markdown 9]

## 博客左侧栏设置 ##

*  在上面的网站界面，可以发现网站的文字是英文，只要修改一下语言模式即可。打开根目录文件夹下的 \_config.yml 配置文件。找到 **language**，设置为 **zh-CN**。标题等其他参数的设置如下。可以对照效果图的具体位置，根据自己的实际需求进行修改。（注意：修改了项目根目录下的 \_config.yml配置文件，需要重启部署项目后才能生效）  
    ![Markdown][Markdown 10]  
    ![Markdown][Markdown 11]

## 分类设置 ##

### 添加分类列表 ###

*  在项目根目录下，执行下面的命令行，新建分类页面，然后会在项目根目录下的 **source** 文件夹中新建一个 **categories** 文件夹。

hexo new page categories

![Markdown][Markdown 12]

*  打开 **categories** 文件夹中的 **index.md** 文件，添加 **type** 字段，设置为 **“categories”**。如下图所示。  
    ![Markdown][Markdown 13]
 *  接着到主题文件夹下的 \_config.yml 配置文件下，找到 **menu** 模块，把 **categories** 的注释给去掉。如下图所示。  
    ![Markdown][Markdown 14]
 *  刷新页面（如果刷新没效果，可以重启服务），可以在页面左侧栏上看到多了一个“分类”列表。  
    ![Markdown][Markdown 15]

### 如何将文章添加到对应分类？ ###

*  文章发布前，在 front-matter 部分，多写一个 **categories** 字段，然后参数写上类别的名称，保存后重启服务，在网页上点击“分类”，可以看到分类下已经生成了刚刚设置的类别，并把刚刚发布的文章归类在此类别下。如下图所示。  
    \[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9gWMcfIn-1571454072700)(http://zwd.yyzheng.cn/hexo\_manong\_blog/9c256cae759cdcffs.png)\]

## 标签设置 ##

*  方法跟分类设置一样，所以不再赘述介绍。
 *  但是需要补充一点， front-matter 中字段有多个参数的时候，可以使用如下图的写法。  
    ![Markdown][Markdown 16]

## 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**。  
    ![Markdown][Markdown 17]
 *  重启服务，效果图如下：  
    ![Markdown][Markdown 18]

## 博客头像设置 ##

### 添加博客头像 ###

*  打开主题文件夹下的 \_config.yml 配置文件，通过查找功能找到 **avatar**，然后把一个在线的头像图片地址（百度图片中直接复制链接即可），作为 **url** 的参数。如下图所示：  
    ![Markdown][Markdown 19]
 *  然后刷新页面，可以看到网站上已经显示了相应的头像了：  
    ![Markdown][Markdown 20]

### 设置头像圆角并旋转打开 ###

*  打开主题文件夹的 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);
      }
    }

*  效果图如下：  
    ![Markdown][Markdown 21]

## 右上角 fork me 设置 ##

*  在 [GitHub Corners][] 上选择你喜欢的挂饰，复制方框内的代码。  
    ![Markdown][Markdown 22]
 *  打开主题文件夹下的 **layout** 文件夹，用记事本的方式打开 **\_layout.swig**，把刚刚复制的代码放到 
    
    下面，并把 **href** 的参数，修改为自己的 github 链接（放自己要跳转的网址即可）。  
    ![Markdown][Markdown 23]
 *  重启服务器，查看效果图：  
    ![Markdown][Markdown 24]

## 网页背景设置 ##

### 动态背景设置 ###

*  打开主题文件夹下的 **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;
    }

*  效果图如下：  
    ![Markdown][Markdown 25]

## 点击出现桃心效果设置 ##

*  在主题文件夹下的 source\\js 目录下新建一个 src 文件夹，在 **src** 文件中，新建一个 **clicklove.js** 文件，然后把下面的代码复制进去。

*  接着，打开主题文件下的 layout 文件夹，用文本的方式打开 **\_layout.swig** 文件，在文末加上如下的代码：

<script type="text/javascript" src="/js/src/clicklove.js"></script>

*  重新部署项目即可看到点击效果如下：  
    ![Markdown][Markdown 26]

## 首页文章预览设置 ##

*  默认情况下，文章在首页是全文显示的，这样肯定是不方便读者浏览。所以需要实现预览模式。效果图如下：  
    \[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qRaw0uB3-1571454072742)(http://zwd.yyzheng.cn/hexo\_manong\_blog/5e832db322ee611es.png)\]
 *  **方法一**：使用 **< !–more–>** 手动切断  
    这种方法可以根据文章的内容，自己在合适的位置添加 < !–more–> 标签，使用灵活，也是Hexo推荐的方法。
 *  **方法二**：添加 **description**  
    在文章的 front-matter 中添加 description 和 photos 字段，如下图所示。如果不需要显示图片的话，可以把 photos 去掉。  
    ps：不知道 front-matter 是什么的话，跳转到第二章的第4点的发布文章看下。  
    ![Markdown][Markdown 27]
 *  方法三：自动形成摘要  
    在主题文件下的 \_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**。如下图所示：  
    ![Markdown][Markdown 28]
 *  重启服务，刷新页面可以看到如下效果图：  
    ![Markdown][Markdown 29]

## 社交小图标设置 ##

*  在主题文件夹下的 \_config.yml 配置文件中，搜索 **Social**，然后提示自己增加自己需要的小图标并设置对应连接。
 *  图标可以到 [Font Awesome Icon][] 网站查找。  
    ![Markdown][Markdown 30]
 *  效果图如下：  
    ![Markdown][Markdown 31]

## 友情链接设置 ##

*  在主题文件夹下的 \_config.yml 配置文件中，搜索 **links\_title**，然后根据自己的需求自己吸修改。  
    ![Markdown][Markdown 32]
 *  效果图如下：  
    ![Markdown][Markdown 33]

## 底部隐藏由Hexo强力驱动、主题–NexT.Mist ##

*  在主题文件夹下，打开 layout/\_partials/footer.swig 文件，注释掉相关代码如下所示，位置是文末。

## 添加底部桃心 ##

*  在主题文件夹下，打开 layout/\_partials/footer.swig 文件，搜索 **with-love** ，然后在 [fontawesom][]上找到自己喜欢的图标，把代码复制到如图对应的位置。  
    ![Markdown][Markdown 34]
 *  效果图如下：  
    ![Markdown][Markdown 35]

## 设置网站图片 Favicon ##

*  在 [阿里巴巴矢量图标库][Link 1] 中找到自己的喜欢的图标，下载下来，覆盖掉主题文件夹下的 source/images 目录里面的三张图片即可。  
    ![Markdown][Markdown 36]

## 网页顶部进度加载条设置 ##

*  在主题文件夹的 \_config.yml 配置文件中，搜索到 **pace** 后，把其值改为 **true** 即可，然后选择一款你喜欢的样式。  
    ![Markdown][Markdown 37]

## 博客置顶设置 ##

*  安装插件

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 %}

![Markdown][Markdown 38]

*  重启服务，效果图如下：  
    ![Markdown][Markdown 39]

## 文末显示微信公众号设置 ##

*  在主题文件夹下打开 \_config.yml 配置文件，定位到 **wechat\_subscriber**，把微信公众号的二维码图片存放到项目根目录下的  source/uploads 里面（若没有 uploads 文件夹可以自己新建）。然后修改相关配置，如下代码所示：

# Wechat Subscriber
    wechat_subscriber:
      enable: true
      qcode: /uploads/wechat-qcode.jpg
      description: 欢迎您扫一扫上面的微信公众号，订阅我的博客！

*  效果图如下：  
    ![Markdown][Markdown 40]

## 打赏功能设置 ##

*  在主题文件夹下打开 \_config.yml 配置文件中，定位到 **reward**，把微信收款码和支付宝收款码存放到项目根目录下的 source/uploads 里面（若没有 uploads 文件夹可以自己新建）。然后如下图所示修改相关配置，**animation** 这个字段是设置字体跳动，可以根据个人需求设置。  
    ![Markdown][Markdown 41]
 *  效果图如下：  
    ![Markdown][Markdown 42]

## 百度分享设置 ##

*  在主题文件夹下打开 \_config.yml 配置文件中，定位到 **baidushare**，然后把对应的注释去掉。然后刷新页面即可。  
    ![Markdown][Markdown 43]  
    ![Markdown][Markdown 44]

## 文章底部版权信息设置 ##

*  在主题文件夹的 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>
      
      
      <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>

![Markdown][Markdown 45]

*  打开项目根目录下的 source/css/\_common/components/post/post.styl 文件，在文末加上这句代码：

@import "my-post-copyright"

*  在 Markdown 文章中加入 **copyright : ture**  
    ![Markdown][Markdown 46]
 *  配置项目根目录下的 \_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:

*  刷新页面或重启服务后，可以在文章尾部看到如下效果图：  
    ![Markdown][Markdown 47]

## 文章代码主题设置 ##

*  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

![Markdown][Markdown 48]

## 网站底部字数统计设置 ##

*  在项目根目录下安装 hexo 插件。

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>

*  刷新页面查看效果图，如下：  
    ![Markdown][Markdown 49]

## 网站底部加上访问量 ##

*  已经 在（网站底部字数统计设置） 这一节安装了相关插件，所以不需要再安装了。
 *  打开主题文件夹下的 layout/\_partials/footer.swig 文件，在文末添加如下代码，位置如下图所示：

![Markdown][Markdown 50]

*  效果图如下：  
    ![Markdown][Markdown 51]

## 外链网易云音乐设置 ##

*  打开[网易云][Link 2]，登录自己的账号，选择自己喜欢的一首歌，然后点击“生成外链播放器”，如下图所示  
    ![Markdown][Markdown 52]
 *  根据自己的需求设置音乐的样式，然后把代码复制下来。  
    ![Markdown][Markdown 53]
 *  打开主题文件夹下的 layout/\_macro/sidebar.swig 文件，自己找个合适的位置，把刚刚复制的代码放进去。我放置的位置如下图所示。  
    ![Markdown][Markdown 54]
 *  需要重启服务才能看到效果。效果图如下所示。  
    ![Markdown][Markdown 55]

## 文章内链接文本样式设置 ##

*  打开主题文件夹下的 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

# 评论模块接入 #

*  我使用的是来必里云跟帖功能来设置评论模块。
 *  首先得先到 [来必里][Link 3] 申请一个账号。
 *  点击右上角的头像，进入“管理页面”，会看到“您确定要获得来必力安装代码吗?”的提示，直接点击“实行”即可。
 *  申请 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==

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

![Markdown][Markdown 56]

# 对接码云的远程仓库 #

*  在码云上创建一个公有仓库，并把公有仓库的链接保存下来。  
    ![Markdown][Markdown 57]
 *  打开项目根目录下的 \_config.yml 配置文件，修改 **deploy** 的值。**tpye** 设置为 **git**，**repo** 则设置为刚刚新建的远程仓库链接。
 *  注意：冒号后面需要再加一个空格，不然会出现格式错误。  
    ![Markdown][Markdown 58]
 *  在项目根目录下，打开 Git Bash，配置码云的用户和邮箱。

git config --global user.name空格+你的码云的名字
    git config --global user.email空格+你的码云的邮箱

*  安装hexo-deployer-git，安装成功图如下：

npm install hexo-deployer-git --save

![Markdown][Markdown 59]

*  一键部署到远程仓库，部署成功图如下：

hexo g
    hexo deploy

![Markdown][Markdown 60]

*  回到刚刚新建的远程仓库，刷新页面，可以发现本地博客的相关文件已经全部部署到远程仓库上了。  
    ![Markdown][Markdown 61]
 *  配置免费域名
 *  在项目首页 -> 服务 -> Gitee Pages  
    ![Markdown][Markdown 62]
 *  第一次用的用户，需要先绑定手机。  
    ![Markdown][Markdown 63]
 *  绑定手机后重新进入，选择对应的分支，然后点击部署。等待之后，就会生成对应的访问连接。如下图所示。  
    ![Markdown][Markdown 64]
 *  点击 Gitee Pages 生成的网站地址，即可远程访问自己的个人博客，但是，我们会发现博客上的样式都没有。  
    ![Markdown][Markdown 65]
 *  打开项目根目录下的 \_config.yml 文件，修改 URL 部分的参数。
 *  **url** 字段的值修改为远程访问连接
 *  **root** 字段的值修改 /+远程仓库的名称  
    ![Markdown][Markdown 66]
 *  重新部署

hexo clean
    hexo g
    hexo d

# 本文参考链接 #

[https://www.jianshu.com/p/13f5e4d7099d][https_www.jianshu.com_p_13f5e4d7099d]

[http://theme-next.iissnan.com/theme-settings.html\#rss][http_theme-next.iissnan.com_theme-settings.html_rss]

[https://www.jianshu.com/p/9f0e90cc32c2][https_www.jianshu.com_p_9f0e90cc32c2]

[https://www.simon96.online/2018/10/12/hexo-tutorial/][https_www.simon96.online_2018_10_12_hexo-tutorial]

[Markdown]: /images/20210626/bdacecd8eacc43abb60b4a29b27bf326.png
[Markdown 1]: /images/20210626/dfa482fa5d92472c9819afd085032019.png
[Markdown 2]: /images/20210626/148fdc938a634d7fa3d41cd4fccf63af.png
[Markdown 3]: /images/20210626/0d42707ffd644a11b978e2f7db07745a.png
[Markdown 4]: /images/20210626/df07ea2af3cb4241a19956847ec0f8a0.png
[Markdown 5]: /images/20210626/4142a19133434592b9b03dac3453c107.png
[Markdown 6]: /images/20210626/ff2e15d0fe514562b7bc9330024100e2.png
[Markdown 7]: /images/20210626/28665b526f8c4a84a328c6dda286e2cb.png
[Markdown 8]: /images/20210626/5f3321f780724bc982e79c4e08b4f1b5.png
[Markdown 9]: /images/20210626/53ffad89248148b6ad7ba197355a7845.png
[Markdown 10]: /images/20210626/d978dc508f49469a8442dfa9432ec69e.png
[Markdown 11]: /images/20210626/a260ef5af60f4c95b762c9b93b0e9cf5.png
[Markdown 12]: /images/20210626/658ef9c3e0d44bb8b66e6fe3e4f3b102.png
[Markdown 13]: /images/20210626/d3167528e4ac406d964d57ab3db17d90.png
[Markdown 14]: /images/20210626/be652aa9cad24b5aa50c714121c49b29.png
[Markdown 15]: /images/20210626/c22d2bed6ba047aab338a93b31cc161d.png
[Markdown 16]: /images/20210626/ffe1433089b54192b7b221a482aea85c.png
[Markdown 17]: /images/20210626/fdc0308946b24a6ea6ed3be7e0c3d8f8.png
[Markdown 18]: /images/20210626/fa5e3bbe9197464d8686c4d8e2c78028.png
[Markdown 19]: /images/20210626/4b86b1632e5e4e43859e760b34f83508.png
[Markdown 20]: /images/20210626/98662bf4c459498a9ab050d8c143661a.png
[Markdown 21]: /images/20210626/b3c5ce6d68fb4f58a50e168429adf71e.png
[GitHub Corners]: http://tholman.com/github-corners/
[Markdown 22]: /images/20210626/ed07e19bc3e547a288fc7d131a65bfc0.png
[Markdown 23]: /images/20210626/5316a94ab9eb44079593fa94684b05fe.png
[Markdown 24]: /images/20210626/3390a92ca1e84052bed976f15b5a3502.png
[Markdown 25]: /images/20210626/7e8778c05ed847afb3c2dd00d0e3cc8d.png
[Markdown 26]: /images/20210626/0148f07d3ef94b2a9f9b48a58898548b.png
[Markdown 27]: /images/20210626/eaba3b59697545ee9118c2ecc665e16b.png
[Markdown 28]: /images/20210626/77e66003c0504dbea618c71e96a430fe.png
[Markdown 29]: /images/20210626/43a09f9917854c57aef42a77d64f710f.png
[Font Awesome Icon]: https://fontawesome.com/icons?from=io
[Markdown 30]: /images/20210626/e242bb497855498c994090d1687939d7.png
[Markdown 31]: /images/20210626/66685a8bf28543799925fdf623bcc4ec.png
[Markdown 32]: /images/20210626/df2f53cdd159497abf7e5046d7b8a3c9.png
[Markdown 33]: /images/20210626/7bcfd305e3984c9c8b9dbc3491c06cf1.png
[fontawesom]: https://fontawesome.com/icons?d=gallery&q=heart
[Markdown 34]: /images/20210626/ea7a2111e60b4915b17523fb0ab4b0d1.png
[Markdown 35]: /images/20210626/65ee91f11c0b4d9488e18235919c1f0a.png
[Link 1]: https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a
[Markdown 36]: /images/20210626/cdc590d9aa364bba96620bf6be1749b6.png
[Markdown 37]: /images/20210626/3b909b8e3e164ae29c08202c10f985de.png
[Markdown 38]: /images/20210626/73f55d4ef0e84888a5a28a1dcbef65cc.png
[Markdown 39]: /images/20210626/5ee2e93d34e948c1b71dab145514a9ee.png
[Markdown 40]: /images/20210626/f04b843dab4f47c78d49213f2ab8f444.png
[Markdown 41]: /images/20210626/24423d8ea8c9408ca437a66132201db6.png
[Markdown 42]: /images/20210626/5fe780f9581848e5bde430133bb43f83.png
[Markdown 43]: /images/20210626/2b258db62a51482888ed1d513f7103ec.png
[Markdown 44]: /images/20210626/c0634fc1005141d687500311483e0ec4.png
[Markdown 45]: /images/20210626/666c27d2a43844ef8e1576b0d6d5f6a5.png
[Markdown 46]: /images/20210626/83610184414d440cbc476c37998ae0a0.png
[Markdown 47]: /images/20210626/af067f3497e641a1aa4622074f7d4d72.png
[Markdown 48]: /images/20210626/109f844ddf054e1da2bd8dc96308ce4d.png
[Markdown 49]: /images/20210626/5648f616a288483193fb26db8739a33b.png
[Markdown 50]: /images/20210626/f3c67e6153414ac0b4e10cee30f7c813.png
[Markdown 51]: /images/20210626/278c04a46ed1450ca666a95ee615308e.png
[Link 2]: https://music.163.com/
[Markdown 52]: /images/20210626/4dc6aeef4acd416c81a3019e0be43148.png
[Markdown 53]: /images/20210626/aab9b6a21a424099bbf21f5c1b8969a8.png
[Markdown 54]: /images/20210626/bddc96928c6b4f399eb8e12b58e37cc7.png
[Markdown 55]: /images/20210626/04a4e960f2994a82954f90b6581c79c5.png
[Link 3]: https://www.livere.com/
[Markdown 56]: /images/20210626/32e53a9c6d7d48e8adbc2a0a4d0af7fa.png
[Markdown 57]: /images/20210626/a1147cd61d5e48c4a14b463de6f0a979.png
[Markdown 58]: /images/20210626/0893798c548249cd931364a7ac14dea1.png
[Markdown 59]: /images/20210626/5a4e02fd62e344f2b788dfb9924644e2.png
[Markdown 60]: /images/20210626/dee4ac70f0064bff81771da8a524a42d.png
[Markdown 61]: /images/20210626/237a1e4a71894c2ca55a6e85385b4d83.png
[Markdown 62]: /images/20210626/74d978dde9584e70b7a0f73f955a5f31.png
[Markdown 63]: /images/20210626/b13f642f85144ec6894d0786257342d8.png
[Markdown 64]: /images/20210626/91d19c9e2e2e4bccbd730ef9abd82244.png
[Markdown 65]: /images/20210626/9a8d9fdac0f340d1877d021af2db1617.png
[Markdown 66]: /images/20210626/b773fb999c7b4c7da8b91f2dda79224e.png
[https_www.jianshu.com_p_13f5e4d7099d]: https://www.jianshu.com/p/13f5e4d7099d
[http_theme-next.iissnan.com_theme-settings.html_rss]: http://theme-next.iissnan.com/theme-settings.html#rss
[https_www.jianshu.com_p_9f0e90cc32c2]: https://www.jianshu.com/p/9f0e90cc32c2
[https_www.simon96.online_2018_10_12_hexo-tutorial]: https://www.simon96.online/2018/10/12/hexo-tutorial/