什么是Cloud Studio
Cloud Studio 是基于瀏覽器的集成式開發環境（IDE），為開發者提供了一個永不間斷的云端工作站。用戶在使用 Cloud Studio 時無需安裝，隨時隨地打開瀏覽器就能在線編程。
?
Hexo 博客成品展示
本人博客如下：haiyong.site
準備工作
首先打開Cloud Studio平臺：https://cloudstudio.net/，需要注冊登錄，實名認證，然后我們進入模板頁面
往下拉點擊Hexo后進入，系統會自動部署所需要的所有環境
部署主題
選擇主題，可以選擇自己喜歡的主題。
主題鏈接：Themes | Hexo
我比較喜歡 Butterfly 主題，功能很全，樣式也很好看
?
修改 Hexo 根目錄下的_config.yml，把主題改為 butterfly：
theme: butterfly
?
安裝插件
如果你沒有 pug 以及 stylus 的渲染器，需要下載安裝：
BASH
npm install hexo-renderer-pug hexo-renderer-stylus --save
cd ./ && set port=4000 && export PORT=4000 && yarn install && yarn run server --port=4000
yarn install v1.22.19
Hexo 基礎修改
修改網站關鍵信息
Hexo 初始化后，博客網站有一些關鍵信息是默認的，需要修改為我們自己的信息。
網站資料
修改網站各種資料，例如標題、副標題和郵箱等個人資料，請修改博客根目錄的站點配置文件 _config.yml：
# Site
title: 海擁
subtitle: '一枚樂于分享技術與快樂的博主'
description: ''
keywords:
author: haiyong
language: zh-CN
timezone: ''
?
保存后運行下段代碼重新編譯并部署即可看到站點標題
cd ./ && set port=4003 && export PORT=4003 && yarn install && yarn run server --port=4003
?
導航菜單
修改主題配置文件 themes/butterfly/_config.yml：
?
menu:首頁: https://haiyong.site/ || fas fas fa-home導航||fas fa-list:時間線: /archives/ || fas fa-archive標簽: /tags/ || fas fa-tags摸魚||fas fa-fish:游戲: /moyu/ || fas fa-gamepad工具: /tools/ || fas fa-tools動畫: /demo/ || fas fa-anchor摸魚大軍: /chat/ || fas fa-place-of-worship友人帳: /link/ || fas fa-link關于我: /about/ || fas fa-heart
?
保存后運行下段代碼重新編譯并部署即可看到導航欄
cd ./ && set port=4004 && export PORT=4004 && yarn install && yarn run server --port=4004
?
背景圖咱們也修改一下
修改主題配置文件 themes/butterfly/_config.yml：
background: url(https://haiyong.site/img/bizhi/bg.jpg)
?
?
保存后運行下段代碼重新編譯并部署即可看到背景
cd ./ && set port=4006 && export PORT=4006 && yarn install && yarn run server --port=4006
?
Butterfly 主題優化
生成文章唯一鏈接
Hexo的默認文章鏈接格式是年，月，日，標題這種格式來生成的。如果你的標題是中文的話，那你的URL鏈接就會包含中文，
復制后的URL路徑就是把中文變成了一大堆字符串編碼，如果你在其他地方用這邊文章的url鏈接，偶然你又修改了改文章的標題，那這個URL鏈接就會失效。為了給每一篇文章來上一個屬于自己的鏈接，寫下此教程，利用 hexo-abbrlink 插件，A Hexo plugin to generate static post link based on post titles ,來解決這個問題。 參考github官方： hexo-abbrlink 按照此教程配置完之后如下：
1、安裝插件，在博客根目錄 [Blogroot] 下打開終端，運行以下指令：
npm install hexo-abbrlink --save
2、插件安裝成功后，在根目錄 [Blogroot] 的配置文件 _config.yml 找到 permalink：
- permalink: :year/:month/:day/:title/
#修改為
+ permalink: post/:abbrlink.html # post為自定義前綴
+ abbrlink:
+ alg: crc32 #算法： crc16(default) and crc32
+ rep: hex #進制： dec(default) and hex
?
鼠標點擊效果
zIndex建議只在-1和9999上選
-1 代表煙火效果在底部
9999 代表煙火效果在前面
修改主題配置文件 themes/butterfly/_config.yml：
fireworks:enable: truezIndex: 9999 # -1 or 9999mobile: false
?
完成后重新編譯并部署
?
網站副標題
可設置主頁中展示的網站副標題或者自己喜歡的座右銘
修改主題配置文件 themes/butterfly/_config.yml：
# Site
title: Hexo
subtitle:enable: true# Typewriter Effect (打字效果)effect: true# loop (循環打字)loop: true# 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字sub:- 但承青蓮有俠志，莫道紅塵無劍仙。- 一生疏狂盡余歡，半剖肝膽入劍寒。- 昨日前事皆可棄，明月松風抱劍來。- 扶搖直上九萬里，萬里寫入胸懷間。- 劍至高危入蜀道，生逢窮途行路難。- 江湖風雨染白衫，黑云萬里不見天。- 席卷英豪天下來，千古化境一念同。- 欲買桂花同載酒，終不似，少年游。- 溫水煮了將軍夢，現實壓垮少年肩- 時人不識凌云木，直待凌云始道高 - 駿馬自知前程遠，不必揚鞭自奮蹄。
完成后重新編譯并部署
cd ./&&set port=4006&&exportPORT=4006&& yarn install && yarn run server --port=4006
?
說了這么多，那么怎么發布文章呢，讓我們先在/hexo-demo/source/_posts/下新建一個 .md 文件，支持 Markdown 格式。
?
寫完后重新編譯并部署，現在可以看到我們的文章了。
?
到這里我們的博客也算基本完成了，當然還有更多的美化需要花更多時間的，另外，有什么問題都可以在評論區告訴我，看到了我都會第一時間為大家解答。
?
函數)
)
