使用Hexo搭建個(gè)人博客（網(wǎng)易云音樂(lè)、不蒜子統(tǒng)計(jì)、多種評(píng)論系統(tǒng)）

成品示例展示：https://itgoyo.github.io/

本人github：itgoyo，歡迎關(guān)注 (??? ????)

文章原地址：https://github.com/itgoyo/500Days-Of-Github/issues/2

1、Hexo搭建

環(huán)境

一、環(huán)境安裝

  1. node.js（在node.js官網(wǎng)中下載安裝）node.js官網(wǎng)

  2. git（OS系統(tǒng)中直接安裝x-code就可以了）

  3. hexo

1）打開OS系統(tǒng)終端

2）輸入安裝hexo的代碼(此處安裝時(shí)有可能會(huì)提示輸入系統(tǒng)管理員密碼)

$ sudo npm install -g hexo
二、hexo創(chuàng)建靜態(tài)博客

  1. 新建blog文件夾

  2. 在終端進(jìn)入該文件夾，初始化博客

$ hexo init

  1. 上述完成后，生成原始文件；blog文件夾就是博客的根目錄
  1. 本地查看：?jiǎn)⒂帽镜胤?wù)命令(退出按ctrl+c)

$ hexo s

  1. 將出現(xiàn)的地址輸入瀏覽器，即可可查看到本地效果

三、github配置

  1. 注冊(cè)github賬號(hào)并登陸

  2. 獲取本機(jī)的SSH口令

1）輸入獲取代碼，回車直到出現(xiàn)圖片所示圖形為止

$ ssh-keygen

2）輸入編譯代碼

$ vim ~/.ssh/id_rsa.pub
3）出現(xiàn)SSH口令后，將紅框部分復(fù)制，并在下方輸入:q，隨后按下回車可以退出該窗口

4）進(jìn)入到github頁(yè)面設(shè)置SSH口令

點(diǎn)擊用戶下拉菜單中的settings（step1)

點(diǎn)擊左側(cè)的SHH and GPG keys（step2)

在Title中輸入口令名稱（隨意）（step3)

在key中貼上SSH口令（step4)

  1. 創(chuàng)建新的倉(cāng)庫(kù)

1）創(chuàng)建新的倉(cāng)庫(kù)（repOSitory）

點(diǎn)擊用戶左側(cè)的+號(hào)菜單中的New repOSitory（step1)

在repOSitory name中輸入二級(jí)域名，格式請(qǐng)嚴(yán)格遵照username.github.io（step2)

ps：username填寫github的登錄用戶名，否則上線的時(shí)候會(huì)報(bào)錯(cuò)

是否公開選項(xiàng)可以選取Public（step3)

勾選step4處，會(huì)自動(dòng)生成一份可編輯的README.md文件（建議勾選）（step4)

點(diǎn)擊create repOSitory生成倉(cāng)庫(kù)完畢（step5)

2）查看新建的倉(cāng)庫(kù)（repOSitory）

可以回到github個(gè)人首頁(yè)點(diǎn)擊右側(cè)的倉(cāng)庫(kù)區(qū)

進(jìn)入后在step1處選擇并復(fù)制http地址，注意此時(shí)step2處應(yīng)該是空的

四、發(fā)布博客

  1. 設(shè)置blog配置文件

1）打開blog文件夾下的_config.yml文件

2）找到最下方的type，輸入git（注意冒號(hào)后面是帶空格的）

3）repo行可能沒(méi)有，需要自己輸入，后面跟上github上倉(cāng)庫(kù)中復(fù)制的http地址（注意此時(shí)1、2兩處應(yīng)該是一樣的username），不然上傳時(shí)會(huì)報(bào)錯(cuò)

4）其他博客設(shè)置

title：博客名稱

subtitle：博客副標(biāo)題

description：博客描述

author：作者

language：語(yǔ)言（簡(jiǎn)體中文是zh-CN）

  1. 在終端上傳博客

1）進(jìn)入終端，輸入git上傳插件安裝代碼（安裝時(shí)會(huì)提示輸入github用戶名及密碼）

$ npm install hexo-deployer-git --save
2）安裝完畢后，輸入獲取代碼

$ hexo g
3）最后輸入上傳代碼

$ hexo d
4）重新在github倉(cāng)庫(kù)查看上傳文件，此時(shí)在step2中會(huì)有之前bolg中生成的文件

5）step3處就是你的博客地址

五、新建與更新博客

  1. 新建博客

1）終端bolg文件下，輸入新建博客代碼

$ hexo new 'filename'

2）此時(shí)在bolg/source/_posts/下面會(huì)看到新建的博客

3）博客文件的后綴是.md文件，OS下推薦使用MOU編輯器mou下載地址

  1. 更新博客

1）完成編輯后，在終端上依次重復(fù)以下代碼（此時(shí)必須先將編輯器關(guān)閉，否則會(huì)出現(xiàn)獲取錯(cuò)誤）

$ hexo g
$ hexo d

2）完成后便能刷新博客網(wǎng)頁(yè)看到新更新的內(nèi)容了

2、Hexo加入評(píng)論功能

Yilia主題（別的主題也是一樣的操作）

首先，我們要有一個(gè)多說(shuō)的賬號(hào)多說(shuō)(2017-6-1廢棄)

然后進(jìn)入到后臺(tái)把我們的網(wǎng)站填寫進(jìn)去

在theme/yilia/layout/_partial/post/目錄下創(chuàng)建文件名叫：duoshuo.ejs
把以下代碼復(fù)制進(jìn)去

<div class="duoshuo">
    <!-- 多說(shuō)評(píng)論框 start -->
    <div class="ds-thread" data-thread-key="<%=key%>" data-title="<%=title%>" data-url="<%=url%>"></div>
    <!-- 多說(shuō)評(píng)論框 end -->
    <!-- 多說(shuō)公共JS代碼 start (一個(gè)網(wǎng)頁(yè)只需插入一次) -->
    <script type="text/javascript">
    var duoshuoQuery = {short_name:'<%= config.duoshuo_shortname %>'};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0]
         || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>
    <!-- 多說(shuō)公共JS代碼 end -->
</div>

在hexo/_comfig.yml里邊添加一下代碼（名字換成自己的）

duoshuo_shortname: xxxx(冒號(hào)后有空格)

最后在theme/yilia/_config.yml 里邊添加以下代碼（名字換成自己的）

duoshuo: true
short_name: xxxx  #名字換你自己在多說(shuō)后臺(tái)的名字(冒號(hào)后有空格)

一共配置兩處地方
不然即便是看到評(píng)論功能，但是不會(huì)保留別人對(duì)你的評(píng)論

然后重新提交代碼刷新即可看到評(píng)論功能

Yilia添加Disqus評(píng)論

只需要在Yilia主題里邊的_config.yml添加一句

disqus_shortname: 你的Disqus賬戶名稱

2、Hexo加入網(wǎng)易云音樂(lè)

Yilia主題（我使用的是這個(gè)主題就用這個(gè)來(lái)講）

進(jìn)入網(wǎng)易云音樂(lè): 官網(wǎng)

推薦：自己注冊(cè)賬號(hào)，這樣子可以創(chuàng)建自己喜歡的歌單，在里邊收藏自己喜歡的歌曲

然后進(jìn)入到自己的歌單

點(diǎn)擊生成外鏈，獲取到云音樂(lè)播放器代碼

  <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=300 height=270 src="https://music.163.com/outchain/player?type=0&id=120897804&auto=1&height=430"></iframe>

選擇生成自己喜歡的樣式，然后復(fù)制代碼

最后打開（themes/yilia/layout/_partial/left-col.ejs）
把復(fù)制好的網(wǎng)易云音樂(lè)放到第二行里邊(當(dāng)然這個(gè)是我的樣式，我選擇放在左邊，你喜歡放在那里自己選擇)

最后的效果圖如下

3、Hexo加入百度統(tǒng)計(jì)

yilia主題為??


編輯文件 themes/yilia/_config.yml ,添加一行配置，可以刪除原來(lái)的google analytics

baidu_tongji: true

新建 themes/yilia/layout/_partial/baidu_#ejs 內(nèi)容如下

<% if (theme.baidu_tongji) { %>
<script type="text/javascript">
#申請(qǐng)的百度統(tǒng)計(jì)代碼
</script>
<% } %>

編輯themes/yilia/layout/_partial/head.ejs 在 </head> 前添加

<%- partial("baidu_tongji") %>

重新生產(chǎn)部署站點(diǎn)即可。
Light主題
編輯文件 themes/yilia/_config.yml ,添加一行配置，可以刪除原來(lái)的google analytics

baidu_tongji: true`

新建 themes/light/layout/_partial/baidu_#ejs 內(nèi)容如下

<% if (theme.baidu_tongji) { %>
<script type="text/javascript">
#申請(qǐng)的百度統(tǒng)計(jì)代碼
</script>
<% } %>

編輯themes/Yilia/layout/_partial/head.ejs 在 </head> 前添加

<%- partial("baidu_tongji") %>`

重新生產(chǎn)部署站點(diǎn)即可。

最后多說(shuō)一句，因?yàn)槲恼率遣捎肕arkdown格式編輯的，所以不免會(huì)使用到圖片的時(shí)候，這個(gè)時(shí)候如果是在跟目錄下創(chuàng)建圖片文件，這樣子搬遷或者復(fù)制什么的會(huì)很不便，在此我想向大家推薦一個(gè)免費(fèi)的圖床
極簡(jiǎn)圖床
只要復(fù)制圖片粘貼到極簡(jiǎn)圖床，它會(huì)自動(dòng)生成Markdown格式的圖片地址

最好申請(qǐng)一個(gè)七牛云，這樣子就可以創(chuàng)建自己的私密空間。

Ubuntu下

首先安裝nodejs

sudo apt-get nodejs

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

出現(xiàn)了相應(yīng)的版本號(hào)了之后
sudo n xxx

提交到Girhub還要安裝一個(gè)git插件

npm install hexo-deployer-git --save

之前一直報(bào)錯(cuò)，然后手賤敲錯(cuò)
npm install hexo-deployer-git --save、
多了一個(gè)、居然成功了？！

發(fā)現(xiàn)更多有趣的好玩的，歡迎關(guān)注我的公眾號(hào)：toolpool

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容