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

前言

在使用 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

由 DALLE.3 生成的封面照片。

時間和習慣造就成的資產累積,投資歷程心得分享

我從 2016 年開始使用 MOZE 手機記帳軟體記錄自己每天的開支,2017 年開始用 Google Sheet 記錄自己每個月的總資產狀況,累積迄今已經邁入了第九年。記帳最有感的地方是在每個月檢視自己的資產幅度是增加還是減少,也讓自己知道在未來一個月該怎麼調整花錢的習慣。 而且因為有在記帳,在每一筆支出產生的時候都會問自己「這筆支出是我負擔的起的嗎?」「有多少錢做多少事」因而在我的理財觀念中根深蒂固。 初入投資市場 我是個幸運的人,資產不用從負開始,爸媽並沒有讓我揹負學貸,也沒有要求我需要每個月寄錢回家,讓我可以自由運用自己的每一筆收入。國小的時候爸媽會跟早餐店老闆聊股票標的,讓我對於投資股票這件事沒那麼陌生,大學的時候有在投資理財的同學一起找我選修「期貨與選擇權」這門課程,讓我開始進入了投資的世界。 那時候的我有在打工,加上爸媽每個月給我的零用金我也省吃儉用,郵局裡面有幾萬元的儲蓄。在某一個打工的下午時段,因為當時沒有客人,我就在 Yahoo 奇摩股市閒晃,看了一些財經新聞後請我媽用他的證券戶幫我敲進我人生中第一隻自己選擇的標的「南亞科(2408)」。我忘了這隻股票最終

由 DALLE.3 生成的封面照片。

萬事問 Google?你也可以試試看 Perplexity

在現在這個取得資訊非常方便的時代,任何問題只要問 Google 都能夠得到解答,搜尋引擎就像一個開放且有良好分類的圖書館一樣,你只需要用「問」的方式去告訴 Google 這個圖書館管理員你想要找什麼內容,他就會推薦他認為符合你問題的相關資訊給你。 這也造就了「Why don’t you google it?」這句話的流行,好像問問題前沒有先 Google 過就像個伸手牌一樣。 ChatGPT 問世後曾有人認為能夠翻轉這個趨勢,Bing 搜尋引擎結合了 ChatGPT,採用聊天交互問答的方式搜尋曾經造成一陣風潮,讓 Google 也不得不推出 Bard 來迎戰,但 1 年多過去了,大家的使用習慣還是沒改變,傳統的搜尋模式依舊被認為是較有效率的方式,Google 依然穩坐搜尋引擎龍頭寶座。 Perplexity AI 搜尋引擎介紹 Perplexity.AI 在 2022 年下半年就創立了,由於我是在 2024

使用 DALLE 3 AI 繪圖產生

2024 過年雜談

今年過年在除夕當天回家,一直待到初四中午返回北部。這段期間只有在初三中午出門跟朋友聚會,其他時間都是陪伴著家人,算是近幾年除了 Covid 居家隔離時待在家中時間最久的一次。 去年下半年換了工作後,在 Q4 開始一直被業績追著跑,就連假日也不太能放鬆,很難有一個好好休息的時間。這次的年假,在返家後真的有一個比較完整的休息時間,一整個下午躺在沙發上看漫畫、跟朋友約電動都毫無壓力,可能是因為大家(包含消費者)都在休息,所以自己在休息也比較順理成章。 過年期間的休閒娛樂 這個年假我的休閒娛樂主要有兩個,一是用 XBOX Series S 跟美國的朋友連了好幾場「榮耀戰魂(For Honor)」,沒想到這個老 Game 跟朋友玩竟然是如此有趣,比起自己上網找玩家被虐好多了;此外還看了「葬送的芙莉蓮」單行本 1 到 12 集,超前了動畫進度許多,目前的進度很好看,希望不要像咒術迴戰一樣中途崩掉,不然花錢買漫畫會覺得很可惜。 這個過年跟著爸媽往外跑的時間也變多了,初一跟爸媽去鹿港天后宮拜拜,雖然就真的只是拜拜沒有逛其他的東西,但也算是感受到了過年期間的人潮;

Apple Watch Ultra 2 心得,健康無價、升級有感

Apple Watch Ultra 2 心得,健康無價、升級有感

我跟 Apple Watch 系列有過三次的淵源,第一次是在當兵的時候,我嘗試買了 Apple Watch 第一代,那時後只戴了一週左右便因為手錶的通知功能加深了我當時的訊息焦慮,所以我把手錶退掉了。 過了幾年後,我在 2017 年入手了 Apple Watch Series 3,他一路陪伴了我 6 年多的時間一直到 2023 年,除了在 App 運行上會比較卡一些之外,其實跟最新的 Apple Watch 系列沒什麼兩樣,一天還是要充一次電。所以從 S6 就喊說想換手錶的我一直沒辦法狠下心來真正把我的 S3 換掉。 直到了 2023 年,因為 S3 只能升級到 WatchOS 8 而已,但我入手的一些應用程式如 Gentler, Grow, Lumy