前言
這是本人的最新博客移稳，也是剛剛搭建起來的犀勒，過程中還是遇到了很多的坑屎飘，自己也對Anisina這個主題進(jìn)行了一些更改，希望能夠幫到大家贾费，然后有興趣的可以自己嘗試進(jìn)行搭建钦购，話不多說，開始吧褂萧！
起步
hexo是一個是基于node.js的快速押桃、簡潔且高效的博客框架，Anisina是一個hexo的主題导犹，簡潔唱凯，明了，這也是本人選擇這個主題的原因谎痢。
下載
可以參考hexo的官網(wǎng)波丰，對應(yīng)環(huán)境需要node和git我也不再多說，參考官方教程完成hexo的安裝舶得；
Anisina的安裝也請參考官方的教程,下面我要說的是關(guān)于Anisina的配置文件；
Anisina的配置
打開 _config.yml進(jìn)行修改：
#這是基本的配置 看名字也能看出含義 也可以參考官方解釋
title: Joeysh # your blog title name
subtitle:
author: Joeysh # 作者
language: zh-CN
timezone: Asia/Shanghai
SEOTitle: Joeysh's blog #標(biāo)題爽蝴，也就是博客左上角的那個
header-img: /image/header.jpg #我是自己建的文件夾放入的文件沐批，待會會說怎么弄的
email:
description: "記錄學(xué)習(xí)的過程"
keyword: # seo key words
favicon: /image/header.jpg #如key所示
側(cè)邊欄
現(xiàn)在我來說說側(cè)邊欄的配置:
首先說說圖片吧纫骑，Anisina是對七牛有支持的，但我沒弄九孩，使用的是本地的方式先馆，本地使用的方式：
進(jìn)入博客的根目錄下中的source文件夾中，建立一個文件夾躺彬，隨您取名img或者image煤墙，您開心就好。
然后把圖片放入其中宪拥，取圖片的時候使用項(xiàng)目的絕對路徑仿野，加入文件夾的名稱是img，您用圖片的時候
只需要/img/xxx.jpg,這樣的方式就可以取到她君。
我們繼續(xù)來說側(cè)邊欄脚作，以下是側(cè)邊欄的配置：
sidebar: true
sidebar-about-description: "創(chuàng)造價(jià)值，贏得尊重" # 個人描述
sidebar-avatar: /image/header.jpg # 頭像缔刹，圖片就是使用的上面說的那種方式配置的
zhihu_username: Joeysh # 這是下載主題下來文件里面就有的球涛，只需要配上您各個社交賬戶的名稱就可以，當(dāng)您點(diǎn)擊對應(yīng)的頭像的時候校镐，會自動的通過接口的方式定位到您的賬戶頁面
github_username: joeyangsh
#下面是關(guān)于標(biāo)簽的配置亿扁，之前我就存在標(biāo)簽不顯示的情況，他這個好像默認(rèn)是1鸟廓，改成0就可以了
featured-tags: true
featured-condition-size: 0
#如題所示从祝，注意使用json的方式
friends: [
{
title: "掘金",
href: "https://juejin.im/user/5b854099f265da433874ee02"
},
{
其他的按照上面的方式進(jìn)行配置...
}
]
這樣過后側(cè)邊欄的配置就完成了，也就是我這個顯示的樣子肝箱。
頂部
創(chuàng)建一個 Tags 導(dǎo)航頁面
- 運(yùn)行命令:hexo new page "Tags" , 這會在博客的 source 目錄下生成一個名為 Tags 的文件夾, 里面會有一個 index.md 格式的頁面,如果沒有請手動創(chuàng)建.
- 然后打開 yourblog/source 文件夾 , 找到 Tags/index.md 這個文件, 然后設(shè)置在兩條的---里面, 指定一個 layout: tags值.注意 key 和 value 之間的空格
- 然后運(yùn)行命令,重新生成博客內(nèi)容: hexo clean && hexo g , 然后可以運(yùn)行 hexo serve 在本地查看效果
這樣tag的標(biāo)簽就完成啦哄褒，再說說my work同樣的：
- 運(yùn)行命令:hexo new page "my-works" , 這會在博客的 source 目錄下生成一個名為 my-works 的文件夾, 里面會有一個 index.md 格式的頁面,如果沒有請手動創(chuàng)建.
- 然后打開 yourblog/source 文件夾 , 找到 my-works/index.md 這個文件, 然后設(shè)置在兩條的---里面, 指定一個 layout: works值.注意 key 和 value 之間的空格
- 然后運(yùn)行命令,重新生成博客內(nèi)容: hexo clean && hexo g , 然后可以運(yùn)行 hexo serve 在本地查看效果
但是這樣的話您打開里面是沒有什么內(nèi)容的，下面我在說說關(guān)于內(nèi)容：
- 進(jìn)入yourblog/source煌张，建立一個文件夾呐赡，名字是_data，注意下劃線哦
- 然后在里面建立一個文件骏融，名為：project.json
- 然后...在里面配置就好了链嘀。放心，我會說怎么配置的
下面的就是配置：
{
"一段話": {
"title": "這是一個標(biāo)題",
"subTitle": "這是一個副標(biāo)題",
"img_link": " ",
"use" : ["java"],
"link": "",
"data":"2019.01-01",
"direction": "關(guān)于work的一個測試"
},
"一段話2": {
"title": "這是一個標(biāo)題2",
"subTitle": "基于 這是一個副標(biāo)題2",
"img_link": "",
"use" : ["java","mysql","spring"],
"link": "",
"data": "2018.01-01",
"direction":
"關(guān)于work的一個測試"
}
}
就跟文件名的后綴一樣档玻，使用的依然是json的方式怀泊，至于里面字段的含義，我想我不需要多說了吧误趴，到此霹琼，頭部的就完成了，大家去試試吧！
文章
大家創(chuàng)建完tags導(dǎo)航頁面后里面是沒有標(biāo)簽的枣申，它的標(biāo)簽是根據(jù)文章里面設(shè)置的標(biāo)簽生效的售葡，下面說說文章的頭部：
創(chuàng)建一條博文
hexo new "your-post-name"
在創(chuàng)建好的文章的頭部加入以下配置：
---
layout: post
title: hi 2019
subtitle: 'hi, I''m Joeysh'
author: Joeysh
header-img: ''
cdn: header-on
tags:
- java
- mysql
date: 2019-01-01 00:00:00
---
上面的tags里面就是到時候tags里面的標(biāo)簽。
評論
添加 來比力 評論系統(tǒng),首先需要大家去注冊忠藤，然后安裝挟伙，選擇免費(fèi)版的，中間的過程就省略了模孩，最后來到以下界面：
復(fù)制圖中圈起來的uid來到您的_config.yml進(jìn)行以下配置：
use_livere: ture
livere_uid: your uid
這樣評論就添加完畢了尖阔！
擴(kuò)展
對這個主題我參考網(wǎng)上的資料也進(jìn)行了一些擴(kuò)展，可能大家最明顯的就是感覺到了有了搜索榨咐，文章閱讀量和網(wǎng)站的訪問量了介却，下面我就說說怎么擴(kuò)展的，Are you ready?
搜索
這是我參考別人做好的方式進(jìn)行擴(kuò)展和設(shè)置的祭芦，原文中寫的還是很詳細(xì)筷笨，大家可以去看一下，當(dāng)然我這里也會說我配置擴(kuò)展的過程：
我這里是依賴的Algolia,主要的原因是它是免費(fèi)的龟劲。這是一個外部服務(wù),在您使用所有的時候會調(diào)用外部的服務(wù)胃夏，由外部服務(wù)返回結(jié)果并展示，下面就說一下過程：
首先進(jìn)入hexo-algolia按照指示進(jìn)行安裝完畢昌跌。
同樣的您要去Algolia注冊并創(chuàng)建您的APPs仰禀，下面說一下步驟：
首先進(jìn)入 Algolia注冊，這我就不說了蚕愤；
-
進(jìn)入控制臺答恶，在控制臺的頭部會有以下的樣式；
image 因?yàn)槲疫@里已經(jīng)更改了萍诱，所以是免費(fèi)的悬嗓，但是新注冊的用戶注冊后的 14 天內(nèi)擁有所有功能（包括收費(fèi)類別的）之后若未續(xù)費(fèi)會自動降級為免費(fèi)賬戶，免費(fèi)賬戶 總共有 10,000 條記錄包竹，每月有 100,000 的可以操作數(shù)周瞎；
在indices中新添加一個index声诸，名字可以隨意取彼乌，但是后面需要用到囤攀；
-
打開左側(cè)的API KEYS
image -
先打開以下界面
image -
編輯對應(yīng)的記錄漓骚，得到以下的樣式
image
這樣創(chuàng)建就完成了蝌蹂。
接下來是修改配置文件了孤个，打開您的_config.yml添加以下配置：
algolia:
applicationID: "your Application ID"
apiKey: "your Search-Only API Key"
adminApiKey: "your Admin API Key"
chunkSize: 5000
indexName: "輸入剛才創(chuàng)建index name"
配置完成了齐鲤，接下來我們要修改主題中的元素了给郊，首先就添加頂部的搜索按鈕。
打開themes/Anisina/layout/_partial/nav.ejs
1统锤、在ul標(biāo)簽中加入以下內(nèi)容：
<li>
<% if (config.algolia){ %>
<li>
<a href="#search" class="popup-trigger">
<i class="fa fa-search"></i>
</a>
</li>
<% } %>
</li>/
2饲窿、添加搜索彈出的model框，同樣是themes/Anisina/layout/_partial/nav.ejs嘲驾，在最下面加上以下代碼
<% if (config.algolia){ %>
<div class="site-search">
<div class="algolia-popup popup">
<div class="algolia-search">
<div class="algolia-search-input-icon">
<i class="fa fa-search"></i>
</div>
<div class="algolia-search-input" id="algolia-search-input"></div>
</div>
<div class="algolia-results">
<div id="algolia-stats"></div>
<div id="algolia-hits"></div>
<div id="algolia-pagination" class="algolia-pagination"></div>
</div>
<span class="popup-btn-close">
<i class="fa fa-times-circle"></i>
</span>
</div>
</div>
<% } %>
3腐碱、將下面的js和scc分別添加到
themes/Anisina/source/js
themes/Anisina/source/css
js文件：
css文件：
引入js和css文件：
themes/Anisina/layout/_partial/head.ejs，在head標(biāo)簽里面添加以下內(nèi)容殃饿；
<% if (config.algolia){ %>
<%- css('css/algolia') %>
<%- js('js/algolia') %>
<%- js('js/instantsearch.min') %>
<% } %>
到現(xiàn)在乎芳，搜索的擴(kuò)展大部分已經(jīng)完成了，還有最后一步：
打開剛剛添加的algolia.js文件,找到下面的地方進(jìn)行修改:
最后帖池，回到bolg的根目錄，在source文件夾下的image里面添加以下圖片：
當(dāng)然睡汹，假如您的圖片文件不是叫這個名字話需要您在algolia.js文件中修改以下地方為您的圖片文件名稱：
至此，搜索的擴(kuò)展就完成了囚巴，下面再說說使用吧原在；
對了還有一個操作,不做的話運(yùn)行hexo algolia會出現(xiàn)以下的問題：
ERROR [Algolia] Please set an `HEXO_ALGOLIA_INDEXING_KEY` environment variable to enable content indexing.
ERROR >> Read https://npmjs.com/hexo-algolia#api-key for more informations.
這個時候需要進(jìn)行以下的設(shè)置：
export(windows 為 set)HEXO_ALGOLIA_INDEXING_KEY=您的Search-Only API key
set(Mac為git彤叉，bash為export) HEXO_ALGOLIA_INDEXING_KEY可以查看時候設(shè)置成功
然后更新索引：
hexo algolia
如果更新不成功匆骗，請clean一下繼續(xù)，
出現(xiàn)以下情況為更新成功：
若出現(xiàn)Algolia搜索欄但是無法跳轉(zhuǎn)到搜索結(jié)果，請運(yùn)行以下代碼：
npm install hexo-algolia@0.2.0
然后在站點(diǎn)配置中找到package.json积暖， 把里面的hexo-algolia驮瞧， 換成 "hexo-algolia": "^0.2.0";
這樣搜索的功能也就徹底的完成了懂昂，可以前往Algolia的索引處查看更新的索引信息凌彬。
以上配置過程參考的文章：
http://www.reibang.com/p/00f4bc425249
https://juejin.im/post/5af3f9d1518825673e35a6eb
統(tǒng)計(jì)量
在搜索完成過后接下來該說說網(wǎng)站下面的訪問量、訪客和文章的閱讀量是怎樣擴(kuò)展的了:
這里使用的是不蒜子提供的閱讀統(tǒng)計(jì)功能:
進(jìn)入主題下的layout/_partial/footer.ejs
添加以下代碼：
<span id="busuanzi_container_site_pv"" style="font-size: 12px;display:none;">總訪問量：<span id="busuanzi_value_site_pv"></span>次</span>
<span class="post-meta-divider">|</span>
<span id="busuanzi_container_site_uv" style="font-size: 12px;display:none;">總訪客：<span id="busuanzi_value_site_uv"></span>人</span>
對了铲敛，忘說位置了褐澎，搜索class="copyright text-muted"的一個標(biāo)簽中，還有在地步的位置添加以下代碼：
<script async src="http://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
這樣伐蒋，訪問量和訪客就完成了工三；
下面就文章的閱讀量：
進(jìn)入主題下的layout/post.ejs
搜索class="tags text-center"迁酸，在以下位置進(jìn)行配置：
<br/><span id="busuanzi_container_page_pv" style="display:none;">閱讀量：
<span id="busuanzi_value_page_pv"></span>次</span>
現(xiàn)在我的擴(kuò)展也就全部完成了；
其實(shí)我也想弄頭部的archive俭正，按照時間進(jìn)行歸檔奸鬓，但是我沒弄出來，希望有弄出來的朋友可以跟我說一下掸读，我也沒去研究了串远。
部署
到現(xiàn)在，不知道您的博客是否達(dá)到了您希望的效果寺枉，如果可以的話抑淫，接下來我就在說說部署吧！
我這里使用的是 github ,首先需要您來到以下界面創(chuàng)建一個倉庫：
這里我需要說一下倉庫的名稱姥闪，這里需要是您的github名稱加上 .github.io
就像我的需要是 Joeyangsh.github.io，這是github規(guī)定的砌烁，表達(dá)式是這樣
{username}.github.io
所以倉庫的名字需要是這樣的筐喳。
創(chuàng)建成功過后進(jìn)入倉庫，來到以下界面：
找到GitHub Pages點(diǎn)擊change theme選個主題select theme設(shè)置模板,
等待github pages創(chuàng)建完成函喉，然后輸入您創(chuàng)建的地址,也就是您的倉庫名稱
yourName.github.io
測試github pager是否創(chuàng)建成功避归。此時頁面是空的沒有任何東西。
下面要做的就是配置管呵；
打開您的_config.yml修改以下配置：
deploy:
type: git
repo:
github: your address #您的倉庫地址
branch: master #提交的分支
倉庫地址查看：
配置完畢后使用以下命令梳毙，部署到github：
hexo clean
hexo g
hexo s #先本地輸入地址查看一下是否是自己滿意的ctrl+c結(jié)束
hexo d #部署到遠(yuǎn)處倉庫
當(dāng)然您也可以不存在本地查看，直接執(zhí)行以下命令：
hexo g --d #直接生成靜態(tài)資源并推送部署到遠(yuǎn)程倉庫
這個時候會出現(xiàn)以下錯誤：
ERROR Deployer not found: git捐下。
需要安裝 hexo-deployer-git账锹，執(zhí)行以下命令
npm install hexo-deployer-git --save
再次推送
hexo d
就成功了，在瀏覽器的地址欄輸入您gitgub的訪問地址就能訪問到您的博客了坷襟。
對了再提醒一句奸柬，當(dāng)您完成一篇博客的時候別忘了搜索哦，需要更新索引庫執(zhí)行以下命令：
hexo algolia
這個時候您的博客就能被訪問了婴程，當(dāng)然您也可以自己注冊域名進(jìn)行綁定廓奕，下面我在說說github的自定義域名吧。
綁定域名
我是在阿里云注冊的域名,至于注冊域名的流程我就不再講了档叔，網(wǎng)上有很多的教程桌粉，域名注冊完成后來到域名控制臺：
點(diǎn)擊解析，進(jìn)入解析界面衙四，添加域名解析：
分別添加以下兩條記錄：
以下是完成后的頁面：
到現(xiàn)在铃肯，域名解析也添加完畢了，10分鐘左右就會起效届搁。
可以前往這里查看是否生效缘薛。
然后進(jìn)入博客的根目錄窍育，在souce目錄下建立一個名為CNAME的文件，沒有后綴的哦宴胧，進(jìn)入文件在里面添加您注冊的域名：
假如您的域名是aaa.com那么只需要在里面添加一條
aaa.com
然后從新部署一次漱抓，再次使用您的域名訪問就可以了。
https
前往github勾選以下內(nèi)容：
當(dāng)您后面不需要使用自己的域名的時候想使用github默認(rèn)域名的時候只需要把CNAME文件刪除再重新部署一次ok了恕齐，如果發(fā)現(xiàn)部署后訪問不了的情況請清一下瀏覽器的緩存乞娄。
結(jié)語
到現(xiàn)在，hexo使用Anisina加上github搭建個人博客的過程就完了显歧，以上內(nèi)容如果有錯誤的地方還請各位糾正仪或，本人會及時的更正。
