NodeJS+Hexo快速搭建博客(Matery主題)詳細教程(含github代碼)

前言

本人爲純前端小白,以前抱着玩玩的心態用Python+Django搭建過小Demo。近日心血來潮準備建個博客，但是不太想花過多時間（懶）。隨便在網上翻了一下發現可以利用Github Pages（github爲代碼託管平臺，Github Pages爲其出的一項服務可以通過靜態文件和靜態站點生成器Jekyll來實現博客網站，不僅可以白嫖域名和服務器，並且此服務完全免費！😃）。

於是我開始Google搜索Github Pages相關資源，最後發現了NodeJS+Hexo這個大寶藏，在學習和實現功能的過程中一共花了我3天時間，因爲在學習過程中收益於諸多大佬的教程和代碼，因此我決定將我搭建的過程和遇到的坑記錄下來供大家分享。

文中我會列出我所參考的原文鏈接和資料供大家進一步學習。

搭建完成後的效果可以參考我的博客: https://tangg555.github.io/

Github源代碼倉庫

https://github.com/tangg555/Blog-Hexo-Matery-theme

如果你已經會NodeJS+Hexo的基本操作，那麼你可以直接從我的倉庫download代碼到本地，或者運行git clone [email protected]:tangg555/Blog-Hexo-Matery-theme.git（如果安裝了Git）將所有文件下載到本地。

解壓文件之後，在Blog-Hexo-Matery-theme的根目錄下右鍵菜單點擊彈出命令框，或者Win+R打開命令提示符（CMD）,cd到Blog-Hexo-Matery-theme的根目錄下。在命令框中輸入如下命令進行測試：

hexo g  # 生成博客網頁文件
hexo s  # 本地預覽博客，在瀏覽器中打開https://localhost:4000/進行查看
hexo d  # 上傳網頁文件到github，使用這個命令可以直接把代碼部署到Git Pages中

這裏可以參考CMD的基礎掃盲教程或者Git基本操作。到此爲止博客就搭建完成了。如果你想要修改博客中的信息，你需要修改根目錄下的_config.yml文件以及主題目錄下的_config.yml文件

根目錄配置文件_config.yml和主題目錄配置文件_config.yml中修改個人信息。
根目錄配置文件中修改deploy一欄的repository。
根目錄配置文件中修改baidu_url_submit一欄的token。
主題配置文件中修改gitalk一欄，修改方法見正文。

如果你對如何編寫代碼或者個性化設計自己的博客感興趣，那麼請繼續往下看。

詳細教程

一、環境搭建

環境搭建的部分表述我直接引用韋陽的博客 https://godweiyang.com/2018/04/13/hexo-blog/的部分表述，避免重複造輪子。

1.1. 安裝NodeJS

Node 是一個讓 JavaScript 運行在服務端的開發平臺。NodeJS的安裝很簡單，一路next就可以，網上的教程也很多，這裏舉個例子：
Node.js安裝及環境配置之Windows篇 https://www.jianshu.com/p/03a76b2e7e00。

需要注意的是nodeJS有兩種版本，一個是長期支持版，還有一個是最新版，這裏建議下載長期支持版，因爲最新版可能不支持部分package導致程序出現莫名其妙的錯誤。比如在2020.5.20我使用的NodeJS v14.3.0不支持hexo-cli 3.9.0導致博客運行出錯，後面換成LTS v12.16.3就好了。

最後安裝好之後，按Win+R打開命令提示符，輸入node -v和npm -v，如果出現版本號，那麼就安裝成功了。

這裏的npm是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題。在這份教程裏npm只需要最低程度的瞭解就行，可以參考NPM使用介紹。

因爲後續使用需要安裝包，所以最好準備國內的鏡像原以加速下載，這裏我們使用nrm包。nrm使用教程可以參考：[使用nrm快速切換npm源]（https://www.jianshu.com/p/171ec231ced4）。

先運行npm install -g nrm再運行nrm use taobao，這樣我們的鏡像原就換成淘寶的了。

1.2. 安裝Git

爲了把本地的文件上傳到github上面去，我們需要用到分佈式版本控制工具————Git下載地址。

安裝選項全部默認，只不過最後一步添加路徑時選擇Use Git from the Windows Command Prompt，這樣我們就可以直接在命令提示符裏打開Git了。

安裝完成後在命令提示符中輸入git --version驗證是否安裝成功。

1.3. 註冊Github賬號並創建Git Pages倉庫

GitHub是通過Git進行版本控制的軟件源代碼託管服務平臺，要成爲一名合格的程序員（媛），Github是必備知識之一_(:з)∠)_。

Github註冊可參考此處。

註冊完畢後我們打開https://github.com/，新建一個項目，如下所示：

然後如下圖所示，輸入自己的項目名字，後面一定要加.github.io後綴，README初始化也要勾上。名稱一定要和你的github名字完全一樣，比如你github名字叫abc，那麼倉庫名字一定要是abc.github.io，這樣你的博客的網址就會是https://abc.github.io。如果名字不一樣的話其實也可以創建，但是創建出來的博客網址會附帶https://github.com/xxx/的前綴，並且hexo部署後顯示有可能不正常。

我已經創建過了這個倉庫所以這裏報了重名的錯誤。

項目建成後，點擊Settings，向下拉到最後有個GitHub Pages，點擊Choose a theme選擇一個主題。然後等一會兒，再回到GitHub Pages，會變成下面這樣：

點擊那個鏈接，就會出現自己的網頁啦。

1.4. 安裝Hexo

在合適的地方新建一個文件夾，用來存放自己的博客文件，比如可以放在D:\study\program\blog目錄下。

在該目錄下右鍵點擊Git Bash Here，打開git的控制檯窗口，以後我們所有的操作都在git控制檯進行，就不要用Windows自帶的控制檯了。

定位到該目錄下，輸入npm i hexo-cli -g安裝Hexo。有可能有幾個報錯，無視它就行。

安裝完後輸入hexo -v驗證是否安裝成功。

然後就要初始化我們的網站，輸入hexo init初始化文件夾，接着輸入npm install安裝必備的組件。

這樣本地的網站配置也弄好啦，輸入hexo g生成靜態網頁，然後輸入hexo s打開本地服務器，然後瀏覽器打開http://localhost:4000/，就可以看到我們的博客啦.

1.5. 連接Github與本地

這裏以我的Github賬號爲例，首先右鍵打開git bash，然後輸入下面命令：

git config --global user.name "tangg555"
git config --global user.email "[email protected]"

用戶名和郵箱根據你註冊github的信息自行修改。

然後生成密鑰SSH key：

ssh-keygen -t rsa -C "[email protected]"

打開github，在頭像下面點擊settings，再點擊SSH and GPG keys，新建一個SSH，名字隨便。

git bash中輸入

cat ~/.ssh/id_rsa.pub

將輸出的內容複製到框中，點擊確定保存。

輸入ssh -T [email protected]，如果如下圖所示，出現你的用戶名，那就成功了

注意，創建ssh key期間如果要輸入什麼東西的話，直接回車就行，其中password phrase是密碼，每次上傳時都需要輸入。

打開博客根目錄下的_config.yml文件，這是博客的配置文件，在這裏你可以修改與博客相關的各種信息。

修改deploy的配置：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository:
    github: [email protected]:tangg555/tangg555.github.io.git
  branch: master

到這裏爲止，所有必須的環境就全部搭建完了

二、Hexo源代碼介紹

這裏以我的博客代碼爲例https://github.com/tangg555/Blog-Hexo-Matery-theme

2.1.根目錄/

下圖爲根目錄文件結構：

其中：

.deploy_git爲運行hexo d命令後生成的文件目錄；
node_modules是npm安裝包的存放目錄；
public是運行hexo g命令生成的靜態文件，包含css, js, html等用於渲染的文件以及markdown格式的post等數據文件。注意!,這個文件夾裏的東西是自動生成的，是用來給Git Pages部署的，因此不用人爲修改裏面的東西。（比如增加圖片之類的，因爲一運行hexo g命令就會自動重載）
scaffolds存放draft.md, page.md, post.md三個樣式文件，點進去看一下就知道怎麼回事了
source存放的大多是數據，比如markdown格式的post文件，或者你要用到的圖片等文件。
themes目錄存放主題，我所使用的主題爲matery，點開裏面又是一番新天地…
_config.yml是總的配置文件，這個非常重要！主題裏面也有一個_config.yml，主要用來控制博客的外觀。
db.json這個不用管
LICENSE這個是協議，只要你copy的代碼裏面有這個，你的代碼公佈出去就必須包含這個文件。
package.json和package-lock.json是使用npm安裝包時生成的文件，你可以在裏面看到所安裝包的版本情況。

2.2.主題目錄/themes/matery

下圖爲主題目錄文件結構：

其中：

languages應該是做映射用的，因爲有些地方對變量取名有要求，有些變量名中不能有空格(比如url)，所以這裏做了一些映射：recommendedPosts: Recommended Posts，還有些是單複數轉換如：posts: Posts；
layout存放的是ejs文件，主要用來生成public文件夾中的html文件，作用是渲染頁面，有興趣的可以查一下NodeJS的express和ejs；
source存放圖片等資源，這裏的資源一般與頁面有關。
_config.yml非常重要！主要用來控制博客的外觀。

三、部分功能介紹

這一部分有非常多的插件安裝以及代碼編寫，所以建議直接選擇下載Github上已有的博客進行修改。比如我的hexo博客代碼來自韋陽的博客 https://github.com/godweiyang/hexo-matery-modified。但是我的主題代碼來自blinkfox的博客 https://github.com/blinkfox/hexo-theme-matery。然後在這兩者的基礎上進行擴充、修改、完善。

1. 更換主題

那麼首先我們從最大的開始說起，直接影響博客佈局和外觀的是主題。Hexo的主題有非常多種，具體可以參考知乎上的回答：有哪些好看的Hexo主題?。
在博客剛搭建好的時候主題爲landscape，文件在根目錄下的themes文件夾中,路徑爲/themes/landscape。

初始的landscape主題

如果你需要更換主題你需要做兩件事：

下載主題文件如blinkfox的博客 https://github.com/blinkfox/hexo-theme-matery到/themes/l路徑下
修改根目錄_config.yml文件，將theme設置爲你下載的主題

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: matery

2.寫文章、發佈文章

首先在博客根目錄下右鍵打開git bash，安裝一個擴展npm i hexo-deployer-git。

然後輸入hexo new post “article title”，新建一篇文章。

然後打開\source_posts的目錄，可以發現下面多了一個文件夾和一個.md文件，一個用來存放你的圖片等數據，另一個就是你的文章文件啦。

編寫完markdown文件後，根目錄下輸入hexo g生成靜態網頁，然後輸入hexo s可以本地預覽效果，最後輸入hexo d上傳到github上。這時打開你的github.io主頁就能看到發佈的文章啦。

但是正常在.md文件裏面直接寫的話看不到實際效果，不太方便，hexo有一個admin插件，可以實現markdown文件的在線編輯預覽。

具體可以參考hexo-admin教程。用npm install --save hexo-admin安裝好後，運行hexo s然後打開http://localhost:4000/admin/就可以編輯了。

注意！ 經過實際測試這個插件安裝後，我的博客有部分功能會出bug，不建議安裝在我的博客源碼中。建議另外開一個hexo工程來寫文章。

3.添加看板娘

身爲一名死宅二次元愛好者，給博客添加一位看板娘很符合我的口味，咳咳…正常地添加看板娘可以參考網上的教程如：hexo 添加和取消live2d看板動畫

查看模型：https://github.com/xiazeyu/live2d-widget-models

截圖預覽：https://huaji8.top/post/live2d-plugin-2.0/

簡單來說步驟是這樣：

npm install --save hexo-helper-live2d
npm install 看板孃的模型名稱
配置站點_config.yml文件

但是我偏向於使用張書樵大神的項目 https://github.com/stevenjoezhang/live2d-widget

具體添加方法項目的readme中寫的很清楚了。值得一提的是，我使用cdn來配置的時候，人物總是刷新不出來，最後我只能把代碼download下來然後直接把js插入到head.ejs中，問題解決。有興趣的可以自己研究下，以下是效果圖：

藥水製作師的pio醬

4.首頁音樂播放器

這個沒啥好說的，我用的matery主題裏面自帶的，改主題中_config.yml文件的配置就行：

# Whether to display the musics.
# 是否在首頁顯示音樂.
music:
  enable: true
  title: #非吸底模式有效
    enable: true
    show: 聽聽音樂
  autoHide: true    # hide automaticaly
  server: netease   #require	music platform: netease, tencent, kugou, xiami, baidu
  type: playlist    #require song, playlist, album, search, artist
  id: 563114426     #require	song id / playlist id / album id / search keyword
  fixed: true       # 開啓吸底模式
  autoplay: true   # 是否自動播放
  theme: '#42b983'
  loop: 'all'       # 音頻循環播放, 可選值: 'all', 'one', 'none'
  order: 'random'   # 音頻循環順序, 可選值: 'list', 'random'
  preload: 'auto'   # 預加載，可選值: 'none', 'metadata', 'auto'
  volume: 0.7       # 默認音量，請注意播放器會記憶用戶設置，用戶手動設置音量後默認音量即失效
  listFolded: false  # 列表默認摺疊
  hideLrc: false     # 隱藏歌詞

4.雪花特效

我的博客中有兩種雪花特效，一種是參考韋陽的博客 https://godweiyang.com/2018/04/13/hexo-blog/，具體細節我就不列出了，另一種的添加過程如下所示：

首先在主題的source/css/目錄中創建snow.css文件，寫入如下代碼：

@keyframes snow-curtain {
	0% {
		bottom: 100%;
		opacity: 0;
	}
	50% {
		opacity: 1;
		transform: rotate(1080deg);
	}
	100% {
		transform: rotate(0deg);
		opacity: 0;
		bottom: 0;
	}
}

@-webkit-keyframes snow-curtain {
	0% {
		bottom: 100%;
		opacity: 0;
	}
	50% {
		opacity: 1;
		-webkit-transform: rotate(1080deg);
	}
	100% {
		-webkit-transform: rotate(0deg);
		opacity: 0;
		bottom: 0;
	}
}

@-moz-keyframes snow-curtain {
	0% {
		bottom: 100%;
		opacity: 0;
	}
	50% {
		opacity: 1;
		-moz-transform: rotate(1080deg);
	}
	100% {
		-moz-transform: rotate(0deg);
		opacity: 0;
		bottom: 0;
	}
}

@-ms-keyframes snow-curtain {
	0% {
		bottom: 100%;
		opacity: 0;
	}
	50% {
		opacity: 1;
		-ms-transform: rotate(1080deg);
	}
	100% {
		-ms-transform: rotate(0deg);
		opacity: 0;
		bottom: 0;
	}
}

@-o-keyframes snow-curtain {
	0% {
		bottom: 100%;
		opacity: 0;
	}
	50% {
		opacity: 1;
		-o-transform: rotate(1080deg);
	}
	100% {
		-o-transform: rotate(0deg);
		opacity: 0;
		bottom: 0;
	}
}

.snow-roll {
	position: absolute;
	opacity: 0;
	animation: snow-curtain 5s;
	-webkit-animation: snow-curtain 5s;
	-moz-animation: snow-curtain 5s;
	-ms-animation: snow-curtain 5s;
	-o-animation: snow-curtain 5s;
	height: 80px;
}
.snow-div {
	position: fixed
}

然後在主題的source/js/目錄中創建snow.js文件，寫入如下代碼

(function() {
    function snow(left, height, src) {
        var div = document.createElement("div");
        var img = document.createElement("img");
        div.appendChild(img);
        img.className = "snow-roll";
        img.src = src;
        div.style.left = left + "px";
        div.style.height = height + "px";
        div.className = "snow-div ";
        document.getElementById("snowzone").appendChild(div);
        setTimeout(function() {
            document.getElementById("snowzone").removeChild(div);
            // console.log(window.innerHeight); 
        }, 5000);
    }
    setInterval(function() {
        var left = Math.random() * window.innerWidth;
        var height = Math.random() * window.innerHeight;
        var src = "/medias/js/s" + Math.floor(Math.random() * 2 + 1) + ".png"; //兩張圖片分別爲"s1.png"、"s2.png" 
        snow(left, height, src);
    }, 500);
})();

雪花的圖片在主題目錄的source/medias/js目錄下。

接着在主題的layout/_partial/head.ejs文件中找地方插入下列代碼即可。

	<link rel="stylesheet" href="/css/snow.css">
	<div id="snowzone">
	</div> 
	<script src="/js/snow.js"></script>

5.天氣插件

這個主要是利用中國天氣網提供的官方api生成代碼即可，可以網上自行查找教程如：https://www.cnblogs.com/chsoul/p/10650113.html

中國天氣網:https://cj.weather.com.cn/plugin/pc

我將代碼插在主題目錄下的layout/layout.ejs文件中

6.相冊設置

這裏的思路和代碼主要來源於這篇博文：hexo博客添加一級分類相冊功能

但程序和實現有些不同，大致的流程請參考上面這篇博文，但這樣的設計在我移植完後有兩個問題，一個是對gallery的渲染和描述有點缺失，還有一個問題是gallery的名字與索引的url相同，當我使用中文作爲gallery的名稱時，頁面索引會報錯。（這個我沒有深入的找原因，大概是hexo產生靜態頁面的時候字符集不對，不是utf-8）。所以我修改了兩個地方：

在主題頁面source/css/gallery.css文件中更改和加入了樣式：

.gallery-item .gallery-name{
  font-family: STKaiti,
  font-size: 16px;
  font-weight:bold;
  line-height: 26px;
  text-align: center;
  color: #666;
  margin: 0;
  text-shadow: 0 0 20px #fdec84,
    10px -10px 30px #ffae35,
    20px -20px 40px #ec760c,
    -20px -60px 50px #cd4607,
	0px -80px 60px #973717,
	10px -40px 70px #451b0e;

}

.gallery-desc{
  font-family: STKaiti,
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  color: #FFA07A;
  margin: 0;
}

修改主題目錄下的layout/galleries.ejs文件爲：

<link rel="stylesheet" href="/css/gallery.css">

<%- partial('_partial/bg-cover') %>

<main class="content">
    <div class="container">
        <% if (site.data && site.data.galleries) { %>
        <% var galleries = site.data.galleries; %>
        <div class="gallery-wrapper row">
            <% for (var i = 0, len = galleries.length; i < len; i++) { %>
            <% var gallery = galleries[i]; %>
            <div class="col s6 m4 l4 xl3 gallery-box">
                <a href="./<%- gallery.name %>" class="gallery-item" data-aos="zoom-in-up">
                    <div class="gallery-cover-box" style="background-image: url(<%- gallery.cover%>);">
                    </div>
                    <p class="gallery-name">
                        <%- gallery.show_name %>
                    </p>
					<p class="gallery-desc">
                        <%- gallery.description %>
                    </p>
                </a>
            </div>
            <% } %>
        </div>
        <% } %>
    </div>
</main>

然後在根目錄下source/_data/galleries.json文件的格式爲：

[
    {
        "name": 相冊名字（必須爲英文，用來產生url）,
		"show_name": 在頁面上顯示的相冊名字,
        "cover": 封面url,
        "description": 對於相冊的描述,
        "photos": [
            "IMG_4842(20200216-235146).JPG",
            "IMG_8370(20200221-172506).JPG",
            "IMG_8371(20200221-172605).JPG",
            "IMG_9097(20181017-212109).JPG",
            "IMG_9194(20190522-014745).JPG",
            "IMG_9195(20190521-164702).JPG",
            "mmexport1572353752240.jpg"
        ]
    },
    ...
]

爲了更加快速地產生source/_data/galleries.json文件，可以在根目錄下的source/galleries/目錄創建python腳本make_gallery_json.py。

import os
import json

def get_content(gallry_dir):
    content = {"name":gallry_dir[:-1]}
    # photos
    _files = os.listdir(gallry_dir)
    photos = []
    for one in _files:
        if one[-4:].lower() == '.jpg':
            photos.append(one)
    content["cover"] = gallry_dir+photos[0]
    content["description"] = ""
    content["photos"] = photos
    return content

if __name__ == '__main__':
    dirs = []
    for one in os.listdir('.'):
        if os.path.isdir(one) and one!='.idea':
            dirs.append(one+'/')
    _list = [get_content(dir) for dir in dirs]
    with open("galleries.json", 'w') as fw:
        json.dump(_list, fw, indent=4, ensure_ascii=False)

產生的source/_data/galleries.json文件稍作修改即可。

相冊最後的實現效果如下：

7.設置gitalk

主題已經自帶了gitalk插件了，所以你只需要去github官網配置好就行了。

首先打開github申請一個應用（https://github.com/settings/applications/new），要填四個東西：

Application name //應用名稱，隨便填
Homepage URL //填自己的博客地址
Application description //應用描述，隨便填
Authorization callback URL //填自己的博客地址

然後點擊註冊，會出現兩個字符串Client ID和Client Secret，這個要複製出來。

然後去主題的配置文件_config.yml下修改gitalk那裏：

gitalk:
  enable: true
  owner: 你的github用戶名
  repo: 你的github用戶名.github.io
  oauth:
    clientId: 粘貼剛剛註冊完顯示的字符串
    clientSecret: 粘貼剛剛註冊完顯示的字符串
  admin: 你的github用戶名

以後寫文章的時候，只要在文章頁面登陸過github，就會自動創建評論框，記得每次寫完文章後打開博客文章頁面一下。

8.圖片添加水印

這裏使用了韋陽的博客 https://godweiyang.com/2018/04/13/hexo-blog/的程序

爲了防止別人抄襲你文章，可以把所有的圖片都加上水印，方法很簡單。

首先在博客根目錄下新建一個watermark.py，代碼如下：

# -*- coding: utf-8 -*-
import sys
import glob
from PIL import Image
from PIL import ImageDraw
from PIL import ImageFont


def watermark(post_name):
    if post_name == 'all':
        post_name = '*'
    dir_name = 'source/_posts/' + post_name + '/*'
    for files in glob.glob(dir_name):
        im = Image.open(files)
        if len(im.getbands()) < 3:
            im = im.convert('RGB')
            print(files)
        font = ImageFont.truetype('STSONG.TTF', max(30, int(im.size[1] / 20)))
        draw = ImageDraw.Draw(im)
        draw.text((im.size[0] / 2, im.size[1] / 2),
                  u'@yourname', fill=(0, 0, 0), font=font)
        im.save(files)


if __name__ == '__main__':
    if len(sys.argv) == 2:
        watermark(sys.argv[1])
    else:
        print('[usage] <input>')

字體也放根目錄下，自己找字體。然後每次寫完一篇文章可以運行python3 watermark.py postname添加水印，如果第一次運行要給所有文章添加水印，可以運行python3 watermark.py all。


9.CSDN博客遷移
這個可以使用大佬的工具https://github.com/flytam/CsdnSyncHexo。
大佬代碼好，回覆快，這裏推薦一波。
10.功能的開啓與關閉以及其他的一些功能
這些都可以在根目錄和主題目錄的兩個config.yml文件中進行配置，有興趣的話可以仔細研究一下。
博客截圖
首頁



留言板

相冊

NodeJS+Hexo快速搭建博客(Matery主題)詳細教程(含github代碼)

前言

Github源代碼倉庫

詳細教程

一、環境搭建

1.1. 安裝NodeJS

1.2. 安裝Git

1.3. 註冊Github賬號並創建Git Pages倉庫

1.4. 安裝Hexo

1.5. 連接Github與本地

二、Hexo源代碼介紹

2.1.根目錄/

2.2.主題目錄/themes/matery

三、部分功能介紹

1. 更換主題

2.寫文章、發佈文章

3.添加看板娘

4.首頁音樂播放器

4.雪花特效

5.天氣插件

6.相冊設置

7.設置gitalk

8.圖片添加水印

9.CSDN博客遷移

10.功能的開啓與關閉以及其他的一些功能

博客截圖

首頁

留言板

相冊

24-5-18 X

NodeJS+Hexo快速搭建博客(Matery主題)詳細教程(含github代碼)

#define 高級用法(Ex) FILE FUNCTION LINE

ARM FP寄存器及frame pointer介紹

ARM中的---彙編指令

jtag general command

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結