零基礎(chǔ)用 Hexo 框架搭建個(gè)人博客（無(wú)坑版）

一、環(huán)境準(zhǔn)備

提前裝好 Git，這里不多講解了，可以百度安裝下。

安裝 Nodejs

下載 nodejs：https://nodejs.org/en/

安裝直接點(diǎn)擊下一步、下一步就可以了。

安裝完以后會(huì)有兩個(gè)組件：1.是 npm 包管理器；2.是 Nodejs 本身。

如果是 mac，需打開(kāi)終端切換到 root 用戶:

sudo su

輸入密碼，敲回車(chē)。

輸入clear清一下。

查看 node 的版本：node -v

查看 npm 包管理器的版本：npm -v

Windows 電腦我是直接以管理員身份打開(kāi) cmd，輸入:

查看 node 的版本：node -v

查看 npm 包管理器的版本：npm -v

因?yàn)?Hexo 需要 Nodejs 支持的、生成的，所以這是前置步驟。

二、安裝 Hexo 博客框架

需借助 npm 包管理器來(lái)安裝。因?yàn)閲?guó)內(nèi)安裝鏡像源很慢，所以利用 npm 安裝 cnpm。

用淘寶鏈接進(jìn)行安裝：

npm install -g cnpm --registry=https://registry.npm.taobao.org

敲cnpm就可以自動(dòng)補(bǔ)全了，這個(gè)工具說(shuō)明就有了。

看下 cnpm 的版本：cnpm -v

安裝 Hexo 框架：

cnpm install -g hexo-cli

hexo -v來(lái)驗(yàn)證下。

可以看到 Hexo 的博客框架是基于 node 的。

三、使用 Hexo 搭建博客（本地啟動(dòng)）

方式一：

在開(kāi)始之前，輸入 pwd 看下所處路徑。

新建一個(gè) blog 文件夾：mkdir blog

方式二：

我是直接在 E 盤(pán)自己手工創(chuàng)建了一個(gè) blog 文件夾。

所有博客的東西全部都在 blog 里面生成。所以大家如果出了什么錯(cuò)，直接連 blog 文件夾整個(gè)刪除就行了。注意：千萬(wàn)不能只刪除 blog 文件夾里面的內(nèi)容，卻不刪除 blog 文件夾，這樣操作會(huì)出問(wèn)題的。

進(jìn)入 blog 的目錄中，位于這個(gè)目錄下，就可以使用 Hexo 生成我們的博客。

mac 下輸入 sudo，表示用管理員的命令來(lái)執(zhí)行，用 mac 電腦需要加上。

初始化一個(gè)博客：sudo hexo init

初始化一個(gè)博客：hexo init

您看，它會(huì)自己去克隆。還會(huì)默認(rèn)克隆一個(gè) Landscape 主題:

安裝完成了！

看該目錄下的所有子目錄和文件：ls

啟動(dòng)博客：hexo s

輸入localhost:4000問(wèn)下，看看博客是不是已經(jīng)成功，已經(jīng)有了，就像這樣：

您看，還簡(jiǎn)介了 Hexo 怎么使用：

hexo s就是hexo server?，寫(xiě)一篇博客，可以用hexo s這個(gè)命令啟動(dòng)預(yù)覽下。

hexo n "我的第一篇博客文章"

切換到 source，輸入命令：cd source/_posts/

用 vim 編輯器：

可以進(jìn)行編輯，也可以不編輯直接發(fā)布。

點(diǎn)擊鍵盤(pán)的 i 進(jìn)行編輯，shift 和 esc 同時(shí)按下(這里我記得是這樣用的，如果不行可以百度下），然后輸入:wq保存退出。這個(gè)不太好用，編輯用 Visual Studio Code 這個(gè)工具即可。

這樣博客文章就創(chuàng)建好了。

輸入 pwd，看到在 source 目錄下，需要退 2 層回去：cd ../..

這樣就到了 blog 目錄。

接著輸入以下命令：

清理下：hexo clean

生成下：hexo g

啟動(dòng)下：hexo s

刷新下：http://localhost:4000

以上 Hexo 博客的搭建已經(jīng)完成了。

四、部署到遠(yuǎn)端（Github）上公開(kāi)使用

1.登錄自己的 Github。

2.新建一個(gè)倉(cāng)庫(kù)：

注意：一定是你的昵稱.github.io

現(xiàn)在是個(gè)空倉(cāng)庫(kù)，地址是這個(gè)，先放著。

繼續(xù)在 blog 目錄下，輸入命令行操作：

裝 Git 部署的插件：cnpm install --save hexo-deployer-git

里面的紅色警告可以忽略不管。

去 blog 文件下，直接看到一個(gè)_config.yml，修改_config.yml即可。注意：blog文件夾下的其它文件下也有_config.yml文件，別改錯(cuò)了文件。

文件的最底部修改成這樣：

deploy:
??type:?git
??repository:?https://github.com/qinghan586/qinghan586.github.io.git
??branch:?master

注意：deploy: type: repository: branch: 后面都有一個(gè)英文的空格。

用 nopad++修改后一定要保存！

部署到遠(yuǎn)端：hexo d

自動(dòng)部署，需輸入賬號(hào)密碼：

往遠(yuǎn)端推成功后，刷新 Github 倉(cāng)庫(kù)，發(fā)現(xiàn)多了很多東西，這些就是我的博客內(nèi)容：

訪問(wèn)qinghan586.github.io就可以直接打開(kāi)，并看到博客部署到 Github 上去了。

下載好看的主題：

好看的 Hexo 主題地址：https://hexo.io/themes/

自己來(lái)?yè)Q個(gè)主題，克隆到 themes 主題下去：

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

git clone https://github.com/volantis-x/hexo-theme-volantis.git themes/volantis

themes 文件夾下就出現(xiàn)你下載的主題了。

現(xiàn)在把主題配置到博客上去：

修改_config.yml文件：

theme: yilia

theme: volantis

你用哪個(gè)主題就換哪個(gè)主題的名字，注意名稱前面有個(gè)英文空格。

輸入以下命令：

hexo clean

hexo g

hexo s

啟動(dòng)本地服務(wù)：http://localhost:4000看看，主題已經(jīng)換了。

推到遠(yuǎn)端（github）上去：hexo d

推送完成！

訪問(wèn)qinghan586.github.io可看到主題成功換了！

以上整個(gè)過(guò)程已經(jīng)完成了。

后續(xù)學(xué)下 css，然后才會(huì)把自己的博客修改的很漂亮。先搭建起來(lái)，再考慮博客內(nèi)容美觀的問(wèn)題。

五、注意

修改_config.yml文件后，需要把主題配置到博客上去，輸入

hexo clean

hexo g

hexo s

推到遠(yuǎn)端（github）上去：hexo d

都不行的情況下，可以換成這樣的命令再次輸入下：

npm install hexo-deployer-git --savehexo cleanhexo generatehexo deploy

出現(xiàn)提示 nothing to commit, working tree clean

我是這樣提交文章成功的，依次輸入：

git add .

git commit -m "one"

hexo clean

hexo generate

hexo deploy

hexo g

hexo d

hexo s

hexo s后就出來(lái)了，域名本地都可以訪問(wèn)了。

如果 Hexo 部署提交不上，Github 倉(cāng)庫(kù)上文件未更新。

刪除?.deploy_git目錄,再執(zhí)行hexo d -g就可以了。

Github 比較慢，刷新后需要耐心等待一下！