最近，粉絲們在金九銀十期間也是不斷的面試，有比較多的畢業生說我在這個期間出多一些面試題，上幾期都是傾向于面試文章，這期出一次簡歷加分項操作，使用hexo框架搭建個人博客。

作為應屆畢業生或者1-3年工作經驗的程序員擁有自己的個人博客站點，絕對是簡歷的加分項，然而學習的成本確實非常的低，只要幾十分鐘就能搭建好自己的個人博客。

閑話不多說，下面我們就開始動手來搭建自己的博客吧！

安裝Node環境

首先我們在本機要安裝Node環境，我們可以直接來到Node.js官網：https://nodejs.org/en/，直接點擊下圖下載。

下載后，直接雙擊，然后就是一直下一步下一步的傻瓜式操作。這里要注意的是：有的人的電腦可能已經安裝好Node環境，已經安裝好的可以通過在cmd窗口執行下面的命令查看Node版本：

node?-v

若是在Node版本為10以下的要更新一下自己的Node版本，因為Node10以下版本的執行安裝hexo的時候會報錯，并且它會明確的提示你版本不匹配的報錯信息。

安裝完后，再次檢驗一下cmd窗口分別輸入輸入下面兩條命令：

node?-v
npm?-v

安裝完Node環境后，就是安裝Git，安裝Git很簡單，這里就直接略過了，在Git官網下載：https://git-scm.com/downloads，然后也是傻瓜式一步一步的操作。

安裝hexo

首先，在自己的本地中新建一個文件夾用來存放hexo的代碼，我這里就直接在E:\MyBlog下進行安裝hexo。

在E:\MyBlog目錄下，右擊打開Git Bash，接著在Gir Bash中執行：npm install -g hexo命令，當看到下圖所示表示安裝完成，第一次可能等的時間會比較長：

接著在執行：hexo init，初始化hexo項目，實際是從github中拉取項目：

當hexo初始化完后，你就能看你當前目錄下多出了很多有關hexo項目的文件：

這些目錄中，其中比較重要的文件和文件夾是：source和themes文件夾，以及_config.yml文件：

source：該文件夾是存放我們自己文章的地方，文章存放在該目錄下的_posts文件夾中。

themes：用于存放博客的主題信息。

_config.yml：是hexo博客的配置文件，很多配置信息都在這里面。

接下來執行：npm install和hexo g，使用npm源安裝所依賴的組件和編譯生成靜態頁面。

執行完上面的命令后，你會發現項目多了一個public文件夾，該文件夾就是用于存放靜態頁面的地方，該文件夾下的靜態頁面都是根據配置文件動態生成的，所以只要修改配置文件_config.yml中的配置信息，就可以使生成的靜態頁面發生改變：

最后就是啟動hexo，通過執行命令：hexo s，就會出現如下的頁面：

它已經明確的告訴你，訪問本地4000端口，在瀏覽器輸入：http://localhost:4000，若是出現了下面的頁面說明本地搭建成功：

我們現在能看到的就是hexo默認的主題，該主題信息存儲在themes下的landscape文件夾中。

若是想要修改這個默認主題，比如上面圖片中大大的Hexo字體，我們要修改為我們自己的博客名稱，首先打開MyBlog目錄下的配置文件_config.yml：

在這個配置文件有很多的配置信息，我們可以先找到title以及author這兩個字段修改形成我們自己的信息。

接著執行：hexo clean和hexo g，hexo clean：表示清除原來的緩存，它會直接把原來編譯生成的靜態文件夾public直接刪除；hexo g：又會再次根據配置文件生成靜態頁面。

最后，我們再次啟動項目(hexo s)，訪問http://localhost:4000：

我們Hello World的文章換成我們自己的文章，這個文章就是位于我們前面所講的source/_posts文件夾下：

我們只要把這個md替換成我們自己文章的md就可以了，然后再依次執行下面三條命令：

hexo?clean
hexo?g
hexo?s

下面我們來看看效果：

這樣就好看很多，另外要注意的是要想在上圖的右邊紅色框內顯示提交的主題，要在你的文章內加入標題，它就會自動識別：

---
title:?我以為我對Mysql事務很熟，直到我遇到了阿里面試官
---

另外，藍色框內的顯示的提交的時間，點擊可以跳轉到提交的分類記錄中：

分類

但是，還是感覺這個主題很丑，這時候就要用到hexo官方的主題庫：https://hexo.io/themes/ ，在這里可以選擇自己預覽自己的主題庫：

這里我選擇一個比較高大上(騷)的主題，點擊紅色框內就是預覽該主題，點擊藍色框就會跳轉到該主題的github源碼地址。

若是想要使用該主題，必須要把該主題下載下來，首先點擊藍色框進入該主題的github地址，復制該github地址，然后需要執行下面的命令：

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

它表示把主題源碼下載到themes主題文件夾下的volantis文件夾下。下載完后，要修改MyBlog目錄下的配置文件_config.yml中的下面字段的配置：

最后在執行hexo clean、hexo g和hexo s命令，就可以在瀏覽器看到效果：

是不是感覺瞬間高大上，牛逼了很多，這樣一個自己博客逼格就出來了，不需要自己寫界面和后臺，所以直接使用hexo來搭建個人技術博客還是非常方便的，基本的需求都能滿足。

此時。在本次部署好之后就可以將代碼推向github倉庫，但是在推向github之前，你的MyBlog文件夾必須與你的遠程倉庫相關聯，這個關聯的方法在這一篇[(一)深入淺出圖解Git，入門到精通(保姆級教程)]已經講過了，這里就不再做詳細的贅述了，就是將你的本地的.ssh/id_rsa文件中的key復制到遠程倉庫中的SSH Keys。

當你的本地倉庫與遠程倉庫關聯后，就在遠程倉庫創建一個如下圖所示的倉庫，倉庫名必須是：你的用戶名+".github.io"：

最后還要在MyBlog文件夾下的_config.yml配置文件中配置如下的信息：

這樣子就可以使用下面四條命令，就可以將你本地的代碼推向遠程倉庫了：

npm?install?hexo-deployer-git?--save
hexo?clean
hexo?generate
hexo?deploy

最后在你的瀏覽器輸入：http://+"你的用戶名"+.github.io，就可以訪問你自己的個人博客了，例如我個人的博客站點是：http://liduchang.github.io，最后的效果：

到此，使用hexo框架搭建個人博客的教程就已經結束了，最后有一點要說明一下的是：除了MyBlog下的配置文件_config.yml文件可以修改，還有themes/volantis文件夾下的_config.yml配置文件也是可以修改的，這個可以自己去研究。

然后每次修改完，也是執行下面四條命令：

hexo?clean
hexo?g
hexo?s
hexo?d

我覺得主題信息可以選擇比較簡單的，因為都是基于配置信息進行配置的，假如太復雜的博客主題，你還要去它的github的源碼地址中去研究它每一個配置字段的含義或者看他的注解，會花費大量的時間，我覺得沒必要。

經過多用戶的訪問測試顯示，有的人手機無法訪問，有的人手機可以訪問，有的人電腦無法訪問，有的人電腦可以訪問，具體原因不太清楚，若是有人知道原因的，可以在評論區告訴我原因，不甚感激。

最后說一句，你的面試官能不能看到你搭建的站點就得看命了，很可能訪問不了，哈哈哈哈，好了這一期到這里就結束了，我們下一期見，歡迎訪問我的個人站點：https://liduchang.github.io/。

總結

以上是生活随笔為你收集整理的hexo评论_【前端简历加分】hexo框架搭建个人博客站点，手把手教学的全部內容，希望文章能夠幫你解決所遇到的問題。

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