Hexo+Github/Coding免費搭建個人博客網站

體驗更優排版請移步原文：http://blog.kwin.wang/other/hexo-github-build-blog.html

 

很早之前就想搭建一個屬於自己的博客網站，一方面是給自己做筆記，把平時遇到的問題和解決問題的方式方法記錄下來，順便提升自己的表達能力、總結能力；另一方面，個人博客就像是自己在網絡世界中的一個小家，一個完全屬於自己的空間，你可以在這里盡情發揮，別人可以通過它來了解你。前段時間偶然間發現了Hexo，看了兩天官方文檔，參考網上教程，搭建了自己的個人網站：http://vblog.win/ 歡迎訪問！搭建完畢在此記錄一下搭建過程。

1. 環境准備

1.1 node.js安裝和准備

在node.js官網 http://nodejs.cn/download/ 下載對應安裝文件，保持默認設置，一路next，安裝結束。
打開命令提示符，輸入node -v，npm -v輸出當前版本號說明node環境搭建完成。

1.2 git安裝和准備

在Git官網 https://git-scm.com/downloads （如未翻牆下載過慢可參考地址）下載對應安裝文件，保持默認設置一路next也沒毛病，這里一點提醒，Git出於安全考慮，只能在Git Bash中進行Git有關的命令操作，如果想要在命令提示符中使用Git命令，在安裝過程中調整PATH環境一步需勾選第二項，這樣Git安裝程序會在系統PATH中設置Git路徑，以便於我們在命令提示符中直接使用Git命令（盡管可以這樣設置，但還是建議都在Git Bash中輸入命令）。

打開命令提示符，輸入git --version輸出當前版本號說明Git環境搭建完成。

2. Github賬戶配置

2.1 創建倉庫

相信很多coder都有自己的GitHub賬號（沒有的話去注冊一下），利用GitHub建立自己的博客首先需要創建一個username.github.io的倉庫，這里的username必須是你的用戶名（不是昵稱），之后你的個人博客地址就是 http://username.github.io 了。

2.2 代碼庫設置

接下來，在新建立好的倉庫主頁點擊菜單欄Settings，找到下方GitHub Pages開啟該功能，選擇一個主題並提交更改，幾分鍾后打開 http://username.github.io 你就可以訪問自己的博客主頁了。

2.3 配置SSH key

因為我們的博客內容托管於GitHub，因此提交代碼需要提供權限給本地，這里使用SSH key相對來說要安全一些，輸入命令：

1	ssh-keygen -t rsa -C "注冊郵箱"

之后會提示輸入一個密碼，這個密碼在提交代碼時使用，這里也可以直接回車，密碼置空。最終會在用戶目錄下生成.ssh文件夾，進入文件夾找到id_rsa.pub文件並打開，復制內容並打開 https://github.com/settings/keys 新建SSH key，title自己命名，把剛剛復制的內容粘貼到key處保存，設置完畢。

測試配置是否成功：

1	ssh -T [e-mail]

Hi wangqingkai! You’ve successfully authenticated, but GitHub does not provide shell access.

看到如上信息則說明SSH key配置成功。

2.4 配置Git個人信息

1 2	git config --global user.name "username" // github用戶名，不是昵稱 git config --global user.email "[e-mail]" // github注冊郵箱

3. Hexo安裝與配置

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。還是推薦花時間看下官方文檔：https://hexo.io/zh-cn/docs/

3.1 Hexo安裝

新建一個用於存放個人博客源文件的文件夾，進入文件夾開始安裝Hexo，由於npm下載一些包在國內會非常慢，這里推薦使用淘寶鏡像，右擊Git Bash輸入以下命令等待安裝：

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

安裝完成之后基本所有命令中的npm都可以用cnpm替代。輸入命令：

1	cnpm install -g hexo

Hexo安裝完成之后緊接着開始初始化，輸入命令：

1 2	hexo init // hexo初始化 hexo g // 生成網站源文件

生成之后的目錄結構應該是這樣的，

1	hexo s // 啟動本地測試服務

服務啟好之后瀏覽器打開 http://localhost:4000 ，如果可以正常訪問，說明我們本地博客已經搭建起來了。Ctrl+C關閉測試服務。

3.2 Hexo配置

3.2.1 Hexo主題配置

因為默認主題達不到我們的要求，首先對Hexo主題進行配置，這里是Hexo官方主題。我們用比較受大眾喜愛的yilia主題為例，在博客根目錄輸入命令：

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

之后修改博客根目錄下_config.yml文件中主題配置為：theme: yilia。

1 2	hexo clean // clean刪除public文件夾 hexo s -g // 生成網站源文件並啟動測試服務（合並命令）

刷新 http://localhost:4000 是不是發現高端大氣上檔次了一些！至於頭像、title、菜單等的配置，仔細讀一下官方文檔，研究一下配置文件（主要有兩個_config.yml，一個在博客根目錄下，另一個在themes下對應的主題文件夾下），相信這些都難不倒你。

3.2.2 Deployment配置

這個很關鍵，因為博客搭建好了，你不可能讓它一直在本地運行，需要把它托管到GitHub或者Coding上，別人才可以訪問，因此需要配置Deployment。全局配置文件_config.yml中找到Deployment，配置如下代碼：

1 2 3 4 5

deploy: type: git repo: github: [e-mail]:username/username.github.io.git,master coding: [e-mail]:username/username.git,master

我這里同時托管到GitHub和Coding，單獨托管到GitHub也可以，把另外一條配置去掉就好。不過這樣配置提交的時候一般會報錯ERROR Deployer not found: git，不要慌，安裝一個插件即可：

1	cnpm install hexo-deployer-git --save

3.2.3 Hexo部署到Git

1 2	hexo clean hexo d -g // 生成網站源文件並部署到Git（合並命令）

現在到瀏覽器里訪問一下 http://vueker.github.io 驚不驚喜，意不意外！這里是我的測試博客，歡迎訪問正式博客 http://vblog.win/ 查看效果，與我交流。

4. 如何寫博客

4.1 使用命令創建博客

cd到博客根目錄，輸入命令：

1	hexo new 'hello-first-blog'

這樣，Hexo會幫我們在\source\_posts下新建md文件，打開該文件即可使用Markdown語法開始寫博客。

4.2 手動新建md文件

當然，我們也可以在\source\_posts目錄下新建md文件直接進行編輯，需要注意的是md文件的命名一般采用英文，文件內title名為中文即可。推薦作業部落在線編輯器。

5. 后記

Hexo + Github搭建靜態博客的確很方便，上手也不難，而且靜態博客訪問速度快，易於維護，很重要的一點它是完全免費的。目前還可以采用很多第三方系統進行擴展服務，只要你想，幾乎都可以做到。在此記錄下自己搭建博客的點滴，希望可以和廣大coder一起交流，共同進步，歡迎訪問主頁。關於Hexo博客綁定域名及域名解析相關，找個時間會補充上來，不過正常情況域名這種小事應該難不倒作為碼農的我們，博主這里有些精品域名可供大家選擇，都來逛逛！——大傳送門(•‿•)