我的个人博客搭建记录
- 6/13更新 綁定個人博客到域名 rebootcat.com
前言
本篇博客旨在備忘，并記錄了自己折騰了3,4天后順利搭建自己的個人博客過程中碰到的一部分問題。
搭建個人獨立博客有很多種方法，我暫時采用的是基于github Pages的免費博客，博客框架采用hexo靜態博客框架。采用此方案的原因，是因為基于github+hexo的博客很多，碰到了什么問題也有很多解決辦法。當對一個事情或事物不太熟悉的時候，盡量采用受眾比較多的，無關乎隨大流，無關乎跟風。這讓我想起了自己當時剛剛接觸linux的時候，完全陌生的情況下真是無法選擇到底以那個系統進行學習，所以當時采取的辦法是使用社區活躍度較高，用戶群比較多的系統，比如centos和ubuntu，最終我選擇了ubuntu，畢竟剛從windows轉過來，當然我現在使用的是centos，當然這是題外話了。
一點建議：
我不知道大家跟我是否一樣，當我新接觸一個事情或事物的時候，我不太習慣去看他的使用手冊或者官方文檔，而是去google,baidu別人的教程，我覺得這是一個很不好的習慣，以后盡量優先考慮官方手冊。對于搭建這個博客來說，就讓我深深的體會到了這樣的好處。關于hexo的官方手冊，關于next(下文會介紹)主題的官方手冊，仔細閱讀，如果不笨的話，是不需要再看別人的教程從而也能順利搭建自己的博客。
搭建準備
我的環境：win10 x64
要使用hexo，需要node.js和git.
Node.js下載安裝
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-L36LgUzV-1601037766072)(http://o8fj2jbwb.bkt.clouddn.com/nodejs.png)]
這里推薦大家采用安裝包.msi的方式，不要下載綠色版的.exe，不然后續設置的環境變量可能不對，還有提示npm找不到的問題。可以看到標題Current Version:v4.4…5(includes npm 2.15.5),故為了正確性起見，推薦大家采用.msi的方式，按照上面地址的安裝配置教程就可以順利安裝。
如果后面安裝hexo的時候出現npm找不到的話，也可以手動自己安裝npm。
Git安裝
注意：Git是一個版本控制系統，下載安裝Git會順帶把Git需要用到的shell環境也安裝了，當然你可以自己設置成windows Powershell，亦或是像我一樣，設置成bash.不要與github的客戶端搞混了，說來慚愧，我就搞混了。希望你不要搞混了
上面的地址可能需要翻墻，如果不能翻墻，自行解決。但我相信，你既然都能想到用獨立博客，那必然翻個墻不是什么難事。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-11GnuN1O-1601037766076)(http://o8fj2jbwb.bkt.clouddn.com/git.png)]
由于我工作中用的是svn，所以對git不太熟練，但是我覺得git是未來的趨勢，有必要學習使用。
Git教程
安裝hexo
hexo是什么？正如hexo.io上的標題所示：A fast, simple & powerful blog framework ，powered by node.js就足以介紹了。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-VjSGeSFH-1601037766084)(http://o8fj2jbwb.bkt.clouddn.com/hexoinstallll.png)]
安裝hexo也很簡單，打開git bash:
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-3XWFZdLD-1601037766087)(http://o8fj2jbwb.bkt.clouddn.com/gitbash.png)]
然后輸入命令：
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
輸完收工！！
需要注意的是blog可以是你自己的自定義blog目錄，比如我的是/g/blog
安裝完成后大概會是下圖的結果：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-0pz6ABFO-1601037766091)(http://o8fj2jbwb.bkt.clouddn.com/hexosuc.png)]
好了，hexo安裝好了，接下來就是使用了。這里強烈推薦大家看hexo的官方doc
后面將會用到的幾個常用命令：
$ hexo generate (hexo g) 生成靜態文件，會在當前目錄下生成一個新的叫做public的文件夾
$ hexo server (hexo s) 啟動本地web服務，用于博客的預覽
$ hexo deploy (hexo d) 部署博客到遠端服務器
$ hexo new "postName" #新建文章
$ hexo new page "pageName" #新建頁面
部署到github:
$ hexo d -g
部署到本地http://localhost:4000/:
$ hexo s -g
Github Pages
作為一個使用github的人來說，應該不用多介紹githubpages。具體可以看上面的鏈接。
創建新的倉庫
這里需要注意的一點是：在你的github里新建一個倉庫，倉庫名需是你的github用戶名，不然是不行的，所以后續你就可以通過http://username.github.io來訪問自己的博客。
配置SSH
查看原有的ssh key
$ cd ~/.ssh
$ ls -al ./*
如果出現" No such file" 則不用管，如果存在.ssh這個目錄那么可以先備份（不是必須，我就沒有），再刪除。
$ rm -rf ./*
生成新的ssh key
$ git config --global user.name "yourname"
$ git config --global user.email "youremail"
"yourname"可以隨意輸入，"youremail"一般就輸成你的github上的郵箱。
然后接著輸入：
$ ssh-keygen -t rsa -C "yourmail@gmail.com"
這個地方的郵箱必須是你github上的郵箱。一路回車，中間會出現一個設置密碼的詢問，可以忽略，如果設置，那么就記住。我選擇的是不要密碼，那么直接一路next. 之后會在~/.ssh/下生成兩個文件id_rsa 和 id_rsa.pub
$ cat ~/.ssh/id_rsa.pub
然后copy到github上添加秘鑰。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-O1HZMkpe-1601037766096)(http://o8fj2jbwb.bkt.clouddn.com/githubssh.png)]
title可以隨意。完成之后，在git bash里驗證一下：
$ ssh -T git@github.com
驗證成功大概是這么個結果：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-fiUEdV6F-1601037766100)(http://o8fj2jbwb.bkt.clouddn.com/ssh.png)]
部署到github
到這里，即將開始真正配置hexo，包括主題設置，部署上線等等。
修改BLOG/config.yml，BLOG/_config.yml，BLOG/c?onfig.yml，BLOG是我自定義的一個shell環境變量,你也可以自定義你自己的$BLOG.
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Urr8b1kO-1601037766102)(http://o8fj2jbwb.bkt.clouddn.com/_configyml.png)]
參照我的設置，修改成你自己的github倉庫地址即可。這里就要注意到，這個倉庫的名字跟我的github用戶名是一樣的
一些語法上的東西需要注意：type:,repo:,branch:后面是必須有一個空格，不然后面會報錯
然后接著在git bash 里執行：
$ npm install hexo-deployer-git --save
$ hexo d
此時，便已經成功部署到github上了，hexo默認自帶了一篇hello world的markdown 博文。可以通過http://linxi4linux.github.io訪問剛剛部署上線的博客。（換成你自己的地址）
至此，一個基本的博客系統就已經搭建完成了
hexo 詳細配置
接下來的時間，便是折騰開始。看你自己的喜好了。可以配置主題，第三方服務，搜索，代碼高亮等等。
我推薦使用next主題，剛開始我會覺得挺簡陋的，但是我越看越覺得大氣，舒服，簡潔。
參照next主題的官方文檔，你完全不用google其他的教程，就可以很容易很順利，而且很好的搭建起一個效果還不錯的博客站點。可以看看參考我的博客.
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-8GGMOWLP-1601037766107)(http://o8fj2jbwb.bkt.clouddn.com/next.png)]
上圖是next的官方網站，我建議你把“開始使用”，“主題配置”，“第三方服務”，“內建標簽”，“進階設定”,"常見問題"都仔細的閱讀一遍，照著操作，你就沒問題的。
下面挑幾個我覺得還挺好玩的配置記錄記錄：
多說評論系統
-
登陸多說,選擇我要安裝。
-
創建站點
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-AG9QPWP5-1601037766110)(http://o8fj2jbwb.bkt.clouddn.com/%E5%A4%9A%E8%AF%B4.png)]
記住你自己設置的多說域名，比如我的是 rebootcat -
編輯主題配置文件_config.yml($BLOG/themes/next/_config.yml)
duoshuo_shortname: rebootcat
上面這些next的官方doc里都有，需要注意的是**如果需要在某個文章或者頁面禁用多說，需要配置
comments: false在博文的開頭處。
提交google抓取
首先安裝sitemap插件：
$ npm install hexo-generator-sitemap
然后插件存放目錄是$BLOG/node_modules/
然后配置站點配置文件_config.yml($BLOG/_config.yml):
# Extensions
Plugins:
- hexo-generator-feed#sitemap
sitemap:
path: sitemap.xml
執行：
$ hexo d -g
訪問http://username.github.io/sitemap.xml會看到如下的結果：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-XSQOICcm-1601037766115)(http://o8fj2jbwb.bkt.clouddn.com/sitemap.png)]
sitemap.xml文件是用來干嘛的呢？我自己簡單的理解是：這個文件實時記錄了網站內容的變更，提交google抓取的時候，google便可以根據這個文件的內容來進行相應的更新或者索引。
接下來，到Google Search,添加自己的網站網址，之后在這個頁面會收到一封郵件，大致是這樣子：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-asLzPTkn-1601037766119)(http://o8fj2jbwb.bkt.clouddn.com/googleConsole.png)]
然后我們點擊提交站點地圖，接下來你就會操作了。之后完成之后便是等待google審核通過。比如我自己的，前天提交了，現在還沒有通過（應該是碰到問題了）：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-eRHULY1n-1601037766125)(http://o8fj2jbwb.bkt.clouddn.com/sitemaperror.png)]
嵌入網易云音樂
在網頁嵌入云播放器，是不是覺得很酷？是挺酷的，但是其實很簡單。
首先找到一首歌，然后點擊“生成外鏈播放器”：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-wx7JiH82-1601037766131)(http://o8fj2jbwb.bkt.clouddn.com/untilyou.png)]
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-LVLsUjjv-1601037766134)(http://o8fj2jbwb.bkt.clouddn.com/untilyou2.png)]
復制上面的html代碼到博文的任意位置，即可。就這么簡單。
如果碰到受版權保護的情況，解決辦法 戳我。
純粹是好玩
這個效果會使整個頁面震顫隨著音樂，甚至標簽也會跟著跳躍。
在$BLOG\themes\next\layout_partials\header.swig 中的 ul 標簽加入如下 li 代碼：
<li> <a title="把這個鏈接拖到你的Chrome收藏夾工具欄中" href='javascript:(function() {
function c() {var e = document.createElement("link");e.setAttribute("type", "text/css");e.setAttribute("rel", "stylesheet");e.setAttribute("href", f);e.setAttribute("class", l);document.body.appendChild(e)
}function h() {var e = document.getElementsByClassName(l);for (var t = 0; t < e.length; t++) {document.body.removeChild(e[t])}
}function p() {var e = document.createElement("div");e.setAttribute("class", a);document.body.appendChild(e);setTimeout(function() {document.body.removeChild(e)}, 100)
}function d(e) {return {height : e.offsetHeight,width : e.offsetWidth}
}function v(i) {var s = d(i);return s.height > e && s.height < n && s.width > t && s.width < r
}function m(e) {var t = e;var n = 0;while (!!t) {n += t.offsetTop;t = t.offsetParent}return n
}function g() {var e = document.documentElement;if (!!window.innerWidth) {return window.innerHeight} else if (e && !isNaN(e.clientHeight)) {return e.clientHeight}return 0
}function y() {if (window.pageYOffset) {return window.pageYOffset}return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
}function E(e) {var t = m(e);return t >= w && t <= b + w
}function S() {var e = document.createElement("audio");e.setAttribute("class", l);e.src = i;e.loop = false;e.addEventListener("canplay", function() {setTimeout(function() {x(k)}, 500);setTimeout(function() {N();p();for (var e = 0; e < O.length; e++) {T(O[e])}}, 15500)}, true);e.addEventListener("ended", function() {N();h()}, true);e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";document.body.appendChild(e);e.play()
}function x(e) {e.className += " " + s + " " + o
}function T(e) {e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
}function N() {var e = document.getElementsByClassName(s);var t = new RegExp("\\b" + s + "\\b");for (var n = 0; n < e.length; ) {e[n].className = e[n].className.replace(t, "")}
}var e = 30;
var t = 30;
var n = 350;
var r = 350;
var i = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
var s = "mw-harlem_shake_me";
var o = "im_first";
var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
var a = "mw-strobe_light";
var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
var l = "mw_added_css";
var b = g();
var w = y();
var C = document.getElementsByTagName("*");
var k = null;
for (var L = 0; L < C.length; L++) {var A = C[L];if (v(A)) {if (E(A)) {k = A;break}}
}
if (A === null) {console.warn("Could not find a node of the right size. Please try a different page.");return
}
c();
S();
var O = [];
for (var L = 0; L < C.length; L++) {var A = C[L];if (v(A)) {O.push(A)}
}
})() '>一起搖擺</a> </li>
效果如下：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-pnXBxhTM-1601037766142)(http://o8fj2jbwb.bkt.clouddn.com/%E4%B8%80%E8%B5%B7%E6%91%87%E6%91%86.gif)]
Related Posts
感謝以下博主：
基于Hexo+GitHub Pages 免費搭建個人博客最強教程
如何搭建一個獨立博客——簡明Github Pages與Hexo教程
hexo next 主題添加打賞功能
玩轉Hexo博客之Next
The End
記錄到此為止，其中比較瑣碎的部分建議大家直接查看next的官方doc。
email:linuxcode2niki@gmail.com
Blog:
-
rebootcat.com (默認)
-
http://linxi4linux.github.io/(原地址，備用)
-
http://reboot_cat.coding.me/ （原地址，備用）
2016-6-11 于杭州
總結
以上是生活随笔為你收集整理的我的个人博客搭建记录的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 定义自己的rm command
- 下一篇： 体验Remix——安卓电脑