基於Github&Hexo的我的博客搭建過程

你們好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......

• github：https://github.com/Daotin/Web
• 微信公衆號：Web前端之巔
• 博客園：http://www.cnblogs.com/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！

1、我的博客的搭建過程

一、常見我的博客搭建方案

搭建我的博客通常有三種方式：

• WorkPress：通常須要獨立域名（收費），對 MarkDown 不友好
• GitHubPages + Jekell：免費，稍微有點麻煩
• GitHubPages + Hexo：免費，使用簡單，使用者衆多（咱們接下來要介紹的博客的搭建就是基於這種方式。）

二、Hexo簡介

Hexo 是一個基於 Nodejs 的靜態博客網站生成器，做者是來自臺灣的 Tommy Chen

Hexo官網：https://hexo.io/

特色：

• 難以想象的快速 ─ 只要一眨眼靜態文件即生成完成
• 支持 Markdown
• 僅需一道指令便可部署到 GitHub Pages 和 Heroku
• 已移植 Octopress 插件
• 高擴展性、自訂性
• 兼容於 Windows, Mac & Linux

3. 博客搭建正式開始

（1）建立一個github倉庫：Create a new repository.

（2）注意 Respository name 中必定要輸入：你的用戶名.github.io。其餘地方不用修改，而後直接點 」Create repository「 按鈕完成建立便可。

（3）本地環境搭建：

• 安裝Git，步驟省略。
• 安裝Nodejs，步驟省略。
• 安裝Hexo，打開官網：
  ​

是否是很簡潔，只有一條指令！並且咱們只須要使用windows的cmd就能夠下載安裝。

打開cmd，輸入指令：

npm install hexo-cli -g

Hexo安裝完成，是否是超簡單^_^

四、 建立本地博客

在cmd裏面定位到你想保存博客的文件夾（個人位於 G:/Blog/ 目錄下）

用cmd定位到這個文件夾下：

以後，使用如下指令建立本地博客：

hexo init 你的用戶名.github.io  // 建議和建立倉庫時使用同一個，個人是Daotin.github.io

五、 Next主題的安裝

通過上面步驟建立完本地博客以後，基本的博客系統就已經搭建好了，自帶了 landscape 主題。不過該主題不是很符合個人審美，在網上搜索了一下 Hexo 主題，選擇了用戶量較大的 Next。

Next 是 iissnan 在 GitHub 上開源的一個 Hexo 主題，主打簡潔，可是功能齊全，使用者衆多。

」說明：「在 Hexo 中有兩份主要的配置文件，其名稱都是 _config.yml。 其中，一份位於站點根目錄下（即 xxx.github.io 目錄下），主要包含 Hexo 自己的配置；另外一份位於主題目錄下，這份配置有主題做者提供，主要用於配置主題相關的選項。爲了描述方便，在如下說明中，將前者稱爲 「站點配置文件」， 後者稱爲 「主題配置文件」。

看下怎麼安裝Next主題：

cmd 下切換到本地 Daotin.github.io 目錄下，以後輸入以下指令：

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

以後咱們就能夠在 Daotin.github.io\themes 下看到 next 主題文件夾：

六、使用Next主題

首先，複製一份打開本地博客目錄下的 **_config.yml** 文件，命名爲 _config.yml.bak，作爲備份，以防改錯。而後，使用文本編輯器打開本地博客目錄下的 _config.yml 文件，搜索，定位 theme 鍵值，將本來的 theme 的值註釋掉，新建一個新的 theme 值爲 next.

theme: next

注意：該配置文件中的鍵值之間必定要有空格，不然輕則沒有做用，重則報錯，沒法啓動。

七、 站點配置文件基本項修改

這裏先看看最基礎的配置，也就是必需要改動的：

title: xxx  # 博客的名字，也稱站點名稱
author: xxx # 做者名字
description: xxx # 對站點的描述，搜索引擎會抓取，能夠自定義（這個仍是加上比較好）
language: zh-Hans # 語言 簡體中文
theme: next  # 配置主題
deploy: # 部署相關配置
    type: git # 使用 Git 提交
    repo: https://github.com/Daotin/Daotin.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 # 就是存放博客的倉庫地址

下面是我本身的文件詳細配置：**Daotin.github.io/_config.yml文件**

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Daotin's Home
subtitle: 說好的幸福呢
description: 天天進步一點點
author: Daotin
language: zh-Hans
timezone:

# 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
  auto_detect: false
  tab_replace:
  
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
# 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
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
#theme: landscape

# 頭像
# 注意：是 xxx.github.io/source 下的開始的相對路徑，若是 source 文件夾下面沒有 uploads 文件夾，那麼新建一個。考慮到會博客中用不少圖片，在 uploads 文件夾下請分好類，避免混亂
avatar: /uploads/touxiang/touxiang.jpg

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/Daotin/Daotin.github.io.git

以上基本本地博客就已經搭建好了，咱們能夠先看看效果：

在 cmd 下定位到 xxx.github.io 目錄，輸入命令：

$ hexo s // hexo server

啓動成功能夠看到提示，按照提示用瀏覽器打開提示網址 http://localhost:4000/ ，便可看到你的本地博客了，裏面有一篇系統自帶的 Hello World 文章.

八、 Next 配置

固然，最權威的是看官方的說明文檔，我在這裏提供一個示例，供你們參考，你能夠直接拷過去稍微改動一點就行。

**Next 配置就是上面所說的」主題配置文件「，位於 xxx.github.io/themes/next 目錄下，文件名爲 _config.yml。老規矩，先備份一份 」_config.yml.bak「，以防改錯。**

以個人博客爲例，闡述一下須要配置的地方：

# Set default keywords (Use a comma to separate)
# 設置關鍵字
keywords: "Android, DIY"

# 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://Daotin.github.io)左側那一列
menu: 
  #home: /
  home: / || home
  archives: /archives/ || archive
  #archives: /archives
  categories: /categories/ || th
  #categories: /categories
  tags: /tags/ || tags
  #tags: /tags
  about: /about/ || user
  #about: /about
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

# 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/pay/wechatpay.jpg
# 支付寶收款二維碼
alipay: /uploads/pay/alipay.jpg

# 訂閱微信公衆號
# Wechat Subscriber
#wechat_subscriber:
#  enabled: true
#  qcode: /uploads/wechat-qcode.jpg
#  description: 歡迎您掃一掃上面的微信公衆號，訂閱個人博客！

（PS：在設置菜單這一項，就是個人博客左側那一列就使用默認的設置就能夠了，以前改爲了註釋的部分，致使菜單欄的圖標都變成了問號，謝謝帥張星球的「少年」提醒通過改正，以上。）

9. 建立分類頁面

（1）打開命令行，定位到 Daotin.github.io 目錄；
（2）新建一個頁面，命名爲 categories；

hexo new page categories

（3）根據提示找到新建的 index.md 文件，編輯；

---

title: 分類
date: 2017-10-30 20:45:01
type: "categories" # 將頁面的類型設置爲 categories，主題將自動爲這個頁面顯示全部分類
comments: false    # 若是有啓用多說 或者 Disqus 評論，默認頁面也會帶有評論。須要關閉的話，設置爲 false

---

10. 建立標籤雲頁面

以下圖：

（1）打開命令行，定位到 Daotin.github.io 目錄；
（2）新建一個頁面，命名爲 tags；

hexo new page tags

（3）根據提示找到新建的 index.md 文件，編輯；

---

title: All tags 
date: 2016-04-27 08:56:40
type: "tags"    # 將頁面的類型設置爲 tags，主題將自動爲這個頁面顯示標籤雲
comments: false # 若是有啓用多說 或者 Disqus 評論，默認頁面也會帶有評論。須要關閉的話，設置爲 false

---

注意事項

• 格式再次強調，設置項的鍵值之間必定要有空格；
• 菜單上顯示 」分類「 等欄目。若是須要在菜單上顯示 」分類「 和 」標籤「 等，那麼記得打開註釋，或者添加該條目；
• 關於第三方服務的 」duoshuo_info「。在配置該項的時候，user_id 鍵對應的值不要修改，也就是保持爲 0，具體緣由我不清楚，若是修改了該值，那麼你的博客會變得一片空白；
• 分類和標籤雲頁面。首先，要使用」 hexo new page 「命令生成這兩個頁面，不然報404。其次，這兩個頁面是主題自動維護的，只要咱們的文章按照規矩來就好了，下面會詳細說明。

二. 寫博客與發佈

通過上述步驟，本地博客和主題設置已經完成，那麼接下來就是寫博客了。

你的博客文件須要存放到 **Daotin.github.io/source/_posts 文件夾**中，在該文件夾下面你能夠按照你的博客分類創建一系列的文件夾來管理博客原文件。

操做步驟：

一、用 Markdown 寫文章

無論你用什麼編輯 Markdown 文件，最後生成的 md 文件放到 Daotin.github.io/source/_posts 文件夾或其子文件夾中便可，如：

或者使用指令：

hexo new "xxx"  // xxx 爲Markdown文件名，如 xxx.md

/source/_posts文件夾內除了xxx.md文件還有一個同名的文件夾，之後咱們xxx博文須要插入的圖片就放到對應的同名文件夾下，方便添加圖片與歸類。

md文章的內容格式以下：

---

title: 我的博客搭建詳解   # 這是標題
categories:            # 這裏寫的分類會自動聚集到 categories 頁面上，分類能夠多級
- 實用技術               # 一級分類
- 我的博客               # 二級分類 
tags:                 # 這裏寫的標籤會自動聚集到 tags 頁面上
- 實用               # 可配置多個標籤，注意格式
- 我的博客

#  下面寫正文部分。。。

---

注意：分類和標籤是自動維護的，關鍵是的文章要按照規定的格式寫，如上格式，能夠參考。
說明：Next 主題會自動生成目錄，這也省了很多事。

二、本地運行測試

打開命令行定位到 xxx.github.io 目錄，輸入命令：

hexo s // hexo server  啓動服務預覽

三、在瀏覽器查看效果

在瀏覽器中輸入 http://localhost:4000 訪問本地博客，看看效果吧。

四、安裝自動部署發佈工具

這裏用到了 hexo-deployer-git，使用以下命令安裝：

npm install hexo-deployer-git --save

五、發佈到 GitHub Pages

確認在本地上顯示無誤以後，就能夠將 md 轉爲 靜態網頁文件，而後發佈到 GitHub Pages 上去了。

hexo clean #清除緩存 網頁正常狀況下能夠忽略此條命令
hexo g     #生成靜態網頁
hexo d     #開始部署

也能夠一次性執行
hexo clean && hexo g && hexo d

若是是第一次部署，終端會提示要求輸入用戶名和密碼。等命令執行完以後，過幾分鐘打開 http://Daotin.github.io 便可看到你的我的博客了。之後要發佈新文章，執行上述命令便可。

注意事項

• Git 的 bug
  有個老版本的 Git 有個 bug，上傳的時候會提示非法域名這類的，要解決該問題，最簡單的方法就是更新 Git，用最新版的 Git；

• 關於頁面空白
  主題配置文件中的 」duoshuo_info「 下的 」user_id「 若是是非 」0「，會致使該問題

• 特殊字符致使報錯
  如添加新博客的時候報錯了，並且提示的是 js 中某些地方報錯，那麼極可能是 md 文件中存在特殊字符（不是正常顯示的字符，不是說特殊符號，能正常顯示的都不是這裏說的特殊字符），把特殊字符刪除便可

• 使用hexo，若是換了電腦怎麼更新博客？
  這個問題相信你們都關心，知乎上有比較詳細的解答。我說一下個人解決方法吧！
  ​
  在新電腦上配置好本地博客環境，而後，直接拷貝原電腦上的 xxx.github.io 文件夾到新電腦上便可。
  將 xxx.github.io 文件夾同步到網上(如：Dropbox 等)，其餘任何電腦（配置好了本地博客環境）要用的時候，從網上同步下來便可。

3、參考資料

免費我的博客搭建詳解