感謝IT之家網(wǎng)友 郭小銘 的投稿
前言
這是一篇很詳細的獨立博客搭建教程,意在幫助之家dalao們能快速入門,擁有自己的獨立博客。
為什么用Hexo搭建獨立博客?
Hexo是一個快速、簡潔且高效的博客框架。Hexo使用Markdown(或其他渲染引擎)解析文章,在幾秒內(nèi),即可利用靚麗的主題生成靜態(tài)網(wǎng)頁。
Github和Coding又是什么?
Github是國外免費的Git代碼托管平臺。利用Github Page服務(wù)可以免費創(chuàng)建一個靜態(tài)網(wǎng)站。
Coding則是國內(nèi)Git代碼托管平臺,國內(nèi)首個Git代碼托管平臺GitCafe已被Coding收購,也提供page服務(wù)。
為什么用兩個代碼托管平臺?
很多人都把hexo托管到Github上,因為Github大家都用的比較久了。但是,你的博客主要訪問者肯定還是國內(nèi)的用戶,國內(nèi)的用戶訪問Coding比Github是要快不少的。還可以利用域名解析實現(xiàn)國內(nèi)的走Coding,海外的走Github,分流網(wǎng)站的訪問。
步驟
安裝Git
Git是什么?
Git是目前世界上最先進的分布式版本控制系統(tǒng)(沒有之一)。
下載后按默認選項安裝即可。
安裝完成后,在開始菜單里找到“Git”->“Git Bash”,蹦出一個類似命令行窗口的東西,就說明Git安裝成功!
因為Git是分布式版本控制系統(tǒng),所以,每個機器都必須自報家門:你的名字和Email地址。
注意git config命令的–global參數(shù),用了這個參數(shù),表示你這臺機器上所有的Git倉庫都會使用這個配置,當然也可以對某個倉庫指定不同的用戶名和Email地址。
安裝Node.js
Windows安裝
直接進入Node.js官網(wǎng)打開Downloads選項卡,
再點擊Windows Installer下載,默認安裝就行。
Linux安裝
先去官網(wǎng)下載最新安裝包
wget https://nodejs.org/dist/v6.10.3/node-v6.10.3-linux-x64.tar.xz
使用解壓命令
xz -d node-v6.10.3-linux-x64.tar.xz
tar -xvf node-v6.10.3-linux-x64.tar
或者
tar -xvJf node-v6.10.3-linux-x64.tar.xz
文件就被解壓到當前文件夾下了
mv node-v6.10.3-linux-x64 node-v6.10.3
mv node-v6.10.3 /usr/local/node
配置環(huán)境變量
#編輯/etc/profile (使用vim)
vim /etc/profile#在底部添加PATH變量
export
PATH=$PATH:/usr/local/node/bin
#保存退出,先按esc鍵,再按`shift`+`:wq`
#最后保存并使其生效即可
source /etc/profile
安裝Hexo
打開Git-bash,輸入
npm install -g hexo-cli
即可完成Hexo的安裝。
安裝插件(可選)
npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked --save
npm install hexo-renderer-stylus --save
npm install hexo-generator-feed --save
npm install hexo-generator-sitemap --save
本地部署Hexo
在電腦磁盤新建一個存放博客目錄的文件夾,例如:blog,
進入到blog文件夾,點空白處右擊鼠標,打開Git-Bash右擊,
輸入hexo init然后npm install,該文件夾有如下目錄,就安裝成功!
├──_config.yml //網(wǎng)站的配置信息,你可以在此配置大部分的參數(shù)。
├──package.json
├──scaffolds //模板文件夾。當你新建文章時,Hexo會根據(jù)scaffold來建立文件。
├──source //存放用戶資源的地方
|├──_drafts
|└──_posts
└──themes //存放網(wǎng)站的主題。Hexo會根據(jù)主題來生成靜態(tài)頁面。
輸入hexo s啟動博客
$ hexo s
INFO Start processing
INFO Hexo is running athttp://localhost:4000/. Press Ctrl+C to stop.
打開瀏覽器輸入http://localhost:4000/即可訪問
將博客托管到Github和Coding上
托管到github
注冊github帳號
訪問官網(wǎng)注冊,你的username和郵箱十分重要,GitHub上很多通知都是通過郵箱的。比如你的主頁上傳并構(gòu)建成功會通過郵箱通知,更重要的是,如果構(gòu)建失敗的話也會在郵件中說明原因。
創(chuàng)建項目倉庫
注冊并登陸Github官網(wǎng)成功后,點擊頁面右上角的+,選擇New repository。
在Repository name中填寫Github賬號名.github.io,
點擊Create repository,完成創(chuàng)建。
托管到coding
注冊coding帳號
訪問官網(wǎng)注冊并登錄,
創(chuàng)建倉庫
點+創(chuàng)建項目,
填寫項目名稱描述創(chuàng)建即可。
配置SSH
配置SSH Key是讓本地Git項目與遠程的github建立聯(lián)系,
檢查是否已經(jīng)有SSH Key,打開Git Bash,輸入:
cd ~/.ssh11
如果沒有.ssh這個目錄,則生成一個新的SSH,輸入:
ssh-keygen -t rsa -C“your e-mail”
注意1:此處的郵箱地址,你可以輸入自己的郵箱地址;注意2:此處的「-C」的是大寫的「C」
接下來幾步都直接按回車鍵,然后系統(tǒng)會要你輸入密碼,
Enter passphrase (empty for no passphrase):<輸入加密串>
Enter same passphrase again:<再次輸入加密串>
這個密碼會在你提交項目時使用,如果為空的話提交項目時則不用輸入。這個設(shè)置是防止別人往你的項目里提交內(nèi)容。
注意:輸入密碼的時候沒有*字樣的,你直接輸入就可以了。
最后看到這樣的界面,就成功設(shè)置ssh key了。
添加SSH Key到GitHub和Coding
打開Git Bash,然后輸入:
cd ~/.ssh11
進入到.shh文件夾中再輸入ls,查看是否有id_rsa.pub文件,
再鼠標全選中右擊復(fù)制,
再配置到GitHub和Coding的SSH中,
進入Github官網(wǎng),點擊+旁邊的頭像,再按settings進入設(shè)置,
在點擊New SSH key創(chuàng)建,
Title輸入郵箱,Key里面粘貼剛才右擊復(fù)制的內(nèi)容,再點Add SSH key,
同樣進入Coding,點擊賬戶,在點SSH公鑰設(shè)置即可。
測試SSH是否配置成功
打開Git Bash,然后輸入
ssh -T git@github.com11
如配置了密碼則要輸入密碼,輸完按回車
如果顯示以下內(nèi)容,則說明Github中的ssh配置成功。
Hi username! You’ve successfully authenticated, but GitHub does notprovide shell access.
再輸入:
ssh -T git@git.coding.net
如果顯示以下則說明coding中的ssh配置成功:
Hello username You’ve connected to Coding.net by SSH successfully!
創(chuàng)建Github Pages和Coding Pages服務(wù)
GitHub Pages分兩種,一種是你的GitHub用戶名建立的username.github.io這樣的用戶&組織頁(站),另一種是依附項目的pages。想建立個人博客是用的第一種,形如cnfeat.github.io這樣的可訪問的站,每個用戶名下面只能建立一個。
官網(wǎng)點擊代碼再點擊Coding Pages服務(wù)開啟。分支和github分支寫一樣,填寫master,
將博客網(wǎng)站上傳到GitHub和Coding中
打開D:\blog文件夾中的_config.yml文件,找到如下位置,填寫:
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
github: git@github.com:yourname/yourname.github.io.git,master
coding: git@git.coding.net:yourname/yourname.git,master
注:(1)其中yourname替換成你的Github賬戶名;(2)注意在yml文件中,:后面都是要帶空格的。
再更改一下_config.yml文件,其中的url和root屬性。
url:
root: /blog\
root下面應(yīng)該設(shè)置成/你的項目名而不是/
然后重新部署一下。
在blog文件夾中空白處右擊打開Git Bash輸入
hexo g #生成靜態(tài)網(wǎng)頁npm install hexo-deployer-git–save hexo d #開始部署
此時,通過訪問http://yourname.github.io和http://yourname.coding.me可以看到默認的Hexo首頁面(與之前本地測試時一樣)。
更換Hexo主題
我使用的是Next主題。該主題簡潔易用,在移動端也表現(xiàn)不錯。
下載主題
在blog文件夾中空白處右擊打開Git Bash輸入:
git clone https://github.com/xirong/hexo-theme-next.gitthemes/next
或者建議使用使用國內(nèi)的倉庫
git clone https://git.coding.net/tianyu211/next.gitthemes/next
修改網(wǎng)站的主題為Next
打開D:\blog下的_config.yml文件,找到theme字段,將其修改為next:
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next
驗證主題是否可用
輸入hexo s #啟動服務(wù),調(diào)試用,
再在瀏覽器輸入http://localhost:4000/確認網(wǎng)站主題是否切換為Next。
博客blog根目錄下的_config.yml配置網(wǎng)站信息
_config.yml配置請點參考
Hexo博客nexT主題優(yōu)化
閱讀全文按鈕
編輯主題配置_config.yml:
auto_excerpt:
enable: false
length: 150(可自行設(shè)置)
把enable設(shè)置為true之后,每篇文章都會在第150個字符處截斷。
搜索界面
執(zhí)行代碼:
npm install hexo-generator-search --save
然后編輯hexo的_config.yml:
search:
path: search.xml
field: post
相冊界面
執(zhí)行hexo new page“photos”,然后在hexo/source文件夾下能夠找到photos文件夾,進入文件夾,編輯index.md文件,添加字段:
type: photos
然后編輯主題配置_config.yml,在menu選項中添加photos項:
menu:
home: /
categories: /categories
about: /about
#archives: /archives
tags: /tags
#commonweal: /404.html
photos: /photos
進入hexo/themes/next/languanges文件夾,編輯zh-Hans.yml文件,在menu菜單里添加photos對應(yīng)的中文名稱,修改如下:
menu:
home:首頁
archives:歸檔
categories:分類
tags:標簽
about:關(guān)于
search:搜索
commonweal:公益404
photos:相冊
然后為相冊頁在菜單下的鏈接添加圖標,在Fontawesome中找到自己喜歡的圖標,記錄名稱,在編輯主題配置config.yml,在menu_icons字段中增加一行photos::
menu_icons:
enable: true
#KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
home: home
about: user
categories: th
tags: tags
archives: archive
commonweal: heartbeat
photos: photo
然后在hexo/source/photos/index.md中,增加代碼:
{% raw %}
{% endraw %}
* ![](URL)
* ![](URL)
{% raw %}
{% endraw %}
把其中的URL換成要展示的圖片的地址,本地或者外鏈都可以。
重新編譯,生成。
文章添加閱讀次數(shù)
關(guān)于Hexo的文章閱讀量設(shè)置問題,大多數(shù)人都是使用不蒜子的代碼實現(xiàn)。但是這個方法僅局限于在文章頁面顯示閱讀數(shù),首頁是不顯示的。所以我推薦使用leanCloud管理閱讀量數(shù)據(jù)。
在Hexo 5.0版本以后,已經(jīng)自帶可以直接開啟文章閱讀量統(tǒng)計:
進入leanCloud官網(wǎng)注冊個賬號,可以不用手機號,只用郵箱激活,然后點擊頭像進入控制臺,
創(chuàng)建一個應(yīng)用,命名為Counter,
點擊應(yīng)用右上角的齒輪,進入應(yīng)用設(shè)置界面,點擊存儲創(chuàng)建一個Class命名為Counter,設(shè)置權(quán)限為無限制,
創(chuàng)建完畢后點擊應(yīng)用的設(shè)置,找到應(yīng)用Key,復(fù)制下來App ID和App Key,
打開next根目錄下的_config.yml配置文件找到leancloud_visitors字段,把你上一步的AppID和AppKey粘貼過來,看起來大概像這樣:
leancloud_visitors:
enable: true
app_id: 40LJ62BsvIsNX0gRT8Lf0cuR-gzGzoHsz
app_key: SJ7F5qRaBjcYv8yHhex3pHcv
重新編譯部署hexo clean、hexo g -d
添加Fork me on Github
去網(wǎng)址https://github.com/blog/273-github-ribbons挑選自己喜歡的樣式,并復(fù)制代碼,添加到themes\next\layout_layout.swig的body標簽之內(nèi)即可,
記得把里面的url換成自己的!
底部Powered by的版權(quán)修改
用Next主題搭建起來的博客,在底部會有這樣的Powered by版權(quán)聲明:
修改方法
首先,找到\themes\next\layout\_partials\下面的footer.swig文件,打開:
圖中每個框都是一個模塊,隨便你想修改還是刪除,都可以,
除了這里,還有\(zhòng)themes\next\languages\這個文件夾中,根據(jù)你的語言選擇對應(yīng)文件,我是中文zh-Hans.yml,可以看到如下圖:
上文中的footer.theme等等就是調(diào)用這里的值,要修改或者刪除,就看你心情了。
▼修改后的樣式
綁定自己的域名
域名解析
如果你選擇的是萬網(wǎng)注冊的域名,可以使用其自帶的域名解析服務(wù)。
也可以選擇免費的DNSPod。
打開blog文件夾下的source文件夾,新建CNAME文件,內(nèi)容填寫自己的域名,
CNAME文件設(shè)置的目的是,通過訪問yourname.github.io可以跳轉(zhuǎn)到你所注冊的域名上。
Coding是直接在項目主頁設(shè)置的,Github是在里面加CNAME文件。然后去dns服務(wù)提供商哪里添加CNAME。
搭建完成的博客示例
博客地址:GTianYu' blog
廣告聲明:文內(nèi)含有的對外跳轉(zhuǎn)鏈接(包括不限于超鏈接、二維碼、口令等形式),用于傳遞更多信息,節(jié)省甄選時間,結(jié)果僅供參考,IT之家所有文章均包含本聲明。