同為部落格,不同風格 ——Hexo另類搭建
一 、通過雲開發平臺快速建立初始化應用
1.建立相關應用模版請參考連結:
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 主題
更換主題也非常簡單,我們檢視
$ yarn add hexo-theme-icarus
使用 hexo 命令修改主題為 lcarus:
$ npx hexo config theme icarus
啟動伺服器,很不幸,報錯了:
$ yarn add [email protected] hexo-renderer-inferno@^0.1.3
再次嘗試構建並啟動,成功出現 Icarus 主題了:
# Icarus theme variant, can be "default" or "cyberpunk"
variant: cyberpunk
再次嘗試構建並啟動,賽博朋克風格主題出現:
4.自定義配置
下面我們修改配置檔案 _config.yml 和 _config.icarus.yml ,配置網站相關資訊。
主要包括 logo、favicon、navbar 的 menu 和 links、footer、donates(贊助資訊,註釋掉沒用的支付渠道)、widgets。
這裡詳細說一下 widgets,widgets 就是頁面上的各個區域的掛件,可以通過配置靈活改變其位置和具體資訊,根據喜好決定佈局採用 3 欄還是 2 欄佈局。
- profile widgets: 這塊是使用者資訊模組,把相關資訊改成你自己的就好啦,下面有一個 social_links,也可以自定義配置,如果沒有 Twitter 和 FaceBook,可以把相關資訊註釋掉,也可以新增其他連結,注意圖示是基於
- subscribe_email、adsense 都用不上,可以刪掉
具體修改細節可以參考這個
修改完的效果如下:
剛才說到使用 Icarus 主題有兩種方式, npm 包的方式雖然簡便,但是如果想對 Icarus 主題有更深的配置就不太好弄了,尤其是過去 Icarus 一直都採用的是原始碼模式,很多 Issue 的解決方案都是修改原始碼的,而對應的 npm 包的方式則很少提及,所以我們也改為使用原始碼方式,方便後續配置。
首先刪掉 hexo-theme-icarus 依賴,在
詳見這個
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' # 頭圖
詳見這個
7.文章內容過長怎麼辦
首頁應該展示更多的文章,如果文章過長,使用者下滑就只會看到同一篇文章,我們如果只想讓使用者看一部分內容怎麼辦呢?非常簡單,在 md 檔案中新增 <!-- more --> 即可,新增完之後,就會出現“閱讀更多”的按鈕,首頁就能看到多篇文章了。
程式碼詳見這個
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.在日常環境部署
一鍵進行應用部署。在應用詳情頁面點選日常環境的「部署」按鈕進行一鍵部署,部署狀態變成綠色已部署以後可以點選訪問部署網站檢視效果。
- 配置線上環境自定義域名。在功能開發驗證完成後要在線上環境進行部署,在線上環境的「部署配置」-「自定義域名」中填寫自己的域名。例如我們新增一個二級域名 company.workbench.fun 來繫結我們部署的前端應用。然後複製自定義域名下方的API閘道器地址對新增的二級域名進行CNAME配置。
- 配置CNAME地址。複製好 API閘道器域名地址後,來到你自己的域名管理平臺(此示例中的域名管理是阿里雲的域名管理控制檯,請去自己的域名控制檯操作)。新增記錄的「記錄型別」選擇「CNAME」,在「主機記錄」中輸入你要建立的二級域名,這裡我們輸入「company」,在「記錄值」中貼上我們之前複製的 API閘道器域名地址,「TTL」保留預設值或者設定一個你認為合適的值即可。
- 在線上環境部署上線。回到雲開發平臺的應用詳情頁面,按照部署的操作,點選線上環境的「部署按鈕」,部署完成以後就在你自定義的域名進行了上線。CNAME 生效之後,我們輸入 company.workbench.fun(示例網址) 可以開啟部署的頁面。至此,如何部署一個應用到線上環境,如何繫結自己的域名來訪問一個線上的應用就完成了,趕緊部署自己的應用到線上環境,用自己的域名玩起來吧 ;)
參考文獻:
本文為阿里雲原創內容,未經允許不得轉載。