從0開始用Hexo框架搭建我的博客（無坑版）

堅持原創輸出，點擊藍字關注我吧

做者：清菡
博客：Oschina、雲+社區、知乎等各大平臺都有。

目錄

• 1、環境準備

  • 安裝 Node js
• 2、安裝 Hexo 博客框架
• 3、使用 Hexo 搭建博客（本地啓動）
• 4、部署到遠端（Github）上公開使用
• 5、注意

Hexo 博客框架比較成熟，出了問題，網上能夠搜索到不少的解決方式。不管是 Windows 仍是 Linux，操做其實都是差很少的。個人是 Windows10 的電腦操做的。這個是個人我的博客地址：qinghan586.github.io

1、環境準備

提早裝好 Git，這裏很少講解了，能夠百度安裝下。

安裝 Nodejs

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

安裝直接點擊下一步、下一步就能夠了。

安裝完之後會有兩個組件：1.是 npm 包管理器；2.是 Nodejs 自己。

若是是 mac，需打開終端切換到 root 用戶:

sudo su

輸入密碼，敲回車。

輸入clear清一下。

查看 node 的版本：node -v

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

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

查看 node 的版本：node -v

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

由於 Hexo 須要 Nodejs 支持的、生成的，因此這是前置步驟。

2、安裝 Hexo 博客框架

需藉助 npm 包管理器來安裝。由於國內安裝鏡像源很慢，因此利用 npm 安裝 cnpm。

用淘寶連接進行安裝：

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

敲cnpm就能夠自動補全了，這個工具說明就有了。

看下 cnpm 的版本：cnpm -v

這個是mac的截圖，Windows同樣操做

安裝 Hexo 框架：

cnpm install -g hexo-cli

hexo -v來驗證下。

能夠看到 Hexo 的博客框架是基於 node 的。

3、使用 Hexo 搭建博客（本地啓動）

方式一：

在開始以前，輸入 pwd 看下所處路徑。

新建一個 blog 文件夾：mkdir blog

方式二：

我是直接在 E 盤本身手工建立了一個 blog 文件夾。

全部博客的東西所有都在 blog 裏面生成。因此你們若是出了什麼錯，直接連 blog 文件夾整個刪除就好了。注意：千萬不能只刪除 blog 文件夾裏面的內容，卻不刪除 blog 文件夾，這樣操做會出問題的。

進入 blog 的目錄中，位於這個目錄下，就可使用 Hexo 生成咱們的博客。

mac 下輸入 sudo，表示用管理員的命令來執行，用 mac 電腦須要加上。

初始化一個博客：sudo hexo init

初始化一個博客：hexo init

您看，它會本身去克隆。還會默認克隆一個 Landscape 主題:

安裝完成了！

看該目錄下的全部子目錄和文件：ls

列出該目錄下的全部子目錄和文件的詳細信息：ls -l

啓動博客：hexo s

輸入localhost:4000問下，看看博客是否是已經成功，已經有了，就像這樣：

您看，還簡介了 Hexo 怎麼使用：

hexo s就是hexo server ，寫一篇博客，能夠用hexo s這個命令啓動預覽下。

hexo n "個人第一篇博客文章"

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

用 vim 編輯器：

能夠進行編輯，也能夠不編輯直接發佈。

點擊鍵盤的 i 進行編輯，shift 和 esc 同時按下(這裏我記得是這樣用的，若是不行能夠百度下），而後輸入:wq保存退出。這個不太好用，編輯用 Visual Studio Code 這個工具便可。

這樣博客文章就建立好了。

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

這樣就到了 blog 目錄。

接着輸入如下命令：

清理下：hexo clean

生成下：hexo g

啓動下：hexo s

刷新下：http://localhost:4000

以上 Hexo 博客的搭建已經完成了。

4、部署到遠端（Github）上公開使用

1.登陸本身的 Github。

2.新建一個倉庫：

注意：必定是你的暱稱.github.io

例如個人 Github 暱稱是 qinghan586，那麼這裏輸入qinghan586.github.io

如今是個空倉庫，地址是這個，先放着。

繼續在 blog 目錄下，輸入命令行操做：

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

裏面的紅色警告能夠忽略無論。

去 blog 文件下，直接看到一個_config.yml，修改_config.yml便可。注意：blog文件夾下的其它文件下也有_config.yml文件，別改錯了文件。

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

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

注意：deploy: type: repository: branch: 後面都有一個英文的空格。

用 nopad++修改後必定要保存！

部署到遠端：hexo d

自動部署，需輸入帳號密碼：

往遠端推成功後，刷新 Github 倉庫，發現多了不少東西，這些就是個人博客內容：

訪問qinghan586.github.io就能夠直接打開，並看到博客部署到 Github 上去了。

下載好看的主題：

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

本身來換個主題，克隆到 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 文件夾下就出現你下載的主題了。

如今把主題配置到博客上去：

修改_config.yml文件：

theme: yilia

theme: volantis

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

輸入如下命令：

hexo clean

hexo g

hexo s

啓動本地服務：http://localhost:4000看看，主題已經換了。

推到遠端（github）上去：hexo d

推送完成！

訪問qinghan586.github.io可看到主題成功換了！

以上整個過程已經完成了。

後續學下 css，而後纔會把本身的博客修改的很漂亮。先搭建起來，再考慮博客內容美觀的問題。

5、注意

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

hexo clean

hexo g

hexo s

推到遠端（github）上去：hexo d

都不行的狀況下，能夠換成這樣的命令再次輸入下：

npm install hexo-deployer-git --save

hexo clean

hexo generate

hexo deploy

出現提示 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後就出來了，域名本地均可以訪問了。

若是 Hexo 部署提交不上，Github 倉庫上文件未更新。

刪除 .deploy_git目錄,再執行hexo d -g就能夠了。

Github 比較慢，刷新後要耐心等待下。

開啓無痕模式加載網頁，ctrl+shift+delete清除緩存有時候不必定管用（緣由不明）。

較爲靠譜的參考連接:https://segmentfault.com/q/1010000003481894?utm_source=sf-similar-question

公衆號 「清菡軟件測試」 首發，更多原創文章：清菡軟件測試 95+原創文章，歡迎關注、交流，禁止第三方擅自轉載。