基於Hexo+GitHub Pages+獨立域名 搭建博客詳細教程

## 1、摘要


這是一篇利用GitHub Pages以及Hexo以及本身的獨立域名來搭建本身的我的博客。

本文參考多篇文章（具體參看文章最後）並記錄了過程當中遇到的問題以及解決方案！

此博客用於之後須要備用，併爲其餘人提供指導。

<!-- more -->


## 2、系統環境配置
咱們須要如下環境：
   Windows 10 
   Node.js
   Git
### 安裝node.js
   [下載Node.js](https://nodejs.org/download/)
在 Windows 環境下安裝 Node.js 很是簡單，僅須到官網下載安裝文件並執行便可完成安裝。
### 安裝Git
   [下載Git](http://git-scm.com/download/)
一樣一路next便可！

  · 安裝教程： [如何在Windows下安裝Git](http://jingyan.baidu.com/article/90895e0fb3495f64ed6b0b50.html)

## 3、安裝Hexo


Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其餘渲染引擎）解析文章，在幾秒內，便可利用靚麗的主題生成靜態網頁。

在任意盤新建hexo文件夾並右鍵，選擇Bit Bash Here，如圖：

   
     
而後輸入安裝hexo命令
     
    $ npm install -g hexo-cli


接下來咱們對hexo 進行初始化

    $ hexo init
而後執行如下命令，系依賴包統會自動根據package.json文件中dependence的排位置安裝全部的
    $ npm install
而後生成部署文件，啓動本地服務

    $ hexo g #或者hexo generate
    $ hexo s #或者hexo server

以後再http：//localhost：4000/ 查看

hexo的幾個經常使用命令

    hexo generate (hexo g) 生成靜態文件，會在當前目錄下生成一個新的叫作public的文件夾
    hexo server (hexo s) 啓動本地web服務，用於博客的預覽
    hexo deploy (hexo d) 部署博客到遠端服務器
    hexo new "postName" #新建文章
    hexo new page "pageName" #新建頁面

能夠簡寫爲

    $ hexo n == hexo new
    $ hexo g == hexo generate
    $ hexo s == hexo server
    $ hexo d == hexo deploy

其實就是單詞的首字母

之後新建文章或者修改，能夠先在本地預覽以後進行部署




## 4、GitHub Pages設置


### GitHub的優勢
GitHub是基於git實現的代碼託管。git多是目前最好用的版本控制系統了，很是受歡迎。 

GitHub能夠無償使用，而且快速穩定。 

Github上面的世界很精彩，用久了你的眼界會開闊不少。

### 什麼是GitHub Pages？
Github Pages能夠被認爲是用戶編寫的、託管在github上的靜態網頁。GitHub Pages 本用於介紹託管在GitHub的項目，不過，因爲他的空間免費穩定，用來作搭建一個博客再好不過了。

### 爲何使用GitHub Pages
能夠綁定你的域名(但只能綁定一個)。 

簡單快捷，使用Github Pages能夠爲你提供一個免費的服務器，免去了本身搭建服務器和寫數據庫的麻煩.



## 5、相關操做



### 註冊GitHub帳號

在建立博客以前，固然必須有GitHub的賬號，該賬號將用來建立項目，默認的域名username.github.com/projectName中的username也要用到這個賬號。（請記住username，以後會屢次用到）

注意：下面涉及到的一些命令凡是更用戶名和項目名有關的一概會用這裏的username和projectName代替，注意替換 

訪問：[http://www.github.com/](http://www.github.com/)，註冊你的username和郵箱，郵箱十分重要，GitHub上不少通知都是經過郵箱的。好比你的主頁上傳並構建成功會經過郵箱通知，更重要的是，若是構建失敗的話也會在郵件中說明緣由。


### 建立項目倉庫


在建立博客以前，還須要用已有的賬號建立一個項目，上面那個連接的projectName將是這裏即將建立的項目名稱。

在Git中，項目被稱爲倉庫(Repository)，倉庫顧名思義，固然能夠包含代碼或者非代碼。未來咱們的網頁或者模板實際上都是保存在這個倉庫中的。

登陸後，訪問[https://github.com/new](https://github.com/new)，建立倉庫以下圖：

   

每一個賬號只能有一個倉庫來存放我的主頁，並且倉庫的名字必須是username/username.github.io，這是特殊的命名約定。你能夠經過http://username.github.io 來訪問你的我的主頁。

建立了倉庫後，咱們就須要管理它，不管是管理本地倉庫仍是遠程倉庫都須要Git客戶端；Git客戶端實際上十分強大，它自己就能夠offline的建立本地倉庫，而本地倉庫和遠程倉庫之間的同步也是經過Git客戶端完成的。


### 配置SSH


上傳文件須要配置ssh key，否則沒法上傳。 
首先先檢查一下本地是否已經存在ssh key,在Git Bash輸入如下指令（任意位置點擊鼠標右鍵），檢查是否已經存在了SSH keys。

    $ ls -al ~/.ssh

若是不存在就不要緊，存在就刪除其中的全部文件

  

設置你的那麼和email（若是你安裝git時已經有了這步操做就跳過，name能夠隨意，但最好設置成你的github的name防止遺忘。郵箱與你的github郵箱沒什麼關係，可是最好寫爲同一個，好記住）

    $ git config --global user.name "name"
    $ git config --global user.email "<your email>"


### 生成ssh密鑰


輸入如下指令（郵箱就是你註冊Github時候的郵箱）後，回車：
    $ ssh-keygen -t rsa -C "XXXXX@qq.com"

一路回車就能夠了，若是設置了密碼就記住。

這一步在~/.ssh/下生成了兩個文件id_rsa 和 id_rsa.pub


### 獲取key


    $ cat ~/.ssh/id_rsa.pub

而後拷貝key（key是以ssr（應該是這個開頭的）開頭 你的郵箱結尾的一長串字符。


### 在GitHub上添加SSH密鑰


在[https://github.com/settings/keys](https://github.com/settings/keys)下 add new ssh key 
  

title可隨意填寫，key就是咱們拷貝的key

接下來測試一下是否配置正確。

輸入一下命令：

    $ ssh git@github.com

成功後大概會出現一下內容：（可能會有部分不一致）

    The authenticity of host 'github.com (192.30.252.128)' can't be established.
    RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
    Are you sure you want to continue connecting (yes/no)? yes
    Warning: Permanently added 'github.com,192.30.252.128' (RSA) to the list of known hosts.
    Hi git-xuhao! You've successfully authenticated, but GitHub does not provide shell access.
    Connection to github.com closed.




##  6、部署到GitHub


### 配置_config.yml

編輯 你所創建的hexo文件夾中_config.yml（用記事本打開）修改deployment部分。

    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    # ssh://git@github.com/Asuna520/Asuna520.github.io
    deploy:
      type: git
      repo: ssh://git@github.com/Asuna520/Asuna520.github.io
      branch: master

自行替換成你的GitHub的名稱。注意：每一個：後面必須有一個空格！！！


### 安裝Git包


    $ npm install hexo-deployer-git --save


### 部署到GitHub上


    $ hexo deploy

如今咱們能夠經過訪問 [http://git-xuhao.github.io/](http://git-xuhao.github.io/) 來訪問咱們本身的博客啦,能夠看到咱們的博客已成功搭建，接下來就是一些主題的優化和配置呢。

    ### 配置文件的相關說明

    # Hexo Configuration
    ## Docs: http://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/
    
    # Site  這下面的幾項配置都很簡單，你看個人博客就知道分別是什麼意思
    title: blog name    #博客名
    subtitle: Goals determine what you are going to be  #副標題
    description: Goals determine what you are going to be #用於搜索，沒有直觀表現
    author: huangjunhui #做者
    language: zh-CN #語言
    timezone:   #時區，此處不填寫，hexo會以你目前電腦的時區爲默認值

    # URL   暫不配置，使用默認值
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: http://yoursite.com
    root: /
    permalink: :year/:month/:day/:title/
    permalink_defaults:

    # Directory     暫不配置，使用默認值
    source_dir: source
    public_dir: public
    tag_dir: tags
    archive_dir: archives
    category_dir: categories
    code_dir: downloads/code
    i18n_dir: :lang
    skip_render:

    # Writing   文章佈局等，使用默認值
    new_post_name: :title.md # File name of new posts
    default_layout: post
    titlecase: false # Transform title into titlecase
    external_link: true # Open external links in new tab
    filename_case: 0
    render_drafts: false
    post_asset_folder: false
    relative_link: false
    future: true
    highlight:
      enable: true
      line_number: true
      tab_replace:

    # Category & Tag    暫不配置，使用默認值
    default_category: uncategorized
    category_map:
    tag_map:

    # Date / Time format    時間格式，使用默認值
    ## Hexo uses Moment.js to parse and display date
    ## You can customize the date format as defined in
    ## http://momentjs.com/docs/#/displaying/format/
    date_format: YYYY-MM-DD
    time_format: HH:mm:ss

    # Pagination    
    ## Set per_page to 0 to disable pagination
    per_page: 10    #每頁顯示的文章數，0表示不分頁
    pagination_dir: page
    
    # Extensions    插件配置，暫時不配置
    ## Plugins: http://hexo.io/plugins/
    ## Themes: http://hexo.io/themes/
    plugins:
    - hexo-generator-feed
    theme: light    #使用的主題

    feed:   #以後配置rss會用，此處先不配置這個
      type: atom
      path: atom.xml
      limit: 20  

    # Deployment    用於部署到github，以前已經配置過
    ## Docs: http://hexo.io/docs/deployment.html

    deploy:
      type: git
      repo: ssh://git@github.com/Asuna520/Asuna520.github.io
      branch: master





## 7、如何添加一篇文章

新建一篇博文可經過如下的命令

    $ hexo new "name"

其中name爲博文的名字，創建完成以後，能夠在./source/_posts文件夾下發現咱們剛剛創建的 name.md文件。使用你熟悉的編輯器打開，即可以進行博文的撰寫。博文支持MarkDown語法的編寫，下面是一個示例文件的內容（推薦使用MarkDown）（使用MarkDown時須要安裝[awesomium_v1.6.6_sdk_win](http://markdownpad.com/download/awesomium_v1.6.6_sdk_win.exe
))
MarkDown界面以下：
  


    ---
    title: name 
    date: 2016-04-06 10:34:21
    permalink: （url中顯示的標題）
    tags: 
    - 開始
    - 日誌
    categories: 
    - 日誌
    ---
    Hello world，Test！！

博文寫好以後，在每次部署前，須要將博客生成靜態文件

    $ hexo g

生成以後進行部署

    $ hexo d

而後打開咱們的博客 http://Asuna520.github.io/ 已經能夠看到剛剛新建的博文。




## 8、主題相關

你會發現你預覽的博客會很大衆化，你想讓你的博客不同凡響？吸引更多的關注？

能夠參考知乎的主題推薦：

[有哪些好看Hexo主題](https://www.zhihu.com/question/24422335)

我使用的是第一個next主題，具體相關操做，更多關於主題的設置請自行查閱相關文檔，固然若是你認識我，也能夠聯繫我進行詢問。




## 9、專屬域名的綁定

這時候，你會發現你的域名不怎麼好使用，你想要一個屬於本身的獨特的域名。

恩，首先，你須要去買一個域名。（**推薦阿里雲 .xyz的域名 第一年只須要6元，並且.xyz頗有潛力，谷歌母公司也是使用的.xyz域名哦**）

進入阿里雲,選擇解析

 

按照圖片所示添加解析，其中ip地址，以及其餘相關內容所有換成本身的

 

ip地址 能夠經過爲192.30.252.154   和192.30.252.153這兩個固定ip！
**（圖片因爲本身一開始使用時，沒注意，因此ip錯了。。。懶得改了）**

 

最後，在source中添加文件  CHAME  不帶有任何後綴！！！

用記事本打開以後，加入你本身的域名xxxxx.xyz 不須要www也不須要http的前綴！！！！

從新部署一下！

恭喜，過一下子就能夠經過你的域名看到你的博客啦~~~~



# 10、總結 #



大體過程基本上就是這樣了，其中個別步驟，或者部分細節性問題沒有贅述，有問題請自行百度或者聯繫我~~~

做爲一個程序員必定要有本身獨立解決問題的能力哦~~~記住Google與你同在~~~~

加油！！！




本文主要部分來自於：[基於Hexo+GitHub Pages 搭建我的博客教程](http://xuhaoblog.com/hexo-github-pages.html)