用 Hexo 和 Github 來成為部落客吧

發表於 2022-08-01 分類於筆記，雜項

從開始學寫程式那時，老師就有說要試著寫技術文章，剛開始一定會寫得不太好，但是一直寫就會讓自己進步更快，也能回頭檢視自己的學習過程，適時的調整，也會發現當時候的理解跟現在有什麼不同。

我也參考過Huli大大的文章-每一篇心得都有價值——為什麼初學者才更應該要寫心得筆記，試著在github 上開一個repo，用issue 的方式來新增筆記，每次都會因為一些不應該的理由而中斷。

後來又發現了可以透過hexo + github 來部屬自己的blog，所以又開始記錄自己的筆記，希望慢慢的把習慣累積起來，並且把一些以前的筆記整理一下，再發上來，一方面是自己將來有需要可以來參考，另一方面也希望能有人看到，也許可以幫助到他們，也或者可以有一些討論，相互學習、成長。

先前寫了幾篇筆記，但還沒有把這件事情記錄下來，每次要發布的時候都要去找之前參考的文章(也是自己發筆記的頻率太低所以記不住><)，所以決定整理一下步驟，並在文末附上參考的文章連結。

因為我有時候也會在matters上寫寫創作(頻率也是越來越低)，所以又找了文章把like coin 的拍手按鈕加在文末，希望持續寫的過程，也能有人來幫我拍拍手，或是到我的matters上看看創作！

首先，我先預設來看我文章的人，電腦裡面都有安裝node.js，並且都有註冊github了，另一方面我也是筆記給自己方便回頭看，就沒有寫到這麼細節，如果沒有以上先決條件，但是也想嘗試用這個方式來建立自己的blog，我會把我參考的文章放在底下，請搭配服用。

很多有註冊github 的人，其實也不知道github 有提供給使用者放置靜態頁面並產出連結的功能(github pages)，每個靜態網頁的repo都可以幫我們產生出一個連結，讓其他人看到自己的作品。
Hexo 建立blog 也是相同的道理，使用github 的個人頁面(網址會是username.github.io)，將我們寫的文章(md檔)渲染到畫面上，如果不清楚markdown 寫法的話，可以參考我另一篇筆記。

安裝hexo

如果在本機端有裝git，應該就會有git bash 可以使用，我個人比較習慣用這個大於cmd。
安裝步驟可以參考 hexo github：

安裝hexo

$ npm install hexo-cli -g

# 查看安裝版本
$ hexo version

init

1
2
3

$ hexo init blog # 會建立一個blog 的資料夾，可自行取名
$ cd blog # 切換到該目錄底下
$ npm install # 安裝所需的npm 套件

調整config
進入blog資料夾後，可以看到一個_config.yml的檔案，這立的conf 是全域的設定檔，

github 設定

deploy:
  type: git
  repository: http://github.com/{yourname}/{yourname}.github.io.git
  branch: master # 如果有切換為main 就改成main

本站設定

title: 標題
subtitle: 副標題
description: 描述
keywords:
author: 你的名字
language: zh-TW
timezone: 'Asia/Taipei'

其他設定
關於資料夾或是標籤的設定，可以自由增減調整，不多贅述。

部屬
1
$ hexo d -g
如果沒有出現任何錯誤訊息，這時候可以上github 應該就有推上去的紀錄了。

更換主題

確定hexo 專案有建立成功後，可以到hexo 的樣式庫裡，找看看有沒有合胃口的主題樣式。網路上大部分的文章都是用NexT 的主題，可能是這個主題比較好看，或是比較簡潔，加上我自己沒有想花心思在找適合的主題上，也蠻喜歡這個主題，所以就直接跟風。

1 2	$ cd blog $ npm install hexo-theme-next

啟用NexT

先前我們有調整了hexo 的全域conf 檔(_config.yml)，這邊因為我們安裝了NexT的樣式，所以要再到conf 裡將主題樣式設定為NexT

1	theme: next

設定好後可以重新佈署，來確定樣式是不是有被改過去，這邊建議清空緩存，避免一些不必要的誤會：

1 2	$ hexo clean $ hexo -s --debug # 在本機執行，不推上github

這時候會有訊息提示，連上即可看到本機運行hexo 的結果

1	INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

配置NexT

NexT 內含四個小主題

在/theme/next/_config.yml 中可以搜尋schemes找到這個配置，四個都測試過看自己喜歡哪一個，把剩下的都註解即可。

程式碼樣式

接著是選擇程式碼在NexT中的呈現方式，找到codeblock 後一樣試過一輪，擇己所愛。

設定側邊欄清單

找到menu後，可以調整成自己希望出現在blog 側邊欄的內容。

移除惱人的加油字樣

設定cheers 為false

1 2	# Enable "cheers" for archive page. cheers: false

移除強烈置入 (由 Hexo 強力驅動 v3.7.1 | 主題 — NexT)

找到powerd 跟 theme，調整為false

powered:
  # Hexo link (Powered by Hexo).
  enable: false
  # Version info of Hexo after Hexo link (vX.X.X).
  version: true

theme:
  # Theme & scheme info link (Theme - NexT.scheme).
  enable: false
  # Version info of NexT after scheme info (vX.X.X).
  version: true

加入”閱讀全文”按鈕

調整之前，文章會完整被顯示在首頁，這樣會使得自己或是其他讀者在找文章時非常困難。
解決的辦法有二：
1. 可以在文章中添加 
優點是可以選擇自己要截斷的內容，不會出現句子只有一半的狀況。
2. 一勞永逸的做法則是在NexT _config.yml 中搜尋 auto_description:設成true，但是截斷的地方就會沒有規範。NexT 官方建議使用第一個方式，但我有點懶所以還是選了第二個方式。

發布文章

發新文章

1 2	# postName是文章的名稱 $ hexo new {postName}

這時會在source/_post中看到相對應檔名的md檔案，就可以開始把筆記或文章寫進去。
編輯md 檔方便的做法，可以到hackMD先寫好文章，再全選複製過來就可以了。我自己則是使用visual studio code 編輯器在寫md 檔，安裝相關套件就可以一編寫一邊預覽，但是表格、圖片等等就比較麻煩，所以看個人使用習慣。

如果是要編輯舊文章，直接針對該檔案進行編輯即可，重新佈署的時候就會更新上git。

如果是要刪除文章的話，直接刪除該md 檔，再重新佈署即可。

設定文章資訊

每一篇文章的上面都會有title, tag, category, date的資訊，編輯後就會依照設定部屬。

部屬

同先前有提到，可以在本地端先模擬部屬，確認如自己希望的樣子之後，再發布到git 上。

1 2	# 本地模擬部屬 hexo s --debug

1 2	# 部署 deploy --global $ hexo d -g

部屬後可能要等一下子才會出現，不過可以先上自己的github確定有commit 紀錄。

之後會再研究一些seo 的部分，這個就沒辦法像在 medium 或是其他平台寫文章，已經有做好的seo，
需要在額外做一些動作才能讓自己的blog 在搜尋評分上有一點進步，有研究之後再紀錄上來。

增加Like Button

這個部分順便推廣一下like coin 化讚為賞的機制，如同前言所說，首次接觸到like coin是在 matters上，喜歡閱讀的我也想要找個地方寫寫字，偶然發現這個不錯的平台，市民們也都很熱情，就決定停留在matters了，
後來也想說來研究看看怎麼在hexo 增加個拍手按鈕，雖然目前都沒有人幫忙拍手，不過希望有天能看到有人拍手的紀錄。

找了文章，發現有新舊版的差異，也看了like coin 的官方文檔，這邊將兩個做法都記錄一下

侵入式修改

首先在/themes/next/layout/_custom 新增一個 like_coin.njk，並將以下內容貼上，
記得將{liker_id}調整成自己的id唷！

<div>
  <script type="text/javascript">
    document.write(
      "<iframe scrolling='no' frameborder='0' sandbox='allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-storage-access-by-user-activation' style='height: 212px; width: 100%;' src='https://button.like.co/in/embed/{liker_id}/button?referrer=" +
      encodeURIComponent(location.href.split("?")[0].split("#")[0]) + "'></iframe>");
  </script>
</div>

再來是打開/themes/next/layout/_macro/post.njk 找到想要插入的位置，
這邊與之前用過的樣板引擎類似(twig, blade)，所以對我來說不算難找

{% else %}
  {{ post.content }}
  <hr>
  <span style="font-weight:900;font-size: 16px;">感謝看到最後，歡迎登入Liker並為我鼓掌5次，或是給我一些支持，鼓勵我繼續努力精進寫文章的能力</span>
  {{ partial('../_custom/like_coin.njk') }}
{%- endif %}

重新佈署即可。

非侵入式修改

next 改版之後有提供客製的管道，可以在source/增加_data的資料夾，相關可以放置的檔案可以看next _config.yml中，
搜尋custom_file_path 就可以找到要在不同地方加入客製內容的檔案。
我打算在文章末加入like coin 的按鈕，所以我就在_data增加 post-body-end.njk ，將 postBodyEnd 的註解打開，
並將之前寫在侵入式修改的那段整合起來：

<hr>
<span style="font-weight:900;font-size: 16px;">
  感謝看到最後，歡迎登入Liker並為我鼓掌5次，或是給我一些支持，鼓勵我繼續努力精進寫文章的能力
</span>
<div>
  <script type="text/javascript">
    document.write(
      "<iframe scrolling='no' frameborder='0' sandbox='allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-storage-access-by-user-activation' style='height: 212px; width: 100%;' src='https://button.like.co/in/embed/{liker_id}/button?referrer=" +
      encodeURIComponent(location.href.split("?")[0].split("#")[0]) + "'></iframe>");
  </script>
</div>

接著重新佈署即可！

參考文獻：
roi’s blog-使用GitHub + Hexo 建立個人blogger

Heidi’s blog-【學習筆記】如何使用 Hexo + GitHub Pages 架設個人網誌

hexo-github

只是個打字的-在Hexo NexT增加like Button