本文首發于個人博客:Lam's Blog - 如何搭建一個擁有個人域名又帶點Geek味的獨立博客,文章由MarkDown語法編寫,可能不同平臺渲染效果不一,如果有存在排版錯誤圖片無法顯示等問題,煩請移至個人博客,后續更新也只會在個人博客修改,如果個人博客無法訪問可以留言告訴我,轉載請聲明個人博客出處,謝謝。
前言
最早開始寫個人博客是在14年的8月,那時候大三剛結束正在實習的階段,用的平臺是csdn,那時候csdn博客的排版還只能繁瑣地選擇標題一標題二標題三,斷斷續續寫了二十幾篇便棄坑了。
后來接觸了簡書、WordPress等平臺,在接觸了MarkDown之后便踏上了一條不歸路,如果在世上只能用一種方式排版,那我選擇MarkDown,還有現在csdn也支持mardown,可能兩年多前也支持只是我不知道?
但是作為一個愛折騰的程序員,什么事情都想自己來,更傾向于擁有完全可定制化的獨立博客,如果還有一個個人域名就更酷了,無疑是讓自己堅持更新博客的最大動力。
本篇文章將會從開始打算創建一個獨立博客開始到實現幾乎你想要的所有定制化功能為止,詳細地羅列出各個步驟。
如果你對默認配置滿意,只需幾個命令十幾分鐘便可以搭出一個個人博客;如果你喜歡折騰,那么幾小時到幾個月都可以讓你玩得盡興。
大致的步驟就是建議Github Pages上的個人主頁,然后再本地使用hexo進行博客的初始化構建,這樣就可以開始寫博客了,其他的如綁定自己的域名,定制化自己的更多需求則屬于錦上添花的事情。
Github Pages
首先你需要到Github上注冊一個賬號
之后創建一個倉庫,這里倉庫名字是有要求的,必須是你的用戶名.github.io
<center>{% qnimg 660127-c4c554b26669999f.jpg %}</center>
創建完倉庫之后,為了之后提交博客內容到Github,首先必須安裝Git,如果提交方式打算使用SSH的話還需要在本地創建一個SSH KEY并將其添加到Github上。
創建SSH KEY
如果你是使用Windows,在控制臺命令中找不到ssh-keygen之類相關的git命令時,要么聽過配置Path,要么就在上一步中安裝了git之后,在隨便一個地方右鍵,打開Git bash進行以下操作。
首先設置你Github的用戶名密碼:
<pre><code>
git config --global user.email "linbinghe@gmail.com"
git config --global user.name "linbinghe"
</code></pre>
生成密鑰:
<pre><code>
ssh-keygen -t rsa -C "linbinghe@gmail.com"
</code></pre>
輸入文件路徑:
<pre><code>
H:\hexo\blog>ssh-keygen -t rsa -C "linbinghe@gmail.com"
Generating public/private rsa key pair.
Enter file in which to save the key (//.ssh/id_rsa): H:\git\myssh\ssh
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in H:\git\myssh\ssh.
Your public key has been saved in H:\git\myssh\ssh.pub.
The key fingerprint is:
b0:0c:2e:67:33:ab:c1:50:10:40:0a:ba:c1:80:59:22 bu.ru@qq.com
</code></pre>
輸入文件路徑時如果出現錯誤,查看是否是盤符沒有大寫
上述命令若執行成功,會在H:\git\myssh目錄下生成兩個文件id_rsa和id_rsa.pub,最后兩步:
用文本編輯器打開生成的ssh.pub文件,拷貝其中的內容,將其添加到Github上的Add SSH Key里
Windows的話將id_rsa和id_rsa.pub拷貝至當前用戶目錄下的.ssh文件夾中,Linux則是~/.git中
如果上述操作出了問題并且確定SSH KEY是正確的,那么到.git/config中看下默認SSH KEY文件名是否是上述兩個
最后可以驗證一下:
<pre><code>
ssh -T git@github.com
</code></pre>
Hexo
Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁。
安裝
Hexo的搭建最佳教程永遠是官網的中文文檔,請跳轉到該頁面,花幾分鐘時間跟著文檔做完概述與建站后再重新回到這里。
回到這里后,首先闡述一個概念,在你創建的hexo根目錄下的config.yml配置文件屬于全局配置文件,之后的NEXT等主題下的config.yml文件屬于主題配置文件。
同時所有hexo的相關命令需要到你所創建的hexo根目錄下才能生效。
配置與Github Pages關聯
官方的文檔里并沒講解如何配置與Github pages進行關聯,而我們需要關聯之后才能讓hexo自動把我們的博客解析為靜態網頁后上傳到Github上顯示。
配置方法就是打開你的全局配置文件,然后找到deploy的位置,添加你自己的Github Pages相關聯的信息
<pre><code>
deploy:
type: git
repo: https://github.com/linbinghe/linbinghe.github.io.git
branch: master
</code></pre>
"Hello World"
<pre><code>
hexo n "文章名"
</code></pre>
在命令行界面使用上述命令,可以在source/_posts中生成一篇md格式的文章,使用markdown語法進行編寫最終hexo會將其渲染為靜態網頁文件。
而當你每次寫完博客或者更改了一些其他的東西,想把變動發布到Github Pages時,可以先使用
<pre><code>
hexo s -p 5000
</code></pre>
在指定如5000端口打開一個本地服務器,通過訪問localhost:5000來查看自己博客的渲染效果,如果不加-p參數,默認是4000端口
當確認要上傳之后,可以使用
<pre><code>
hexo clean
hexo g
hexo d
</code></pre>
首先會清空本地的一些public等資源,之后構建靜態文件,最后發布到Github上,最后兩條命令可以合并為
<pre><code>
hexo d -g
</code></pre>
至此,如果你只想要有一個最簡單的具有hexo原始主題的獨立博客,所要求的功能就是寫文章而已,那么到這一步你就已經完成了,發布后訪問以下你的github pages網站,你就會看到你自己的博客啦。
余下內容有興趣的可以按照目錄列表直接找到對應的地方
Hexo主題
相信大多數的人第一眼看到自己用Hexo搭建的博客時肯定是不滿意的,因為默認主題真的有點丑。
但慶幸的是,現在Hexo的主題隨便一搜都一堆,筆者使用的博客主題是國人寫的NEXT。
我一向建議有官方文檔的,就直接去看官方文檔的,按照步驟一步步做下來一般都不會有問題,至少我沒發現有什么坑出現過,不過我會在總結部分給出幾個小提醒,這些需要你在看完官方的文檔后再來看才有意義。
官方文檔的開始使用和第三方服務都可以全看一下,把自己想要的都加上去,也順便了解一下hexo與next的基本操作方法。
編輯文章
關于編輯器我使用的是最簡單的記事本或者notepad++,感覺沒必要使用markdown的編輯器,如果剛開始接觸markdown,可以直接找個網頁版的編輯器寫看看,要注意hexo使用的md渲染器標簽后面幾乎都是要帶空格的,簡書就不需要在#標題標簽后帶空格
關于編寫文章分類、標簽等內容:
<pre><code>
title: postName #文章頁面上的顯示名稱,可以任意修改,不會出現在URL中
date: 2013-12-02 15:30:16 #文章生成時間,一般不改,當然也可以任意修改
categories: #文章分類目錄,可以為空,注意:后面有個空格
tags: #文章標簽,可空,多標簽請用格式[tag1,tag2,tag3],注意:后面有個空格
description: #這里是文章描述,在這里寫了內容,則會首頁該文章只顯示這部分內容作為摘要,如果你想自定義摘要位置,那么這里就不要寫,使用
這里開始使用markdown格式輸入你的正文。
</code></pre>
創建文章后的固定模板位于scaffolds目錄下,你可以使用默認的post.md,也可以自定義一個模板,在創建文件下使用
<pre><code>
hexo new 模板名 "文章名"
</code></pre>
hexo默認會處理全部markdown和html文件,如果不想讓hexo處理你的文件,可以在文件頭中加入layout: false。
hexo中所有文件的編碼格式均必須是UTF-8。
命令
常用命令:
<pre><code>
hexo new "postName" #新建文章
hexo new page "pageName" #新建頁面
hexo generate #生成靜態頁面至public目錄
hexo server #開啟預覽訪問端口(默認端口4000,'ctrl + c'關閉server)
hexo deploy #將.deploy目錄部署到GitHub
npm install <plugin-name> --save #安裝插件
npm update #升級插件
npm uninstall <plugin-name> #卸載插件
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
</code></pre>
Hexo目錄結構
<pre><code>
.
├── .deploy
├── public
├── scaffolds
├── scripts
├── source
| ├── _drafts
| └── _posts
├── themes
├── _config.yml
└── package.json
</code></pre>
- .deploy:執行hexo deploy命令部署到GitHub上的內容目錄
- public:執行hexo generate命令,輸出的靜態網頁內容目錄
- scaffolds:layout模板文件目錄,其中的md文件可以添加編輯
- scripts:擴展腳本目錄,這里可以自定義一些javascript腳本
- source:文章源碼目錄,該目錄下的markdown和html文件均會被hexo處理。該頁面對應repo的根目錄,404文件、favicon.ico文件,CNAME文件等都應該放這里,該目錄下可新建頁面目錄。
- _drafts:草稿文章
- _posts:發布文章
- themes:主題文件目錄
- _config.yml:全局配置文件,大多數的設置都在這里
- package.json:應用程序數據,指明hexo的版本等信息,類似于一般軟件中的關于按鈕
至于_config.yml由于內容較多,而且大多數普通用戶都不需要涉及或者只需要按照第三方服務的教程設置即可,所以暫不做詳細介紹。
有興趣的可以看這篇文章:Hexo系列教程之三:next主題的配置和優化
個人域名
域名推薦到GoDaddy上面購買,國內的服務商大家都懂的,至于購買年限,個人建議一年一年續費就好了,狗爹不定期有優惠,沒必要一下子買那么多年。
最后建議大家申請.com或.me域名。據說.info因垃圾網站太多,被搜索引擎懲罰,而且續費較貴。
CNAME
購買域名后如果想要綁定到Github Pages上,則需要在source目錄下創建一個名為CNAME的文件(無后綴名),使用記事本等工具打開該文件,在里面填入自己申請的域名,然后在使用命令發布到Github上即可。
DNSPOD
如果只做了上述的操作,你還需要將你域名更換一個更強大的域名解析平臺,這里墻裂推薦DNSPOD,速度快,至少對我來說足夠了,而且可以針對多種網絡服務商提供不同的跳轉,這在后面把博客同時架設到國內的GitCafe上非常有幫助。
而將博客同時架設到GitCafe上是為了在百度能搜索到或者國內用戶能訪問到自己的網站,由于百度自己作妖,所以Github屏蔽了百度的爬蟲,你的文章在百度搜索上,甚至你直接搜索自己的域名都搜索不到。
首先你要到GoDaddy網站上,選擇管理自己的域名,然后設置自己域名的DNS為
<pre><code>
f1g1ns1.dnspod.net
f1g1ns2.dnspod.net
</code></pre>
然后到DNSPOD上注冊賬號登陸,添加自己的域名,最后按照提示添加記錄,要點如下
- 主機記錄按照自己需要選擇
- 記錄類型選擇CNAME
- 線路根據自己需要選擇,必須配置默認
- Githua Pages的記錄值是linbinghe.github.io,前面替換為自己的用戶名
DNS地址更換,特別是初次購買域名建站后,需要等待一段時間才能生效,但是一般當天就可以了。
FancyBox
試試在你的文章頭部添加photos項,然后看看你頁面的變化
<pre><code>
title: xxxxx
date: 2085-01-16 07:33:44
tags: [hexo]
photos:
- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg
-
http://bruce.u.qiniudn.com/2013/11/27/reading/photos-1.jpg
</code></pre>
關于頁面
執行new page命令
<pre><code>
hexo new page "about"
</code></pre>
在source目錄下會生成about目錄,里面有個index.md,直接編輯就可以了,然后在主題配置文件中中將其配置上即可。
留言板頁面
執行new page命令
<pre><code>
hexo new page "guestbook"
</code></pre>
在source目錄下會生成guestbook目錄,里面有個index.md,直接編輯就可以了,然后在主題配置文件中中將其配置上即可。
標簽頁面
執行new page命令
<pre><code>
hexo new page "tags"
</code></pre>
在source目錄下會生成tags目錄,里面有個index.md,直接編輯就可以了,然后在主題配置文件中中將其配置上即可。
分類頁面
執行new page命令
<pre><code>
hexo new page "categories"
</code></pre>
在source目錄下會生成categories目錄,里面有個index.md,直接編輯就可以了,然后在主題配置文件中中將其配置上即可。
404頁面
GitHub Pages 自定義404頁面非常容易,直接在根目錄下創建自己的404.html就可以。但是自定義404頁面僅對綁定頂級域名的項目才起作用,GitHub默認分配的二級域名是不起作用的,使用hexo server在本機調試也是不起作用的。
看下我的404頁面:linbinghe.com上不存在的頁面,做點有意義的事情。
目前公益404接入有多個平臺,我選的是騰訊404,在404.html文件中添加騰訊公益404中說明的內容即可。
永久鏈接
也許你會數次更改文章題目或者變更文章發布時間,在默認設置下,文章鏈接都會改變,不利于搜索引擎收錄,也不利于分享。唯一永久鏈接才是更好的選擇。安裝此插件后,不要在 hexo s 模式下更改文章文件名,否則文章將成空白。
首先還是安裝插件:
<pre><code>
npm install hexo-abbrlink --save
</code></pre>
在全局配置文件中,查找代碼permalink,將其更改為如以下格式:
<pre><code>
permalink: :year/:abbrlink.html
</code></pre>
abbrlink是該插件生成的永久唯一標識,因為一般年份也不會去改動,所以我這里添加上了年份,重點在于這串值最后生成的結果應該是不會再因為其他因素而改變的。
在站點配置文件中添加如下代碼:
<pre><code>
abbrlink config
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 進制:dec(default) and hex
</code></pre>
可參照樣例以選擇:
<pre><code>
crc16 & hex
https://post.zz173.com/posts/66c8.html
crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html
crc32 & dec
https://post.zz173.com/posts/1690090958.html
</code></pre>
版權信息
我們通過修改博客模板(themes)就可以方便地實現。但是通過修改模板的方式產生的版權信息還是相對獨立的,不是文章正文的一部分。這段版權信息存在的主要意義就是防止自動化的工具批量轉載博客文章,或許“防止”一詞并不恰當,但我們之所以要將版權聲明放在正文里,就是希望這些自動化的抓取工具抓取文章時能將版權信息一并抓去。
同時,我們還希望在版權信息中給出這篇文章的永久鏈接,這樣在文章被抓取之后,還會有一個鏈接指向原文,這樣不但可以作為原文被轉載的明確證據,同時可以提高原文在搜索引擎中的PageRank。
Hexo博客系統具有良好的可擴展性,我們可以編寫一個插件,來實現自動化地為每一篇文章追加版權信息。
我們只要在hexo根目錄下創建scripts目錄,在里面添加一個addtail.js,內容如下
<pre><code>
// Add a tail to every post from tail.md
// Great for adding copyright info
var fs = require('fs');
hexo.extend.filter.register('before_post_render', function(data){
if(data.copyright == false) return data;
var file_content = fs.readFileSync('tail.md');
if(file_content && data.content.length > 50)
{
data.content += file_content;
var permalink = '\n本文永久鏈接:' + data.permalink;
data.content += permalink;
}
return data;
});
</code></pre>
接下來你就可以在hexo根目錄下創建一個tail.md的文件,內容所寫的內容,就是你自己定制的版權信息內容。
如果你有哪個界面不想加上版權信息,比如404界面,那么可以在該界面文件的開頭添加:
<pre><code>
copyright: false
</code></pre>
有心的同學可以將這個開頭與上面的tail.md文件做下對比,看下為什么這樣配置就可以,這也是hexo頁面自定義配置中通用的一種。
多環境撰文
hexo與github pages共同搭建博客有一個麻煩的地方就在于多環境下要同步本地的博客內容很麻煩,唯一的方法就是你用要么一個硬盤云盤之類的要么就是用github之類的,每次有更新你就同時把本地的博客文件都同步上去,毫無疑問這非常麻煩。
之前想要自己寫一個自動化工具來做這個事情,這幾天發現有人已經寫好了,可以直接用,這里直接貼出鏈接,里面也有詳細的說明,按照步驟來做就好了。
hexo-git-backup
統計
頁面上顯示訪問次數可以使用 不蒜子,兩行代碼即可搞定。
因Google Analytics偶爾被墻,故用百度統計http://ibruce.info/2013/11/22/hexo-your-blog/
圖床
考慮到博客的速度,同時也為了便于博客的遷移,圖床是必須的。我墻裂推薦七牛,訪問速度極快,支持日志、防盜鏈和水印。
免費用戶有每月10GB流量+總空間10GB+PUT/DELETE 10萬次請求+GET 100萬次請求,這對個人博客來說足夠,如果不夠的話可以考慮通過邀請好友或者花點小錢來解決。
這里就不介紹七牛的注冊什么的,非常簡單自己花幾分鐘就可以解決了,這里只介紹一個七牛的自動同步插件,試想一下如果我們每張圖片都要自己上傳然后找到鏈接最后再一張張貼到文章里是不是太繁瑣了。
這個插件可以讓你把圖片放到本地,用一行命令就可以自動同步圖片到七牛云端,在文章中只要使用固定格式就可以簡單地鏈入圖片而不需要完整的url地址。
這個插件就是hexo-qiniu-sync,跳轉進去后里面也有完整的中文文檔,詳細地介紹了如何使用以及注意事項,這里就不重復貼一遍了。
SEO
當我們搭建一個網站之后,如果沒有做一些相關的搜索引擎優化SEO,那么我們的網站是很難獲取來自搜索引擎的流量的,用戶很難在搜索引擎上搜索到我們網站的內容,所以在這里我們要為Hexo網站做一些簡單的搜索優化。
上周剛搭建好博客的時候只有谷歌能搜索到自己的博客,百度直接搜域名都沒有任何信息,主要原因是因為Github Pages屏蔽了百度爬蟲,百度根據沒辦法知道我們博客的內容,所以我將博客同步到兩個平臺上,一個Github,一個國內的Gitcafe,目前搜索自己博客的相關信息基本都在第一條。
SiteMap
首先安裝hexo的sitemap網站地圖生成插件:
<pre><code>
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
</code></pre>
在你的hexo站點的_config.yml添加下面的代碼:
<pre><code>
hexo sitemap網站地圖
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml
</code></pre>
配置成功后,hexo編譯時會在hexo站點根目錄生成sitemap.xml和baidusitemap.xml
其中sitemap.xml適合提交給谷歌搜素引擎,baidusitemap.xml適合提交百度搜索引擎。
蜘蛛協議robots.txt
在source目錄下創建robots.txt文件,添加下面的一段代碼:
<pre><code>
Sitemap: http://www.linbinghe.com/sitemap.xml
Sitemap: http://www.linbinghe.com/baidusitemap.xml
</code></pre>
請自行改成自己的網站。
完整robots.txt文件內容:
<pre><code>
hexo robots.txt
User-agent: *
Allow: /
Allow: /archives/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Sitemap: http://www.arao.me/sitemap.xml
Sitemap: http://www.arao.me/baidusitemap.xml
</code></pre>
谷歌Search Console與百度站長工具
這兩個平臺都是便于管理自己的網站,查看爬蟲爬去頻率等等,這兩個的使用都不難,但是兩者都需要通過驗證,只要搜索這兩個平臺,到各自官網添加域名,按照文檔說明通過驗證即可。
谷歌可以通過提交站點地圖提交我們的sitemap.xml,百度目前已經禁止了。
NoFollow
nofollow標簽是由谷歌領頭創新的一個“反垃圾鏈接”的標簽,并被百度、yahoo等各大搜索引擎廣泛支持,引用nofollow標簽的目的是:用于指示搜索引擎不要追蹤(即抓取)網頁上的帶有nofollow屬性的任何出站鏈接,以減少垃圾鏈接的分散網站權重。
網上有很多資料,都是通過更改themes/next/layout/_partials目錄下的footer.swig等文件,把hexo.io鏈接設置為非友鏈,但是大多數資料都已經過期了,至少我發現不是每一句我這邊都能找到,這里推薦一個簡單的方式,直接通過插件來解決。
<pre><code>
npm install hexo-autonofollow --save
</code></pre>
在站點配置文件中添加以下代碼:
<pre><code>
nofollow:
enable: true
exclude: # 例外的鏈接,可將友情鏈接放置此處
- exclude1.com
- exclude2.com
</code></pre>
首頁標題
更改index.swig文件,文件路徑是your-hexo-site\themes\next\layout,將下面代碼
<pre><code>
{% block title %} {{ config.title }} {% endblock %}
</code></pre>
改成
<pre><code>
{{% block title %} {{ config.title }} - {{ theme.description }} {% endblock %}}
</code></pre>
這時候你的首頁標題會更符合網站名稱 - 網站描述這習慣。
主動推送新鏈接
解決百度爬蟲被禁止訪問的問題,提升網站收錄質量和速度。
<pre><code>
npm install hexo-baidu-url-submit --save
</code></pre>
在 站點配置文件 中添加如下代碼:
<pre><code>
baidu_url_submit:
count: 5 ## 比如3,代表提交最新的三個鏈接
host: blog.tangxiaozhu.com ## 在百度站長平臺中注冊的域名
token: ## 請注意這是您的秘鑰, 請不要發布在公眾倉庫里!
path: baidu_urls.txt ## 文本文檔的地址, 新鏈接會保存在此文本文檔里
</code></pre>
為了主動推送鏈接,你還得在全局配置文件的deploy中添加配置:
<pre><code>
deploy:
- type: baidu_url_submitter
</code></pre>
GitCafe(解決百度爬蟲被屏蔽的問題)
如果你對于國內是否能訪問到或者搜索到你的博客不在意,那么你完全可以跳過這一步。
因為Github Pages屏蔽了百度爬蟲的原因,所以在百度搜索引擎上你是搜不到自己博客的信息的,GitCafe不是唯一解決方案,但是我不想自己搭一個vps,所以在這種情況下,使用DNSPOD針對不同請求跳轉不同平臺是唯一的解決方法。
而且因為Gihub在國內訪問也時好時壞的,所以讓國內用戶訪問GitCafe也可以速度快一點,但是其實GitCafe的服務器也很坑爹,時不時就給你崩一下,不過自己暫時不想搭vps,就將就先用一下。
我這里只提供給大家一個解決方案,具體GitCafe Pages怎么操作,我這里就不做介紹,畢竟國內的平臺,教程什么的非常齊全又易懂,這里講一下當你搭好一個GitCafe之后,怎么與hexo以及dnspod結合起來。
首先在hexo的全局配置文件的deploy中添加Gitcafe的配置:
<pre><code>
deploy:
- type: git
repo: git@github.com:LinBinghe/linbinghe.github.io.git
branch: master - type: git
repo: https://git.coding.net/linbinghe/blog.git
branch: master
</code></pre>
這里gitcafe我使用的是https的方式,第一次提交時會讓你自己輸入用戶名和密碼。
接下來,在DNSPOD中,添加記錄,將國內用戶的請求轉向pages.coding.me,這里非常坑,網上很多攻略都過時了,教程里面都是寫gitcafe.io,其實gitcafe已經被coding收購了,這個地址早就失效了
我目前的配置如下,因為在家發現電信網絡訪問博客也時好時壞的,干脆把電信網絡也單獨拎出來:
<center>{% qnimg 3900981-5b21705fasasdfaaefebd.png %}</center>
RSS
RSS就是我博客右邊邊欄站點概覽中顯示RSS文字的東西。RSS(Really Simple Syndication)是一種描述和同步網站內容的格式,是使用最廣泛的XML應用發布一個RSS文件。
這個RSS Feed中包含的信息就能直接被其他站點調用,而且由于這些數據都是標準的XML格式,所以也能在其他的終端和服務中使用,是一種描述和同步網站內容的格式。
可以通過以下命令進行安裝
<pre><code>
npm install hexo-generator-feed --save
</code></pre>
安裝完成后,在全局配置文件中添加相應配置:
<pre><code>
Extensions
Plugins: http://hexo.io/plugins/
RSS訂閱
plugin:
- hexo-generator-feed
Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
</code></pre>
其中,feed是可選項,可配可不配。
最后,在你的主題配置文件中,添加RSS訂閱鏈接即可。
<pre><code>
rss: /atom.xml
</code></pre>
音樂播放器
目前博客還沒有添加,先寫在這里,后續有空補上了再寫。
急著加上的可以先看這篇文章:玩轉hexo博客之next
打賞功能
目前也沒有添加上,后續估計也不會添加,有興趣的可以看這篇文章:為Hexo博客添加版權說明和打賞功能
自定義掛件
這個我自己沒有嘗試過,但是有在hexo你的博客中有看到,可以添加新浪微博小掛件等,具體的方法就是在主題目錄下的layout/_widget/下,添加對應掛件的ejs文件,然后配置主題配置文件即可。
最近訪客
這個其實是多說評論的一個拓展功能,我的博客沒有加上去,有興趣的可以看這篇文章:動動手指,給你的Hexo站點添加最近訪客(多說篇)
其他
這里只介紹Next主題官方文檔等前文提到的文檔中沒有的內容或者一些要點
目錄默認全展開
~/themes/next/source/css/_custom/custom.styl 中添加以下代碼:
<pre><code>
.post-toc .nav .nav-child { display: block; }
</code></pre>
修改鏈接文字樣式
將鏈接文本設置為藍色,鼠標劃過時文字顏色加深,并顯示下劃線。
themes\next\source\css_common\components\post\post.styl 添加以下代碼:
<pre><code>
.post-body p a{
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}
</code></pre>
選擇 .post-body 是為了不影響標題,選擇 p 是為了不影響首頁“閱讀全文”的顯示樣式。
修改授權協議圖標
在主題配置文件下找到creative_commons,該key對應的值就是授權協議的圖片
小提醒
- 菜單icon的對應名稱可以到Font Awesome網站上去查找對應的,具體網站是Font Awesome Icon
- 如果你想要使用網站副標題,也就是筆者博客的Knowledge as Action,則要在全局配置文件中的description后面設置
- 配置文件缺少空格會報錯
- Algolia 搜索服務需要你每次發表新文章或者更改內容后使用hexo algolia命令進行index的更新
- 如果有的頁面不想添加評論功能,那么如果你使用的是next主題,就可以在根目錄/themes/next/layout/page.siwg下修改page.siwg這個文件,在categories相關的配置內容里面加上about的判斷。
- 如需取消某個頁面的評論,編輯該頁面,按照md文件開頭配置title等的方式,增加comments: false
總結
Hexo + Github Pages的方式來搭建博客非常簡便,而且有大量可以供你自己定制的插件,也可以自己寫html、css等來改變網站樣式。
如果你有其他方面想定制的功能本文沒有涉及的,可以先到我參考的文章以及那些官方文檔中看看是否有,大多數功能其實都已經包含在里面了。
這個博客使用到現在,唯一不舒服的地方就是當需要多個環境下編寫文章時就很不方便,你得有一個方法來把你的博客目錄搬移到當前的環境下,而且還得先初始化hexo與git的環境。
目前是用oschina來放置我自己的博客所有文件,因為也就在家里和公司寫文章,所以還好,但是后續應該會寫一個腳步來做這個自動同步的事情,畢竟程序員還是懶一點比較好。
最近找到一個插件可以用來自動同步整個博客文件的,已經在上述的多環境撰文章節中說明了,現在唯一麻煩的地方就是換一臺機子就需要初始化很多環境,之后還是會考慮用python寫一個腳本來自動初始化換機或者重裝系統后的環境初始化。
而且現在網站的SEO其實做的也不好,所以后續有時間也會持續做這塊的內容,然后做個總結,畢竟也是一個值得學習的點。
參考
hexo你的博客
我的博客是如何搭建的(github pages + HEXO + 域名綁定)
玩轉hexo博客之next
Hexo—正確添加RSS訂閱
動動手指,不限于NexT主題的Hexo優化(SEO篇)
動動手指,NexT主題與Hexo更搭哦(基礎篇)
為Hexo博客的每一篇文章自動追加版權信息
使用 Hexo 搭建博客的深度優化與定制