最近用 Hexo 重新搭建了個人博客，雖然我以前用網頁拼湊我的老網站花了很多時間，但寫作和發布體驗的巨大差別讓我還是進入Hexo陣營了。
我的理解是，這是一個自動生成靜態（html+css+js）網站的工具，主題里是很多模塊化的網頁，可以通過.yml配置文件運用這些模塊，把MarkDown(.md)博客批量轉化為網頁并且跟主頁形成總分結構。
下面是我用Hexo搭建個人網站的過程和網站配置：
首先，一切以Hexo官網為準。
準備工作
- 正常使用Github的電腦。
- 開了Github Pages的Repository。
如果不了解Github可以看Github Pages(一)：一個最基礎的個人網站。
配置Hexo文件夾
在Mac上安裝 Node/Npm
brew update
brew install node
（windows/linux用戶參見此官方教程）
安裝 Hexo
npm install hexo -g
hexo init blog
cd blog
npm install
hexo s
這時博客就在本地生成了。訪問http://localhost:4000 可以看效果。
可以說Hexo是很強大的，默認主題網站結構合理，適配手機，搜索欄（google）也有了。只需要優化（改一下失效的鏈接，添加評論，RSS等模塊）就行了。
基本操作
-
hexo g生成/public 文件夾，里面是網站 -
hexo d把這個網站文件夾推送到服務器 -
hexo clean刪除網站文件夾 -
hexo s本地查看效果
配置文件
配置文件是兩個，第一個是根目錄的 _config.yml。重要配置有
- language: zh-CN 是中文，不寫是英文
- url: https://hans2936.github.io （網站地址）
- root: / (根目錄在哪里，github就寫斜杠，有些服務器會多一層路徑)
- skip_render: README.md 這樣可以在 /source 里面放一個 README.md，推送的時候自動傳到 Github 上面
- theme: landscape 這里可以換主題
推送設置 (GitHub)
deploy:
type: git
repository: https://github.com/hans2936/hans2936.github.io.git
branch: master
如果網站在服務器上，則可以用 rsync
deploy:
type: rsync
host: 服務器名
user: 用戶名
root: 放網站的文件夾
port: 22
第二個配置文件，是主題的配置文件 themes/landscape/_config.yml，主要有導航欄(menu)，側邊欄(widgets)，網站圖標(favicon)等。
寫新文章
hexo new "article name"
這條命令會在source/_posts產生新文件，然后改改文件名，在進入編輯MarkDown就行了。
每篇文章最上面是配置區，能用到的主要是
- title: 題目
- date: 日期 （會影響在主頁的順序）
- tags: 標簽
- categories: 分類
- updated: 修改日期
配置區下面就隨便寫了。值得一提的是，文章正文是支持html語言的，這樣特殊字體和元素就可以直接加進去。
創建頁面
hexo new page about
會在 source/about 里面產生新文件，跟文章是一樣編輯的。
然后再從主題配置的導航欄里面加上這一頁。
menu:
...
關于: /about
引用圖片
執行 npm install hexo-asset-image --save
然后，主配置文件 _config.yml 設置為
post_asset_folder: true
這個時候創建新文章就會產生一個同名文件夾，把圖片放入即可。
然后在文章正文這樣引用放進去的圖片。
引用視頻文件
對某個鏈接中的視頻文件，可以執行 npm install hexo-tag-dplayer
這是一個播放器插件，使用時在文章中加入：
{% dplayer "url=" "pic=" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}
其中 url 是視頻地址，pic 是縮略圖地址。
這個方法是引入視頻的最佳方法，但是需要一個地方來存放這些文件（url）。
Github只有1G太少了，可以考慮使用阿里云oss存儲，淘寶賬戶就能開，還很便宜。
引入第三方視頻
對視頻網站上的視頻，可在Markdown文件中明碼使用html語言 iframe，比如
<div class="selfadapting-video">
<iframe src="" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>
其中class="selfadapting-video" 是一個自適應長寬比例的容器，具體看這篇博客。
創建側邊欄
比如在 themes/landscape/layout/_widget/ 創建一個 about.ejs
<% if (site.tags.length){ %>
<div class="widget-wrap">
<h3 class="widget-title">About</h3>
<div class="widget">
E-mail: xyz@123.com
</div>
</div>
<% } %>
然后在主題配置的側邊欄中加上：
widgets:
- ...
- about
RSS 訂閱
執行 npm install hexo-generator-feed
然后在主配置文件 _config.yml 里面加上
plugin:
- hexo-generator-feed
feed:
type: atom
path: atom.xml
limit: 20
然后在主題配置文件里加上 rss: /atom.xml。
站點地圖
類似上一條，執行 npm install hexo-generator-sitemap --save
主配置文件添加：
# Sitemap
sitemap:
path: sitemap.xml
然后提交給 Google Search Console 就行了。
高級修改 (評論，分享)
Hexo的網頁其實是被拆開成很多零件的，主要在themes/landscape/layout/_partial/，
當在網頁中加入一個新的模塊時，比如對評論系統Gitment來說（關于Gitment見此教程），首先要打開 head.ejs 引用js, css文件（需放入themes/landscape/source）
<link rel="stylesheet" href="/css/gitment.css">
<script src="/js/gitment.browser.js"></script>
然后在 article.ejs 里面加上 Gitment 的code
<% if (!index && post.comments){ %>
<section id="comments">
<div id="gitment"></div>
<script>
const gitment = new Gitment({
id: '<%= post.date %>',
owner: 'username',
repo: 'username.github.io',
oauth: {
client_id: '---yourID---',
client_secret: '---yourKey---',
},
})
gitment.render('gitment')
</script>
</section>
<% } %>
就實現這個第三方功能了。注意 id: '<%= post.date %>' 這句話是為了修復網頁路徑過長不能顯示評論的bug (在手機app內分享網頁很容易出現長后綴)。
主題自帶的功能也可以改，比如說分享功能可以在themes/landscape/source/js/script.js加一句，
'<a + encodedUrl + '" class="article-share-sina" target="_blank" title="微博"></a>'
然后找到themes/landscape/source/css/_partial/article.styl 比照著定義一個 .article-share-sina 就可以了。
像這種高級修改，對有一定網頁知識的人來說有無限可能，自己做一個主題都是可以的。
盡管有了Hexo，對html/css/JavaScript的基本了解還是有必要的。
