架站服務

Hexo + Github Pages：手把手教你打造免費個人部落格

賴瑞晟

賴瑞晟

— 12 min read

前言

在使用 Hexo 這個網誌框架之前，曾經使用過非常受歡迎的 Wordpress 進行架站。

Wordpress 雖然是個很棒的內容管理系統(CMS)，佈景主題很漂亮，但最大的缺點就是站體很容易過於龐大，如果是用免費的雲端伺服器的話網頁讀取速度可以說是非常慢，而且因為資料都在雲端伺服器，在備份和還原上稍微較麻煩。

而Hexo這個輕量級的網誌框架就解決了讀取速度這個對我來講最大的問題，而且剛好可以搭配Github Pages)這個免費服務來進行部落格的搭建。

以下的教學是針對使用 MacOS 的人所寫的，如果是使用Windows系統的話步驟基本上一樣，只是指令的部分可能會有點差異，還請見諒。

Hexo 介紹

Hexo是一個能夠產生靜態網站的網誌框架，相對於動態網站需要有一個資料庫，靜態網站的檔案存在電腦上，將來在轉移的時候也比較方便。

Hexo 的一些優點

  • 超快的檔案產生速度，在幾秒內即可完成網誌產檔
  • 近 300 個外掛插件
  • 有 200 多個免費主題
  • 支援 Markdown 語法
  • 中文社群的內容繁多

建立使用Hexo的環境

事前準備

在安裝 Hexo 前電腦需要先安裝下列兩套軟體。

在本地端安裝 Hexo

於終端機中透過 npm 安裝Hexo[1]
$ npm install -g hexo-cli

如在此步驟遇到 node.js 的 write access 問題可以參考備註1的解決方案。

建立部落格

輸入$ hexo init <部落格名稱>進行hexo的初始化，並在剛剛創建好的資料夾內安裝npm套件。

完整程式碼如下

$ hexo init blog #建立部落格
$ cd blog #載入資料夾
$ npm install #安裝npm套件

接著可以先啟動local端的server來看看一下自己的部落格長怎樣。

$ cd blog
$ hexo server #啟動本地端server

看到自己的部落格後先不要感動落淚，我們先來介紹幾個比較重要的檔案。
Hexo 網站初始介面
Hexo 網站初始介面

目錄結構

  • _config.yml：網站的配置檔案，可以設定網站標題、作者、作者大頭貼、網域...等，是非場重要的一個檔案。
  • source：原始檔案資料夾是放置內容的地方。裡面的_posts資料夾是存放文章的地方，之後要新產生的文章都會在這邊。
  • theme：放置主題的資料夾。

開始設定 Hexo 網誌

網站基本設定

建立完網誌後，我們可以先打開_config.yml這的檔案來設定一些基本的內容。

title: 網站標題
subtitle: 網站副標題
description: 網站描述
keywords: 網站關鍵字
author: 作者名稱
language: zh-TW
timezone: Asia/Taipei

語言預設是英文，也可以設定成zh-TW改成中文，時區預設是你電腦的時區，也可跟我一樣改成台灣的時區。

主題設置

本篇文章主要是以使用 NexT 這套簡潔且集合了許多第三方外掛的強大主題來做說明。

首先載入自己的網誌資料夾(本文章的教學範例是blog)，並且將主題檔案從Github端上載下來到本地端。

$ cd blog
$ git clone https://github.com/theme-next/hexo-theme-next themes/next #將next的主題資料從github載下來放在next資料夾裡

打開網站設定檔config.yml，將theme:landscape改成theme:next，新的主題就套用成功了！

現在我們來輸入hexo generate讓 Hexo 產生靜態檔案[2]，並且使用hexo server來啟動伺服器。

$ hexo generate #產生靜態檔案
$ hexo server

在瀏覽器中輸入 localhost:4000 ，可以看見新主題已經成功套用。

作者資訊設定

1 11 在 theme/next 這個資料夾中打開主題的設定檔 _config.yml 並在 blog/source/uploads/images 的資料夾中放入你想要的大頭照，並命名為 avatar.jpg

avatar:
	url: /uploads/images/avatar.jpg

加入社群連結

在主題設定檔_config.yml，設定各社群媒體的連結。
以下示範，把前面的#字號去掉就是開啟該社群連結的意思。

social:
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  FB Page: https://www.facebook.com/larrynote || facebook

開始寫作

第一篇文章

前面講了這麼多終於要開始介紹怎麼寫文章囉！

首先一樣要透過終端機先進入自己的blog資料夾，再執行hexo new <文章名稱>，就會在路徑blog/source/_posts內創建一個文章名稱.md的檔案。

接下來就可以用文字編輯器打開文章名稱.md進行撰寫。[3]

另外這邊建議在網站設定檔config.yml的中可以將post_asset_folder: false改成post_asset_folder: true，這樣之後在用hexo new創建新文章的時候會建立一個該文章的對應資料夾，可以在該資料夾中放入該文章圖片，這樣比較好方便管理。

文章設定

當你在打開文章檔案時，預設可以做以下設定。

---
title: {{ title }} #文章標題，不用動它
date: {{ date }} #文章創建日期
tags: #標籤（多標籤寫法如下）
- tag1
- tag2
---

可以在上方區塊中為文章加入更多詳細設置，例如文章分類、SEO會用到的關鍵字和敘述設定。

categories: #文章分類
keywords: #關鍵字(SEO用)
decription: #文章敘述

這邊建議可以直接修改blog/scaffolds/post.md這個文章模板檔案，此檔案就是每次執行hexo new <文章名稱>指令時的會產生的文章模板。

加入「繼續閱讀」按鈕

在文章斷點處加入<!--more-->就可以囉！

例如以下程式碼就只會在首頁顯示”我是第一段”的文字，”我是第二段則是需要點「繼續閱讀」才會出現”

我是第一段
<!--more-->
我是第二段

新增網站頁面

我們先來創建一個分類頁面，於終端機中輸入hexo new page categories這個指令。

在blog/source/categories/ 路徑中找到index.md這個檔案，打開檔案，並增加頁面的type屬性。建議可以關閉頁面的評論功能（預設是開啟）

---
title: categories
date: 2019-03-19 12:12:12
type: "categories"
comments: false
---

打開主題設定檔config.yml，找到以下程式碼，把前方的 categories 的註解#給刪掉。

menu:
  home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

將網站佈署至GitHub Pages

終於來到了要讓大家能看到你的部落格的階段，我在這裡選擇了免費又穩定的GitHub Pages 這套服務。

GitHub Pages官方介紹

Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.

使用Github創建一個名稱為<username>.github.io的專案，例如larryblog.github.io。

執行npm install hexo-deployer-git —save這個外掛，讓Hexo可以執行指令部署至Github上。

在網站設定檔config.yml找到deploy並進行以下修改

deploy:
  type: git
  repo: https://github.com/skylovely2005/larrylai.github.io.git #新建專案的網址
  branch: master #Github Pages的是以master這個分支作為顯示頁面

另外找到url並進行以下設定

url: https://username.github.io/
root: /repo.github.io/

假設我Github的帳號名稱為larry，並且剛剛創建了larryblog.github.io這個專案，那程式碼修改如下：

url: https://larry.github.io/
root: /larryblog.github.io/

現在執行hexo deploy指令，將網站部署到Github Pages上。

接下來就可以輸入到你的網站https://username.github.io/reop.github.io來看到你的網站囉！[4]

例如https://larry.github.io/larryblog.github.io

實用外掛推薦

現在要來介紹幾個實用的外掛，大家可以參考斟酌要不要用，或是可以自己到官方的外掛列表來找到適合自己的外掛。

設置好外掛後，都需要先執行hexo generate來產生新的靜態檔案，然後再執行hexo server於本地端進行測試。

為部落格增加搜索功能

執行 npm install hexo-generator-search安裝外掛，並在主題設定檔config.yml中找到 local_search 將 enable: false 改成 true

local_search:
  enable: true

使用 Disqus 為文章加入留言功能

  1. 首先要到Disqus網站去申請一個帳號，並且新增一個「網站」。
  2. 到 setting 的General中找到該網站的 Shortname 並複製起來
  3. 回到主題設定檔config.yml中找到以下程式碼，並把剛剛複製好的貼在shortname後面。
disqus:
  enable: true #開啟功能
  shortname: https-username-web
  count: true #在文章中顯示評論數量
  lazyload: false #延遲載入功能

加入Google Analytics紀錄網站流量

取得追蹤碼

於Google Analytics中建立新帳戶，並至資源設定 > 追蹤資訊 > 追蹤程式碼，找到追 IDUA-123456789-1，並把他複製起來。


2. 完成GA設置：於主題的設定檔config.yml中加入自己的tracking_id，建議將本地端的流量忽略掉，這樣在計算上比較準確
3.

# Google Analytics
google_analytics:
  tracking_id: UA-123456789-1
  localhost_ignored: true

Google SEO優化

申請帳號，並使用GA驗證：先至Google Search Console將你的網站網址新增至資源中，由於剛剛加了Google Analytics至你的部落格中，所以驗證方法可以用Google Analytics帳戶來進行驗證。

提交sitemap

執行hexo-sitemap-generator安裝外掛。

在網站設置的config.yml中，新增路徑，讓sitemap可以順利提交。

sitemap:
  path: sitemap.xml

執行指令提交sitemap

hexo generate
hexo deploy

回到Google Search Console內的索引 -> Sitemap中提交sitemap的網址。

接下來就等Google解析你的網址啦！通常過幾天後就能夠搜尋到自己的網站了。

全站訪客及文章閱讀人數統計

使用集合在NexT主題中的不蒜子 計數套件即可。

打開主題的配置檔案config.yml，並且找到busuanzi_count，並輸入以下指令。

busuanzi_count:
  enable: true
  total_visitors: true 
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

接下來一樣執行hexo generate後就可以看到部落格中已經添加了全站瀏覽數統計以及文章閱讀數統計了。

結論

在自媒體當道的時代，有自己的一個流量池是很重要的，不論是寫文章記錄自己的生活側寫，或是分享自己的一些感想心得都可以。

以上的教學希望能夠幫助你順利使用 Hexo 這套框架來架設自己的部落格，如果有任何關於 Hexo 的問題或是更進階的使用技巧想要知道的話，歡迎在下方留言與我討論。如果喜歡我的文章，也歡迎訂閱我的網站。

參考資料

  1. 遇到node.js的write access問題，可以嘗試以下解決方法。

    1. 利用 —unsafe-perm 指令繞過系統限制，完整指令如下
    2. 透過指令更新npmsudo npm install —unsafe-perm —verbose -g npm
    3. 安裝hexo所需檔案 sudo npm install —unsafe-perm hexo-cli -g
    ↩︎

  2. 之後每次更新網站或文章都需要透過這個指令來產生新的靜態檔案唷！ ↩︎

  3. hexo的文章內容可使用Markdown語法進行撰寫。想對Markdwon語法更了解可至《Markdown入門參考｜易讀好寫的標記式語言》此篇文章參考。 ↩︎

  4. 部署到Github Pages前別忘了執行hexo generate來產生靜態檔案，另外Github Pages因為會需要約30秒~1分鐘來更新檔案，且因為有網站緩存的問題，所以如果本地端測試時看網站都是有修改，但在Github Pages上看起來還沒修改的話，建議可以多等一下或是使用無痕模式看看。 ↩︎

Read more

Voicenotes，用語音做思想輸出，與文字輸出截然不同的體驗。

Voicenotes，用語音做思想輸出，與文字輸出截然不同的體驗。

在使用 Voicenotes 之前，我是個不習慣使用語音記錄事情的人，因為我總覺得用語音記錄之後要回頭去找相關訊息會變得很麻煩，他不像文字一樣可以很方便的用搜尋即可檢索。但遇到 Voicenotes 之後，使用語音做記錄成了我的日常，一來是它辨識中文語音的效果非常好，語音轉文字之後基本上不用修太多字詞，二來是我在外面行走的時候想到什麼東西就可以隨口記錄進去（不用當低頭族打字），Voicenotes 變成了一個比較碎片化的靈感集散地。 Voicenotes 這個產品是由 Buy Me a Coffee（BMC） 的創辦人夫婦所開發的，BMC 已經出來了 6 年還有持續在迭代，所以我對於 Voicenotes 這款產品也蠻有信心的，在它剛推出 iOS App 後，我試用的當晚便腦波一弱買了他們的終身方案。大家可以參考他們的 FAQ，裡面有提到他們對這款產品未來的想像（roadmap）。 ChatGPT 的出世打開了大家進入 AI 的大門，這一年多來越來越多產品利用各種語言模型來讓自己變得更加方便。Voicenotes 也是如此，他們採用了 GPT-4、Claude
擁有網域即可擁有免費企業電子郵件：Cloudflare + Gmail + Resend

擁有網域即可擁有免費企業電子郵件：Cloudflare + Gmail + Resend

在創業或做副業初期，通常支出能省則省，本文教你怎麼把電子郵件從user@gmail.com變成比較有識別性的類企業用電子郵件如user@yourcomapny.com。 這樣之後你就可以用比較有識別性的user@yourcompany.com來收發郵件啦！這可以讓你的個人服務或網站更加專業。 免費讓自己擁有企業電子郵件教學 本文共會使用到三個服務 * Gmail：Cloudflare 和 Resend 之間的橋樑，是靈魂 * Cloudflare：使用電子郵件路由（Email Routing）服務，收到信後將不同的郵件地址轉發到其他郵件服務如 Gmail。user@gmail.com -> user@yourcompany.com * Resend：透過 Resend 這個發送電子郵件服務的 API 來完成使用 user@yourcompany.com 發送電子郵件給其他使用者的功能。 前置作業 要開始這邊文章之前，最重要的是你要先擁有自己的網域且該網域要被 Cloudflare 託管，以及你想要變成企業電子郵件的個人郵件。