同為部落格，不同風格 ——Hexo另類搭建

一 、通過雲開發平臺快速建立初始化應用

1.建立相關應用模版請參考連結：

Hexo部落格框架—輕量、一令部署

2.完成建立後就可以在github中檢視到新增的Hexo倉庫

二 、 本地編寫《賽博朋克風格》個人部落格

1.將應用模版克隆到本地

● 首先假定你已經安裝了Git、node，沒有安裝請移步node官網進行安裝。克隆專案：

git clone + 專案地址

● 進入專案檔案

cd hexo

● 切換到feature/1.0.0 分支上

git checkout feature/1.0.0

● 使用一下命令全域性安裝 Hexo CLI ：

npm install -g hexo-cli

● 進階安裝和使用

對於熟悉 npm 的進階使用者，可以僅區域性安裝 hexo 包。

npm install hexo

● 安裝依賴包

npm install

● 啟動服務

npm run server

這裡開啟瀏覽器4000埠，並出現預設頁面。

2.案例效果預覽

3.更換為 lcarus 主題

更換主題也非常簡單，我們檢視 Icarus 文件。更換主題主要有兩種方式，一種是使用npm安裝主題的方式，另一種是下載原始碼放到 theme 資料夾的方式。簡單起見，我們先採用npm 的方式：

$ yarn add hexo-theme-icarus

使用 hexo 命令修改主題為 lcarus：

$ npx hexo config theme icarus

啟動伺服器，很不幸，報錯了：

提示很清楚，缺少依賴，我們新增依賴：

$ yarn add bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3

再次嘗試構建並啟動，成功出現 Icarus 主題了：

迫不及待嘗試賽博朋克風格主題了，非常簡單，在 _config.icarus.yml 檔案中修改：

# Icarus theme variant, can be "default" or "cyberpunk"
variant: cyberpunk

再次嘗試構建並啟動，賽博朋克風格主題出現：

具體程式碼詳見這個 Commit。

4.自定義配置

下面我們修改配置檔案 _config.yml 和 _config.icarus.yml ，配置網站相關資訊。

主要包括 logo、favicon、navbar 的 menu 和 links、footer、donates（贊助資訊，註釋掉沒用的支付渠道）、widgets。

這裡詳細說一下 widgets，widgets 就是頁面上的各個區域的掛件，可以通過配置靈活改變其位置和具體資訊，根據喜好決定佈局採用 3 欄還是 2 欄佈局。

● profile widgets： 這塊是使用者資訊模組，把相關資訊改成你自己的就好啦，下面有一個 social_links，也可以自定義配置，如果沒有 Twitter 和 FaceBook，可以把相關資訊註釋掉，也可以新增其他連結，注意圖示是基於 fontawesome 的。

● subscribe_email、adsense 都用不上，可以刪掉

具體修改細節可以參考這個 Commit。

修改完的效果如下：

5.原始碼方式使用 lcarus 主題

剛才說到使用 Icarus 主題有兩種方式， npm 包的方式雖然簡便，但是如果想對 Icarus 主題有更深的配置就不太好弄了，尤其是過去 Icarus 一直都採用的是原始碼模式，很多 Issue 的解決方案都是修改原始碼的，而對應的 npm 包的方式則很少提及，所以我們也改為使用原始碼方式，方便後續配置。

首先刪掉 hexo-theme-icarus 依賴，在 Icarus 倉庫下載程式碼，解壓後拷貝到 theme 資料夾中。

詳見這個 Commit。

6.配置樣例文章

下面我們刪掉預設的 Hello World 文章，建立一個自己的文章。

注意頭部配置檔案相關資訊，在新版 Icarus 中頭圖需要額外配置 cover 選項，如下：

title: "【譯】下一代前端構建工具 ViteJS 中英雙語字幕"
date: 2021/03/08 11:12:25
categories:
- Front-End
- Tools
tags:
- Vite
- GitHub
- Translation
toc: true # 是否顯示目錄
thumbnail: '/images/vitet.png'  # 縮圖
cover: '/images/vitet.png' # 頭圖

詳見這個 Commit。

7.文章內容過長怎麼辦

首頁應該展示更多的文章，如果文章過長，使用者下滑就只會看到同一篇文章，我們如果只想讓使用者看一部分內容怎麼辦呢？非常簡單，在 md 檔案中新增 即可，新增完之後，就會出現“閱讀更多”的按鈕，首頁就能看到多篇文章了。

程式碼詳見這個 Commit。

8.怎麼樣讓文章兩欄展示

目前文章頁仍然和首頁一樣，是三欄佈局，為了有效利用空間，希望文章頁能夠兩欄佈局。此時我們需要在 Icarus 原始碼資料夾新增 _config.post.yml 檔案，並配置成兩欄佈局：

widgets:
    # Profile widget configurations
    -
        # Where should the widget be placed, left sidebar or right sidebar
        position: right
        type: toc
        # Whether to show the index of each heading
        index: true
        # Whether to collapse sub-headings when they are out-of-view
        collapsed: false
        # Maximum level of headings to show (1-6)
        depth: 3

來看看效果：

三 、 雲端一鍵部署上線應用

1.上傳程式碼

git add . 
git commit -m '新增你的註釋'
git push

2.在日常環境部署

一鍵進行應用部署。在應用詳情頁面點選日常環境的「部署」按鈕進行一鍵部署，部署狀態變成綠色已部署以後可以點選訪問部署網站檢視效果。

3.配置自定義域名線上上環境上線

● 配置線上環境自定義域名。在功能開發驗證完成後要線上上環境進行部署，線上上環境的「部署配置」-「自定義域名」中填寫自己的域名。例如我們新增一個二級域名 company.workbench.fun 來繫結我們部署的前端應用。然後複製自定義域名下方的API閘道器地址對新增的二級域名進行CNAME配置。

● 配置CNAME地址。複製好 API閘道器域名地址後，來到你自己的域名管理平臺（此示例中的域名管理是阿里雲的域名管理控制檯，請去自己的域名控制檯操作）。新增記錄的「記錄型別」選擇「CNAME」，在「主機記錄」中輸入你要建立的二級域名，這裡我們輸入「company」，在「記錄值」中貼上我們之前複製的 API閘道器域名地址，「TTL」保留預設值或者設定一個你認為合適的值即可。

● 線上上環境部署上線。回到雲開發平臺的應用詳情頁面，按照部署的操作，點選線上環境的「部署按鈕」，部署完成以後就在你自定義的域名進行了上線。CNAME 生效之後，我們輸入 company.workbench.fun（示例網址） 可以開啟部署的頁面。至此，如何部署一個應用到線上環境，如何繫結自己的域名來訪問一個線上的應用就完成了，趕緊部署自己的應用到線上環境，用自己的域名玩起來吧 ；）

一鍵建立Hexo應用模版連結 ：

參考文獻：