使用Github Page + Hexo架站寫Blog（ㄧ）

主要內容

  • 為何寫Blog
  • 寫作平台的選擇
  • Github Page + Hexo架站過程

為何寫Blog

  • 練習闡述(elaboration)。
  • 自己寫的文章會一讀再讀，加深知識點的印象。
  • 留言互動能再次檢視自己的理解程度。
  • 培養觀察市場及技術趨勢的習慣。
  • 求職時自學能力的證明。

（其他好處等我發掘再補充～:D）

寫作平台的選擇

稍微比較過幾個寫作平台，如：Medium, WordPress, Github Page + Hexo 等。
最後選擇後者，因為有免費，支援Markdown，能方便撰寫程式碼及數學公式等優點，但缺點是只能架設靜態網站。決定快點開始寫作就不猶豫啦！等我使用一段時間再來心得分享～

Github Page + Hexo架站過程

教學文參考：

使用 GitHub Pages + Hexo 來架設個人部落格

超详细Hexo+Github Page搭建技术博客教程

使用的工具或服務：

  • Node.js
  • Git（分布式版本控制系統，用於專案版控管理）
  • Github Page（Github提供的免費靜態網頁託管服務，能自動更新部署）
  • Hexo（基於Node.js驅動的一款簡潔Blog框架，能產生靜態網頁）

插件則使用了：

  • Hexo Admin （後台管理介面）

  • Disqus （留言板）

    • 優點：

      • 網站管理員可導入與導出留言來備份。
      • 留言系統以社群網路形式，可查看 Disqus 用戶在不同網站的留言，形成一個留言用戶在不同網站的互通，增加人流。
      • 留言數據與留言框均由 Disqus 主機（服務器）提供，減少網站主 機負荷（數據寫入與讀取），避免黑帽駭客與垃圾留言機器人的攻擊， 提升速度。

    • 於每篇Post下方新增留言板：
      主要修改預設主題hexo-theme-landscape資料夾下的 _config.yml, after-footer.ej, post.ejs 檔案，但按照教學操作一直出現bug，後來在post.ejs中貼上 官方提供的程式碼，確認在17行 s.src 有改為自己的Disqus shortname，總算能順利運行。

    • 留言板改成繁體中文介面教學
      第10行加上this.language = "zh_TW"; 

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      // post.ejs
      <%- partial('_partial/article', {post: page, index: false}) %>
          <div id="disqus_thread"></div>
              <script>
              /**
              *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
              *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */

              var disqus_config = function () {
              this.language = "zh_TW"; // Disqus 顯示語言
              this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
              this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
              };

              (function() { // DON'T EDIT BELOW THIS LINE
              var d = document, s = d.createElement('script');
              s.src = 'https://whitenoise-blog.disqus.com/embed.js';
              s.setAttribute('data-timestamp', +new Date());
              (d.head || d.body).appendChild(s);
              })();
              </script>
              <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
      </article>

      以上是學習的一個紀錄，後續新增網站功能會再更新。歡迎補充和指正，感謝喔！: )