所需準(zhǔn)備
創(chuàng)建Github個(gè)人倉(cāng)庫(kù)
注冊(cè)Github賬號(hào),并點(diǎn)擊Github中New repository
建立新倉(cāng)庫(kù)鹰服,倉(cāng)庫(kù)名為: 用戶名.github.io
安裝并配置Git
在Git官網(wǎng)下載安裝包获诈,安裝后在命令行下輸入git
檢測(cè)是否安裝成功。
打開Git Bash
, 輸入以下命令配置用戶名和郵箱信息
git config --global user.name "Github用戶名"
git config --global user.email "Github注冊(cè)郵箱"
生成ssh密鑰文件
ssh-keygen -t rsa -C "Github注冊(cè)郵箱"
然后其他選項(xiàng)默認(rèn)笼踩。
設(shè)置Github中的密鑰嚎于,和電腦上的密鑰配對(duì)挟冠,即可在電腦上使用Git管理Github.
打開Github_setting_key頁面,新建
new SSH Key
Title任意肋僧, 將密鑰從
C:\\users\"your name"\.ssh\id_rsa.pub
中復(fù)制過來, 點(diǎn)擊Add SSH Key
在Git bash中輸入
ssh git@github.com
檢測(cè)是否設(shè)置成功
安裝Node.js
直接下載Node.js for windows, 并在安裝時(shí)注意將環(huán)境變量和npm裝上.
檢測(cè)是否安裝成功嫌吠, 在命令行輸入node -v
以及npm -v
即可
安裝hexo
任意位置新建一個(gè)名為Blog
的文件夾(可以是其他任意的英文)辫诅, hexo框架以及之后發(fā)布的網(wǎng)頁都將安裝到這個(gè)文件夾中涧狮。
進(jìn)入Blog
文件夾么夫,啟動(dòng)命令行魏割,用npm安裝hexo
npm install -g hexo-cli
安裝好后初始化
hexo init blog
隨后即可用hexo的各項(xiàng)命令制作靜態(tài)網(wǎng)頁了.
發(fā)布網(wǎng)站
在blog根目錄中_config.yml文件里修改
deploy:
type: git
repo: 倉(cāng)庫(kù)的完整路徑.git
branch: master
最后在Git中安裝部署插件, 輸入命令
npm install hexo-deployer-git --save
即可使用命令hexo d
來發(fā)布網(wǎng)站了钞它。
綁定個(gè)人域名
可在域名提供商處購(gòu)買域名遭垛,在國(guó)內(nèi)用DNSpod解析操灿。
先在source\post\
文件夾下新建文件CNAME
,文件名一定要大寫庶喜,沒有后綴名. 用編輯器打開該文件后輸入剛申請(qǐng)的域名YourDomain.com
.
在DNSpod的操作頁面中添加兩條域名解析記錄
@ CNAME YourUserID.github.io
www CNAME YourUserID.github.io
等候10分鐘久窟,即可用域名YourDomain.com
打開個(gè)人博客.
一些小問題
不能生成categories和tags
需要用命令hexo new page categories
來生成categories頁面.
Hexo 將MathJax中的某些命令渲染錯(cuò)誤
解決方法是換一個(gè)Hexo的引擎本缠, 使用以下命令
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-pandoc --save
注意丹锹,前提是電腦中安裝了Pandoc
中英文之間需要手動(dòng)打空格
可以用Next的名為pandu
的插件自動(dòng)生成空格,具體使用方法參見pangu_github
如何引用站內(nèi)的博文
可以用hexo3.0引入的Render Pipeline Changed特性在所要引用的地方匾灶,輸入以下代碼
{% post_path hello-world %}
// /2015/01/16/hello-world/
{% post_link hello-world %}
// <a href="/2015/01/16/hello-world/">Hello World</a>
{% post_link hello-world Custom Title %}
// <a href="/2015/01/16/hello-world/">Custom Title</a>
{% asset_path example.jpg %}
// /2015/01/16/hello-world/example.jpg
{% asset_link example.jpg %}
// <a href="/2015/01/16/hello-world/example.jpg">example.jpg</a>
{% asset_link example.jpg Example %}
// <a href="/2015/01/16/hello-world/example.jpg">Example</a>
{% asset_img slug %}
// <img src="/2015/01/16/hello-world/example.jpg">
注意引用博文時(shí)阶女,若博文的標(biāo)題中有自動(dòng)生成的時(shí)間窜锯,則只需要將hello-world
換成博文的title
即可芭析,不需要加時(shí)間.
創(chuàng)建about頁面
新建一個(gè) about
頁面:
hexo new page "about"
菜單顯示 about
鏈接馁启,在主題的 _configy.yml
設(shè)置中將 menu
中 about
前面的注釋去掉即可芍秆。
menu:
home: /
archives: /archives
tags: /tags
about: /about
用Busuanzi統(tǒng)計(jì)訪問量
注意在Next 5.01以上版本中已經(jīng)內(nèi)置有Busuanzi妖啥,只需在主題配置文件打開即可对碌。 參看說明
在主題的themes\next\layout\_partial\footer.swig
中添加如下代碼
{% if theme.footer.busuanzi.enable %}
<script async src="http://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
{% endif %}
添加后Busuanzi就可以統(tǒng)計(jì)網(wǎng)站流量了.
在網(wǎng)站主頁顯示訪問人數(shù)朽们,同樣在剛才的文件中添加如下代碼
{% if theme.footer.busuanzi.enable %}
<span id="busuanzi_container_site_uv">
曾有<span id="busuanzi_value_site_uv"></span>人大駕光臨
</span>
{% endif %}
這段代碼按pv方式統(tǒng)計(jì)骑脱,每一次點(diǎn)擊都算一次訪問.若按uv方式統(tǒng)計(jì),即一個(gè)用戶不管多少次點(diǎn)擊都算一次訪問叁丧,將代碼中pv改成uv即可.
最后若想激活效果,在themes\next\_config.yml
的footer
字段中添加代碼
busuanzi:
# busuanzi analysis
enable: true
文章字?jǐn)?shù)統(tǒng)計(jì)
使用插件hexo-symbols-count-time
來統(tǒng)計(jì)文章字?jǐn)?shù)蚊锹,參見文檔
首先安裝插件
npm install hexo-symbols-count-time --save
隨后在Hexokinase配置文件中添加字段
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true
最后在NexT主題的配置文件中找到配置
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 4
wpm: 275
配置好即可.
如何讓Google和Baidu可以搜索到網(wǎng)站
可以參見教程
解決FontAwesome訪問太慢的問題
可以用國(guó)內(nèi)的CDN
在Next的Config文件中找到fontawesome:
一欄枫耳,然后將對(duì)應(yīng)的版本替換就好.
注意迁杨,上述的CDN替換可能導(dǎo)致加載圖片出錯(cuò)的問題凄硼。
使用MathJax時(shí)摊沉,如何讓長(zhǎng)公式自動(dòng)斷行?
在themes\next\layout\_third-party\math\mathjax.swig
文件中添加如下代碼
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
CommonHTML: { linebreaks: { automatic: true } },
"HTML-CSS": { linebreaks: { automatic: true } },
SVG: { linebreaks: { automatic: true } }
});
</script>
具體參見官方文檔
Hexo s 的妙用
在調(diào)整hexo網(wǎng)站時(shí)骏全,可以在終端運(yùn)行hexo s
命令姜贡。此時(shí)hexo會(huì)自動(dòng)將你所作的更改顯示到http://localhost:4000/
之上棺棵,省卻了重復(fù)生成并部署網(wǎng)站的操作.