一 、通過云開發平臺快速創建初始化應用
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 [email protected] 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應用模版鏈接 ：https://workbench.aliyun.com/application/front/create?fromConfig=1&fromRepo=sol_github_1
參考文獻：https://juejin.cn/post/6938856324239196167
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/467071.html
標籤：其他
上一篇：pm2 常用命令
下一篇：javascript生成一棵樹