使用框架Hexo在Github上搭建個人博客

Hexo+Github [Mac環境]假如你有一個Github帳號，我們就可以開始了，如果沒有，就去註冊好了。想想不是很難的事吧，一個郵箱就行了，別的都不需要。

1. 配置遠程和本地Github

1.1 在Github 上創建一個倉庫（Repo）

登陸Github網址，用你的賬號登陸進去，點右上角的+ ，彈出菜單選擇New repository ,在彈出的Repository name下面的文本框內按照yourname.github.io這種格式輸入，然後選中

Public , 最後點擊綠色的Create repository創建成功。

重新登陸，點右上角你的頭像，在彈出的菜單中選中Your profile ,會發現“youname.github.io”分支創建成功，點擊進去，在右邊找到Settings ,在左側欄最下面找到Deploy keys ,點擊Add deploy key ,輸入你的”key” ,密匙的求解過程請參見Git密匙,至此遠程倉庫部分已經配置完成。

如果你對git很感興趣，或者，對git的命令行方式很頭疼的，可以閱讀此物: Git入門教材

⚠️我的git倉庫名字為zhaodongchun.github.io,用你自己的名字好了.

1.2 確認本地已經安裝好git 和npm

在終端輸入下面兩條命令，確認已經安裝好git和npm,如果電腦還沒裝這兩個東西的，請參照官方文檔安裝： Git入門教材+ npm中文文檔

git --version
npm --version

2. 配置Hexo

1） 安裝hexo

先通讀官方文檔hexo自動部署網站,不需要看內容，快速翻一遍知道有這個工具在這裡就可以了，以後需要時再調用它。然後終端輸入以下命令

git --version
npm --version

2） 創建本地工作目錄

先登陸到github，點擊你的分支yourname.github.io ,在右邊有個綠色的按鈕Clone or download ,點開後點擊copy to clipboard把自己的git地址拷貝出來，在終端cd到你希望把站點放置的位置，下面我cd到Desktop了

cd ~/Desktop
git clone https://github.com/zhaodongchun/zhaodongchun.github.io.git

3）初始化你的本地站點

hexo init yourname.github.io
cd yourname.github.io
npm install hexo-deployer-git --save
hexo generate
hexo server

在終端打完以上命令後，如果最後顯示Database saved ，代表本地站點已經初始化完成，可以終端裡按住ctrl的同時點擊http://localhost:4000/查看你的站點了，需要注意的是這個效果是hexo默認模版landscape的效果，我們看看怎麼更換模版為Next模版。

4）設置個人模版

這裡涉及兩個東西，一個是Hexo,一個是Next,我們先到Hexo模版，先看看都有哪些模版可供我們選擇，如果你點擊模版下面的大標題名字後會進入到github的源文件地址，和創建本地工作目錄一樣，可以把它的Git地址拷貝出來。先以next模版為例，先定位到Hexo站點目錄下，在終端輸入以下命令安裝

cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next

安裝完成後，修改配置文件_config.yml中的theme字段為next後保存，至此我們完成了站點配置。在終端繼續輸入以下命令完成模版調試，如果再此出現Database saved ，代表本地站點已經初始化完成，可以終端裡按住ctrl的同時點擊http://localhost:4000/查看你的站點了

hexo server --debug

5） 使用Atom碼文章

先把Atom下載下來，官網直接下載安裝或在終端輸入下面命令也可以，如果對Atom還不熟悉沒關係，先從官方文檔開始逐漸建立Atom語法吧，在線閱讀: 飛行手冊

給Atom 安裝一個命令行面板，Atom 裡同時按command+，調出setting面板，定位到install選項，在文本框中搜索platformio-ide-terminal後點擊install安裝atom包，安裝完成後按command+shift+t在下面會出現一個終端，這個包的作用就是解決總是來回切換atom和終端的問題。

完成上面的操作後，我們對包大概有了個概念，下面繼續安裝一個markdown包，點擊Atom菜單下的Preference的左側倒數第二項+ install ，輸入markdown ，依次安裝幾個包

• markdown-scroll-sync
• linter-markdown
• markdown-writer
• markdown-toc
• markdown-pdf
• markdown-preview

然後就是隨便折騰一會，看看這幾個都實現什麼功能，接下來用markdown書寫文章的過程中會經常使用這幾個包

/Desktop/zhaodongchun.github.io/zhaodongchun.github.io ,這是我的目前位置，在mac終端輸入ls查看你是否在根路徑下，然後終端輸入atom .在atom中打開所有文件，然後使用快捷鍵command+shift+t打開atom終端，mac的終端就可以關閉了，在左側欄定位到source文件夾下的_posts文件夾，展開後有一個hello-world.md文件，這個文件就是網站上看到的源文件。

熟悉以下幾個快捷鍵以後會很方便

• command+w 關閉當前標籤
• command+shift+m 終端
• ctrl+shift+m 預覽
• “>” 塊引用
• “-” 任務列表
• “0.” 有序列表

再回去翻翻Next模版，設置下站点配置文件和主题配置文件，設置語言和暱稱，基本上博客就可以了，保存後在終端輸入下面調試命令,如果再此出現Database saved ，代表本地站點已經初始化完成，可以在瀏覽器輸入http://localhost:4000/查看你的站點了。

 hexo server --debug

3. 部署到Github 上

把本地文件上傳到github遠程前，我們需要告訴atom上傳到的路徑，先登陸github，進入zhaodongchun.github.io這個分支，點擊綠色的clone or download按鈕拷貝出來路徑，再進入atom，左側根目錄會有一個_config.yml文件，下面我們設置下這個配置文件，先把拷貝出來的路徑粘貼到url後面，注意截止到/ ,將root後面改成你的github上的倉庫一樣，repo後面的直接把你拷貝出來的粘貼就行了，注意:後面的空格不要少，這樣atom就知道上傳給誰了。

• url: https://github.com/konglongyinger/zhaodongchun.github.io/
• root: /zhaodongchun.github.io
• deploy:
• type: git
• repo: https://github.com/konglongyinger/zhaodongchun.github.io.git

修改完成後保存，在atom終端輸入下面命令，在github上查看上傳結果，如果發現文件已經顯示，就可以進入github你的分支下的settings，往下翻找到GitHub Pages這裡，將source下的None改為master branch ,點擊保存後，會出現綠色的一條提示Your site is published at https://konglongyinger.github.io/zhaodongchun.github.io/ ，後面鏈接就是你的網址了，現在你可以點擊看看效果。

 hexo deploy

4. 調試網站

• 如果每次在本地修改文章，可以用下面命令調試預覽

hexo s --debug

• 如果改動了配置文件，在上傳到github前最好使用清理命令，清除public目錄

hexo clean

• 如果完成階段性任務了可以用下面命令上傳到github

 hexo deploy

5. 域名綁定

首先你的有個域名，舉例來說我是從 百度買的，有了域名後再分三步走。

1） 配置CNAME

在hexo文件夾下的source中新建一個文本文檔， 裡邊輸入剛才我們買到的域名的二級域名。舉例來說，我申請的是zhaodongchun.com ，就填寫zhaodongchun.com ,然後保存為CNAME .注意大寫的CNAME.

2） 配置解析服務器

接下來進域名服務商的後台進行域名解析設置,添加CNAME記錄類型，解析線路默认就好了，記錄值為zhaodongchun.github.io ,配置好後我們本地重新上傳到github。

3） 配置站點設置文件重定向

還記得我們沒有綁定域名之前設置的配置文件嗎，綁定域名後需要重新設置下url和root ,否則css有可能會丟失，將其設置回默認，如下設置：

• url: https://zhaodongchun.com
• root: /

4）好，到此為止，重新執行下面命令將文件上傳到github，瀏覽器輸入你的域名就可以正常登陸了。

 hexo clean
hexo g
hexo d