【Hexo】HEXO－EP01. 配置篇

零、開發環境

• 開發環境
  • Git
  • Node.js
• 編寫工具：Visual Stdio Code
• 參考資料：Hexo 官方文檔

一、專案建置

/* STEP.1：安裝Hexo環境 */
npm install -g hexo-cli

/* STEP.2：Hexo初始化 */
hexo init

/* STEP.3：npm 安裝 */
npm install

/* STEP.4：hexo 靜態資料生成 */
hexo g

/* STEP.5：hexo 開啟本地預覽 */
hexo s

二、安裝主題

• STEP.1：前往Hexo 官方主題
• STEP.2：找到喜歡的主題
• STEP.3：點進去後可以看作者的說明，跟著安裝（:warning:有些主題需要額外安裝插件，同樣需要看作者的說明）
• STEP.4：安裝好後，在themes資料夾中，應該要多一個<主題>名稱的資料夾
• STEP.5：_config.yml會有兩個，在最外面的稱為站點文件，themes裡的我叫它主題文件，點開站點文件，找到theme，預設是landscape，改成你的<主題>名稱
• STEP.6：hexo g -> hexo s -> 即可查看是否成功

三、綁定github

• STEP.1：打開VSCODE，左下角帳號點選登入已同步設定，選擇github帳戶
• STEP.2：跳轉至github網頁，登入並授權同步

四、部署至github

• SETP.1：安裝套件

  npm install hexo-deployer-git --save
  

• STEP.2：打開github，創建儲存庫
• STEP.3：編輯站點文件，複製儲存庫的HTTP至repo

  deploy:
      type: git
      repo: https://github.com/用戶名/倉庫名.git
      branch: gh-pages
  

/* STEP.4：清除hexo 緩存(非必要)，但可以避免一些麻煩 */
hexo clean

/* STEP.5：生成編譯資料夾(一堆零散的東西，匯聚而成的網站成果) */
hexo g

/* STEP.6：上傳至github */
hexo d

五、Hexo 常用指令

/* Hexo 常用指令 */
hexo g = hexo generate        # 生成靜態網站
hexo s = hexo sever           # 啟動本地預覽
hexo d = hexo deploy          # 部屬網站
hexo clean                    # 清除緩存 ，一般不會用到


hexo new page <頁面名稱>  #創建頁面(about、tags...都需要創建，一開始不會自帶)
hexo n post <文章標題>    #創建文章(scaffolds/post.md => 會依照此模版創建(可更改))

六、疑難雜症

1. 部署後無樣式

:::warning
使用hexo s本地預覽明明看起來很正常，但是部署到github上後，樣式全走樣甚至根本沒有。

• 解決方式: 在站點文件中找到url，將網址改成github page上的網址。
  :::

七、內容調整(視主題而定)

1. 創建頁面

• 點選’分類’或是’歸檔’之類的連結，結果跑出404報錯，那麼就是因為該頁面還沒創建

hexo new page tags
hexo new page about
hexo new page categories

2. 安裝scss(可忽略)

hexo-renderer-sass 由於版本老舊，且沒有維護無法使用
所以安裝

npm uninstall hexo-renderer-sass
npm i --save hexo-renderer-sass-next

使用方式；在themes/<themes>/source，創建scss/<檔名>.scss，hexo g 便會幫我們自動生成.css檔案，最後在中引入即可。

3. 新增文章目錄

• 新建toc.ejs文件

<% if (page.toc != false) { %>
    <div id="toc">
      <%- toc(page.content, {list_number: false}) %>
    </div>
<% } %>

• 修改樣式(取消預設編號)

#toc,.toc,.toc-child{
    list-style: none;
}

4. 新增文章上下篇按鈕

在post.ejs(視主題而定)(文章模板)中添加如下，通常加在<%- page.content %>底下，詳細的css就自己發揮拉~

<%- page.content %>

<% if(page.next) { %>
<a href="<%- url_for( page.next.path ) %>"><%= page.next.title %></a>
<% }else{ %>
<a href="#">頂部</a>
<% } %>
<% if(page.prev) { %>
<a href="<%- url_for( page.prev.path ) %>"><%= page.prev.title %></a>
<% }else{ %>
<a href="#">底部</a>
<% } %>

5. 新增文章關鍵字

• 在head標籤裡新增

<% if (page.keywords){ %>
<meta name="keywords" content="<%= page.keywords %>,<%= config.keywords %>">
<% } else if (config.keywords){ %>
<meta name="keywords" content="<%= config.keywords %>">
<%} %>

/* Front-matter */
---
title: 
keywords: <關鍵字1>,<關鍵字2>,...
---

八、Cloudflare Pages

• STEP.1：前往Cloudflare Pages，創建or登入帳戶
• STEP.2：點擊Workers and Pages -> Pages
• STEP.3：連接git，同步github，選擇所有儲存庫或者單一庫，這裡選擇我們儲存hexo資料的倉庫
• STEP.4：保存並部署，等待同步
• STEP.5：將github儲存庫改成私人

九、google search console

• STEP.1：輸入網址
• STEP.2：下載驗證檔案，並放到專案靜態資料夾中
• STEP.3：編譯並部署 -> 驗證
• STEP.4：提交sitemap.xml，提升SEO