前言

最近想搭建自己的博客，在網(wǎng)上找了不少教程，自己記錄了一下總結(jié)?？赐赀@博客希望能幫助到你。共勉?。?！

一、安裝Nodejs

打開(kāi)http://nodejs.cn/中文網(wǎng)

image-20210110174819863

下載相應(yīng)版本安裝即可

查看node版本

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="bash" cid="n10" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 14.4px; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(246, 248, 250); position: relative !important; border-radius: 3px; margin-bottom: 15px; margin-top: 15px; padding: 12px 1em; width: inherit; color: rgb(36, 41, 46); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">node -v</pre>

image-20210110152501288

安裝淘寶的cnpm 管理器

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n13" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 14.4px; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(246, 248, 250); position: relative !important; border-radius: 3px; margin-bottom: 15px; margin-top: 15px; padding: 12px 1em; width: inherit; color: rgb(36, 41, 46); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">npm install -g cnpm --registry=http://registry.npm.taobao.org</pre>

測(cè)試是否成功cnpm -v

image-20210110152718596

二、安裝框架、創(chuàng)建項(xiàng)目、運(yùn)行項(xiàng)目

安裝hexo框架

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n18" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 14.4px; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(246, 248, 250); position: relative !important; border-radius: 3px; margin-bottom: 15px; margin-top: 15px; padding: 12px 1em; width: inherit; color: rgb(36, 41, 46); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">cnpm install -g hexo-cli</pre>

測(cè)試是否成功hexo -v查看版本

image-20210110154009022

創(chuàng)建存儲(chǔ)博客項(xiàng)目的文件夾

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n22" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 14.4px; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(246, 248, 250); position: relative !important; border-radius: 3px; margin-bottom: 15px; margin-top: 15px; padding: 12px 1em; width: inherit; color: rgb(36, 41, 46); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">mkdir hexoblog
進(jìn)入blog目錄
cd hexoblog</pre>

image-20210110154642965

生成博客

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n25" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 14.4px; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(246, 248, 250); position: relative !important; border-radius: 3px; margin-bottom: 15px; margin-top: 15px; padding: 12px 1em; width: inherit; color: rgb(36, 41, 46); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">hexo init </pre>

查看博客效果，啟動(dòng)博客

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n27" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 14.4px; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(246, 248, 250); position: relative !important; border-radius: 3px; margin-bottom: 15px; margin-top: 15px; padding: 12px 1em; width: inherit; color: rgb(36, 41, 46); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">hexo s</pre>

默認(rèn)地址：localhost:4000

顯示效果:

image

創(chuàng)建第一篇文章

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="bash" cid="n32" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 14.4px; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(246, 248, 250); position: relative !important; border-radius: 3px; margin-bottom: 15px; margin-top: 15px; padding: 12px 1em; width: inherit; color: rgb(36, 41, 46); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">hexo n "第一篇文章"</pre>

image-20210110155655004

image-20210110155749101

打開(kāi)文件填寫(xiě)內(nèi)容（想填什么就填什么）

image-20210110160045078

在我們的hexoblog博客目錄下

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n38" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 14.4px; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(246, 248, 250); position: relative !important; border-radius: 3px; margin-bottom: 15px; margin-top: 15px; padding: 12px 1em; width: inherit; color: rgb(36, 41, 46); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">清理緩存，避免出現(xiàn)緩存問(wèn)題
hexo clean</pre>

生成靜態(tài)文件

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n40" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 14.4px; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(246, 248, 250); position: relative !important; border-radius: 3px; margin-bottom: 15px; margin-top: 15px; padding: 12px 1em; width: inherit; color: rgb(36, 41, 46); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">hexo g</pre>

image-20210110160626137

再次啟動(dòng)，打開(kāi)網(wǎng)址，可以看到我們創(chuàng)建的博客出現(xiàn)了

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n43" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 14.4px; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(246, 248, 250); position: relative !important; border-radius: 3px; margin-bottom: 15px; margin-top: 15px; padding: 12px 1em; width: inherit; color: rgb(36, 41, 46); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">hexo s</pre>

image-20210110160923580

三、Hexo部署博客到Github

除了在github部署在國(guó)內(nèi)的gitee也可以搭建，教程在下方，步驟類(lèi)似也寫(xiě)出來(lái)了。

打開(kāi)Github，登錄賬號(hào)，沒(méi)有賬號(hào)可以創(chuàng)建一個(gè)，新建一個(gè)repository

image-20210110161615704

倉(cāng)庫(kù)名 YourGithubName.github.io

image-20210110162051818

安裝hexo的git部署插件

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n52" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 14.4px; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(246, 248, 250); position: relative !important; border-radius: 3px; margin-bottom: 15px; margin-top: 15px; padding: 12px 1em; width: inherit; color: rgb(36, 41, 46); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">cnpm install --save hexo-deployer-git</pre>

安裝完成以后在創(chuàng)建博客的目錄下可以查看到

image-20210110162811285

打開(kāi)_config.yml文件修改內(nèi)容

image-20210110163131639

部署到遠(yuǎn)程倉(cāng)庫(kù)

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="bash" cid="n58" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 14.4px; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(246, 248, 250); position: relative !important; border-radius: 3px; margin-bottom: 15px; margin-top: 15px; padding: 12px 1em; width: inherit; color: rgb(36, 41, 46); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">hexo d</pre>

github下的倉(cāng)庫(kù)如下圖：

image-20210110163637896

訪(fǎng)問(wèn)https://YourGithubName.github.io就可以看到博客內(nèi)容

image-20210110164119969

注意：開(kāi)始404可以稍等幾分鐘再打開(kāi)即可。

四、Hexo更換主題

Hexo自帶的默認(rèn)主題不是很好看，我們可以按自己需求更換對(duì)應(yīng)的主題，主題由很多，大家可以使用搜索引擎查找，這里我們演示butterfly主題的安裝

前提

• 需要安裝git

• 需要安裝nodejs

步驟

在博客的項(xiàng)目文件夾下打開(kāi)git bash執(zhí)行命令

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="bash" cid="n74" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 14.4px; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(246, 248, 250); position: relative !important; border-radius: 3px; margin-bottom: 15px; margin-top: 15px; padding: 12px 1em; width: inherit; color: rgb(36, 41, 46); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly</pre>

我的博客目錄是

image-20210110171705581

成功以后在目錄可查看主題

image-20210110165746410

修改_config.yml文件（_config.yml文件在博客的項(xiàng)目文件夾下）

image-20210110165855137

安裝pug 以及stylus 的渲染器

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="bash" cid="n82" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 14.4px; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(246, 248, 250); position: relative !important; border-radius: 3px; margin-bottom: 15px; margin-top: 15px; padding: 12px 1em; width: inherit; color: rgb(36, 41, 46); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">npm install hexo-renderer-pug hexo-renderer-stylus --save</pre>

執(zhí)行hexo s部署到本地運(yùn)行

image-20210110171626878

如果在github上搭建了此博客，需要部署到github上

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="bash" cid="n87" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 14.4px; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(246, 248, 250); position: relative !important; border-radius: 3px; margin-bottom: 15px; margin-top: 15px; padding: 12px 1em; width: inherit; color: rgb(36, 41, 46); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">hexo clean
hexo g
hexo d</pre>

執(zhí)行以上三個(gè)命令即可。

五、Hexo部署博客到Gitee

打開(kāi)https://gitee.com/網(wǎng)址，創(chuàng)建一個(gè)倉(cāng)庫(kù)。

image-20210110173844159

image-20210110174103788

安裝hexo的git部署插件

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="" cid="n94" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 14.4px; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(246, 248, 250); position: relative !important; border-radius: 3px; margin-bottom: 15px; margin-top: 15px; padding: 12px 1em; width: inherit; color: rgb(36, 41, 46); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">cnpm install --save hexo-deployer-git</pre>

安裝完成以后在創(chuàng)建博客的目錄下可以查看到

image-20210110162811285

打開(kāi)_config.yml文件修改內(nèi)容

image-20210110174203586

部署到遠(yuǎn)程倉(cāng)庫(kù)

<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="bash" cid="n100" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 14.4px; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(246, 248, 250); position: relative !important; border-radius: 3px; margin-bottom: 15px; margin-top: 15px; padding: 12px 1em; width: inherit; color: rgb(36, 41, 46); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">hexo d</pre>

可以看到倉(cāng)庫(kù)多了這些文件

image-20210110174318780

開(kāi)啟 Gitee Pages 靜態(tài)網(wǎng)頁(yè)托管服務(wù)

image-20210110174404757

點(diǎn)擊啟動(dòng)

image-20210110174526824

得到訪(fǎng)問(wèn)網(wǎng)址

image-20210110174622082

這樣就完成了hexo到gitee的部署了。