架設Hexo+GitHub

1.進入 GitHub 開啟 Repo

Repository Name 輸入:

1	自己名稱.github.io

2.安裝 Hexo

由於 Nexo 是使用指令安裝，所以要開啟 CMD (終端機) 來輸入以下指令

1	npm install hexo-cli -g

3.建立 Hexo

首先建議先到你想建立的目錄再輸入，輸入以下指令 ( projectname 換成自己的名稱)

1	hexo init projectname

4.啟動Hexo

進入 Hexo 目錄後，啟動 Hexo。

1	hexo server

主題來源

這次所使用的主題是Next

官方](https://hexo.io/themes/)也有許多的主題可以取得

替換主題

下載主題後將主題解壓縮至 Blog 資料夾的 themes 下

並開啟 _config.yml

透過收尋尋找theme

1	theme: hexo-theme-next-master

將 theme 改成你剛剛下載的主題資料夾名稱，然後輸入指令重啟即可。

1	hexo server

Hexo 基礎設置

主要會修改 _config.yml 的地方只有這幾個。

Site
title: Welcome.Web.World // 網站標題
subtitle: 歡迎來到網路世界。 // 網站副標題
description: Welcome.Web.World // 網站敘述
keywords: // 關鍵字
author:  // 網站作者
language: zh-TW // 網站語系
timezone:

URL
url: http://yoursite.com //輸入您的網站URL，舉例我的就是waiue0620.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

社群連結

社群連結相關設定查詢 Social Links 就可以看到相關設定

social:
  GitHub: https://github.com/hsiangfeng || github
  E-Mail: mailto:yourname@gmail.com || envelope
  Weibo: https://weibo.com/yourname || weibo
  Google: https://plus.google.com/yourname || google
  Twitter: https://twitter.com/yourname || twitter
  FB: https://www.facebook.com/HsiangFeng.hf || facebook
  VK Group: https://vk.com/yourname || vk
  StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  YouTube: https://youtube.com/yourname || youtube
  Instagram: https://instagram.com/yourname || instagram
  Skype: skype:yourname?call|chat || skype

修改頭像

首先必須進入主題 (Theme) 的設置檔 (_config.yml)，然後查詢 avatar，並依照下方範例參考輸入。

avatar:
  url: /images/avatar.gif // 頭像路徑
  rounded: false // 頭像是否為圓形
  opacity: 1 // 透明度
  rotated: false // 滑鼠移過去是否自動旋轉

側邊欄位置

預設位子在左邊，若不喜歡左邊可修改至右邊，查詢 sidebar，並將 position: left 修改成 position: right 即可，

※僅對 Pisces 或 Gemini 主題有效，預設主題則無效

主題修改方式

查詢 Scheme Settings，就可以修改主題了，預設提供四種主題，只需要將 # 移除即可。

顯示滾動百分比

閱讀文章時若能觀看目前看的百分比是不錯的，所以僅需要將 scrollpercent: false 修改成 scrollpercent: true 即可。

設置首頁不顯示全文(只顯示預覽)

編輯主題配置文件 _config.yml，搜索 auto_excerpt 字段，設置 enable 的其值為 true

部屬 GitHub

部屬之前必須先安裝一個插件，因為預設 Hexo 並沒有安裝

1	npm install hexo-deployer-git --save

另外因為要上傳到 GitHub，_config.yml 還有 Deployment 的地方必須調整

deploy:
  type: git
  repo: https://github.com/waiue0620/waiue0620.github.io.git
  branch: master

修改完畢後輸入指令即可。 PS.要小心空格 type、 repo、 branch 前面各自有空格。

1 2	hexo generate hexo deploy

Hexo其他指令

hexo help #查看帮助
hexo init #初始化一个目录
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成网页，可以在 public 目录查看整个网站的文件
hexo server #啟動Hexo server，本地预览，'Ctrl+C'关闭
hexo deploy #部署.deploy目录
hexo clean #清除缓存，**强烈建议每次执行命令前先清理缓存，每次部署前先删除 .deploy 文件夹**
hexo s g #啟動伺服器，生成靜態頁面
hexo d g #部屬模式，生成靜態頁面

替 Hexo 加入 Search 功能

由於預設是沒有站內 Search 功能，所以必須另外加裝外掛hexo-generator-searchdb

1	npm install hexo-generator-searchdb --save

安裝完必要先修改站點的設定檔 (_config.yml)，複製以下程式碼貼在任意地方

// 搜尋功能
search:
  path: search.xml
  field: post
  format: html
  limit: 100

參數說明:

path:
- 預設通常是 search.xml
- 若改為 search.json 就會改生成 search.json，而且檔案大小也會比較小
field:
- post (Default) - 僅搜尋你發布的文章
- page - 僅收錄頁面
- all - 全部收錄
format - 搜尋頁面的形式，但是僅限於 XML
- html (Default) - 壓縮的原始 HTML
- raw - 原始文本(也就是 markdown)
- excerpt - 只收入摘要 (但是我測試後是只有標題??)
- more - 更多 ((????
limit - 自定義被索引的帖子數量

接下來替主題開啟 Search，這邊以 NexT 為例。開啟主題設定檔 (_config.yml)，然後查詢 Local search，並將 enable 修改為 true 即可

而我的 Search 設置是這樣

search: path: search.json field: post format: html limit: 10000

加入 Google Analytics

這邊使用 NexT 模板作舉例。進入主題 (theme) 中尋找 _config 檔案，並尋找約 754 行~ 757 行

google_analytics:
  tracking_id: 
  localhost_ignored:
// 修改成以下
google_analytics:
  tracking_id: UA-XXXXXX-1 //UAID追蹤碼
  localhost_ignored: true

再來還有一個檔案需要修改

1	檔案路徑:themes\hexo-theme-next-master\layout\_third-party\analytics\google-analytics.swig

將檔案內容修改為Google Analytics 網站追蹤全域網站代碼

查詢追蹤ID、全域網站代碼方法，如下圖

添加Google搜索

登陸 Google賬號，添加了站點驗證
前往 Search Console

下載HTML認證文件
將該文件放在站點根目錄的 source 目錄下
再配置文件 _config.yml 下有一個 skip_render，將驗證文件填入即可保持原樣跳過渲染，如： skip_render: google866eed5335bef122.html
點擊認證

注意：為避免HTML驗證文件在用命令hexo generate & hexo deploy之後，網站根目錄生成HTML驗證文件被hexo和next主題加了自己的東西，導致驗證不通過，在站點配置文件_config.yml 下有一個skip_render，將驗證文件填入即可保持原樣跳過渲染，如： skip_render: google866eed5335bef122.html

參考資料

架設Hexo+GitHub 手把手教你建github技术博客by hexo Hexo側邊欄修改 Hexo的Next主题个性化设置（二）——进阶设置 3分鐘完成Hexo網站地圖Sitemap設定