建站
咨詢
售后
建站咨詢
新聞中心
一 、通過云開發(fā)平臺快速創(chuàng)建初始化應用
1.創(chuàng)建相關應用模版請參考鏈接：
Hexo博客框架—輕量、一令部署
我們提供的服務有：做網(wǎng)站、成都網(wǎng)站設計、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、會寧ssl等。為千余家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的會寧網(wǎng)站制作公司
2.完成創(chuàng)建后就可以在github中查看到新增的Hexo倉庫
二 、 本地編寫《賽博朋克風格》個人博客
1.將應用模版克隆到本地
● 首先假定你已經(jīng)安裝了Git、node，沒有安裝請移步node官網(wǎng)進行安裝。克隆項目：
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端口，并出現(xiàn)默認頁面。
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
再次嘗試構建并啟動，成功出現(xiàn) Icarus 主題了：
迫不及待嘗試賽博朋克風格主題了，非常簡單，在 _config.icarus.yml 文件中修改：
# Icarus theme variant, can be "default" or "cyberpunk"
variant: cyberpunk
再次嘗試構建并啟動，賽博朋克風格主題出現(xiàn)：
具體代碼詳見這個 Commit。
4.自定義配置
下面我們修改配置文件 _config.yml 和 _config.icarus.yml ，配置網(wǎng)站相關信息。
主要包括 logo、favicon、navbar 的 menu 和 links、footer、donates（贊助信息，注釋掉沒用的支付渠道）、widgets。
這里詳細說一下 widgets，widgets 就是頁面上的各個區(qū)域的掛件，可以通過配置靈活改變其位置和具體信息，根據(jù)喜好決定布局采用 3 欄還是 2 欄布局。
● profile widgets： 這塊是用戶信息模塊，把相關信息改成你自己的就好啦，下面有一個 social_links，也可以自定義配置，如果沒有 Twitter 和 FaceBook，可以把相關信息注釋掉，也可以添加其他鏈接，注意圖標是基于 fontawesome 的。
● subscribe_email、adsense 都用不上，可以刪掉
具體修改細節(jié)可以參考這個 Commit。
修改完的效果如下：
5.源碼方式使用 lcarus 主題
剛才說到使用 Icarus 主題有兩種方式， npm 包的方式雖然簡便，但是如果想對 Icarus 主題有更深的配置就不太好弄了，尤其是過去 Icarus 一直都采用的是源碼模式，很多 Issue 的解決方案都是修改源碼的，而對應的 npm 包的方式則很少提及，所以我們也改為使用源碼方式，方便后續(xù)配置。
首先刪掉 hexo-theme-icarus 依賴，在 Icarus 倉庫下載代碼，解壓后拷貝到 theme 文件夾中。
詳見這個 Commit。
6.配置樣例文章
下面我們刪掉默認的 Hello World 文章，創(chuàng)建一個自己的文章。
注意頭部配置文件相關信息，在新版 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.文章內(nèi)容過長怎么辦
首頁應該展示更多的文章，如果文章過長，用戶下滑就只會看到同一篇文章，我們?nèi)绻幌胱層脩艨匆徊糠謨?nèi)容怎么辦呢？非常簡單，在 md 文件中添加 即可，添加完之后，就會出現(xiàn)“閱讀更多”的按鈕，首頁就能看到多篇文章了。
代碼詳見這個 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.在日常環(huán)境部署
一鍵進行應用部署。在應用詳情頁面點擊日常環(huán)境的「部署」按鈕進行一鍵部署，部署狀態(tài)變成綠色已部署以后可以點擊訪問部署網(wǎng)站查看效果。
3.配置自定義域名在線上環(huán)境上線
● 配置線上環(huán)境自定義域名。在功能開發(fā)驗證完成后要在線上環(huán)境進行部署，在線上環(huán)境的「部署配置」-「自定義域名」中填寫自己的域名。例如我們添加一個二級域名 company.workbench.fun 來綁定我們部署的前端應用。然后復制自定義域名下方的API網(wǎng)關地址對添加的二級域名進行CNAME配置。
● 配置CNAME地址。復制好 API網(wǎng)關域名地址后，來到你自己的域名管理平臺（此示例中的域名管理是阿里云的域名管理控制臺，請去自己的域名控制臺操作）。添加記錄的「記錄類型」選擇「CNAME」，在「主機記錄」中輸入你要創(chuàng)建的二級域名，這里我們輸入「company」，在「記錄值」中粘貼我們之前復制的 API網(wǎng)關域名地址，「TTL」保留默認值或者設置一個你認為合適的值即可。
● 在線上環(huán)境部署上線?；氐皆崎_發(fā)平臺的應用詳情頁面，按照部署的操作，點擊線上環(huán)境的「部署按鈕」，部署完成以后就在你自定義的域名進行了上線。CNAME 生效之后，我們輸入 company.workbench.fun（示例網(wǎng)址） 可以打開部署的頁面。至此，如何部署一個應用到線上環(huán)境，如何綁定自己的域名來訪問一個線上的應用就完成了，趕緊部署自己的應用到線上環(huán)境，用自己的域名玩起來吧 ；）
一鍵創(chuàng)建Hexo應用模版鏈接 ：https://workbench.aliyun.com/application/front/create?fromConfig=1&fromRepo=sol_github_1
參考文獻：https://juejin.cn/post/
網(wǎng)頁名稱：同為博客，不同風格 ——Hexo另類搭建
標題來源：http://fisionsoft.com.cn/article/dsojecc.html
