【腾讯云 Cloud Studio 实战训练营】Hexo 框架 Butterfly 主题搭建个人博客

什么是Cloud Studio

Cloud Studio是基于浏览器的集成式开发环境(IDE),为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器就能在线编程。

Hexo 博客成品展示

本人博客如下:haiyong.site

准备工作

首先打开Cloud Studio平台https://cloudstudio.net/,需要注册登录,实名认证,然后我们进入模板页面

往下拉点击Hexo后进入,系统会自动部署所需要的所有环境

部署主题

选择主题,可以选择自己喜欢的主题。

主题链接: Themes | Hexo

我比较喜欢 Butterfly 主题,功能很全,样式也很好看

修改 Hexo 根目录下的_config.yml,把主题改为 butterfly:

javascript 复制代码
theme: butterfly

安装插件

如果你没有 pug 以及 stylus 的渲染器,需要下载安装:

BASH

js 复制代码
npm install hexo-renderer-pug hexo-renderer-stylus --save
js 复制代码
cd ./ && set port=4000 && export PORT=4000 && yarn install && yarn run server --port=4000
yarn install v1.22.19

Hexo 基础修改

修改网站关键信息

Hexo 初始化后,博客网站有一些关键信息是默认的,需要修改为我们自己的信息。

网站资料

修改网站各种资料,例如标题、副标题和邮箱等个人资料,请修改博客根目录的站点配置文件 _config.yml:

js 复制代码
# Site
title: 海拥
subtitle: '一枚乐于分享技术与快乐的博主'
description: ''
keywords:
author: haiyong
language: zh-CN
timezone: ''

保存后运行下段代码重新编译并部署即可看到站点标题

javascript 复制代码
cd ./ && set port=4003 && export PORT=4003 && yarn install && yarn run server --port=4003

导航菜单

修改主题配置文件 themes/butterfly/_config.yml

js 复制代码
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

保存后运行下段代码重新编译并部署即可看到导航栏

js 复制代码
cd ./ && set port=4004 && export PORT=4004 && yarn install && yarn run server --port=4004

背景图咱们也修改一下

修改主题配置文件 themes/butterfly/_config.yml

js 复制代码
background: url(https://haiyong.site/img/bizhi/bg.jpg)

保存后运行下段代码重新编译并部署即可看到背景

javascript 复制代码
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] 下打开终端,运行以下指令:

js 复制代码
npm install hexo-abbrlink --save

2、插件安装成功后,在根目录 [Blogroot] 的配置文件 _config.yml 找到 permalink:

js 复制代码
- permalink: :year/:month/:day/:title/
#修改为
+	permalink: post/:abbrlink.html # post为自定义前缀
+ abbrlink:
+	    alg: crc32   #算法: crc16(default) and crc32
+	    rep: hex     #进制: dec(default) and hex

鼠标点击效果

zIndex建议只在-19999上选
-1 代表烟火效果在底部
9999 代表烟火效果在前面

修改主题配置文件 themes/butterfly/_config.yml

javascript 复制代码
fireworks:
  enable: true
  zIndex: 9999 # -1 or 9999
  mobile: false

完成后重新编译并部署

网站副标题

可设置主页中展示的网站副标题或者自己喜欢的座右铭

修改主题配置文件 themes/butterfly/_config.yml

js 复制代码
# Site
title: Hexo
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循环打字)
  loop: true
  # 如果关闭打字效果,subtitle 只会显示 sub 的第一行文字
  sub:
    - 但承青莲有侠志,莫道红尘无剑仙。
    - 一生疏狂尽余欢,半剖肝胆入剑寒。
    - 昨日前事皆可弃,明月松风抱剑来。
    - 扶摇直上九万里,万里写入胸怀间。
    - 剑至高危入蜀道,生逢穷途行路难。
    - 江湖风雨染白衫,黑云万里不见天。
    - 席卷英豪天下来,千古化境一念同。
    - 欲买桂花同载酒,终不似,少年游。
    - 温水煮了将军梦,现实压垮少年肩
    - 时人不识凌云木,直待凌云始道高	
    - 骏马自知前程远,不必扬鞭自奋蹄。

完成后重新编译并部署

js 复制代码
cd ./&&set port=4006&&exportPORT=4006&& yarn install && yarn run server --port=4006

说了这么多,那么怎么发布文章呢,让我们先在/hexo-demo/source/_posts/下新建一个 .md 文件,支持 Markdown 格式。

写完后重新编译并部署,现在可以看到我们的文章了。

到这里我们的博客也算基本完成了,当然还有更多的美化需要花更多时间的,另外,有什么问题都可以在评论区告诉我,看到了我都会第一时间为大家解答。

相关推荐
AKAMAI7 小时前
跳过复杂环节:Akamai应用平台让Kubernetes生产就绪——现已正式发布
人工智能·云原生·云计算
天翼云开发者社区9 小时前
Rust 中的 Tokio 线程同步机制
云计算
天翼云开发者社区12 小时前
亮相2025年服贸会,天翼云打造高质量算力服务新生态!
云计算·天翼云
容器魔方3 天前
Bloomberg 正式加入 Karmada 用户组!
云原生·容器·云计算
AKAMAI3 天前
Sport Network 凭借 Akamai 实现卓越成就
人工智能·云原生·云计算
10岁的博客4 天前
《云计算如何驱动企业数字化转型:关键技术与实践案例》
云计算
m0_694845574 天前
教你使用服务器如何搭建数据库
linux·运维·服务器·数据库·云计算
shinelord明4 天前
【数据行业发展】可信数据空间~数据价值的新型基础设施
大数据·架构·云计算·创业创新
XINVRY-FPGA4 天前
XCKU15P-2FFVA1760I AMD 赛灵思 Xilinx Kintex UltraScale+ FPGA
arm开发·嵌入式硬件·阿里云·fpga开发·云计算·硬件工程·fpga
王道长服务器 | 亚马逊云4 天前
一个迁移案例:从传统 IDC 到 AWS 的真实对比
java·spring boot·git·云计算·github·dubbo·aws