使用hexo+Anisina+github搭建個人部落格

你的益達_發表於2019-01-06

HexoGithub

前言

這是本人的最新部落格，也是剛剛搭建起來的，過程中還是遇到了很多的坑，自己也對Anisina這個主題進行了一些更改，希望能夠幫到大家，然後有興趣的可以自己嘗試進行搭建，話不多說，開始吧！

起步

hexo是一個是基於node.js的快速、簡潔且高效的部落格框架，Anisina是一個hexo的主題，簡潔，明瞭，這也是本人選擇這個主題的原因。

下載

可以參考hexo的官網，對應環境需要node和git我也不再多說，參考官方教程完成hexo的安裝；

Anisina的安裝也請參考官方的教程,下面我要說的是關於Anisina的配置檔案；

Anisina的配置

開啟 _config.yml進行修改：

#這是基本的配置 看名字也能看出含義 也可以參考官方解釋
title: Joeysh # your blog title name
subtitle:  
author: Joeysh # 作者
language: zh-CN
timezone: Asia/Shanghai
SEOTitle: Joeysh's blog #標題，也就是部落格左上角的那個
header-img: /image/header.jpg  #我是自己建的資料夾放入的檔案，待會會說怎麼弄的
email: 
description: "記錄學習的過程"
keyword: # seo key words
favicon: /image/header.jpg #如key所示
複製程式碼

側邊欄

現在我來說說側邊欄的配置:

首先說說圖片吧，Anisina是對七牛有支援的，但我沒弄，使用的是本地的方式，本地使用的方式：

進入部落格的根目錄下中的source資料夾中，建立一個資料夾，隨您取名img或者image，您開心就好。
然後把圖片放入其中，取圖片的時候使用專案的絕對路徑，加入資料夾的名稱是img，您用圖片的時候
只需要/img/xxx.jpg,這樣的方式就可以取到。
複製程式碼

我們繼續來說側邊欄，以下是側邊欄的配置：

	sidebar: true
	sidebar-about-description: "創造價值，贏得尊重" # 個人描述
	sidebar-avatar: /image/header.jpg    # 頭像，圖片就是使用的上面說的那種方式配置的
	zhihu_username: Joeysh # 這是下載主題下來檔案裡面就有的，只需要配上您各個社交賬戶的名稱就可以，當您點選對應的頭像的時候，會自動的通過介面的方式定位到您的賬戶頁面
	github_username: joeyangsh 
	#下面是關於標籤的配置，之前我就存在標籤不顯示的情況，他這個好像預設是1，改成0就可以了
	featured-tags: true
	featured-condition-size: 0
	#如題所示，注意使用json的方式
	friends: [
		{
			title: "掘金",
			href: "https://juejin.im/user/5b854099f265da433874ee02"
		},
		{
			其他的按照上面的方式進行配置...
		}
	] 
複製程式碼

這樣過後側邊欄的配置就完成了，也就是我這個顯示的樣子。

頂部

建立一個 Tags 導航頁面

執行命令:hexo new page "Tags" , 這會在部落格的 source 目錄下生成一個名為 Tags 的資料夾, 裡面會有一個 index.md 格式的頁面,如果沒有請手動建立.
然後開啟 yourblog/source 資料夾 , 找到 Tags/index.md 這個檔案, 然後設定在兩條的---裡面, 指定一個 layout: tags值.注意 key 和 value 之間的空格
然後執行命令,重新生成部落格內容: hexo clean && hexo g , 然後可以執行 hexo serve 在本地檢視效果

這樣tag的標籤就完成啦，再說說my work同樣的：

執行命令:hexo new page "my-works" , 這會在部落格的 source 目錄下生成一個名為 my-works 的資料夾, 裡面會有一個 index.md 格式的頁面,如果沒有請手動建立.
然後開啟 yourblog/source 資料夾 , 找到 my-works/index.md 這個檔案, 然後設定在兩條的---裡面, 指定一個 layout: works值.注意 key 和 value 之間的空格
然後執行命令,重新生成部落格內容: hexo clean && hexo g , 然後可以執行 hexo serve 在本地檢視效果

但是這樣的話您開啟裡面是沒有什麼內容的，下面我在說說關於內容：

進入yourblog/source，建立一個資料夾，名字是_data，注意下劃線哦
然後在裡面建立一個檔案，名為：project.json
然後...在裡面配置就好了。放心，我會說怎麼配置的

下面的就是配置：

	{
		"一段話": {
			"title": "這是一個標題",
			"subTitle": "這是一個副標題",
			"img_link": " ",
			"use" : ["java"],
			"link": "",
			"data":"2019.01-01",
			"direction": "關於work的一個測試"
		},
		"一段話2": {
			"title": "這是一個標題2",
			"subTitle": "基於 這是一個副標題2",
			"img_link": "",
			"use" : ["java","mysql","spring"],
			"link": "",
			"data": "2018.01-01",
			"direction":
				"關於work的一個測試"
		}
	}
複製程式碼

就跟檔名的字尾一樣，使用的依然是json的方式，至於裡面欄位的含義，我想我不需要多說了吧，到此，頭部的就完成了，大家去試試吧！

文章

大家建立完tags導航頁面后里面是沒有標籤的，它的標籤是根據文章裡面設定的標籤生效的，下面說說文章的頭部：

建立一條博文

hexo new "your-post-name"
複製程式碼

在建立好的文章的頭部加入以下配置：

---
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裡面的標籤。

擴充套件

對這個主題我參考網上的資料也進行了一些擴充套件，可能大家最明顯的就是感覺到了有了搜尋，文章閱讀量和網站的訪問量了，下面我就說說怎麼擴充套件的，Are you ready?

搜尋

這是我參考別人做好的方式進行擴充套件和設定的，原文中寫的還是很詳細，大家可以去看一下，當然我這裡也會說我配置擴充套件的過程：我這裡是依賴的Algolia,主要的原因是它是免費的。這是一個外部服務,在您使用所有的時候會呼叫外部的服務，由外部服務返回結果並展示，下面就說一下過程：

首先進入hexo-algolia按照指示進行安裝完畢。同樣的您要去Algolia註冊並建立您的APPs，下面說一下步驟：

首先進入 Algolia註冊，這我就不說了；
進入控制檯，在控制檯的頭部會有以下的樣式；
因為我這裡已經更改了，所以是免費的，但是新註冊的使用者註冊後的 14 天內擁有所有功能（包括收費類別的）之後若未續費會自動降級為免費賬戶，免費賬戶總共有 10,000 條記錄，每月有 100,000 的可以運算元；
在indices中新新增一個index，名字可以隨意取，但是後面需要用到；
開啟左側的API KEYS
先開啟以下介面
編輯對應的記錄，得到以下的樣式

這樣建立就完成了。接下來是修改配置檔案了，開啟您的_config.yml新增以下配置：

	algolia:
	applicationID: "your Application ID"
	apiKey: "your Search-Only API Key"
	adminApiKey: "your Admin API Key"
	chunkSize: 5000
	indexName: "輸入剛才建立index name"
複製程式碼

配置完成了，接下來我們要修改主題中的元素了，首先就新增頂部的搜尋按鈕。開啟themes/Anisina/layout/_partial/nav.ejs
1、在ul標籤中加入以下內容：

	<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檔案：

algolia.css

引入js和css檔案： themes/Anisina/layout/_partial/head.ejs，在head標籤裡面新增以下內容；

<% if (config.algolia){ %>
<%- css('css/algolia') %>
<%- js('js/algolia') %>
<%- js('js/instantsearch.min') %>
<% } %>
複製程式碼

到現在，搜尋的擴充套件大部分已經完成了，還有最後一步：

開啟剛剛新增的algolia.js檔案,找到下面的地方進行修改:

最後，回到bolg的根目錄，在source資料夾下的image裡面新增以下圖片：

當然，假如您的圖片檔案不是叫這個名字話需要您在algolia.js檔案中修改以下地方為您的圖片檔名稱：

至此，搜尋的擴充套件就完成了，下面再說說使用吧；

對了還有一個操作,不做的話執行hexo algolia會出現以下的問題：

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.
複製程式碼

這個時候需要進行以下的設定：

 export(windows 為 set)HEXO_ALGOLIA_INDEXING_KEY=您的Search-Only API key
 set(Mac為git，bash為export) HEXO_ALGOLIA_INDEXING_KEY可以檢視時候設定成功
複製程式碼

然後更新索引：

hexo algolia
複製程式碼

如果更新不成功，請clean一下繼續，

出現以下情況為更新成功：

若出現Algolia搜尋欄但是無法跳轉到搜尋結果，請執行以下程式碼：

npm install hexo-algolia@0.2.0
複製程式碼

然後在站點配置中找到package.json，把裡面的hexo-algolia，換成 "hexo-algolia": "^0.2.0";

這樣搜尋的功能也就徹底的完成了，可以前往Algolia的索引處檢視更新的索引資訊。

以上配置過程參考的文章：

https://www.jianshu.com/p/00f4bc425249
https://juejin.im/post/5af3f9d1518825673e35a6eb
複製程式碼

統計量

在搜尋完成過後接下來該說說網站下面的訪問量、訪客和文章的閱讀量是怎樣擴充套件的了:

這裡使用的是不蒜子提供的閱讀統計功能:

進入主題下的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"的一個標籤中，還有在地步的位置新增以下程式碼：

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
複製程式碼

這樣，訪問量和訪客就完成了；

下面就文章的閱讀量：進入主題下的layout/post.ejs

搜尋class="tags text-center"，在以下位置進行配置：

<br/><span id="busuanzi_container_page_pv" style="display:none;">閱讀量：
<span id="busuanzi_value_page_pv"></span>次</span>
複製程式碼

現在我的擴充套件也就全部完成了；

其實我也想弄頭部的archive，按照時間進行歸檔，但是我沒弄出來，希望有弄出來的朋友可以跟我說一下，我也沒去研究了。

部署

到現在，不知道您的部落格是否達到了您希望的效果，如果可以的話，接下來我就在說說部署吧！

我這裡使用的是 github ,首先需要您來到以下介面建立一個倉庫：

這裡我需要說一下倉庫的名稱，這裡需要是您的github名稱加上 .github.io

就像我的需要是 Joeyangsh.github.io，這是github規定的，表示式是這樣

{username}.github.io
複製程式碼

所以倉庫的名字需要是這樣的。

建立成功過後進入倉庫，來到以下介面：

找到GitHub Pages點選change theme選個主題select theme設定模板, 等待github pages建立完成，然後輸入您建立的地址,也就是您的倉庫名稱

yourName.github.io
複製程式碼

測試github pager是否建立成功。此時頁面是空的沒有任何東西。

下面要做的就是配置；

開啟您的_config.yml修改以下配置：

deploy:
   type: git  
   repo: 
   github: your address #您的倉庫地址
branch: master #提交的分支
複製程式碼

倉庫地址檢視：

配置完畢後使用以下命令，部署到github：

hexo clean
hexo g
hexo s #先本地輸入地址檢視一下是否是自己滿意的ctrl+c結束
hexo d #部署到遠處倉庫
複製程式碼

當然您也可以不存在本地檢視，直接執行以下命令：

hexo g --d #直接生成靜態資源並推送部署到遠端倉庫
複製程式碼

這個時候會出現以下錯誤：

ERROR Deployer not found: git。
複製程式碼

需要安裝 hexo-deployer-git，執行以下命令

 npm install hexo-deployer-git --save
複製程式碼

再次推送

hexo d
複製程式碼

就成功了，在瀏覽器的位址列輸入您gitgub的訪問地址就能訪問到您的部落格了。對了再提醒一句，當您完成一篇部落格的時候別忘了搜尋哦，需要更新索引庫執行以下命令：

hexo algolia
複製程式碼

這個時候您的部落格就能被訪問了，當然您也可以自己註冊域名進行繫結，下面我在說說github的自定義域名吧。

繫結域名

我是在阿里雲註冊的域名,至於註冊域名的流程我就不再講了，網上有很多的教程，域名註冊完成後來到域名控制檯：

點選解析，進入解析介面，新增域名解析：

分別新增以下兩條記錄：

以下是完成後的頁面：

到現在，域名解析也新增完畢了，10分鐘左右就會起效。

可以前往這裡檢視是否生效。

然後進入部落格的根目錄，在souce目錄下建立一個名為CNAME的檔案，沒有字尾的哦，進入檔案在裡面新增您註冊的域名：

假如您的域名是aaa.com那麼只需要在裡面新增一條
aaa.com
複製程式碼

然後從新部署一次，再次使用您的域名訪問就可以了。

https

前往github勾選以下內容：

當您後面不需要使用自己的域名的時候想使用github預設域名的時候只需要把CNAME檔案刪除再重新部署一次ok了，如果發現部署後訪問不了的情況請清一下瀏覽器的快取。

結語

到現在，hexo使用Anisina加上github搭建個人部落格的過程就完了，以上內容如果有錯誤的地方還請各位糾正，本人會及時的更正。

使用 hexo 搭建個人部落格
2019-02-16
Hexo
使用React搭建個人部落格
2018-03-07
React
使用 Hugo 快速搭建個人部落格
2019-10-14
Go
使用 github + jekyll 搭建個人部落格
2016-07-25
Github
搭建個人部落格
2024-04-06
個人部落格搭建( wordpress )
2019-01-31
hexo搭建個人部落格心得
2019-02-20
Hexo
Django搭建個人部落格（二）
2021-09-09
Django
Django搭建個人部落格：前言
2018-09-29
Django
搭建個人部落格總結
2018-01-18
beego搭建個人部落格（一）
2018-03-25
Go
beego搭建個人部落格（二）
2018-03-29
Go
Github Pages 搭建個人部落格
2014-08-02
Github
使用Hexo框架10分鐘搭建個人部落格
2020-08-18
Hexo框架
如何使用Github+Hexo快速搭建個人部落格
2019-01-27
GithubHexo
WordPress 搭建個人部落格/站點
2019-03-27
我的個人部落格搭建之旅
2019-06-28
Hexo+Gitee搭建個人部落格
2021-03-31
HexoGitee
hexo+github搭建個人部落格
2018-11-05
HexoGithub
基於 GitBook 搭建個人部落格
2020-08-27
Git
利用GITHUBpage搭建個人部落格
2015-05-10
Github
Django搭建個人部落格：使用者的刪除
2019-02-26
Django
Django搭建個人部落格：使用者的註冊
2019-03-04
Django
使用Hexo搭建個人部落格的終極資料
2018-09-07
Hexo
Django搭建個人部落格：重置使用者密碼
2018-11-04
Django密碼
nuxt+node搭建個人部落格mini
2019-02-18
UX
hexo搭建個人網站部落格完全教程
2018-09-14
Hexo網站
如何搭建個人獨立部落格網站?
2020-11-29
網站
【GitHub】GitHub+Hexo搭建個人部落格
2018-06-13
GithubHexo
搭建個人部落格手把手教程
2018-03-12
hexo結合github搭建個人部落格
2018-05-21
HexoGithub
搭建屬於自己的個人部落格
2017-06-26
github上搭建個人部落格(有更新)
2017-12-13
Github
【部落格搭建】Typecho個人部落格搭建，快速安裝，超小白（很簡單的）
2020-07-07
場景實踐：使用RDS和ECS搭建個人部落格
2022-05-23
30分鐘使用Docsify+Github Pages搭建個人部落格
2022-01-26
Github
『部落格搭建』—— 個人部落格全新上線(阿里域名+GitPages+hexo+Yelee)
2018-02-14
阿里GitHexo
史上最快用GitHub、Hexo搭建個人部落格
2019-04-25
GithubHexo

使用hexo+Anisina+github搭建個人部落格

前言

起步

下載

Anisina的配置

側邊欄

頂部

文章

評論

擴充套件

搜尋

統計量

部署

繫結域名

https

結語

相關文章