title: 搭建個人博客
date: 2019-11-13 16:36:37
對于常年需要學習新東西的人們，經(jīng)常想把學過的一些東西整理一下。于是寫博客就成了很多人整理自己學習過的東西的很好的方式综液。有人選擇在一些成熟的平臺上管理自己的博客，比如知乎支示，CSDN悔耘，簡書這些平臺。不過在別人的平臺上寫東西很容易受到各種限制蔗崎，內(nèi)容也有各種各樣的要求酵幕。哪有比自己搭一個私人博客網(wǎng)站更炫酷（裝*）的呢！；嚎痢７既觥邓深！
哈哈，let's go.
一.效果展示
經(jīng)過特別簡單的配置（大概幾個小時）笔刹，一個屬于個人的博客網(wǎng)站就搭好了芥备，可以開始更新自己的內(nèi)容了，畢竟內(nèi)容才是最重要的啊舌菜。
效果如下：
二.前期準備
經(jīng)過總結前人的經(jīng)驗萌壳，我把搭建一個個人的博客分為大概三種可行的方案：
第一種方案：搭建一個通過Github pages訪問的博客網(wǎng)站。但是這樣的話只能通過訪問 http://github用戶名.github.io的方式訪問自己的博客網(wǎng)站日月，畢竟不夠炫酷袱瓮，但是是免費的。于是有了第二種方案爱咬。
第二種方案：把 http://github用戶名.github.io綁定到自己的域名尺借，購買一個域名需要一定的費用。
第三種方案：把博客系統(tǒng)放到自己購買服務器上精拟，這樣能通過服務器的IP地址訪問博客網(wǎng)站燎斩，綁定域名后可以通過域名來訪問。這是最炫酷的方式蜂绎，當然也是pay最多的瘫里，而且網(wǎng)站還需要經(jīng)過備案。
由于自己熱愛open sourse（其實是沒錢）荡碾，于是我選擇了第一種的方案谨读。希望后面有錢了可以實現(xiàn)第三種方案。哈哈坛吁。
2.1 選擇一個博客框架
為了避免重復造輪子劳殖，也為了簡單和高效起見，我們需要選擇一個已有的博客框架拨脉，再在這些框架的基礎上搭建哆姻。有很多還不錯的開源博客框架可以選擇。簡單列舉幾個：
- Jekyll
- hugo
- django
- hexo
經(jīng)過比較玫膀，發(fā)現(xiàn)hexo框架還不錯矛缨，有比較好的擴展性和很大的用戶基礎。于是Tom就選了hexo作為博客的框架帖旨。想選擇其他框架的請參照具體官網(wǎng)文檔,和他們的GitHub issues箕昭。
2.2 hexo框架的簡介
Hexo 特點
- 支持Markdown: 支持Markdown意味著你可以把經(jīng)歷從排版中解放出來
- 輕量: 無需擁有后臺及數(shù)據(jù)庫,專心寫好你的文章
- 一鍵部署: 可以通過Git或者ftp來將生成的靜態(tài)頁面部署到服務器或者主機空間中
- 插件豐富: 豐富的插件可以滿足你的各種需求
其他特性，請參考官方文檔.
2.3 配置必要的環(huán)境
搭建前期需要四個工具
- Hexo:Hexo快速解阅、簡潔且高效的博客框架
- Node.js:建立在Chrome上的JavaScript運行引擎
- Git:一款免費落竹、開源的分布式版本控制系統(tǒng)
- GitHub:國內(nèi)一款面向開發(fā)者的云端開發(fā)平臺，提供代碼托管货抄，運行空間述召，質(zhì)量控制朱转，項目管理等功能
安裝
安裝必要的配置環(huán)境，如果已經(jīng)安裝過积暖，可以跳過藤为。
2.3.1 安裝Git Git官網(wǎng)
找到Download,安裝自己對應的系統(tǒng)版本，系統(tǒng)會自動判定你當前版本夺刑，推薦下載缅疟，如果沒有推薦，那就自己選擇吧性誉。
安裝完后窿吩，用win+R打開cmd界面茎杂，輸入
$git --version
出現(xiàn)git的版本信息說明安裝成功错览。
然后熟悉一下Git管理Github項目的常用命令，理解一下他們的關系,感受一下git版本和分支管理的強大之處煌往。
2.3.2 安裝Node.js Node.js下載地址
安裝node.js記得選擇add to path選項倾哺，或者手動配置環(huán)境變量。把node所在的bin目錄加入環(huán)境變量刽脖。用win+R打開cmd界面羞海，輸入
$node
出現(xiàn)node.js的版本信息說明安裝成功。
同理系統(tǒng)依然會判定你的系統(tǒng)并給出穩(wěn)定推薦的版本和嘗鮮版曲管，兩種却邓，供君選擇。下載安裝步驟同樣省略院水。
2.3.3 GitHub賬號注冊
GitHub賬號注冊過程很簡單腊徙，注冊流程就省略，完成之后檬某，就開始創(chuàng)建博客了撬腾。注冊完成后，創(chuàng)建名字為 username.github.io 的倉庫,username是你的github用戶名恢恼。記住一定是這個名字的倉庫民傻，不然會出問題的。
2.3.4 安裝Hexo
前面的所有工具安裝完成后场斑，在git bash或者cmd界面中使用npm安裝hexo漓踢。
$npm install -g hexo-cli
進階安裝和使用,對于熟悉 npm 的進階用戶，可以僅局部安裝 hexo 包漏隐。
$npm install hexo
安裝 Hexo 完成后彭雾，請執(zhí)行下列命令查看安裝hexo的版本信息。
$hexo version
然后運行以下命令锁保，Hexo 將會在指定文件夾中新建所需要的文件薯酝。這個指定的文件夾就是保存你的博客站點所有文件的地方半沽。
$hexo init <folder>
$cd <folder>
$npm install
站點文件包含以下的文件
.
├── _config.yml //網(wǎng)站的配置文件
├── package.json //應用程序的信息
├── scaffolds //模版 文件夾。當您新建文章時吴菠，Hexo 會根據(jù) scaffold 來建立文件者填。
├── source //資源文件夾是存放用戶資源的地方。除 _posts 文件夾之外做葵，開頭命名為 _ (下劃線)的文件 / 文件夾和隱藏的文件將會被忽略占哟。Markdown 和 HTML 文件會被解析并放到 public 文件夾，而其他文件會被拷貝過去酿矢。
| ├── _drafts
| └── _posts
└── themes //主題 文件夾榨乎。Hexo 會根據(jù)主題來生成靜態(tài)頁面。
安裝git,hexo蜜暑，node.js后，熟悉相關命令策肝。不同系統(tǒng)環(huán)境下安裝遇到的問題請參考官方文檔,官方文檔支持中英文肛捍，很方便。
三.hexo框架搭建博客
3.1 建立hexo項目之众，本地localhost:port訪問
在上一步生成了站點文件夾后拙毫，其中會有一個默認主題以及一個hello-word的默認文章。所以我們可以先生成博客來看一下效果棺禾，在站點所在目錄打開git bash運行命令：
$hexo generate //可以簡寫成$hexo g
然后hexo會開始生成博客缀蹄，生成結束后，文件夾下會多出一個public的文件夾膘婶，這個文件夾就是hexo生成的一個完整的靜態(tài)網(wǎng)站缺前，也就是我們的博客。網(wǎng)站生成好了竣付，我們要瀏覽它诡延，所以要開啟一下hexo自帶的服務器，運行命令：
$hexo server //可以簡寫成$hexo s
這時候古胆，打開瀏覽器肆良，輸入localhost：4000即可訪問博客網(wǎng)站。
如果出現(xiàn)端口沖突逸绎，可以使用如下的命令指定其他端口惹恃。再使用localhost：port去訪問。
$hexo server -p port //可以簡寫成$hexo g -p port
3.2 遠程部署棺牧，綁定SSH,域名訪問
遠程部署指的是巫糙，博客在我們本地生成好了以后部署到遠程倉庫去，如果遠程倉庫支持pages服務的話颊乘，那就可以通過這樣的方法發(fā)布和更新博客参淹。
要使用遠程部署需要先安裝hexo-deployer-git醉锄，注意，這是適用于git類型倉庫的方法浙值，其他倉庫的方法在官網(wǎng)中有說明恳不。
運行命令
$npm install hexo-deployer-git --save //安裝hexo-deployer-git package
安裝好hexo-deployer-git后，修改博客目錄配置文件_config.yml中的deploy字段开呐，用記事本打開就可以：
deploy:
type: git //pages 部署倉庫類型
repo: //git倉庫項目地址烟勋，你建立的 用戶名.github.io倉庫
branch: //分支，默認是master
message: //自定義提交說明筐付，這個字段可以沒有卵惦，用于描述你的提交
再運行
$hexo deploy
打開github的repo,發(fā)現(xiàn)你的倉庫里已經(jīng)有了文件，這是生成的博客網(wǎng)站的靜態(tài)文件瓦戚。也就是本地博客文件夾中的public 或者.deploy_git中的內(nèi)容沮尿。hexo生成了你的博客網(wǎng)站的靜態(tài)文件。在瀏覽器地址欄輸入http://username.github.io就可以訪問你的個人博客網(wǎng)站了伤极。很炫酷吧蛹找。
參考的一些資料
https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html
https://blog.csdn.net/gsl9d1p04f6x2ts3c9/article/details/81024330
https://blog.csdn.net/dazhaoDai/article/details/73730069
http://www.reibang.com/p/343934573342
綁定SSH
Git使用https協(xié)議姨伤，每次pull, push都要輸入密碼哨坪，相當?shù)臒Ｊ褂胓it協(xié)議乍楚，然后使用ssh密鑰当编。這樣可以省去每次都輸密碼。為了方便你的博客的提交徒溪，你可以進行git與repo倉庫的SSH綁定忿偷。
SSH綁定git倉庫的特點：
- ssh方式單獨使用非對稱的秘鑰進行認證和加密傳輸，和賬號密碼分離開來臊泌，不需要賬號也可以訪問repo鲤桥。
- 生成和管理秘鑰有點繁瑣，需要管理員添加成員的public key渠概。不能進行匿名訪問茶凳，ssh不利于對權限進行細分，用戶必須具有通過SSH協(xié)議訪問你主機的權限播揪，才能進行下一步操作贮喧，比較適合內(nèi)部項目。
四.更換主題
4.1 給你的博客選擇一個主題
經(jīng)過以上的配置箱沦，你的博客網(wǎng)站已經(jīng)跑起來了。不過是不是有點丑呢雇庙？看來需要進一步的美化我們的網(wǎng)站啊谓形。當然Hexo,也大力支持我們的想法灶伊，Hexo提供了很多漂亮的主題供我們選擇。Hexo主題寒跳。是不是發(fā)現(xiàn)有很多主題讓你眼花繚亂了谁帕，如果不知道應該選哪一個，可以聽一聽來自前人的建議主題推薦1 主題推薦2冯袍。
4.2 更改相關配置
找到自己喜歡的主題匈挖，把對應的主題下載到本地站點文件夾下的themes文件夾下。Tom選擇了一個名為Butterfly的主題康愤。想要讓這個主題應用到我自己的站點上儡循。需要進行如下的操作。
下載主題
找到下載主題的Github repo地址征冷，在站點文件夾下右鍵打開git bash,輸入命令
$git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
如果想要安裝比較新的dev分支择膝，可以
$git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
應用主題
修改hexo配置文件_config.yml，把主題改為Butterfly
theme: Butterfly
對于不同的主題检激，可能還有其他的配置才能生效肴捉，參加你選擇主題的相關文檔說明，關于主題Butterfly配置叔收。
如果你沒有pug以及stylus的渲染器齿穗，請下載安裝：
$npm install hexo-renderer-pug hexo-renderer-stylus --save
或者
$yarn add hexo-renderer-pug hexo-renderer-stylus
然后再次generate ,depoly，訪問地址饺律，主題就更換好了窃页。
五.項目管理
5.1 寫博客，刪除博客
首先复濒，由于hexo是支持Markdown來編寫你的博客的脖卖，非常方便。markdown語法也是非常簡單的巧颈，類似于html,很快就能掌握畦木。在開始寫你的博客之前需要先掌握一下。
但是在實際使用時發(fā)現(xiàn)了一個問題砸泛。在不同的平臺對于markdown語法的支持不太一樣十籍，但是大多是東西是一樣的，對于博客在不同平臺間的遷移不太方便晾嘶。暫時沒有太好的解決辦法妓雾，等有比較好的解決方法時更新一下。hexo支持的markdown 語法和github的markdown語法是一樣的垒迂。然后最好是選擇一個對于hexo markdown語法支持得比較好的makedown編輯器械姻。
其他的markdown語法資料
https://segmentfault.com/markdown
http://www.reibang.com/p/8c1b2b39deb0
5.2 上傳更新博客
先在本地預覽一下寫好的博客，在站點文件夾下使用git bash運行
$hexo generate //hexo g
$hexo server //hexo s
檢查沒問題后，提交更新
$hexo deploy //hexo d
六.高級功能
6.1 評論管理
如何給我們的評論添加評論功能呢楷拳？
以Tom選擇的Butterfly主題為例绣夺，打開主題的配置文件夾_config.yml,注意不是站點的配置文件。搜索Comments,發(fā)現(xiàn)該主題支持如下的幾種評論系統(tǒng)
可以任選一種評論系統(tǒng)進行配置欢揖。大致流程為先注冊對應的評論系統(tǒng)陶耍，再進行一些配置。主題Butterfly相關配置參見主題butterfly相關文檔她混。
其他的配置方法烈钞。
6.2 綁定域名
是不是感覺使用githubusername.github.io訪問自己的博客還是不夠炫酷呢？于是可以給自己的網(wǎng)站綁定一個炫酷的域名坤按，也就是相當于給你的網(wǎng)站起了一個別名毯欣，本質(zhì)上都是通過DNS查找ip地址，然后通過IP地址訪問的你的網(wǎng)站的臭脓。
可以在CMD界面下通過命令來查看你博客的ip地址酗钞。
$ping username.github.io //ping 你的博客網(wǎng)址
首先注冊一個域名，在阿里云上注冊或者買一個域名来累。打開控制臺砚作，點擊解析域名，把你剛剛查到的ip地址填到剛剛解析的域名的記錄值上面嘹锁。然后在你的博客文件夾下面新建一個名為CNAME的文件葫录，在里面寫入你剛剛購買的域名。然后提交你的站點靜態(tài)文件到倉庫里兼耀。等待一段時間压昼，然后就可以通過剛剛購買的域名訪問你的網(wǎng)站了求冷。
6.3 部署站點到自己的服務器
如果你覺得上面的配置還不過炫酷瘤运，速度不夠快，畢竟github是國外的網(wǎng)站匠题，那么還有更厲害的拯坟，把網(wǎng)站放到自己的服務器上。
網(wǎng)站備案
首先韭山，需要進行網(wǎng)站備案郁季。根據(jù)工信部《互聯(lián)網(wǎng)信息服務管理辦法》(國務院 292 號令)，網(wǎng)站在未完成備案之前钱磅，不能指向大陸境內(nèi)服務器開通訪問梦裂。如果您的網(wǎng)站托管在中國大陸節(jié)點服務器，或者開通 CDN 服務盖淡，就必須申請 ICP(互聯(lián)網(wǎng)內(nèi)容提供商)備案年柠。若網(wǎng)站服務器為非中國大陸節(jié)點，則不用申請備案。
然后購買一個服務器该默，把你的域名綁定到你的服務器上诈泼。
在你的服務器上安裝Git并配置,安裝并搭建web容器蒲赂，如nginx,Tomcat等叹放。
然后服務器獲取站點靜態(tài)文件有兩種方式：
這樣就完成了最后的配置怜跑。
6.4 更換電腦或重裝系統(tǒng)后恢復hexo
當我們的系統(tǒng)崩潰或者是其他原因?qū)е耯exo不能用了沼沈，試試這個恢復单绑。
6.5 配置一鍵部署：
每次更新博客都需要進到博客站點下進行操作傲武，還有一堆的命令要輸入蓉驹。配置一鍵部署。
6.6 自定義
什么揪利？ 你覺得所有的主題都不符合你的要求戒幔。沒問題，hexo也支持你自己DIY主題土童，還可以發(fā)布給大家一起用诗茎。還支持自定義博客模板等功能。
6.7 博客遷移
你想把自己博客發(fā)布到不同的平臺上献汗，或者是從其他平臺上添加自己的博客敢订。沒問題，hexo也支持罢吃。試試博客遷移楚午。
6.8 搜索引擎收錄博客
當我們一開始建完博客時，搜索引擎是搜索不到的尿招，我們需要做一項工作就是通知搜索引擎收錄我們的網(wǎng)站矾柜。
七.出現(xiàn)的一些問題
git ssh配置Host key verification failed.
YAMLException: can not read a block mapping entry; a multiline key may not be an implicit key at line 5, column
bad indentation of a mapping entry at line 199, column 2:
hexo YAMLException: cannot read a block mapping entry; a multi line key may not be an implicit key a
gitalk 出現(xiàn)not found 等問題
深坑，申請gitalk賬號一般不會出問題就谜，一般問題出在配置_config.yml上怪蔑。注意repo是只寫倉庫名字，不是全部路徑啊丧荐。如username.github.io這樣缆瓣。
