最近搞了一個線上文檔，參考了vuejs.orgvue中文網(wǎng)站的風(fēng)格，才知道他們用hexo搭建的，之前我用Jekyll搭的 ，要配置很多環(huán)境，感覺不如hexo好用，于是就有了這個新博客。整個博客通過hexo在本地寫博客并生成博客頁面，然后由hexo-deployer-git插件幫我們把博客內(nèi)容推送到git倉庫，由git page 來托管這些靜態(tài)文件。廢話不多說，我們直接開始搭建過程。

1 準(zhǔn)備工作

win7用戶，按順序搞就完了，假如因為系統(tǒng)環(huán)境或者node版本什么的導(dǎo)致下列哪個安裝失敗了，請自行百度或者訪問官網(wǎng)解決，我們這里認(rèn)為都是直接成功的。

• 安裝node環(huán)境;
  我記得很久之前在簡書上寫過一篇，寫的有點啰嗦，你只要安裝一下就行,版本管理啥的，直接跳過。傳送
• 一個github賬號;
  沒有趕緊去注冊 要是搞不定，點我
• 安裝hexo;

$ npm install -g hexo-cli

2 創(chuàng)建git倉庫

打開你的git倉庫，新建一個倉庫，注意倉庫名稱一定是<font color=#FF0000> username.github.io</font> 其中username是你的github用戶名。如圖所示 [圖片上傳失敗...(image-1151f4-1586843983975)] 這是github page的托管站點創(chuàng)建規(guī)則。不信？你可以不按這個規(guī)則試一試，這是官方說明。

這樣，未來我們博客搭建完成并托管在github page之后，就可以通過username.github.io來訪問。當(dāng)然你要是覺得這個域名有點low，不符合你高大威猛的形象。別擔(dān)心，github也是充分體諒有自己個性域名的小伙伴的。

2.1 綁定自定義域名

在域名控制臺，例如阿里云的域名管理界面，找到域名解析設(shè)置，分別設(shè)置A(將域名指向一個IPV4地址)和CNAME(將域名指向另一個域名)類型。

img3.png

這里有幾點需要額外說明一下：

1. A類型解析 是指向一個ipv4地址的，也就是說需要我們github page的ip地址，我們需要先ping 一下得到這個地址。

   
   
   img2.png

2. CNAME類型解析，需要我們在github項目根目錄存在一個CNAME文件(無后綴)，里面填寫你綁定的這個新域名(我們在后面hexo博客搭建時候來配置)。配置完成之后，我們可以看到在項目的settings中 github pages 的 自定義域名這里自動綁定了。當(dāng)然你直接在這邊修改我記得好像也是可以的，嘻嘻。
   img4.png
   
   
   
3. 在你綁定了新域名之后，原來的username.github.io并不是就失效了，而是會跳轉(zhuǎn)到你新綁定的域名。

3 使用hexo搭建博客

在準(zhǔn)備工作階段，我們已經(jīng)安裝了hexo了(這里插個嘴，我在家里用win10 安裝hexo-cli之后，發(fā)現(xiàn)并不能執(zhí)行hexo指令，在全局安裝之后，還要把它你的全局node_modules路徑配置到系統(tǒng)環(huán)境變量中去)，接下來我們開始創(chuàng)建博客。

3.1 創(chuàng)建博客

找個好地方，執(zhí)行以下命令，hexo-cli 會在這個文件內(nèi)創(chuàng)建hexo的腳手架環(huán)境。

$ hexo init <folder>

這里的<floder> 表示你想要創(chuàng)建的博客項目的名稱，比如我就直接 hex init myblog。

小提示，按照官方文檔，在執(zhí)行玩init初始化執(zhí)行后，還需要運行npm install來安裝依賴，但實際情況據(jù)我觀察，好像并不需要。跟蹤一下這個初始化執(zhí)行：從github上克隆hexo項目到本地，然后把相關(guān)git配置刪除，并且完成了安裝依賴的過程，直接運行下面指令，運行一個本地服務(wù)，默認(rèn)地址為http://localhost:4000，就可以看到默認(rèn)的博客頁面了。

$ hexo server   //可以簡寫成 hexo s

3.2 配置相關(guān)文件

我們看一下文件目錄，大概說一下吧

.
├── _config.yml   //博客站點的配置文件，絕大部門配置都在這里完成
├── package.json  //這個就不多說了，nodejs模塊的描述文件
├── scaffolds     //這是以后用hexo 指令來創(chuàng)建文件時的Front-matter模板
├── source        //這個真不說了
|   └── _posts    //在這里面的文件.md和.html，將來會被解析到public文件夾發(fā)布出去
└── themes        //站點的主題，hexo會根據(jù)這個文件內(nèi)容來生成和解析

這里看一下_config.yml文件的配置，可以看我下面的備注，也可以自行訪問官方文檔：

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

# Site
title: livisun's blog   //這里是站點的title，將來瀏覽器tab標(biāo)簽欄顯示的
subtitle:               // 網(wǎng)站副標(biāo)題，沒啥用
description:            //網(wǎng)站描述 ，用于SEO，給瀏覽器爬蟲抓取的
keywords:               //關(guān)鍵字 ，同上
author: livisun         //作者
language: zh-CN         //網(wǎng)站使用的語言，
timezone:               //網(wǎng)站時區(qū)，不知道干啥的，都可以不填，應(yīng)該會有默認(rèn)的，下面
//沒必要改的我就不寫備注了

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://livisun.gitgub.io   //未來站點的網(wǎng)址
root: /                         //網(wǎng)址的根目錄 
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: snippet  //這里表示hexo選擇的主題，在themes文件下，有一個默認(rèn)主題，我們這邊用了更換了，后面我們會說明一下主題的更換

# Deployment
## Docs: https://hexo.io/docs/deployment.html
//這邊需要說明一下 ，這是hexo的部署配置，
deploy:
  type: git  //表示通過git工具來部署
  repository: https://github.com/livisun/livisun.github.io.git  //部署到這個倉
  //庫，也就是我們開始創(chuàng)建的那個倉庫
  branch: master  //默認(rèn)的master分支

4 更換主題

你會發(fā)現(xiàn)你剛剛運行的博客跟本博客比起來是不是有點丑，沒問題，安排~。

官方提供了一個很方便的主題更換機(jī)制，我們可以看到在上面的_config.yml配置中有主題配置項，實際操作只需要下載（大佬可以自己制作）一個主題文件，放在themes文件下，然后到配置文件中，替換一下就可以了。官方怕我們找不到這樣的主題，做又做不出來，很貼心的搞了一個主題分享站點，我們可以去淘一個喜歡的主題，甚至你要是看上了好幾個，你還可以做到主題的切換，這里是傳送門。哦對了，當(dāng)前主題在本博客頁腳處，可以自行獲取。算了，來，坐車。

我為什么會選這個主題呢，因為這個主題簡約但不簡單，個人不是很能接受那種花哨的頁面，主要內(nèi)容要繞一大圈去找，去猜, 玩捉迷藏呢。這個就很好，功能強大，主次分明。

按照snippent主題官方倉庫的介紹，有以下特點:

• 原生JavaScript實現(xiàn)，去jQuery化
• 樣式支持CSS預(yù)處理器Less，方便主題自定義
• 文章過期提醒功能
• 文章閱讀進(jìn)度條
• 網(wǎng)站公告功能
• 首頁圖片懶加載
• 首頁文章縮略圖自動檢索文章內(nèi)圖片，支持自動隨機(jī)圖片
• 主題支持響應(yīng)式
• 支持3D云標(biāo)簽
• 支持文章推送和文章打賞
• 站內(nèi)本地搜索和谷歌搜索
• 支持多個第三方評論系統(tǒng)
• 支持網(wǎng)站統(tǒng)計和不蒜子訪客統(tǒng)計
• 移動端的簡潔設(shè)計
• 支持代碼高亮并支持自定義高亮樣式
• 支持Shell腳本通過Travis CI自動化部署Hexo博客
• 支持Hexo自動化部署結(jié)果發(fā)送郵件和實時推送到釘釘

嗯，看上去很6的樣子，有些功能對我來說不來必要，但是可以看出作者還是很用心的，并且這個主題庫一直在保持更新，最近一次提交在21天之前，感興趣的可以深入了解一下，我們這里只簡單介紹一下本博客的配置:

4.1 snippet主題下載

snippet獲取可以通過兩種方式：

1. 下載snippet主題的zip文件，解壓后放在themes目錄下，和默認(rèn)landscape為同級目錄
2. 在hexo博客根目錄，例如我的在myblog執(zhí)行：

$ git clone git://github.com/shenliyang/hexo-theme-snippet.git themes/hexo-theme-snippet

4.2 安裝主題插件

因為 hexo-theme-snippet 使用了 ejs 模版引擎 、 Less CSS預(yù)編譯語言以及在官方插件的基礎(chǔ)上 進(jìn)行功能的開發(fā)，以下為必裝插件：

$ npm i hexo-renderer-ejs hexo-renderer-less hexo-deployer-git -S

4.3主題配置

下面就是主題的配置，關(guān)系到未來hexo如何解析我們寫的文章，并配置主題所提供的其他功能，廢話太多了，我們開始，當(dāng)然你也可以在閱讀主題的官方文檔，因為也許之后該主題會出更多新功能或其他重大更新，當(dāng)然你要是覺得這樣挺好，跟我來就行。

snippet主題同樣有一個——config.yml文件，這就是主題的配置文件了，同樣我們貼一下配置，并注釋。

# ---------------------------------------------------------------
#   Site Information And Theme Configuration Settings
#   language: zh-CN
# ---------------------------------------------------------------

## menu 
//  導(dǎo)航菜單顯示{[@page:名字,@url:地址,@icon:圖標(biāo)]}
menu:
- page: home
  url: /
  icon:
- page: 編程
  url: /categories/編程/
  icon:
- page: 閱讀
  url: /categories/閱讀/
  icon:
- page: 隨筆
  url: /archives/隨筆
  icon:
- page: 工具
  url: /categories/工具/
  icon:
- page: 時間軸
  url: /archives/
  icon:
- page: 關(guān)于我
  url: /about/
  icon:

## favicon -- 網(wǎng)站圖標(biāo)位置{@favicon}
favicon: /favicon.ico

## Feed
rss: /atom.xml

# ## Carousel
# carousel:
#   img: './img/head-img.jpg'
#   url: 'https://promotion.aliyun.com/ntms/act/qwbk.html?userCode=xs0pypd2'

# 各個小工具的設(shè)置
//這里是右側(cè)6個左邊小工具
## widgets
widgets:
  - search
  - notification
  - social
  - category
  - archive
  - tagcloud
  - friends


## 搜索
jsonContent:          //配置那些目錄支持站點搜索
  searchLocal: true   // 是否啟用本地搜索
  searchGoogle: false //是否啟用谷歌搜索
  posts:
    title: true
    text: true
    content: true
    categories: true
    tags: true

## 網(wǎng)站公告設(shè)置 支持 html 和 純文本
notification: |-
            <p>
              <a  target="_blank" >Vue源碼學(xué)習(xí)</a> <br/>
              <a  target="_blank">scratch3 源碼分析</a> <br/>
            </p>

## 社交設(shè)置 {@name:社交工具名字，@icon:社交工具圖標(biāo)，@href:設(shè)置工具鏈接} [參考圖標(biāo)]
//(http://fontawesome.io/icons/)
social:
 - name: Github
   icon: git
   href: //github.com/livisun
 - name: 郵箱
   icon: envelope-o
   href: mailto:1105432766@qq.com
 - name: 聯(lián)系QQ
   icon: qq
   href: tencent://message/?uin=1105432766
 - name: 微信
   icon: weixin
   href: /
 - name: QQ群
   icon: users
   href: /
 - name: RSS
   icon: feed
   href: /atom.xml

## 文章分類設(shè)置 
cate_config:
   show_count: true      //是否顯示數(shù)字
   show_current: true    //是否高亮當(dāng)前分類

## 文章歸檔設(shè)置
arch_config:
   type: 'monthly'
   format: 'YYYY年MM月'
   show_count: true
   order: -1

## 標(biāo)簽云設(shè)置
tagcloud:
  tag3d: false            // 是否啟用3D標(biāo)簽云
  textColour: '#444'      //字體顏色
  outlineMethod: 'block'  // 選中模式(outline|classic|block|colour|size|none)
  outlineColour: '#FFDAB9'// 選中模式的顏色
  interval: 30            //動畫幀之間的時間間隔，值越大，轉(zhuǎn)動幅度越大
  freezeActive: true      //選中的標(biāo)簽是否繼續(xù)滾動
  frontSelect: true       //不選標(biāo)簽云后部的標(biāo)簽
  reverse: true           //是否反向觸發(fā)
  wheelZoom: false        //是否啟用鼠標(biāo)滾輪

## 友鏈設(shè)置
links:
  - Hexo官網(wǎng): https://hexo.io/zh-cn/


# 主題自定義個性化配置

## 網(wǎng)站宣傳語
branding: 讀有趣的書，寫簡單的代碼。

## 設(shè)置banner背景圖片 //支持動態(tài)背景
banner:
    img: http://snippet.shenliyang.com/img/banner.jpg


## 首頁列表底部面板
homePanel: true

## 縮略圖自定義隨機(jī)圖片
defaultImgs:
  -

## 截取文章首頁描述字?jǐn)?shù)
//自定截圖內(nèi)容摘要，支持自定義摘要，
//自定義摘要{@<!--more-->:截取more之前的內(nèi)容為摘要}
excerptLength: 120


## 是否開啟文章目錄
toc: true

## 代碼高亮配置
highlightTheme:

## bootstrap配置
bootstrap:

## ICON配置
fontAwesome:

## 文章過期提醒功能
warning:
  days: 300
  text: '本文于%d天之前發(fā)表，文中內(nèi)容可能已經(jīng)過時。'

## 文章內(nèi)聲明
declaration:
  enable: true
  title: '轉(zhuǎn)載聲明'
  tip: |-
      商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處 ? <a href="" target="_blank">livisun</a>

## 文章打賞
reward:
  alipay: '/img/zfb.png'
  wepay: ' /img/wx.png'
  tip: 假如你剛好有興趣請我喝杯奶茶

## 主題評論

//這里我們用的Valine評論，支持其他評論，自行探索
## Valine評論

valine:
   enable: true
   appId: PFF3iz6l46WOQXhWBVPX22um-gzGzoHsz  //自己去注冊
   appKey: aQNed97fCoI0PTI26eDHdtBe
   placeholder: 說點什么吧
   notify: false // 郵件通知
   verify: true  // 驗證碼
   avatar: mm    // avatar頭像
   meta: nick,mail   // 輸入框內(nèi)容，可選值nick,mail,link
   pageSize: 10

### 暢言評論(需要ICP備案)
changyan:
  enable: false
  appid:
  conf:

### 來必力
livere:
  enable: false
  livere_uid: MTAyMC8zMzA1MS85NjEz

## Gitalk評論
gitalk:
   enable: false
   clientID:
   clientSecret:
   repo:
   owner:
   admin:
   perPage:
   distractionFreeMode: true

### Disqus評論
disqus:
  enable: false
  shortname: snippet
  count: false

### gitment評論(長期不更新，不建議使用)
gitment:
  enable: false
  owner:
  repo:
  client_id:
  client_secret:
  perPage: 10

### 友言評論(服務(wù)不穩(wěn)定)
uyan:
  enable: false
  uyan_id: 1966422


## 網(wǎng)站訪客統(tǒng)計
//本博客未開啟訪客統(tǒng)計
visit_counter:
   site: false
   page: false

## 網(wǎng)站訪問統(tǒng)計分析

### 網(wǎng)盟CNZZ統(tǒng)計
cnzz_analytics:

### 百度統(tǒng)計
baidu_analytics:

### 谷歌統(tǒng)計
google_analytics:

### 騰訊分析
tencent_analytics:

### 百度站點認(rèn)證
baidu_site_verification:

### 百度自動推送
baidu_push: true

#網(wǎng)站主題配置
since: 2019   //建站時間
robot: 'all' // 控制搜索引擎的抓取和索引編制行為，默認(rèn)為all
version: 1.2.1  //主題版本

另外需要提醒的一點是，如果要使用站點搜索，必須安裝插件hexo-generator-json-content 來創(chuàng)建本地搜索需要的json文件

$ npm i hexo-generator-json-content@2.2.0 -S

ok主題配置基本就到這，當(dāng)然頁面的模板你可以自定義，修改layout文件夾內(nèi)的模板，這里就不再贅述。

5 將博客部署到github page

我們回顧一下之前的配置，與部署相關(guān)的有兩個地方:

1. 在綁定自定義域名時候，我們提到了CNAME文件，對了，在部署之前需要，在hexo的source文件下創(chuàng)建一個無后綴名的CNAME文件，并在里面寫入你的綁定域名

   img5.png

2. 在hexo的_config.yml文件中，配置了我們將來hexo部署的倉庫

   img6.png

接下來還需要安裝一個部署插件，執(zhí)行以下命令：

$ npm install hexo-deployer-git --save

ok,下載我們執(zhí)行部署命令：

$ hexo g -d

咔咔一頓運行，之后，我們得到返回：Deploy done：git,表示部署成功，快去看看吧。

hexo 常見命令：

hexo new "postName" #新建文章
hexo new page "pageName" #新建頁面
hexo generate #生成靜態(tài)頁面至public目錄
hexo server #開啟預(yù)覽訪問端口（默認(rèn)端口4000，'ctrl + c'關(guān)閉server）
hexo deploy #部署到GitHub
hexo help  # 查看幫助
hexo version  #查看Hexo的版本

縮寫命令

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

當(dāng)然，也可使用組合命令，就像上面的部署操作一樣。

hexo s -g #生成并本地預(yù)覽
hexo d -g #生成并上傳

到這為止，整個博客就搭完了，竟然寫了這么久，后面如何寫博客，自行參考，官網(wǎng)，或者在下面留言吧，先溜了。