0%

hexo + git page 建置部落格與常見問題

發表於 更新於 分類於

Hexo

hexo 是快速簡潔的部落格框架，使用 Markdown 語法寫文章，將產生的靜態頁面放在 gitPage，即可快速建置一個免費的部落格

前置作業

  1. 安裝 Node.js、git
  2. 安裝 hexo $ npm install -g hexo-cli

建立 Hexo

1. 初始化 Hexo

終端機中 cd 到放專案的資料夾，初始化專案
$ hexo init projectname

2. 進入 Hexo 目錄

$ cd projectname

3. 安裝 npm 套件

根據專案目錄下的 package.json 安裝相關套件，之後會產生一個 ode_modules 資料夾
$ npm install

4. 啟動 server

安裝後啟動 server 檢查是否安裝成功
$ hexo server 或 $ hexo s

打開瀏覽器，網址欄輸入 http://localhost:4000，若出現如下頁面表示安裝成功

5. 安裝主題

由於剛初始化的專案只有 landScape 原主題，若要改成自己喜歡的風格，hexo 提供了多種主題可選 https://hexo.io/themes/

那範例使用非常大眾的 NexT https://theme-next.iissnan.com/ ，安裝版本為 NexT 7.6.0

1
2
$ cd projectname
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

注意，中文版本(精于心，简于形) https://theme-next.iissnan.com/getting-started.html 只到5.4.0版本
最新版本要去官方下載7.6.0的 https://github.com/theme-next/hexo-theme-next

中文版本不管在 google analysis、menu設置、和文章寬度都跟官方不同，雷點很多

6. 修改配置

目前專案中會有兩個 _config.yml 檔

  • 一個在根目錄，為網站配置文件
  • 一個在 themes > next，為主題配置文件

那修改主題設置的 _config.yml 在根目錄，將原本的 landscape 改成 next，改其他名稱會報 No layout: index.html 錯誤

儲存後重新整理頁面就會改主題摟

配置檔的格式要求很嚴格，注意縮排、空格是否符合，否則配置無法生效

7. Hexo 基礎設置

想要修改網站標題、個人信息等配置，可在根目錄的 _config.yml 中，打上你想要的網站名稱、副標、作者等

8. 部屬到 github

  • 新增 Repository

首先去 github 新增一個 Repository，注意這邊的 repo 名稱要跟 username 一樣，因此要輸入 op30132.github.io

  • 安裝 hexo-deployer-git

接著安裝 Hexo Git 套件，以支持部署 Hexo 靜態頁面到 GitHub

1
$ npm install hexo-deployer-git --save
  • 修改部屬配置

在根目錄的 _config.yml 中，修改部屬配置

url是你 github 帳號的頁面，root 用根目錄即可

設定欲部署之 github repo

為什麼 repo 名稱一定要用 username.github.io 呢?

因為如果你打跟帳號不同的名稱，github 幫你產生的網域名就會變成 https://username.github.io/customName.github.io，root 配置也要修改成 root: /customName.github.io/

如果想自訂名稱，變成 https://customName.github.io，那就得去 GoDaddy、google domain 花錢買網域名

  • 部屬 GitHub
    生成靜態檔案，可縮寫成 hexo g
    1
    hexo generate
    部屬，可縮寫成 hexo d
    1
    hexo deploy

接著去 Github settings 修改 Source 為 master 就可以了

等 Github Pages 30秒到1分鐘來更新檔案，就可以到 https://username.github.io 看是否成功

常見雷區

1. 為什麼佈屬好後卻出現 gitpage 404 頁面?

可以到 repo 的 Setting 檢查是否輸入錯誤，repo 名稱跟 username 不一樣產生的網址是 https://username.github.io/repo.github.io，而非https://repo.github.io

2. 為什麼我的 hexo 部屬好後 CSS 失效?

這問題不管是用 jekyll 還是 hexo 架站都會發生，原因是當你不是用 username.github.io 作為 repo 名稱時，github會建立在 http://username.github.io/repo，這時就會很容易忘記設置 root 目錄，此時去 _config.yml 修改

1
2
url: http://username.github.io/repo
root: /repo/

就會出現 css 了

本文參考
https://hsiangfeng.github.io/hexo/20190411/932826160/
https://www.larrynote.com/website-service/6590/