引言
從2017年到現在，總共有兩次用Hexo來搭建個人博客。
訪問方子龍的博客:http://www.raysonblog.cn/
-
第一次：
在2017年的時候，開始想着用Java干它一個屬於自己的博客，當然不是馬上就開始干，得網上查找資料啊！看看是否有現成的能夠直接使用。在此過程中，發現有很多的博客主題都基本上一致，而且還比較好看, 效果杠杠地。為了滿足好奇心，就看到網站下方有關於Hexo的字樣，就點進去看到了一下簡介，而且還有很多好看的主題，還可以隨意配置自己喜歡的主題。頓時我就打消了要自己寫博客程序的念頭。有這么好用的，當然是直接拿來即用。就這樣，一邊搭建一邊學習也就有了Hexo+Next主題的第一版博客。遺憾的是，搭建成功以后，也沒有去管理，任它荒廢。
- 第二次：
搭建過程耗時一個月左右的時間，抽空閑時間來做，相比第一次，這次的搭建過程耗時比較長，主要原因是修改主題樣式，對主題代碼不熟悉。但是總體收獲還是很多。效果樣式都還比較喜歡，蠻符合我心里的預期。
接下來，就談談如何搭建，以及一些思考。 具體詳細如何搭建也可以百度。
一. 環境配置
【Nodejs】官網下載：https://nodejs.org/zh-cn/
【Git】官網下載：https://git-scm.com/
網上有很多相關的安裝使用教程，我這里就不多余的說。自己動手才是硬道理。
二. Hexo的安裝與常用基本命令
基礎環境配置好以后，那么接下來就可以安裝生成靜態博客網站的關鍵--Hexo，其主要信息和安裝命令，主題等都可以通過官網輕松的了解：https://hexo.io/zh-cn/
為了安裝Hexo，只需要在blog-hexo目錄中單擊右鍵啟動Git Bash Here，然后輸入命令：
npm install hexo-cli -g
網上有很多其他的命令，建議一切以官網命令為依據，由於時間版本原因，很有可能未來的命令發生改變而失效。
然后等待幾分鍾（取決於你的網速），完成后。
在blog-Hexo目錄下執行如下命令進行初始化：
hexo init
然后就可以使用Hexo三連擊，即我們最常用的三個主要命令（依舊在上述Git Bash命令端口中）：
hexo clean # 清空已有hexo網站文件
hexo generate(or g) # 依據網頁文本與新的CSS樣式生成新網站文件
hexo server(or s) # 啟動本地服務器
可以在localhost:4000查看網站修改效果 依次運行上述三個命令，就可以在瀏覽器打開localhost:4000端口，查看對應網站界面效果。
一般默認的是一個landscape主題，后期當提交新文章或者新的樣式修改時，往往都是先從本地查看結果無誤后再部署到Github Pages。
Hexo deploy(or d) #提交代碼到Github上
三. Hexo主題下載與使用
主題官網瀏覽地址：https://hexo.io/themes/
在選擇主題的過程中耗費了很多的時間和遇到了很多問題，其原因就是主題功能不全以及選擇自己喜歡的風格導致的。最后推薦搭建使用hexo-theme-next主題，因為這個功能最全。
在這個過程中,主題的許多是要修改的。
- 菜單
- 版權
- gitHub banner
- 社交信息
- 頭像信息
- 閱讀時間統計
- 打賞設置
- 評論設置
- 百度統計
- leancloud訪問統計
- 不蒜子閱讀訪問統計
- 本地搜索
- SEO優化(必須要做，然后百度就搜不到你的博客)
四. 兩個重要的配置文件：Hexo的配置文件與主題的配置文件
4.1 Hexo配置文件
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site 站點
title: 方子龍
subtitle:
description: 「方子龍」一天不碼字就剁手的程序猿。專注Java、Golang、Spring Boot/Spring Cloud等技術交流分享。
keywords: 方子龍,SpringBoot,SpringCloud,Java技術干貨,程序猿,Golang
author: 方子龍
language:
timezone:
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://www.raysonblog.cn
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
book_dir: books
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 10
order_by: -date
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: git@github.com:raysonfang/raysonblog.github.io.git
branch: master
主要修改3個地方：
- Site 站點信息配置
- URL 域名信息配置
- theme 主題配置
- Deploy 代碼托管提交配置
4.2 主題的配置文件
主題中的配置文件跟每個主題有關，可以自己嘗試修改，然后運行看效果。
五. 准備一個屬於自己的專屬域名
上面的博客只能在本地訪問，需要放到外網上去，還得將編譯好的靜態文件提交到代碼托管平台，比如github, Gitee等，這些平台都支持Pages服務。至於如何部署， 網上也可以找到資料。購買了自己的域名，那配置也相對簡單。
六. 問題總結
1. GitHub Pages自定義域名后每次hexo d都會失效解決
只要在source 目錄添加一個新文件CNAME就好
CNAME –不帶任何后綴，這就是全稱，里面寫的是你的域名
然后就ok了。
怎么push都不用再去GitHub Pages設置了
2. 如何讓文章能被指定的layout樣式渲染
---
title: 關於我
layout: about #指定模板
---
3. 文件分類如何指定二級分類
---
title: 我的個人博客搭建之旅
date: 2019-6-27 16:50:32
author: 方子龍
original: true # 自定義文章屬性 原創標識
tuijian: true # 自定義文章屬性 推薦標識
categories: #分類
- 雜談 #一級分類
- 個人感想 # 二級分類
tags:
- 雜談
---
4. 文章如何自定義屬性以及模板如何取值
---
title: 我的個人博客搭建之旅
date: 2019-6-27 16:50:32
author: 方子龍 # 自定義文章屬性 作者
original: true # 自定義文章屬性 原創標識
tuijian: true # 自定義文章屬性 推薦標識
categories: #分類
- 雜談 #一級分類
- 個人感想 # 二級分類
tags:
- 雜談
---
在模板中取值：
post.author
post.original
post.tuijian
5. 如何獲取整個站點的文章
site.posts
6. 添加gitment評論 解決object ProgressEvent，漢化等問題
直接添加如下：
<link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
<script src="https://billts.site/js/gitment.js"></script>
<div id="gitmentContainer"></div>
<link rel="stylesheet" href="https://billts.site/extra_css/gitment.css">
<script src="https://billts.site/js/gitment.js"></script>
<script>
var gitment = new Gitment({
id: '<%= page.date %>',
owner: '<%=theme.comment.gitment.github_user%>',
repo: '<%=theme.comment.gitment.github_repo%>',
oauth: {
client_id: '<%=theme.comment.gitment.client_id%>',
client_secret: '<%=theme.comment.gitment.client_secret%>',
},
cleanly: '<%=theme.comment.gitment.cleanly%>',
});
gitment.render('gitmentContainer');
<%if(theme.comment.gitment.cleanly) {%>
$('.gitment-container.gitment-footer-container').hide();
<%}%>
</script>
試一試評論：https://www.raysonblog.cn/2019/06/27/my-first-blog/
七. 總結
在搭建博客之前，我就想過自己的博客要有“書單”，“工具”，“寫作&翻譯”等菜單，就都放置到了博客的菜單欄上，隨后又得考慮每一個菜單頁的內容布局要怎么做。后來發現每一個菜單的內容沒有好的布局，總是零散的。所以我忍痛割愛，在沒有好的想法之前，就先隱藏掉。在修改主題的代碼過程中，還是很有一點難度。不過慢慢地也就得心應手了，知道怎么修改主題里的代碼。我總是愛折騰的，時間花的比較多，但是收獲總是很多。
