一、前言

日常Google中，無(wú)意中看到了一個(gè)免費(fèi)搭建個(gè)人博客網(wǎng)站的標(biāo)簽，好奇就點(diǎn)了進(jìn)去看了看，感覺(jué)還挺有意思的，就想著自己也搭一個(gè)玩玩，當(dāng)時(shí)看的那篇文章說(shuō)是5分鐘就可以搭建完成，的確簡(jiǎn)單的搭建一下很快，但我配置完再熟悉后已經(jīng)花了大半天時(shí)間了?? （期間被學(xué)校的網(wǎng)給害慘了，半天都加載不動(dòng)，還以為自己哪配錯(cuò)了，浪費(fèi)了不少時(shí)間，后來(lái)?yè)Q了自己的熱點(diǎn)，嘿嘿，好了??）廢話不多說(shuō)，給大家看看我搭建完成的博客首頁(yè)

博客首頁(yè)

怎么樣？你是否經(jīng)常看到這樣類(lèi)似的博客？
別著急，接下來(lái)我將帶領(lǐng)你一步步搭建一個(gè)屬于你自己的博客網(wǎng)站。

二、開(kāi)始搭建

1. 創(chuàng)建Github 域名和空間

1.1 創(chuàng)建Github賬號(hào)

(我想大家身為 程序員 應(yīng)該都有一個(gè)Github賬號(hào)吧？??)

打開(kāi)Github官網(wǎng)，點(diǎn)擊右上角Sign Up按鈕，進(jìn)入注冊(cè)頁(yè)面，按照提示一步一步創(chuàng)建完成后就OK了。

注冊(cè)界面

1.2 創(chuàng)建Github倉(cāng)庫(kù)

點(diǎn)擊按鈕 New 打開(kāi)創(chuàng)建倉(cāng)庫(kù)頁(yè)面
注意倉(cāng)庫(kù)名為username.github.io ，username即為Owner的名字，必須一致，后綴為.github.io，也是必須的。如我這里Owner為kylechandev，倉(cāng)庫(kù)名就為kylechandev.github.io。

創(chuàng)建倉(cāng)庫(kù)

后綴.github.io的作用是Github識(shí)別到.github.io的后綴就會(huì)自動(dòng)為你開(kāi)啟GitHub Pages，作為你的網(wǎng)站的倉(cāng)庫(kù)。

github_pages.PNG

2. 安裝必要軟件

2.1 安裝Node.js

2.2 安裝Git

打開(kāi)Node.js和Git的官網(wǎng)，下載最新版本，一路next安裝完成（注意如果出現(xiàn)add to path請(qǐng)勾選，環(huán)境變量是必須的。）
安裝完成后，打開(kāi)cmd，輸入以下命令檢測(cè)安裝是否成功：

check_success.PNG

如果出現(xiàn) ** 不是內(nèi)部命令的，請(qǐng)查看是否添加對(duì)應(yīng)的環(huán)境變量。

2.3 安裝并配置Hexo

打開(kāi)cmd，輸入

npm install -g hexo-cli

這樣他就會(huì)自動(dòng)幫我們安裝Hexo，等待他完成即可(注意保持網(wǎng)絡(luò)的通暢，不然可能出現(xiàn)和我一樣的悲催局面??，注意在這之前一定要確保Node.js已安裝成功)。Hexo就是我們這次的核心所在，博客就是基于他完成的。

安裝成功后，隨便在一個(gè)地方新建一個(gè)文件夾，用來(lái)存放我們博客需要的東西。例如我這里就在D盤(pán)下的某個(gè)文件夾下創(chuàng)建了一個(gè)名為 Hexo 的文件夾。

create_local_repo.PNG

接下來(lái)執(zhí)行下面的命令來(lái)初始化剛剛創(chuàng)建的文件夾(注意這里的Hexo是我的文件夾名，實(shí)際按照你自己新建的文件夾名來(lái))：

hexo init Hexo

之后在cmd下進(jìn)入剛剛創(chuàng)建的文件夾Hexo，直接將光標(biāo)定位到breadcrumbs后輸入cmd后就可以直接定位到該文件夾位置。

create_local_repo_remind.PNG

輸入下面的命令新建建站所需要的文件（這里這里也一定要確保網(wǎng)絡(luò)的通暢，否則可能會(huì)導(dǎo)致失敗）：

npm install

等待命令執(zhí)行完成后，可以發(fā)現(xiàn)在新建的文件夾Hexo下多了很多文件(注意這里我是已經(jīng)弄好后的了，所以我這里的文件會(huì)比你現(xiàn)在出現(xiàn)的多一些，別擔(dān)心，接著往下走)：

npm_install.PNG

3. 開(kāi)啟服務(wù)

到這里所有的配置都差不多結(jié)束了，最后就是開(kāi)啟服務(wù)了。和之前一樣，在cmd下進(jìn)入 Hexo 文件夾，輸入以下命令部署并啟動(dòng)服務(wù)：

hexo g
hexo s

執(zhí)行成功后，可以看到如下提示：

success_remind.png

然后打開(kāi)瀏覽器，在地址欄輸入http://localhost:4000/后會(huì)出現(xiàn)如下頁(yè)面：

success_web.png

這就是Hexo博客網(wǎng)站的原生主題界面了。

到這里，整個(gè)博客的搭建過(guò)程就完成了。

三、博客網(wǎng)站配置

1. 安裝主題

你也看到了，原生的主題并不是那么的奪人眼球，所以我們就需要安裝一個(gè)主題插件，來(lái)打造一個(gè)漂亮的主頁(yè)！

Hexo的主題有很多，你可以從這個(gè)網(wǎng)站找到很多好看的主題，也可以在這個(gè)網(wǎng)站找到很多Hexo的插件，可以根據(jù)自己的喜好來(lái)挑選，每一個(gè)主題也都有安裝教程，你可以試著看一看。

這里我安裝的一款主題是Yilia，效果還是不錯(cuò)的，個(gè)人比較喜歡，主打簡(jiǎn)約。
所以我就說(shuō)一下安裝這款主題以及這個(gè)主題的一些配置吧！

1.1 安裝 Yilia 主題

首先通過(guò)git命令將 Yizlia 克隆下來(lái)（右鍵新建的文件夾Hexo，選擇Git Bash Here，打開(kāi)Git命令行），使用git命令：

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

等待克隆完畢，找到themes文件夾：

theme.PNG

這時(shí)我們可以發(fā)現(xiàn)在themes文件夾下多了一個(gè) yilia文件，這就是我們剛剛克隆下來(lái)的主題了。

theme_yilia.PNG

返回上一級(jí)目錄，找到_config.yml文件，打開(kāi)并修改里面的一些配置以使我們剛剛克隆下來(lái)的主題生效。

all_config.PNG

打開(kāi)_config.yml文件后，翻到最底下，找到如下圖所示位置：

theme_config.PNG

修改theme: landscape為yilia，注意theme和yilia之間要有空格，否則無(wú)效的。
其中 repo 的值是我們?cè)谧铋_(kāi)始GitHub中創(chuàng)建的倉(cāng)庫(kù)的SSH。打開(kāi)倉(cāng)庫(kù)，在右上角找到clone or download,先點(diǎn)擊Use SSH切換到SSH下：

github_change_ssh.PNG

然后再點(diǎn)擊右邊的剪貼本將內(nèi)容復(fù)制下來(lái)，粘貼到上面的repo：后就可以了。

github_ssh.PNG

1.2 發(fā)布

一切就緒，右鍵Hexo文件夾，選擇git bash here，執(zhí)行以下命令：

npm install hexo-deployer-git --save

之后繼續(xù)執(zhí)行以下命令完成最后的發(fā)布：

hexo g
hexo d

或一步到位：

hexo g -d

如果你是第一次Git可能會(huì)出現(xiàn)一個(gè)這個(gè)問(wèn)題：

problem.PNG

這是因?yàn)槟愕腟SH key沒(méi)有配置好或是根本沒(méi)有SSH key的原因，可以看看這篇文章來(lái)解決這個(gè)問(wèn)題。不要慌，小事情??

完成之后你的個(gè)人博客就竣工了??，博客地址可以在Github中查看，點(diǎn)擊倉(cāng)庫(kù)上方的Setting按鈕，進(jìn)入后往下翻翻就可以看到這個(gè)界面：

github_pages.PNG

其中的https://kylechandev.github.io/就是你的個(gè)人博客地址啦！??

四、發(fā)布文章

1. 發(fā)布第一篇文章到個(gè)人博客

1.1 創(chuàng)建

如圖所示操作：

caozuo.jpg

在打開(kāi)的git命令行中使用以下命令進(jìn)行創(chuàng)建：

hexo new [layout] <title>

例如：這樣就創(chuàng)建了一個(gè)名為T(mén)est.md的文件

ex.PNG

參數(shù)說(shuō)明：

使用 publish 命令將草稿移動(dòng)到 source/_posts 文件夾下：

hexo publish [layout] <title>

1.2 寫(xiě)作

打開(kāi)文件夾 source -> _posts，可以看到你剛剛創(chuàng)建的那個(gè)Test.md文件，打開(kāi)他，你會(huì)看到：

re.PNG

這就是你要書(shū)寫(xiě)文章的地方了，語(yǔ)法為Markdown語(yǔ)法，有關(guān)于Markdown語(yǔ)法，不會(huì)的請(qǐng)自行百度。
這里我對(duì)上面三個(gè)參數(shù)做一下說(shuō)明，其中title和date顧名思義，文章標(biāo)題和日期，而tag對(duì)應(yīng)的就是文章的標(biāo)簽，他需要注意一點(diǎn)，在需要標(biāo)識(shí)多個(gè)標(biāo)簽時(shí)，使用如下語(yǔ)法：

tags: [tag1, tag2, tag3]

1.3 發(fā)布文章

文章寫(xiě)完后對(duì)整個(gè)目錄 Hexo右鍵執(zhí)行g(shù)it bash，
執(zhí)行 hexo g -d 命令部署并發(fā)布文章到服務(wù)器上，期間可能會(huì)要求輸入ssh密碼。
屆時(shí)可查看到網(wǎng)站的文章更新。

五、Yilia配置

最后我在官網(wǎng)的基礎(chǔ)之上對(duì) Yilia 主題的配置做一些額外的講解，以便各位同學(xué)迅速完善。

1. 個(gè)人信息
打開(kāi)根目錄下的_config.yml文件（注意是根目錄下的，而不是yilia下的）：找到以下內(nèi)容：

confi_local.PNG

title：表示網(wǎng)站title，就是你博客網(wǎng)站首頁(yè)在瀏覽器tab里顯示的內(nèi)容
subtitle：對(duì)應(yīng)你個(gè)人信息的描述
author：表示你的名字
效果如下（頭像稍后解釋?zhuān)?/p>

confi_web.PNG

2. 配置圖片資源
圖片資源添加位置：themes\yilia\source\img
圖片添加完后就可以直接以 \img\圖片名 的形式使用，在themes\yilia\_config.yml文件中配置使用，頭像的url就是在這里面配置的，具體作者在_config.yml文件中都有詳細(xì)的注釋?zhuān)⑶移邢蓿揖筒毁N圖了。

3. 解決文章設(shè)置折疊無(wú)效

• 問(wèn)題 打開(kāi)我們的博客主頁(yè)，發(fā)現(xiàn)所有文章都是以全文展開(kāi)的，這很不利于我們查看，所以我們就需要設(shè)置文章折疊起來(lái)，而作者給的設(shè)置 excerpt_link: more 并沒(méi)有效果，
• 解決 在 MD 格式的文章正文中插入 < !--more-->(注意把我 ! 號(hào)前的一個(gè)空格去掉，這里他屬于注釋我不空一格的話他不顯示的)，這樣就只會(huì)顯示它之前的，在此之后的所有內(nèi)容都不會(huì)顯示，只有點(diǎn)擊文章標(biāo)題或是查看全文才可以看到剩下的內(nèi)容。然后我們把themes\yilia\_config.yml文件中的excerpt_link: more 給刪掉就OK啦。

4. yilia主題表格的坑
一定要在表格的上下都插入一個(gè)空行！！！否則你的表格將不會(huì)正常顯示出來(lái)！！！

5. 增加歸檔菜單(可選)
修改themes/yilia/_config.yml
將頭部修改如下即可：

  主頁(yè): /
  歸檔: /archives/index.html

6. 添加版權(quán)信息
效果如下：

copyright.PNG

點(diǎn)擊查看教程

7. 修改代碼塊樣式
為什么要修改？原生的顯得有些太刺眼啦！?? 我們修改成下顏色，這樣會(huì)顯得舒服一些。

• 首先找到文件theme\yilia\source\main.0cf68a.css，
• 修改代碼背景色，搜索 .article-entry .highlight,，修改background后面的顏色，推薦色值：#282c34
• 修改代碼字體顏色，搜索 .article-entry .highlight .line，修改color，推薦色值：#b6b6b6

8. 插入網(wǎng)易云音樂(lè)

• 登入網(wǎng)易云音樂(lè)網(wǎng)頁(yè)版，選擇一首歌，點(diǎn)擊歌曲詳情，點(diǎn)擊生成外鏈播放器。
• 復(fù)制外鏈代碼，插入你需要編輯的 MD 格式文章里面，即可。

9. 添加訪客量統(tǒng)計(jì)
集成不蒜子
在 themes\yilia\layout\_partial\after-footer.ejs 最后添加：

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

• 添加統(tǒng)計(jì)網(wǎng)站訪問(wèn)量
  修改 themes\yilia\layout_partial\footer.ejs，包括訪客數(shù)和站點(diǎn)訪問(wèn)總量

# PV方式，單個(gè)用戶連續(xù)點(diǎn)擊 n 篇，記錄 n 次記錄值
<span id="busuanzi_container_site_pv">    本站總訪問(wèn)量<span id="busuanzi_value_site_pv"></span>次</span>

# UV方式，單個(gè)用戶連續(xù)點(diǎn)擊 n 篇，記錄 1 次記錄值
<span id="busuanzi_container_site_uv">  本站訪客數(shù)<span id="busuanzi_value_site_uv"></span>人次</span>

• 單篇文章點(diǎn)擊量
  themes\yilia\layout\_partial\article.ejs 中 在<%- partial('post/title', {class_name: 'article-title'}) %> 插入如下代碼：

<!--顯示閱讀次數(shù)-->
<% if (!index && post.comments){ %>
  <br/>
  <a class="cloud-tie-join-count" href="javascript:void(0);" style="color:gray;font-size:14px;">
  <span class="icon-sort"></span>
  <span id="busuanzi_container_page_pv" style="color:#ef7522;font-size:14px;">
            閱讀數(shù): <span id="busuanzi_value_page_pv"></span>次 &nbsp;&nbsp;
  </span>
  </a>
  <% } %>

10. 添加評(píng)論系統(tǒng)
點(diǎn)擊參考gitalk評(píng)論系統(tǒng)

11. 文件說(shuō)明
.deploy_git 本地庫(kù)文件
public 最終到服務(wù)器上的文件

2019/3/25添加

感謝這篇文章

12. 字?jǐn)?shù)統(tǒng)計(jì)和閱讀時(shí)長(zhǎng)

• Hexo已集成此功能，首先輸入以下命令集成：

npm i --save hexo-wordcount

• 然后在yelee/layout/_partial/post/word.ejs下創(chuàng)建word.ejs文件：

<div style="margin-top:10px;">
    <span class="post-time">
      <span class="post-meta-item-icon">
        <i class="fa fa-keyboard-o"></i>
        <span class="post-meta-item-text">  字?jǐn)?shù)統(tǒng)計(jì): </span>
        <span class="post-count"><%= wordcount(post.content) %>字</span>
      </span>
    </span>

    <span class="post-time">
        |  
      <span class="post-meta-item-icon">
        <i class="fa fa-hourglass-half"></i>
        <span class="post-meta-item-text">  閱讀時(shí)長(zhǎng): </span>
        <span class="post-count"><%= min2read(post.content) %>分</span>
      </span>
    </span>
</div>

• 最后在themes/yelee/layout/_partial/article.ejs中找到如下位置并添加內(nèi)容：

<header class="article-header">
        <%- partial('post/title', {class_name: 'article-title'}) %>
        <% if (!post.noDate){ %>
        <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
        
        # 從這里開(kāi)始添加以下內(nèi)容
        <% if(theme.word_count && !post.no_word_count){%>
          <%- partial('post/word') %>
          <% } %>
        # 到這里結(jié)束
          
        <% } %>
      </header>

• 在根目錄下的 -config.yml文件內(nèi)通過(guò)word_count: true來(lái)控制，true打開(kāi)字?jǐn)?shù)統(tǒng)計(jì)，false關(guān)閉字?jǐn)?shù)統(tǒng)計(jì)。

13. PDF 預(yù)覽

• 首先安裝：

$ npm install --save hexo-pdf

• 使用：
  1.鏈接使用：
  {% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}
  2.本地使用：
  {% pdf ./bash_freshman.pdf %}

14. 添加萌物

• 首先還是安裝，執(zhí)行以下命令：

npm install --save hexo-helper-live2d

• 然后在根目錄下的 _config.yml中添加

live2d:
  enable: true   # 開(kāi)啟
  scriptFrom: local # 默認(rèn)
  model:
    use: live2d-widget-model-wanko   # 對(duì)應(yīng)人物模型包名
  display:
    position: left     # 處于屏幕左下方
    width: 60         # 大小
    height: 120
  mobile:
    show: true

其中model.use就是要使用的任務(wù)模型了，更多模型可以到這里看看。將上面wanko換成對(duì)應(yīng)的名字即可。
官網(wǎng)

可以看看效果：

live2d.PNG

15. 網(wǎng)站運(yùn)行時(shí)間添加

• 在 themes\yilia\layout\_partial下找到footer.ejs文件，然后像我這樣添加：

<footer id="footer">
  <div class="outer">
    <div id="footer-info">
        <div class="footer-left">
            &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %>
        </div>
      <div class="footer-middle">
      <span id="timeDate">載入天數(shù)...</span><span id="times">載入時(shí)分秒...</span>
<script>
    var now = new Date(); 
    function createtime() { 
        var grt= new Date("03/22/2019 20:32:21");//此處修改你的建站時(shí)間或者網(wǎng)站上線時(shí)間 
        now.setTime(now.getTime()+250); 
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
        document.getElementById("timeDate").innerHTML = "本站已穩(wěn)定運(yùn)行 "+dnum+" 天 "; 
        document.getElementById("times").innerHTML = hnum + " 小時(shí) " + mnum + " 分 " + snum + " 秒"; 
    } 
setInterval("createtime()",250);
</script>
      </div>
    </div>
  </div>
</footer>

15. 相冊(cè)
...

16. 視頻
直接在 .md 文件中添加：

hexo添加視頻.PNG

六、總結(jié)

這次的搭建免費(fèi)個(gè)人博客教程到這里就結(jié)束了，如果有問(wèn)題或是不懂的歡迎在下方評(píng)論。??

【參考】
Hexo yilia 主題一攬子使用方案
Github+Hexo搭建個(gè)人博客
用Hexo寫(xiě)出第一篇博客