1 前言

本文將介紹利用Hexo+gitee搭建個人部落格。

原理是將markdown檔案生成靜態頁面,釋出到gitee上,利用git page服務提供靜態頁面訪問。

這樣的話不需要花費一分錢即可搭建一個自己的部落格。

我是部落格地址：https://heliufang.gitee.io

2 環境

node.js:因為Hexo是基於node的

git：主要用來推送靜態頁面

Hexo：將markdown檔案轉化成靜態頁面

2.1 node安裝

略。網上有很多，安裝也很簡單

可以參考菜鳥教程:https://www.runoob.com/nodejs/nodejs-install-setup.html

2.2 git安裝

略。win、mac各個平臺有不同的軟體，我是win平臺所以用的是Git-2.13.0-64-bit.exe

參考菜鳥教程：https://www.runoob.com/git/git-install-setup.html

2.3 Hexo安裝

• 全域性安裝Hexo

npm install  hexo-cli -g

• 在win磁碟上建立一個資料夾,並進入這個資料夾，在這個資料夾中右鍵-git bash here，調出git視窗

• 在黑視窗中執行命令,等待hexo初始化完成

hexo init

• 初始化完成後下載依賴

npm install
npm install --save hexo-renderer-pug
 

2.3.1 測試

• 清除生成的靜態檔案,以後每次釋出部落格都要執行此操作

hexo clean

• 重新生成靜態檔案

hexo g

• 啟動hexo服務,這樣在瀏覽器中訪問localhost:4000就可以看到預設的部落格了

hexo s

說明：hexo安裝完成後預設會在 \source_posts\中生成hello-world.md文章,啟動後預設就是看到這個。

3 Hexo配置

根目錄下的_config.yml為全域性配置檔案，相關的配置可以參考官網：

3.1 網站配置

title: 賀劉芳的網路日誌 #網站大標題
subtitle: '每天多學一點知識,就少寫一行程式碼' #網站子標題
description: '賀劉芳的網路日誌'    #這個是seo搜尋引擎用的,很重要
keywords:
author: 賀劉芳
language: zh-CN   #網站語言 zh-CN為中文
timezone: ''
 

3.2 主題配置

#theme: landscape #預設是 landscape 主題，個人覺得不好看
theme: hexo-theme-stun #我使用的是stun這個主題

注意：這裡這個名字如：hexo-theme-stun 要和/themes/下的主題資料夾的名稱對應

3.3 寫作圖片配置

• 安裝圖片外掛

npm install hexo-asset-image --save

• 修改_config.yml

post_asset_folder: true # 將這個改為true預設是false

• 開啟/node_modules/hexo-asset-image/index.js 修改內容如下

'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
  return str.split(m, i).join(m).length;
}

var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
        var link = data.permalink;
    if(version.length > 0 && Number(version[0]) == 3)
       var beginPos = getPosition(link, '/', 1) + 1;
    else
       var beginPos = getPosition(link, '/', 3) + 1;
    // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
    var endPos = link.lastIndexOf('/') + 1;
    link = link.substring(beginPos, endPos);

    var toprocess = ['excerpt', 'more', 'content'];
    for(var i = 0; i < toprocess.length; i++){
      var key = toprocess[i];
 
      var $ = cheerio.load(data[key], {
        ignoreWhitespace: false,
        xmlMode: false,
        lowerCaseTags: false,
        decodeEntities: false
      });

      $('img').each(function(){
        if ($(this).attr('src')){
            // For windows style path, we replace '\' to '/'.
            var src = $(this).attr('src').replace('\\', '/');
            if(!/http[s]*.*|\/\/.*/.test(src) &&
               !/^\s*\//.test(src)) {
              // For "about" page, the first part of "src" can't be removed.
              // In addition, to support multi-level local directory.
              var linkArray = link.split('/').filter(function(elem){
                return elem != '';
              });
              var srcArray = src.split('/').filter(function(elem){
                return elem != '' && elem != '.';
              });
              if(srcArray.length > 1)
                srcArray.shift();
              src = srcArray.join('/');
              $(this).attr('src', config.root + link + src);
              console.info&&console.info("update link as:-->"+config.root + link + src);
            }
        }else{
            console.info&&console.info("no src attr, skipped...");
            console.info&&console.info($(this));
        }
      });
      data[key] = $.html();
    }
  }
});

然後就可以插入圖片了。

注意：部落格檔案也就是md檔案放在/source/_posts下

md檔名要和圖片資料夾的名稱一樣而且是同級。
md檔案引用圖片：如![](hello-world/1.png)

4 git配置和推送

• 首先得申請gitee一個賬號

• 然後新增一個空倉庫heliufang,並把倉庫的設為公開

• 開啟git page服務

• 安裝hexo安裝git依賴,不按照此依賴hexo沒法推送靜態頁面到gitee

npm install hexo-deployer-git --save

• 修改根目錄下的_config.yml全域性配置檔案中的url

# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url:  https://heliufang.gitee.io #注意：這裡為啟動git page服務後分配的地址
root: /
permalink: :year/:month/:day/:title/

• 修改根目錄下的_config.yml全域性配置檔案中的deploy,配置倉庫地址和分支

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git #這裡為git
  repo: https://gitee.com/heliufang/heliufang.git #倉庫的地址,注意屬性名稱是repo不是repository
  branch: master # 主分支

注意：網路上很多文件寫的倉庫地址的屬性名repository,可能是以前的hexo版本配置。這裡被坑到了，導致總是推送不上去。然後去看官方文件才知道倉庫地址的屬性名稱是repo ╮(╯▽╰)╭

• hexo推送到gitee

先重新生成靜態頁面

hexo clean
hexo g

推送,輸入下面的命名,然後會讓你輸入gitee的賬號密碼，完之後不出意外就推送上去了。

hexo d

注意：推送上去之後訪問地址為：啟動git page服務後分配的地址,比如我的https://heliufang.gitee.io

推送後要到gitee的git page頁面點選更新按鈕,不然看不到最新的頁面！！！
推送後要到gitee的git page頁面點選更新按鈕,不然看不到最新的頁面！！！
推送後要到gitee的git page頁面點選更新按鈕,不然看不到最新的頁面！！！
重要的事情說三遍。

5 主題配置

預設的主題不是特別美觀，可以去官網選擇合適的主題，然後下載到本地。

主題官網地址：https://hexo.io/themes/

主題中文官網: https://hexo.bootcss.com/

我用的是這個主題（stun）：https://github.com/liuyib/hexo-theme-stun/

stun主題文件：https://theme-stun.github.io/docs/zh-CN/guide/primary.html#配置檔案

未完...待有時間再完善這一塊

6 寫作

• 可以將寫好的md檔案放入/source/_post/下

• 也可以通過命令建立。這樣就會在/source/_post/下建立md檔案以及同名的資料夾

hexo new '文章名稱' #注意這裡不要加字尾

• 在md檔案的頭部加上文章的標題、標籤、分類、時間，這樣釋出後就有相關的資訊

---
title: 利用Hexo+gitee搭建個人部落格
tags:
  - 標籤1
  - 標籤2
category:
  - 分類生活
date: 2020-12-24 17:55:19
---

7 參考文獻

使用Hexo+伺服器搭建個人部落格： https://www.jianshu.com/p/6ae883f9291c

基於Gitee+Hexo搭建個人部落格： https://segmentfault.com/a/1190000018662692

HEXO插入圖片（詳細版）： https://www.jianshu.com/p/f72aaad7b852