Hexo 的安裝與配置
安裝流程:
1. 安裝Node.js
2. 安裝Git → 安裝Hexo
3. 安裝主題
4. 本地測試執行
5. 在github與coding上建立pages倉庫
6. 部署到遠端倉庫中
7. 自定義域名訪問
配置與優化
1. 新增標籤頁面
2. 新增分類頁面
3. 新增自定義頁面
4. 文章末尾追加版權資訊
5. 開啟打賞功能
6. 友情連結
7. 自定義字型
8. 自定義圖示和側欄頭像
9. 新增 Rss 訂閱
10. MathJax支援
錯誤解決
1. 關於網站圖示不更新問題
安裝 Hexo
Node.js、GIt 安裝
安裝hexo
開啟 git bash
輸入以下命令
npm install -g hexo-cli
安裝 Hexo
完成後,請執行下列命令,請特別的注意看註釋。
hexo init <folder> #folder指我們要安裝的部落格根目錄
#hexo init blog 指的是在當前資料夾下新建blog目錄作為部落格的根目錄
cd <folder>
npm install #安裝所有的依賴包
安裝主題
- 將主題檔案拷貝至站點目錄的
themes
目錄下
git clone https://github.com/iissnan/hexo-theme-next themes/next
修改配置檔案
開啟 站點配置檔案, Ctrl +F 搜尋theme
欄位,並將其值更改為 next
如果顯示的是繁體中文,那麼在站點配置檔案中設定language: zh-CN
本地預覽
hexo g # 等同於hexo generate,生成靜態檔案 hexo s # 等同於hexo server,在本地伺服器執行
開啟瀏覽器輸入 http://localhost:4000
註冊 Github 並建立Pages
在 https://github.com/ 上面註冊一個賬號
新建倉庫,倉庫名為
你賬號使用者名稱.github.io
設定 SSH 遠端連線
- 設定Git的user name和email:(如果是第一次的話)
git config --global user.name "ttxxly" git config --global user.email "[email protected]"
- 生成金鑰
ssh-keygen -t rsa -C "[email protected]"
連續3個回車。如果不需要密碼的話。
最後得到了兩個檔案:id_rsa
和id_rsa.pub
。複製id_rsa.pub
內容到github上。
部署到 github
在 部落格的配置檔案(不是主題配置檔案) _config.yml
中 末尾新增
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
github: [email protected].com:ttxxly/ttxxly.github.io.git,master
coding: [email protected].coding.net:ttxxly/ttxxly.coding.me.git,master
再然後開啟 Git bash
輸入 hexo d
就是可以提交內容到GitHub上,然後就可以通過倉庫名 ttxxly.github.io
來訪問。
注意一個公鑰只能配置在一個網站,放在github就不能再放在 coding上
自定義域名訪問
- 在
blog\source
目錄下新建CNAME
檔案
#### 在 CNAME 檔案 中 填寫自定義域名, 格式如下
ttxxly.top
配置與優化
新增標籤頁面
/*
必看!!!!
確認站點配置檔案_config.yml中有: tag_dir: tags (有註釋的去掉註釋)
確認主題配置檔案_config.yml中有: tags: /tags
*/
hexo new page "tags"
編輯站點中 source/tags/index.md
檔案:
title: tags
date: 2017-3-16 14:08:51
type: "tags"
如果站點啟用多說或者Disqus,會在預設頁面新增評論,關閉評論那麼還需要新增:
comments: false
新增分類頁面
/*
確認站點配置檔案裡有 category_dir: categories
確認主題配置檔案裡有 categories: /categories
*/
hexo new page "categories"
編輯站點的 source/categories/index.md
檔案:
title: categories
date: 2015-10-20 06:49:50
type: "categories"
如果站點啟用多說或者Disqus,會在預設頁面新增評論,關閉評論那麼還需要新增:
comments: false
新增自定義頁面
hexo new page "title"
- 如果你不想在該頁面顯示評論,那麼我們需要開啟
blog\source\logs\index.md
在date的 下一行新增comments: false
(注意冒號後面有一個空格) - 找到
\next\_config.yml
下的menu
, 把title
加進去。 - 然後在下面
menu_icons
中加入你想讓其顯示的圖示圖示傳送 - 在
/themes/hexo-theme-next/languages/zh-Hans.yml
檔案中(這裡預設你使用的是簡體中文,若是其他語言更改相應的yml就行),在memu
下加一句即可:
title: 標題
文章末尾追加版權資訊
開啟 themes/next/layout/_macro/reward.swig
,在最上面新增如下程式碼:
<div align="center">
{% if not is_index %}
<div class="">
<p>
<span>
<b>本文地址:</b>
<a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ url_for(page.path) }}</a>
<br/><b>轉載請註明出處,謝謝!</b>
</span>
</p>
</div>
{% endif %}
</div>
開啟打賞功能
在 主題配置檔案
中:
reward_comment: 堅持原創技術分享,您的支援將鼓勵我繼續創作!
wechatpay: /images/wechat-reward.png
alipay: /images/alipay-reward.jpg
友情連結
在 主題配置檔案
中
例項:
# title
links_title: Links
links:
MacTalk: http://macshuo.com/
Title: http://example.com/
自定義字型
http://theme-next.iissnan.com/theme-settings.html#fonts-customization
font:
enable: true
# 外鏈字型庫地址,例如 //fonts.googleapis.com (預設值)
host:
# 全域性字型,應用在 body 元素上
global:
external: true
family: Monda
# 標題字型 (h1, h2, h3, h4, h5, h6)
headings:
external: true
family: Roboto Slab
# 文章字型
posts:
external: true
family:
# Logo 字型
logo:
external: true
family: Lobster Two
size: 24
# 程式碼字型,應用於 code 以及程式碼塊
codes:
external: true
family: PT Mono
在 source/css/_variables/custom.styl
檔案中
// 標題,修改成你期望的字型族
$font-family-headings = Georgia, sans
// 修改成你期望的字型族 如果不生效 請在同目錄下的 base.style 下 修改成你期望的字型族
$font-family-base = "Microsoft YaHei", Verdana, sans-serif
// 程式碼字型
$code-font-family = "Input Mono", "PT Mono", Consolas, Monaco, Menlo, monospace
// 正文字型的大小
$font-size-base = 16px
// 程式碼字型的大小
$code-font-size = 13px
注:上面的那種方式是更改首選字型,下面的方式會覆蓋上面的那一種方式
自定義圖示和側欄頭像
圖示:在 source
目錄下,放圖示檔案,命名為 favicon.ico
側欄頭像: 編輯 站點配置檔案 _config.yml
,新增欄位 avatar
,值設定成頭像的連結地址。
其中,頭像的連結地址可以是:
完整的網際網路 URL,例如:https://avatars1.githubusercontent.com/u/32269?v=3&s=460
站點內的地址,例如:
/uploads/avatar.jpg 需要將你的頭像圖片放置在 站點的 source/uploads/(可能需要新建uploads目錄)
/images/avatar.jpg 需要將你的頭像圖片放置在 主題的 source/images/ 目錄下。
新增RSS訂閱
安裝訂閱外掛:
npm install hexo-generator-feed
編輯網站根目錄下的 _config.yml,新增以下程式碼開啟
# RSS訂閱支援
plugin:
- hexo-generator-feed
# Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
將訂閱新增到選單欄中
- 找到
\next\_config.yml
下的menu
, 把rss
加進去。
menu:
home: /
rss:
- 然後在下面
menu_icons
中加入你想讓其顯示的圖示圖示傳送
menu_icons:
logs: th-list
projects: ra
rss: rss
- 在
/themes/hexo-theme-next/languages/zh-Hans.yml
檔案中(這裡預設你使用的是簡體中文,若是其他語言更改相應的yml就行),在memu
下加一句即可:
menu:
home: 首頁
archives: 歸檔
categories: 分類
tags: 標籤
about: 關於
search: 搜尋
schedule: 日程表
sitemap: 站點地圖
commonweal: 公益404
logs: 日誌
projects: 專案
rss: 訂閱
MathJax支援
https://github.com/hexojs/hexo-math
錯誤解答
關於網站圖示不更新問題
可以檢視下GitHub網站上圖示是否更新,因為git提交時忽略大小寫的,可能檔案沒有更新,先將圖示檔案刪除,在重新上傳就可以了。