博客發(fā)表于：Ghamster Blog
轉(zhuǎn)載請(qǐng)注明出處
環(huán)境安裝
安裝git
安裝nodejs
配置npm鏡像
# 淘寶npm鏡像官網(wǎng)：https://npm.taobao.org/
# 鏡像地址：https://registry.npm.taobao.org
$ npm config set registry <https://mirror.url>
安裝hexo-cli
$ npm install -g hexo-cli
建站
創(chuàng)建blog（基本目錄結(jié)構(gòu)文件）
$ hexo init <folder>
$ cd <folder>
# 安裝package.json指定的包
$ npm install
配置
當(dāng)前已經(jīng)可以使用
hexo server命令運(yùn)行博客查看效果
配置hexo
修改hexo配置文件<blog_root>/_config.yml
title: #網(wǎng)站標(biāo)題
subtitle: #網(wǎng)站副標(biāo)題
author: #作者名字
配置主題
使用hexo主題：Theme-next辛润，文檔地址：https://theme-next.org/
theme-next安裝
下載next主題文件：https://github.com/theme-next/hexo-theme-next/archive/master.zip欣鳖，或使用git：git clone https://github.com/theme-next/hexo-theme-next themes/next
將文件解壓，重命名為 hexo-next押袍，拷貝至<blog_root>/themes目錄下
修改hexo配置文件<blog_root>/_config.yml遍烦，使用next主題:
theme: hexo-next
切換主題模式
主題模式由Muse切換為Gemini税朴，修改hexo-next配置文件 <next_root>/_config.yml
# scheme: Muse
scheme: Gemini
修改摘錄(excerpt)方式
修改hexo-next配置文件 <next_root>/_config.yml
excerpt_description: false # 使用 front-matter 的 description 字段作為簡(jiǎn)介顯示在博客列表頁(yè)（當(dāng)字段為空時(shí)顯示完整博客）耀态，關(guān)閉
# Automatically Excerpt. Not recommend.
# Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: true # 自動(dòng)摘錄，開(kāi)啟轧粟，暫時(shí)沒(méi)發(fā)現(xiàn)bug
length: 150
# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true
修改“Edited on”展示策略
修改hexo-next配置文件 <next_root>/_config.yml
post_meta:
updated_at:
# If true, show updated date label only if `updated date` different from `created date` (post edited in another day than was created).
# If false show anyway, but if post edited in same day, show only edited time.
another_day: false
添加about和tags
創(chuàng)建about和tags頁(yè)面
$ cd <blog_root>
$ hexo new page <page_name>
生成<hexo_root>/source/about/index.md和<hexo_root>/source/tags/index.md文件甚疟，在about下的index.md中添加個(gè)人信息；修改tags下的index.md逃延，在 Front-matter 中添加 type: tags
修改hexo-next根目錄下的配置文件 <next_root>/_config.yml，菜單欄配置格式：Key: /link/ || icon
| key | link | icon |
|---|---|---|
| 名稱(chēng) | uri轧拄， 即菜單項(xiàng)對(duì)應(yīng)頁(yè)面鏈接：http://[home_page]/[link] | 使用的FontAwesome圖標(biāo)名稱(chēng) |
修改為
menu:
tags: /tags/ || tags
about: /about/ || user
搜索服務(wù)
使用
Local Search的搜索服務(wù)
安裝hexo插件
$ npm install hexo-generator-searchdb --save
修改hexo配置文件<blog_root>/_config.yml：
# Configration for Theme-Next
search:
path: search.xml
field: post
format: html
limit: 20
修改hexo-next配置文件 <next_root>/_config.yml
local_search:
enable: true
# if auto, trigger search by changing input
# if manual, trigger search by pressing enter key or search button
trigger: auto
側(cè)邊欄頭像
頭像文件保存至<hexo_root/source/uploads/avatar.png>
修改hexo-next配置文件 <next_root>/_config.yml
avatar:
url: /uploads/avatar.png
# If true, the avatar would be dispalyed in circle.
rounded: true
# If true, the avatar would be rotated with the cursor.
rotated: true
側(cè)邊欄社交信息
修改hexo-next配置文件 <next_root>/_config.yml揽祥，格式與前面相同：
social:
GitHub: https://github.com/xyty007 || github
E-Mail: xyty2012@outlook.com || envelope
知乎: https://www.zhihu.com/people/initial-75 || book # FontAwesome的知乎圖標(biāo)為純白色，不能用
social_icons:
icons_only: true #只顯示圖標(biāo)檩电，不顯示文字
保存和部署
將博客部署到gitpage拄丰，參考文檔(官網(wǎng))：https://pages.github.com/
創(chuàng)建符合gitpage命名的repo，使用source分支存放博客源碼俐末，使用master分支存放hexo生成的頁(yè)面
(gitpage默認(rèn)使用master發(fā)布料按；所有的repo都可以使用gitpage，只是需要手動(dòng)開(kāi)啟卓箫，另外url會(huì)有區(qū)別)
保存
創(chuàng)建存放博客的倉(cāng)庫(kù)<git_repo>
向項(xiàng)目中添加.gitignore文件载矿，提取自 hexo.site
將項(xiàng)目代碼push到source分區(qū)
部署
使用git部署時(shí)，每次deploy會(huì)使用生成的新文件強(qiáng)制覆蓋遠(yuǎn)端<git_repo>的master分支中的舊文件
安裝git部署插件
$ npm install hexo-deployer-git --save
修改hexo配置文件<blog_root>/_config.yml
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: <git_repo>
branch: master
運(yùn)行命令部署
$ hexo deploy #或 hexo d
開(kāi)啟評(píng)論功能(基于next主題)
評(píng)論功能使用Gitalk服務(wù)實(shí)現(xiàn)
創(chuàng)建github驗(yàn)證應(yīng)用：Register a new OAuth application烹卒，需要填寫(xiě)的項(xiàng)目如下：
| 項(xiàng)目 | 描述 |
|---|---|
| Application name | 應(yīng)用名稱(chēng)闷盔，會(huì)在登錄評(píng)論的登錄驗(yàn)證界面展示 |
| Homepage URL | 可以填博客主頁(yè) |
| Application description | 應(yīng)用簡(jiǎn)介 |
| Authorization callback URL | 必須填該博客主頁(yè) |
應(yīng)用創(chuàng)建完成后弯洗，會(huì)獲得Client ID和Client Secret
使用存放博客的<git_repo>存儲(chǔ)評(píng)論數(shù)據(jù)，修改hexo-next配置文件 <next_root>/_config.yml如下(admin_user可以和github_id相同)
gitalk:
enable: true
github_id: xyty007 # Github repo owner
repo: <git_repo> # Repository name to store issues.
client_id: xxxxxxxxxxxxxxxxxxxx # Github Application Client ID
client_secret: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx # Github Application Client Secret
admin_user: xyty007 # GitHub repo owner and collaborators, only these guys can initialize github issues
個(gè)人博客站收錄
參考：
Hexo個(gè)人博客站點(diǎn)被百度谷歌收錄
給Hexo搭建的博客增加百度谷歌搜索引擎驗(yàn)證
Hexo插件之百度主動(dòng)提交鏈接
谷歌
訪(fǎng)問(wèn) Google Search Console “添加資源”逢勾，支持兩種方式：
驗(yàn)證方法可選：
- HTML標(biāo)記：修改hexo-next配置文件
<next_root>/_config.yml
# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters
google_site_verification: uL1SKjfKIZMEUOU77rLDMH7JfjC_Gz1JOA(your code)
- HTML文件：將谷歌驗(yàn)證文件拷貝至
<hexo_root>/source下牡整，并在頭部添加layout: false，避免被渲染
添加sitemap
- 安裝sitemap插件
$ npm install hexo-generator-sitemap --save
-
hexo clean溺拱，hexo g生成sitemap.xml逃贝，部署博客 - 在
Google Search Console的站點(diǎn)地圖欄添加sitemap.xml文件
百度
與谷歌類(lèi)似，訪(fǎng)問(wèn) 百度搜索資源平臺(tái) ,添加網(wǎng)站并驗(yàn)證--百度通過(guò)HTML標(biāo)記驗(yàn)證翻車(chē)迫摔，大概是因?yàn)間itpage封了百度爬蟲(chóng)
(同樣的原因沐扳，這條基本沒(méi)用)添加sitemap插件命令：npm install hexo-generator-baidu-sitemap --save，生成的文件名為baidusitemap.xml
百度提供了三種鏈接提交方式：主動(dòng)推送（實(shí)時(shí)）攒菠、自動(dòng)推送和sitemap迫皱，設(shè)置路徑：用戶(hù)中心->站點(diǎn)管理->（自己的站點(diǎn)）->鏈接提交，next主題支持了第二種辖众，在配置文件<next_root>/_config.yml中設(shè)置：
# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO.
baidu_push: true
踩坑
這里不定期更新一下最近遇到的問(wèn)題～
亂碼
現(xiàn)象：菜單欄卓起、“Read more >>”、Archrives頁(yè)面……等任何由next主題中的文字(包括英文)都顯示為亂碼
解決方式： 在hexo配置文件中將language設(shè)置為en或zh-CN凹炸，不要使用缺省值
圖標(biāo)
現(xiàn)象： 側(cè)邊欄Font Awesome圖標(biāo)不顯示戏阅，控制臺(tái)顯示lib目錄下找不到font-awesome.min.css文件
原因： 生成博客時(shí)，插件未將Font Awesome文件打包到合適位置啤它，查看<next_root>/layout/_partials/head/head.swig文件奕筐，相關(guān)代碼如下：
{% set font_awesome_uri = url_for(theme.vendors._internal + '/font-awesome/css/font-awesome.min.css?v=4.6.2') %}
{% if theme.vendors.fontawesome %}
{% set font_awesome_uri = theme.vendors.fontawesome %}
{% endif %}
可以修改hexo-next配置文件 <next_root>/_config.yml，使用cdn提供的Font Awesome
vendors:
# Internal version: 4.6.2
# See: https://fontawesome.com
# Example:
# fontawesome: //cdn.jsdelivr.net/npm/font-awesome@4/css/font-awesome.min.css
# fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css
fontawesome: https://cdn.bootcss.com/font-awesome/4.6.2/css/font-awesome.min.css
圖片與圖床
Hexo官方描述：資源文件夾
主流圖床：markdown博客圖床上傳的艱辛之路
Hexo給出的方案最大的問(wèn)題在于實(shí)時(shí)顯示和可傳播性：
- 標(biāo)簽就不說(shuō)了变骡，離了Hexo直接玩完
- 使用markdown的標(biāo)準(zhǔn)格式
![]()時(shí)离赫，與通用的markdown鏈接解析邏輯不兼容。比如_post文件夾下有一篇名為test.md的博客塌碌，Hexo默認(rèn)會(huì)生成test文件夾存放圖片資源渊胸，博客中圖片的引用鏈接必須直接寫(xiě)成xxx.png，而不是markdown標(biāo)準(zhǔn)的/test/xxx.png或./test/xxx.png
最好的解決方式是搭建圖床台妆，但是自建圖床太貴翎猛，嚴(yán)重違背了“一個(gè)子兒不花薅羊毛”的初衷，公共圖床又怕哪天就沒(méi)了...
所以接剩，我盯上了gitee切厘，沒(méi)錯(cuò)！就是國(guó)內(nèi)的碼云懊缺！訪(fǎng)問(wèn)速度快疫稿，存儲(chǔ)容量高！重點(diǎn)是可靠免費(fèi)！
在gitee創(chuàng)建repo而克，創(chuàng)建一個(gè)index.html文件（內(nèi)容不限靶壮，標(biāo)準(zhǔn)的html文檔就可以），樣例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>博客圖床</title>
</head>
<body>
<div>
<a >博客地址</a>
<a >倉(cāng)庫(kù)地址</a>
</body>
</html>
選擇服務(wù)->Gitee Pages员萍，開(kāi)啟Gitee Pages服務(wù)
上傳圖片文件腾降，更新服務(wù)（唯一的美中不足，免費(fèi)版需要手動(dòng)更新）后便可通過(guò)url訪(fǎng)問(wèn)碎绎，路徑格式為<gitee page主頁(yè)地址>/<文件在倉(cāng)庫(kù)中的路徑>螃壤。如用戶(hù)Ghamster的倉(cāng)庫(kù)HService下，存放文件Hexo_Blog折騰筆記/請(qǐng)選擇資源類(lèi)型.png筋帖，則圖片鏈接為：https://ghamster.gitee.io/ihservice/Hexo_Blog折騰筆記/請(qǐng)選擇資源類(lèi)型.png
懶人通道
顯然手動(dòng)填寫(xiě)每張圖片的url太過(guò)繁瑣奸晴，所以在此通過(guò)編寫(xiě)腳本簡(jiǎn)化這一工作，代碼地址：https://github.com/Ghamster0/Blog-Tools
使用方式：
- 將圖片放到博客repo中日麸，可以將所有圖片存放到一個(gè)默認(rèn)位置寄啼，如
<hexo_root>/source/images,也可以在_post下為每個(gè).md文件創(chuàng)建單獨(dú)的文件夾 - 寫(xiě)作時(shí)，使用相對(duì)鏈接引用代箭，如
./folder_for_title/xxx.png或../images/xxx.png - 運(yùn)行腳本墩划，將圖片拷貝到圖床倉(cāng)庫(kù)，并自動(dòng)修改鏈接
常用指令
$ hexo init [folder] # 新建一個(gè)網(wǎng)站嗡综。如果沒(méi)有設(shè)置 folder 乙帮，Hexo 默認(rèn)在目前的文件夾建立網(wǎng)站
$ hexo new [layout] <title> # 新建一篇文章。如果沒(méi)有設(shè)置 layout 极景，默認(rèn)使用 _config.yml 中的 default_layout 參數(shù)代替
$ hexo generate # 生成靜態(tài)文件察净，該命令可以簡(jiǎn)寫(xiě)為 $ hexo g
$ hexo clean # 清除緩存文件 (db.json) 和已生成的靜態(tài)文件 (public)。 在某些情況（尤其是更換主題后）盼樟，如果發(fā)現(xiàn)您對(duì)站點(diǎn)的更改無(wú)論如何也不生效氢卡，
$ hexo render <file1> [file2] ... # 渲染文件
$ hexo server # 啟動(dòng)服務(wù)器，http://localhost:4000/
$ hexo deploy # 部署網(wǎng)站晨缴，該命令可以簡(jiǎn)寫(xiě)為 $ hexo d您可能需要運(yùn)行該命令
$ hexo list <type> # 列出網(wǎng)站資料
$ hexo publish [layout] # <filename> 發(fā)表草稿
$ hexo version # 顯示 Hexo 版本
