當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

我的个人博客搭建记录

發布時間：2023/11/27 生活经验 21 豆豆

生活随笔收集整理的這篇文章主要介紹了我的个人博客搭建记录小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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是我自定義的一個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)]

感謝以下博主：

基于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 于杭州

總結

以上是生活随笔為你收集整理的我的个人博客搭建记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

博客