最近用 Hexo 重新搭建了個人博客，雖然我以前用網(wǎng)頁拼湊我的老網(wǎng)站花了很多時間，但寫作和發(fā)布體驗的巨大差別讓我還是進入Hexo陣營了环揽。
我的理解是，這是一個自動生成靜態(tài)（html+css+js）網(wǎng)站的工具庵佣，主題里是很多模塊化的網(wǎng)頁歉胶，可以通過.yml配置文件運用這些模塊，把MarkDown(.md)博客批量轉化為網(wǎng)頁并且跟主頁形成總分結構巴粪。
下面是我用Hexo搭建個人網(wǎng)站的過程和網(wǎng)站配置：
首先通今，一切以Hexo官網(wǎng)為準。
準備工作
- 正常使用Github的電腦肛根。
- 開了Github Pages的Repository辫塌。
如果不了解Github可以看Github Pages(一)：一個最基礎的個人網(wǎng)站。
配置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是很強大的，默認主題網(wǎng)站結構合理芭届，適配手機储矩，搜索欄（google）也有了。只需要優(yōu)化（改一下失效的鏈接喉脖，添加評論椰苟，RSS等模塊）就行了。
基本操作
-
hexo g生成/public 文件夾树叽，里面是網(wǎng)站 -
hexo d把這個網(wǎng)站文件夾推送到服務器 -
hexo clean刪除網(wǎng)站文件夾 -
hexo s本地查看效果
配置文件
配置文件是兩個舆蝴，第一個是根目錄的 _config.yml。重要配置有
- language: zh-CN 是中文题诵，不寫是英文
- url: https://hans2936.github.io （網(wǎng)站地址）
- 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
如果網(wǎng)站在服務器上赠潦，則可以用 rsync
deploy:
type: rsync
host: 服務器名
user: 用戶名
root: 放網(wǎng)站的文件夾
port: 22
第二個配置文件，是主題的配置文件 themes/landscape/_config.yml草冈，主要有導航欄(menu)她奥，側邊欄(widgets)瓮增，網(wǎng)站圖標(favicon)等。
寫新文章
hexo new "article name"
這條命令會在source/_posts產(chǎn)生新文件哩俭，然后改改文件名绷跑，在進入編輯MarkDown就行了。
每篇文章最上面是配置區(qū)凡资，能用到的主要是
- title: 題目
- date: 日期 （會影響在主頁的順序）
- tags: 標簽
- categories: 分類
- updated: 修改日期
配置區(qū)下面就隨便寫了砸捏。值得一提的是，文章正文是支持html語言的隙赁，這樣特殊字體和元素就可以直接加進去垦藏。
創(chuàng)建頁面
hexo new page about
會在 source/about 里面產(chǎn)生新文件，跟文章是一樣編輯的伞访。
然后再從主題配置的導航欄里面加上這一頁掂骏。
menu:
...
關于: /about
引用圖片
執(zhí)行 npm install hexo-asset-image --save
然后，主配置文件 _config.yml 設置為
post_asset_folder: true
這個時候創(chuàng)建新文章就會產(chǎn)生一個同名文件夾咐扭，把圖片放入即可芭挽。
然后在文章正文這樣引用放進去的圖片滑废。
引用視頻文件
對某個鏈接中的視頻文件蝗肪，可以執(zhí)行 npm install hexo-tag-dplayer
這是一個播放器插件，使用時在文章中加入：
{% dplayer "url=" "pic=" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}
其中 url 是視頻地址蠕趁，pic 是縮略圖地址薛闪。
這個方法是引入視頻的最佳方法，但是需要一個地方來存放這些文件（url）俺陋。
Github只有1G太少了豁延，可以考慮使用阿里云oss存儲，淘寶賬戶就能開腊状，還很便宜诱咏。
引入第三方視頻
對視頻網(wǎng)站上的視頻，可在Markdown文件中明碼使用html語言 iframe缴挖，比如
<div class="selfadapting-video">
<iframe src="" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>
其中class="selfadapting-video" 是一個自適應長寬比例的容器袋狞，具體看這篇博客。
創(chuàng)建側邊欄
比如在 themes/landscape/layout/_widget/ 創(chuàng)建一個 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 訂閱
執(zhí)行 npm install hexo-generator-feed
然后在主配置文件 _config.yml 里面加上
plugin:
- hexo-generator-feed
feed:
type: atom
path: atom.xml
limit: 20
然后在主題配置文件里加上 rss: /atom.xml映屋。
站點地圖
類似上一條苟鸯，執(zhí)行 npm install hexo-generator-sitemap --save
主配置文件添加：
# Sitemap
sitemap:
path: sitemap.xml
然后提交給 Google Search Console 就行了。
高級修改 (評論棚点，分享)
Hexo的網(wǎng)頁其實是被拆開成很多零件的早处，主要在themes/landscape/layout/_partial/，
當在網(wǎng)頁中加入一個新的模塊時瘫析，比如對評論系統(tǒng)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>
<% } %>
就實現(xiàn)這個第三方功能了默责。注意 id: '<%= post.date %>' 這句話是為了修復網(wǎng)頁路徑過長不能顯示評論的bug (在手機app內(nèi)分享網(wǎng)頁很容易出現(xiàn)長后綴)。
主題自帶的功能也可以改咸包，比如說分享功能可以在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 就可以了。
像這種高級修改诉儒，對有一定網(wǎng)頁知識的人來說有無限可能葡缰，自己做一個主題都是可以的。
盡管有了Hexo忱反，對html/css/JavaScript的基本了解還是有必要的泛释。
