我的博客 搭建過程 hexo + github
正題之前，先扯扯 ：
終於搭好了一個比較滿意的博客（先來看看，打個賞？ - 博客地址）。用github + hexo 。此前用jekyll , 但是好笨重，改起來麻煩，自定義的東西少，大概模板長什麼樣，博客就長什麼樣，學起來麻煩，安的東西多。路徑管理麻煩，文件格式麻煩……
然後讀了 hexo 的文檔，搜了幾篇教程，大概就明白了。重點是找了一個有良心 wiki 的主題叫 mellow 。 主題作者 寫了詳細的 wiki ： 主題怎麼用，主題某些樣式怎麼改，目錄怎麼組織，文章頭 ， 自定義界面模板 ……夠用了，足夠用來改成想要的樣子。
hexo 安裝簡單，安的東西少，官方文檔也寫的 簡潔，清楚。
emm,挺好的
0. github 與 博客
github 上 可以創建一個 名爲 用戶名.github.io 的 repository,在裏邊扔網頁代碼，然後就能通過網址 https://用戶名.github.io 訪問網頁。這就是博客地址 (不能別的名)
然後設置裏往下翻，會有 Github Page 的選項，內置了幾個主題 choose theme 後，會把 README 裏的內容生成網站首頁，並多出個 _config.yml 文件。 （自己實驗一下）， 文件路徑是按照，repository 裏的構建的 （這句話以後就懂了）
還有個
Source選項，在用戶名.github.io下改不了，這是給其他repository準備的,其他項目代碼裏也有 github page 的設置。假設你有一個repository叫 notebook ，在 Source 可以設置用哪個分支（默認master） 作爲該項目的顯示內容，或者分支下的 特定文件夾（docs） 裏的東西作爲顯示內容, 然後通過http://用戶名.github.io/notebook訪問。
比如我的 notebook 工程，選擇 master 爲顯示內容，github 提醒 可以通過網址 https://lzyprime.github.io/notebook/ 訪問。![ntbkpg]()
首頁就是工程裏的 README 的內容，markdown 寫的，鏈接路徑就根據文件實際地址填就可以。這是默認主題好處之一，文件就是這麼組織的 【 後邊就能領悟什麼意思了 ：） 】
但是博客工程 （repository : 用戶名.github.io） 裏定死用 master 作爲網頁內容，沒法選其他的。也就是說 master 裏有什麼，訪問給的網址時就顯示什麼。
1. 用自定義主題 - hexo
hexo 乾的事就是 把所有要顯示的頁面在本地生成好，然後扔到 master 分支裏。
- 按照官方文檔，安裝 hexo，（重啓或
執行 source .profire讓環境變量生效，之後再說安裝的坑）。 - 新建一個文件夾（如： blog）,
hexo init blog - 然後下載主題 mellow,放到
blog/theme/文件夾裏。 我的博客主題 。。。原模板主題,來自condefine 的 mellow - 在 blog 下，
npm install， 會報錯，因爲 mellow 需要功能插件，去看 mellow wiki 的解決 。之後主題魔改也是來自 wiki 。 - 然後 blog 裏有一個 _config.yml 文件，默認配置文件，找到一行
theme: ...把默認的換成 mellow :theme: mellow - 命令 ：
hexo g根據 source 文件夾裏的東西生成所有網頁，hexo s扔到本地服務器，用來預覽長什麼樣。 hexo d扔到遠程，之後再說。
2. 改配置文件 _config.yml 參考hexo文檔各項設置內容
一共有兩個要改 blog/_config.yml 和 theme/mellow/_config.yml
所有項都是
配置名: 值的形式，冒號後一定跟一個空格
2.1 blog下的 _config.yml （以我的爲例）
# 這些你都空着都沒關係，大不了什麼都不顯示
title: I'm prime #大標題
subtitle: 十方三世，盡在一念 #小標題
description: #描述，個性簽名之類的，我每天
keywords: # 關鍵詞 (窮折騰，閒得疼) ？
author: prime
language: # 語言這項得看支持那些語言
timezone:# 自定義網頁地址長什麼樣
url: https://lzyprime.github.io # 網頁地址,之後所有網頁會在這個地址之後拼接
root: / #網頁文件所在根目錄permalink: :title/網頁拼接形式,默認： :year/:month/:day/:title/ ，如果你有一篇文章 helloworld.md ,title: hellowd ,創建於 2018.8.6 ,生成的網站鏈接就會是 lzyprime.github.io/2018/8/6/hellowd/ ,所以我改成了只要title,鏈接就成了 lzyprime.github.io/hellowd . 當然可以定其他的關鍵字，比如 ：aaa/: bbb/:ccc/ ,然後在文章頭裏設定 aaa: one bbb: two ccc: three, 文章鏈接就成了 https://lzyprime.github.io/one/two/three/
permalink_defaults:網頁默認拼接。用處： 每篇文章 拼接時各部分的默認值，比如你的 permalink 用自定例子裏的，這裏就可以指定 ：r/：rr/:rrr/ ,如果找不到 permalink 在文件頭裏找不到 aaa bbb ccc 的對應值，就會用這組。 lzyprime.github.io/r/rr/rrr/
# Directory 東西往哪存
source_dir: source #生成網頁用的原文件放哪，默認 source 文件夾, 裏邊 _post 文件夾裏就是所有文章public_dir: public 生成的網站文件放哪。hexo 把 source 裏的內容（xxx.md），每一篇結合主題（mellow）生成對應的 xxx.html。然後放到 public 文件夾裏。 public 就相當於 路徑 lzyprime.github.io 。 public 裏的東西會根據這個路徑拼接，如 要訪問網頁lzyprime.github.io/vscode/ 對應public/vscode/index.html 文件。 也就是說，source 裏的每個xxx.md 文件會根據source路徑建一個文件夾，裏邊有個 index.html 就是要顯示的內容。 什麼叫根據 source 路徑？ ： soure/_post/vscode/ides.md —> public/vscode/ides/index.html —-> lzyprime.github.io/vscode/ides
PS ： 會跳過 .xxx 文件夾， _xxx 文件夾不跳過，但是地址跳過： source/_post/xxx.md 會被搜到，但認爲路徑是 : source/xxx.md。 懂了 ？
tag_dir: tags # 文件頭裏寫 tags: [i1,i2,i3] ,在 public 會有 tags 文件夾，對應 i1,i2,i3 文件夾， tags/i1/index.html 按標籤查看時要顯示的內容
archive_dir: archives # 跟 tags 一樣，會有對應文件夾，按照地址層層往裏
category_dir: categories # 跟 tags 一樣，在文件頭裏 category ，根據文件頭建文件夾
## 剩下的用不着多少，看官方文檔瞭解
code_dir: downloads/code
i18n_dir: :lang
skip_render:
也就是說，遠程倉庫 master 分支裏，只需要放 public 裏的東西。
# 其他
post_asset_folder: true 相對路徑嗎？ 如果是true,source 生成到public 時，會保留原來路徑格式，比如source/_post/one/two/three.md —-> public/one/two/three/index.heml。 如果是false : public/three/index.html
用處 ： 之前講了 source —> public 的過程 ， 所以如果你的文章裏設置了 圖片資源鏈接，或者其他文章的鏈接，生成 public 文件時，就會出問題， 比如 文章 vscode.md 裏引用 vscode/ides.md ,本地文章就這麼寫就行對吧，但是生成 public 變成什麼？ —> public/vscode/index.html 引用了 vscde/ides.md ，全路徑應該是 public/vscode/vscode/ides.md 顯然沒有，所以要改成 vscode/ides/ ,這樣相當於路徑 public/vscode/vscode/ides/index.html 對吧？
圖片資源 ： 放到 source/_post/vscode/ 文件夾裏， 文章 source/_post/vscode.md 裏本地寫引用 是 vscode/x1.png 對吧，但是顯示的時候又找不到 ，因爲 public/vscode/x1.png public/vscode/index,html , 這是生成網頁後兩個文件的地址，他倆同級，所以 vscode.md 中引用 應該直接寫 x1.png 。生成網頁後纔對。
總結一下 ： 如果一篇文章 example.md 要引用 圖片或者其他資源，那就建一個同名的文件夾 example/ 東西扔到這裏邊，引用直接填名字，當然文章的話去掉後綴（如上例子）
relative_link: true ## 看官網文檔
theme: mellow
# 向 遠程倉庫的提交
deploy:
type: git
repository: https://github.com/lzyprime/lzyprime.github.io.git
branch: masterhexo g 生成完public , 你可以手動把public 裏的東西推到遠程。當然 hexo 自帶了方法（如上），在配置最後邊，有 deploy 項，設置好後，每次hexo g生成完，執行 hexo d，就會自己推到遠程，和git push 一樣。
第一次使用會提示找不到 git ？ 需要安裝 hexo 的插件
npm install hexo-deployer-git --save
然後就能推送了，命令連寫 :hexo g -d生成並推送，其他也支持連寫
2.2 theme/mellow/_config.yml 設置主題細節,wiki
註釋裏寫的很清楚，沒什麼了，， 用什麼開什麼，不用就註釋掉
頭像底下的那幾個小圖標 ：
圖標是fontawesome圖標，只需要寫圖標名。
http://fontawesome.dashgame.com/ ，網站前綴設好了，
只需要去網站找合適的圖標，然後寫名字
新連接規則[name]: url | icon
menu_link:
github: https://github.com/lzyprime | github
music: https://music.163.com/#/user/home?id=395181365 | music
簡書: https://www.jianshu.com/u/3ce5b376d814 | book
左側導航欄自定義 ： 圖標同上
# 添加新菜單項遵循以下規則
## menu:
## link: [必要][不渲染] 用於區分類別
## icon: _blank [必要][渲染] 菜單圖標。使用內置fontawesome圖標，省略前綴
## text: About [必要][渲染] 菜單文字信息
## url: /about [必要][渲染] 菜單鏈接，絕對或相對路徑。
## target: _blank [必要][不渲染] 是否跳出，省略則在當前頁面打開
menu:
home:
text: 主頁
url: /
icon: home
repo_list:
text: 項目列表
url: /repolist
icon: code
th-list:
text: 文章分類
url: /categories
icon: th-list
tags:
text: 標籤
url: /tags
icon: tags
archives:
text: 所有文章
url: /archives
icon: archives
notebook:
text: 我的筆記
url: /notebook ## 拼接之後：lzyprime.github.io/notebook/
icon: stack-overflow
about:
text: 我
url: /about
icon: user
gitee:
text: 碼雲主頁
url: https://lzyprime.gitee.io ## 支持完整路徑
icon: link
#demo:
#text: CUSTOM
#url: /custom
#icon: plus-square
#github:
#url: https://github.com/lzyprime
#target: _blank
#icon: github# 首頁是否開啓置頂標誌
top_icon: true #在文件頭裏寫 top: 數字，，數字越大越靠前。
網站最下端一行小字，顯示鏈接
#####################
#### 頁腳配置 ###
#####################
# 友情鏈接
blogroll:
item1:
name: 主頁
url: https://lzyprime.github.io
item2:
name: 簡書
url: https://www.jianshu.com/u/3ce5b376d814
.
.
.
# 其他的評論之類的功能，想配就按着 wiki 裏來。3 文章和個別頁面
3.1 文章就放到 source/_post/ 下，怎麼 從 source 到 public 前邊 blog/_config.yml 裏寫了。。
格式 ： xxx.md
內容：
---
title: title #標題
date: 2017-11-07 09:56:27 #創建時間
tags: [tag1, tag2] #標籤(同級)
categories: #分類(分層)
- cat1
- cat2
- cat3
reward: false #是否開啓打賞功能
comment: false #是否開啓評論功能
top: 1 #置頂層級(數字越大，優先級越高)
repo: codefine | hexo-theme-mellow #用戶名 | 倉庫名
src: https://i.loli.net/2017/12/12/5a2fd18a74471.jpg #主頁摘要縮略圖(外鏈以及相對資源均可)
aaa: one
bbb: two
ccc: tree
---
# 1
## 2
### 3三個橫槓(不能多，不能少) 裏夾的內容就是文件頭，設置標籤，分類，其他信息……，比如之前例子裏的 aaa bbb ccc
PS: tags 見文件夾 tags/tag1 tags/tag2 , 而 categories 是 categories/cat1/cat2/cat3/ 。顯示效果就是 屬於 cat1>cat2>cat3 。
3.2 tags all頁面,categories all頁面
生成網頁預覽時，可能會出現單獨點擊某個標籤，可以顯示網頁，當點 All 標籤, 或者從左側點擊標籤時，就找不到網頁了，，同理 categories 。
去 public/tags/ 裏查看，根本就沒有 index.html 文件
解決: 生成一個 index.html 就好了。。 去 source 裏 建一個 tags.md 文件頭裏指定 layout: tags, 主題裏有 tags 和 categories 的樣式
---
title: tags
layout: tags
---
同理 categories
---
layout: categories
---其實應該去改 _config.yml 裏的東西。 但是，爲了省事……
就建個空文件，不用內容。
3.3 自定義頁面 如： /about
在 theme/mellow/_config.yml 裏設置了左側導航，有些自定頁面，比如 /about 。 不會自己生成，因爲 souce 裏也沒有。
hexo [layout] <filename>
#layout 可以任意指定主題裏帶的一個，
#如果不寫或者，沒有所說的layout，
#默認會是 layout: post （在blog/_config.yml 裏設默認值）
hexo page about # 新建 about 頁 在source 裏會有 source/about/index.md
#同理其他網頁也是這樣 , 或者手動創建也可以，按照 source --> public 的原理。Pro 一下，自帶模板的自定義
這一項之上的內容，基本就能建個好博客了，總結一下 ：
- 安裝hexo 和 喜歡的主題（官網一堆模板） ， 然後改一下配置文件（兩個_config.yml）
- 把東西扔到 source 裏 ， 按照 source —> public 的路徑轉換，組織你的文件。
- hexo g —> hexo s 預覽一下效果 —> hexo d 或者 git push 扔到遠程。
對，就這三步這麼簡單， _config.yml , source ---> public ，文件頭 , 弄明白就沒問題了。。
如果模板和配置還不合意，你就要自己動前端代碼了……
比如我的主題，最上頭的圖片加寬了，，文章顯示頁加寬了，左側欄淡化了……
mellow 的 wiki 給了一部分元素的說明，你可以小改。你也可以自己寫頁面模板，放到 _custom 文件夾裏， layout: 自定義 ，或者直接在 source 裏寫 index.html。生成時會原封不動的過去。
總之就是前端，你會就自己造輪子。不會？ 找個好點的模板，小改一下將就着用唄。