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 （如未FQ下載過慢可參考地址）下載對應安裝文件，保持默認設置一路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 git@github.com

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 "xxx@qq.com" // 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: git@github.com:username/username.github.io.git,master coding: git@git.coding.net: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博客綁定域名及域名解析相關，找個時間會補充上來，不過正常狀況域名這種小事應該難不倒做爲碼農的咱們，博主這裏有些精品域名可供你們選擇，都來逛逛！——大傳送門(•‿•)