安裝流程:
1. 安裝Node.js
2. 安裝Git → 安裝Hexo
3. 安裝主題
4. 本地測試運行
5. 在github與coding上創(chuàng)建pages倉庫
6. 部署到遠程倉庫中
7. 自定義域名訪問
配置與優(yōu)化
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
完成后些侍,請執(zhí)行下列命令隶症,請?zhí)貏e的注意看注釋。
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耗式,生成靜態(tài)文件 hexo s # 等同于hexo server胁住,在本地服務器運行
打開瀏覽器輸入 http://localhost:4000 能夠訪問說明部署成功趁猴。
注冊 Github
并創(chuàng)建Pages
在 https://github.com/ 上面注冊一個賬號
新建倉庫,倉庫名為
你賬號用戶名.github.io
-
設置 SSH 遠程連接
- 設置Git的user name和email:(如果是第一次的話)
git config --global user.name "ttxxly" git config --global user.email "ttxxly@gmail.com"
- 生成密鑰
ssh-keygen -t rsa -C "ttxxly@gmail.com"
連續(xù)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: git@github.com:ttxxly/ttxxly.github.io.git,master
coding: git@git.coding.net:ttxxly/ttxxly.coding.me.git,master
再然后打開 Git bash
輸入 hexo d
就是可以提交內容到GitHub上捕犬,然后就可以通過倉庫名ttxxly.github.io
來訪問。
注意一個公鑰只能配置在一個網站酵镜,放在github就不能再放在 coding上
自定義域名訪問
- 在
blog\source
目錄下新建CNAME
文件
#### 在 CNAME 文件 中 填寫自定義域名, 格式如下
ttxxly.top
配置與優(yōu)化
添加標簽頁面
/*
必看5锏铩!;淳隆垢粮!
確認站點配置文件_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: 堅持原創(chuàng)技術分享,您的支持將鼓勵我繼續(xù)創(chuàng)作嗅虏!
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
择同,值設置成頭像的鏈接地址两入。
其中,頭像的鏈接地址可以是:
完整的互聯(lián)網 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提交時忽略大小寫的迫横,可能文件沒有更新番舆,先將圖標文件刪除,在重新上傳就可以了矾踱。