一、在 Github 創建 Git 倉庫
- 在 Github 新建一個倉庫，倉庫名一定要輸入：username.github.io 。其他地方不用修改，然后直接點 ”Create repository“ 按鈕完成創建即可。
二、安裝Git
- 根據你的系統版本安裝 32 位或者 64 位的 Git，可以直接上官網下載安裝
三、安裝Nodejs
這里推薦先安裝 nvm（相當于 Nodejs 的版本管理工具），然后用 nvm 安裝 Nodejs，因為后面生成 博客靜態頁面 的時候需要用到 nvm，而安裝 nvm 需要卸載電腦之前裝過的 Nodejs 。
1.安裝 nvm
- 去 nvm 的 Github 官網 下載 nvm_setup.zip ，解壓后雙擊 .exe 安裝 nvm 。
2.安裝 Nodejs
-
cmd 命令行 中輸入
nvm install 6.10.2 64
這就安裝完了nodejs。
- 設置使用 6.10.2 版本的 nodejs 。
nvm use 6.10.2
三、安裝Hexo
- 安裝 Hexo 很簡單，輸入
npm install hexo-cli -g
四、創建本地博客
- 1、打開命令行，定位到你想要放置本地博客的目錄。如 E:\Blog
-
2、輸入命令
初始化你的本地博客倉庫
hexo init 你的用戶名.github.io // 建議和創建倉庫時使用同一個
五、Next 主題安裝
經過上面步驟創建完本地博客之后，基本的博客系統就已經搭建好了，自帶了 landscape 主題。不過該主題不是很漂亮，在網上搜索了一下 Hexo 主題，選擇了用戶量較大的 Next 。
說明：在 Hexo 中有兩份主要的配置文件，其名稱都是 _config.yml 。 其中，一份位于站點根目錄下（即 xxx.github.io 目錄下），主要包含 Hexo 本身的配置；另一份位于主題目錄下（位于 xxx.github.io/themes/next 目錄下），這份配置有主題作者提供，主要用于配置主題相關的選項。為了描述方便，在以下說明中，將前者稱為 “站點配置文件”， 后者稱為 “主題配置文件”。
1、切換到上面生成的本地博客目錄 xxx.github.io
2、安裝 Next 主題
git clone https://github.com/iissnan/hexo-theme-next themes/next-
3、使用 Next 主題
首先，復制一份打開本地博客目錄下的 _config.yml 文件（站點配置文件），命名為_config_bak.yml，做為備份，以防改錯。然后，使用文本編輯器打開本地博客目錄下的 _config.yml 文件，搜索，定位 theme 鍵值，將 theme 的值修改為 next。theme: next //剛剛安裝的主題名稱 注意：該配置文件中的鍵值之間一定要有空格，否則輕則沒有作用，重則報錯，無法啟動。 -
4、站點配置文件基本項修改
關于 Hexo 配置的詳細信息請前往 Hexo的官方文檔 。
這里先看看最基礎的配置，也就是必須要改動的：
title: xxx # 博客的名字，也稱站點名稱
author: xxx # 作者名字
description: xxx # 對站點的描述，搜索引擎會抓取，可以自定義（這個還是加上比較好）language: zh-Hans # 語言 簡體中文
theme: next # 配置主題
deploy: # 部署相關配置
type: git # 使用 Git 提交
repo: https://github.com/xxx/xxx.github.io.git # 就是存放博客的倉庫地址
上述配置是必須要修改的，再次強調，鍵值之間一定要 ”**加空格**“，請在文本編輯器中搜索定位后再修改。
站點配置文件詳細配置示例
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site 這里的配置，哪項配置反映在哪里，可以參考我的博客
title: xxx # 博客的名字，也稱站點名稱
subtitle: xxx # 副標題
description: xxx # 對站點的描述，搜索引擎會抓取，可以自定義
author: xxx # 作者名字
language: zh-Hans # 語言 簡體中文
timezone: # 用默認的即可
# URL
# 這項暫時不需要配置，綁定域名后，要創建 sitemap.xml 時再配置該項
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: # http://xxx.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
auto_detect: false
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: MMM D YYYY
time_format: H:mm:ss
# Pagination
# 每頁顯示文章數，可以自定義
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Extensions
# 配置站點所用主題和插件，這里將默認主題注釋，修改為 next
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
#theme: landscape
# 頭像
# 注意：是 xxx.github.io/source 下的開始的相對路徑，如果 source 文件夾下面沒有 uploads 文件夾，那么新建一個。考慮到會博客中用很多圖片，在 uploads 文件夾下請分好類，避免混亂
avatar: /uploads/images/avatar.jpg
# Deployment
# 本地博客部署到 github 上要配置這里
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git # 使用 Git 提交
repository: https://github.com/xxx/xxx.github.io.git # 就是存放博客的倉庫地址
PS：
是不是有點迫不及待想看看效果了，那好，先在本地跑起來試試，步驟如下：
- 打開命令行，定位到
xxx.github.io目錄 - 輸入命令：
hexo s # 相當于 hexo server #啟動服務預覽
啟動成功可以看到提示，按照提示用瀏覽器打開提示網址，即可看到你的
本地博客了，里面有一篇 Hello World
hexo s 命令成功提示，本地博客搭建完成 。在瀏覽器輸入 http://localhost:4000/ 就可訪問本地的博客了，真棒~
六、Next 主題個性化
個性化 NEXT 主題具體可以參考 官方文檔。這里挑選一些屬性進行更改，僅供參考。
Next 主題配置文件配置詳解
Next 主題配置文件就是位于 xxx.github.io/themes/next 目錄下，文件名為 _config.yml。老規矩，先備份一份 ”_config_bak.yml“，以防改錯。
以我的博客為例，闡述一下需要配置的地方：
# Set default keywords (Use a comma to separate)
# 設置關鍵字
keywords: "Android, 創新"
# Specify the date when the site was setup
# 設置博客開始時間
since: 2017
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
# 設置菜單，就是[我的博客](http://innovatorCL.github.io)左側那一列
menu:
home: / # 在菜單上顯示首頁
archives: /archives # 在菜單上顯示 全部
categories: /categories # 在菜單上顯示 分類
tags: /tags # 在菜單上顯示 標簽
about: /about # 在菜單上顯示 關于
#commonweal: /404.html
# Schemes
# 設置風格
#scheme: Muse
#scheme: Mist
scheme: Pisces # 我的就是這個雙欄風格
# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: true # 設置是否顯示閱讀全文，文章較多的話，有必要設置為 true
length: 150
# 一些第三方服務設置，這里只提一下”多說“，其他的請參考官方介紹
# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
ua_enable: true
admin_enable: true
user_id: 0 # **這里不要動，千萬別動**
admin_nickname: DIY-green
# Code Highlight theme
# Available value:
# normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
#highlight_theme: normal
# 代碼高亮主題
highlight_theme: night eighties
# 打賞配置
# 打賞說明文本
reward_comment: 堅持原創技術分享，您的支持將鼓勵我繼續創作！
# 微信收款二維碼
wechatpay: /uploads/images/wechat-reward-image.png
# 支付寶收款二維碼
alipay: /uploads/images/alipay-reward-image.png
# 友情鏈接
links_title: Links
links:
DIY-green簡書: http://www.lxweimin.com/users/0ad0a0afc409/latest_articles
# 訂閱微信公眾號
# Wechat Subscriber
#wechat_subscriber:
# enabled: true
# qcode: /uploads/wechat-qcode.jpg
# description: 歡迎您掃一掃上面的微信公眾號，訂閱我的博客！
-
1、創建「分類」頁面
由于也是剛剛創建「分類」菜單，所以里面內容不多，暫且參考一下吧：
操作步驟：
-
打開命令行，定位到
xxx.github.io目錄，輸入hexo new page categories或$ hexo new page categories這樣會在
source目錄下新建對應的目錄，找到目錄的index.md文件，打開編輯：
---
title: 博客分類
date: 2017-11-04 11:55:57
type: "categories" #將頁面的類型設置為 categories，主題將自動為這個頁面顯示所有分類
comments: true #如果有啟用多說 或者 Disqus 評論，默認頁面也會帶有評論。需要關閉的話，設置為 false
---
-
2、創建「標簽」頁面
先看看我的效果：
「標簽」菜單
操作步驟：
-
打開命令行，定位到
xxx.github.io目錄，輸入hexo new page "tags"或$ hexo new page "tags"這樣會在
source目錄下新建對應的目錄，找到目錄的index.md文件，打開編輯：
---
title: 標簽
date: 2017-11-04 11:58:48
type: "tags" #將頁面的類型設置為 tags，主題將自動為這個頁面顯示標簽云
comments: true #如果有啟用多說 或者 Disqus 評論，默認頁面也會帶有評論。需要關閉的話，設置為 false
---
注意事項：
格式
再次強調，設置項的鍵值之間一定要有空格菜單上顯示 「分類」 等欄目
如果需要在菜單上顯示「分類」（categories） 和 「標簽」（tags）等，那么記得打開注釋，或者添加該條目關于第三方服務的
duoshuo_info
在配置該項的時候，user_id鍵對應的值不要修改，也就是保持為 0分類和標簽頁面
首先，要使用hexo new page命令生成這兩個頁面，否則報404。
其次，這兩個頁面是主題自動維護的，只要我們的文章按照規矩來就行了。
七、寫博客與發布
經過上述步驟，本地博客和主題設置已經完成，那么接下來就是寫博客了。
你的博客文件需要存放到 xxx.github.io/source/_posts 文件夾中，在該文件夾下面可以按照你的博客分類建立一系列的文件夾來管理博客原文件。
操作步驟：
-
1、用 Markdown 寫文章
將用 MarkDown 編輯器生成的 md 文件 放到xxx.github.io/source/_posts文件夾或其子文件夾中即可，如：
---
title: 個人博客搭建詳解（Windows和Mac通用版）
categories: #這里寫的分類會自動匯集到 categories 頁面上，分類可以多級，Hexo不支持指定多個同級分類，所以個人博客將是實用技術的二級分類
- 實用技術 # 一級分類
- 個人博客 # 二級分類
tags: #這里寫的標簽會自動匯集到 tags 頁面上
- 實用 #可配置多個標簽，注意格式
- 個人博客
---
>Hexo 是一個基于nodejs 的靜態博客網站生成器，作者是來自臺灣的 Tommy Chen，基于這個可以很方便地將個人源代碼和靜態網頁區分，非常贊的框架。
>第一篇自己寫的博客，好有成就感~~~
注意：分類和標簽是自動維護的，關鍵是的文章要按照規定的格式寫，如上格式，可以參考。
說明：Next 主題會自動生成目錄，這也省了不少事。
-
2、在本地運行測試
打開命令行定位到
xxx.github.io目錄，輸入命令：
hexo s 或 $ hexo s# 這是簡寫，相當于hexo server# 啟動服務預覽 3、在瀏覽器查看效果
在瀏覽器中輸入 http://localhost:4000 訪問本地博客，欣賞一下自己做的博客吧4、安裝自動部署發布工具
為了自動部署在 Github，在Github 動態管理博客，這里用到了 hexo-deployer-git，使用如下命令安裝：
npm install hexo-deployer-git --save或$ npm install hexo-deployer-git --save-
5、發布到 GitHubPages
確認在本地上顯示無誤之后，就可以將 md 文件 轉為 靜態網頁文件，然后發布到GitHubPages上去了。
hexo clean #清除緩存 網頁正常情況下可以忽略此條命令
hexo g #生成靜態網頁
hexo d #開始部署
也可以一次性執行hexo clean && hexo g && hexo d如果是第一次部署，終端會提示要求輸入用戶名和密碼。等命令執行完之后，過幾分鐘打開 http://xxx.github.io 即可看到你的個人博客了。以后要發布新文章，執行上述命令即可。
注意事項：
Git 的 bug有個老版本的 Git 有個 bug，上傳的時候會提示非法域名這類的，要解決該問題，最簡單的方法就是更新 Git，用最新版的 Git
關于頁面空白主題配置文件中的
duoshuo_info下的user_id如果是非 0，會導致該問題特殊字符導致報錯如添加新博客的時候報錯了，而且提示的是
js中某些地方報錯，那么很可能是 md 文件中存在特殊字符（不是正常顯示的字符，不是說特殊符號，能正常顯示的都不是這里說的特殊字符），把特殊字符刪除即可Hexo 命令的常見報錯可以參考這篇文章：HEXO+Github,搭建屬于自己的博客
-
使用 HEXO，如果換了電腦怎么更新博客？
這個問題相信大家都關心，知乎上有比較詳細的解答。這里也有其他兩個方案：
方案一：
在新電腦上配置好本地博客環境，然后，直接拷貝原電腦上的 xxx.github.io 文件夾到新電腦上即可。方案二：
將 xxx.github.io 文件夾同步到網上(如：Dropbox 等)，其他任何電腦（配置好了本地博客環境）要用的時候，從網上同步下來即可。
八、替換自己的域名
如果你能做到上面一步，恭喜你已經差不多可以畢業了。本著極客的精神，自己的博客域名老是寄人籬下，總不是個滋味。所以推薦同學們去阿里云買一個自己的域名，將這個域名作為自己博客的域名，是不是瞬間變得高大上了，儼然一種極客的風范。
1、購買域名
進入阿里云注冊域名頁面，根據自己名字注冊一個標志著自己的個人域名吧！2、修改站點配置文件 _config.yml
我們的 XXXX.github.io 域名重定向了，需要修改配置文件中的 url鍵值，不然訪問你的域名的時候會被指到奇怪的 yoursite.com網站。
-
3、域名解析
我注冊的域名是
innovatorww.com，它的含義是：歡迎世界上所有的創新者。我們希望在訪問這個域名時能自動進入 Github Pages，進而訪問我們的博客。所以我們要在萬網建立一個 CNAME紀錄 來幫我們做一個域名跳轉，其實就是個重定向的過程：
innovatorww.com -> innovatorCL.github.io，www.innovatorww.com ->innovatorCL.github.io。由于 Github Pages 只允許最多一個域名重定向到自己的地址，所以需要在你的
XXXX.github.io倉庫的設置中添加你剛剛注冊的個人域名。看圖：
添加方法可以參考這里。
設置完 Github 倉庫的重定向域名后，我們還要在阿里云添加域名解析。
操作步驟：
- 記錄類型選擇 CNAME
- 主機記錄填 www
- 解析線路選擇默認
- 記錄值填
yourname.github.io
- 記錄值填
- TTL 值為 10 分鐘
- 再添加一個解析，記錄類型為 A
- 主機記錄填 @
- 解析線路選擇默認
-
記錄值填你 GitHub 倉庫的 ip 地址（在cmd中ping：）
ping yourname.github.io
-
注意，One More Thing：
因** Github Pages** 是有限制的，只允許一個域名跳轉過來，而且這個域名必須聲明在 CNAME文件中。所以，我們需要添加一個 CNAME
文件到項目的 master 中才行。但是對于 Hexo 3有一個坑，Hexo 3每次生成靜態網頁會完全覆蓋之前的內容。如果我們直接創建一個新文件CNAME，填好域名，然后部署，會發現在下一次部署后這個文件就消失了，因為 HEXO 并不會自動生成 CNAME 文件，所以在部署時被覆蓋刪除了。
所以這里推薦：使用這個 CNAME 工具 hexo-generator-cname，它會自動在public 里生成一個 CNAME 文件。
添加完這一步后，我們就用命令行定位到 xxx.github.io目錄，輸入： hexo clean && hexo g && hexo d。這時你訪問你自己注冊的域名就會看到你的博客了，哈哈哈哈，是不是很想歡呼，做到這里恭喜你已經完全搭建好了你的個人博客，接下來就用內容讓你的博客變得多姿多彩吧！
