史上最快用GitHub、Hexo搭建我的博客

歡迎訪問個人博客

一. 準備工做

• 電腦一臺(本文是基於Mac)
• 安裝Git
• 安裝Node.js
• GitHub帳號一枚

若是讀者電腦上已經裝了git、Node、而且有GitHub帳號，那麼搭建我的博客絕對不超過抽一支菸的時間。

二. 安裝git

1. 在 Mac 上安裝 Git，官方給了有兩種方式。最容易的當屬使用圖形化的 Git 安裝工具，界面如圖，下載地址在下：

Git GUI下載地址

2. 另外一種是經過 MacPorts (http://www.macports.org) 安裝。若是已經裝好了 MacPorts，用下面的命令安裝 Git：

$ sudo port install git-core +svn +doc +bash_completion +gitweb
複製代碼

譯註：還有一種是使用 homebrew（https://github.com/mxcl/homebrew）：brew install git。

安裝git官網教程

三. 安裝Nodejs

安裝Nodejs也有兩種方式GUI和終端命令

1. GUI下載地址

Nodejs安裝包下載地址

2. 終端執行命令

先安裝nvm，這是Nodejs版本管理器，能夠輕鬆切換Nodejs版本。

1. curl方式安裝nvm.

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
複製代碼

下面是nvm部分輸出，重點在最後，只有執行最後幾條命令nvm纔算安裝完成。

% Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 11329  100 11329    0     0   4130      0  0:00:02  0:00:02 --:--:--  4130
=> Downloading nvm from git to '/Users/huanghaipo/.nvm'
=> Initialized empty Git repository in /Users/huanghaipo/.nvm/.git/


=> Appending nvm source string to /Users/huanghaipo/.bashrc
=> bash_completion source string already in /Users/huanghaipo/.bashrc
=> Close and reopen your terminal to start using nvm or run the following to use it now:
//這裏是執行命令
export NVM_DIR="/Users/leon/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
複製代碼

根據提示執行命令load nvm,最後幾條命令每一個人的都不一樣。

$ export NVM_DIR="/Users/leon/.nvm"
$ [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
$ nvm
複製代碼

使用nvm安裝node

$ nvm install node
複製代碼

驗證node及npm版本，若是有下方輸出證實安裝成功。

$ node -v
v11.14.0
$ npm -v
6.7.0
複製代碼

四. 建立Github域名和倉庫

1. 註冊GitHub帳號

註冊Github帳號，Username很重要，域名將是帳號名加.github.io，username.github.io。

2. 建立倉庫

註冊帳號後咱們須要建立一個存儲網站數據的倉庫，點擊首頁右上角加號，點擊New repository按鈕建立倉庫。

Respository name 中的username.github.io 的username 必定與前面的Owner 一致，記住username後面會用到。

到此準備工做已經所有完成了。接下來就是安裝hexo了。

五. 安裝Hexo

以上工做所有完成咱們就能夠安裝Hexo了。一個嶄新的博客將要出現。

1. 執行下方命令安裝hexo

$ sudo npm install hexo-cli -g
複製代碼

安裝完成後咱們就能夠初始化博客了，若是想要把文件放到某個目錄下先cd到指定目錄下在執行下方命令，若是沒有指定目錄默認是的你的我的主目錄下。

//username就是你剛纔倉庫的名稱
$ hexo init username.github.io
複製代碼

2. 配置博客設置

初始化博客後咱們須要修改配置文件已達到想要的效果如名字、主題等。

主題安裝

爲了美觀咱們安裝一個火熱的主題。先cd到剛纔生成的目錄下執行下方命令。

$ cd username.github.io
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
複製代碼

基礎設置

找到_config.yml文件username.github.io/_config.yml修改下方基礎配置保存修改。 注意_config.yml中配置項的冒號後面要用空格隔開，再跟內容不然啓動服務時會報錯。

title: huanghaipo    //博客的名字
author: huanghaipo  //你的名字
language: zh-Hans    //語言 中文
theme: next   //剛剛安裝的主題名稱
deploy:
type: git    //Github發佈
repo: https://github.com/username/username.github.io.git    // 剛建立的Github倉庫連接也能夠選擇ssh
複製代碼

3. 編寫文章

前期工做已近基本完成，接下來咱們能夠寫文章了。發佈就能夠獲得一枚我的博客，首先新建一個.md文件，命名爲firstEssay.md，寫入下方內容。放到username.github.io/source/_posts文件下。

---
 title: 個人第一篇文章
 ---
**個人第一篇文章**
複製代碼

或者cd到你的博客文件夾執行下方命令行會獲得一個md文件。

hexo new post "這是測試新建md文檔"      //名字隨便取
複製代碼

執行完以上命令，獲得md文件，內容以下。

---
title: 這是測試新建md文檔
date: 2019-04-24 10:20:50       
tags:                            //博客標籤
---
複製代碼

4. 啓動測試

啓動服務，直接瀏覽器中輸入https://localhost:4000或者直接點擊我 訪問。

$ hexo s
複製代碼

5. 安裝hexo-deployer-git自動部署發佈工具

$ npm install hexo-deployer-git --save
複製代碼

6.發佈

以上步驟都完成後，咱們就能夠把生成的靜態網頁文件發佈到Github上。之後直接經過鏈接就能夠訪問這個博客了。

$ hexo clean && hexo g && hexo d
命令解釋
hexo clean   //清除緩存文件 (db.json) 和已生成的靜態文件 (public)
hexo g       //生成緩存和靜態文件
hexo d       //從新部署到服務器
複製代碼

若是你使用的是HTTP可能會讓你輸入帳號密碼，輸入正確後，稍等片刻，就會吧文件上傳到Github上，而後直接訪問剛纔username.github.io就能看到本身的博客了。若是有新的文章只須要放到username.github.io/source/_posts下而後執行上面的命令就OK了。

最終效果

優化

若是以爲這個主題很差看請或者想要更新博客更方便、更美觀，請看這裏。

hexo主題 主題配置 基礎配置 hexo插件

hexo經常使用命令

hexo new "postName" #新建文章
hexo new page "pageName" #新建頁面
hexo generate #生成靜態頁面至public目錄
hexo server #開啓預覽訪問端口（默認端口4000，'ctrl + c'關閉server）
hexo deploy #將.deploy目錄部署到GitHub
hexo help # 查看幫助
hexo version #查看Hexo的版本
複製代碼

踩坑記錄:

終端報錯:

FATAL can not read a block mapping entry; a multiline key may not be an implicit key at line 70, column 1: ...
複製代碼

解決辦法：_config.yml中配置項的冒號後面要用空格隔開，再跟內容

出現 error deployer not found:git 或者 error deployer not found:github 的錯誤
複製代碼

解決辦法：執行 npm install hexo-deployer-git --save

中文亂碼問題
複製代碼

解決辦法：將文件的內容編碼改成UTF8格式

'hexo sever'可以成功運行，可是localhost:4000沒法訪問
複製代碼

解決辦法：執行hexo s -p 5000，改用其餘端口啓動