作者在这里先说一下,网上说部署博客很简单的肯定是报错遇到几十遍摸索出来的,哪里有不简单这个道理。难不成天上掉馅饼了?

开始

创建Hexo初始页面(前提需要安装NodeJS和Git)

在你想要搭建博客的地方,右键选择 Open Git Bash Here

PNG

之后会打开一个窗口,等窗口加载完,在命令行窗口输入以下命令

hexo init

然后就等他部署完之后,运行以下两个命令

hexo g
hexo s

完成之后打开 localhost:4000

如果打开不了的话,一般是由于windows系统的4000端口被占用了

修改端口: hexo s -p 5000 一般都能解决 (也可以 netstat -ano 查询所有端口信息,找到占用端口的程序关闭它)

如果还不能解决,是因为你的有部分Windows功能没有打开(IIS没有配置好)

打开控制面板 —- 程序和功能 —- 打开或关闭Windows功能 —— 勾选上Internet Informent Services ——-点击确定即可

这时候如果打开的话,游览器就会出现这个页面

PNG

如果你不嫌这个主题丑的话,那么就可以到Hexo d

修改主题

这里以Butterfly主题为例

打开你网站根目录下的theme文件夹

PNG

右键再次点击 Open Git Bash Here

在命令窗口内输入以下命令

git clone https://github.com/jerryc127/hexo-theme-butterfly.git

完成之后是theme文件夹内是这个样子

PNG

将刚刚克隆的主题文件夹改为 butterfly

PNG

最后将 _config.landscape.yml 改为 _config.butterfly.yml,这个就是我们配置主题的文件

回到博客的根目录,打开 _config.yml 找到该文件如下设置项

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

将theme里的landscape改成butterfly(这是博客主题选项)

Ctrl+S 保存之后,运行以下三个命令

hexo c
hexo g
hexo s

这样,主题也就更换完成了

PNG

当然,如果你进入游览器看到的页面是以下字符的话:

extends includes/layout.pug block content include ./includes/mixins/post-ui.pug #recent-posts.recent-posts +postUI include  includes/pagination.pug

这就说明没有安装 pug 以及 stylus 的渲染器,请下载安装:

npm install hexo-renderer-pug hexo-renderer-stylus --save

再一次执行上面的三条命令,就可以运行了

配置主题

menu:
主页: / || fas fa-home
博文 || fa fa-graduation-cap:
归档: /archives/ || fa fa-folder-open
友链: /links/ || fa fa-link
#留言板: /messageboard/ || fa fa-paper-plane
关于笔者: /about/ || fas fa-heart

highlight_theme: mac light # darker / pale night / light / ocean / mac / mac light / false 代码主题
highlight_copy: true # 复制按钮
highlight_lang: true # 是否显示代码语言
highlight_shrink: false # true: 代码块默认不展开 / false: 代码块默认展开 | none: 展开并隐藏折叠按钮
highlight_height_limit: false # unit: px
code_word_wrap: true #代码自动换行,关闭滚动条

# Local search
local_search:
enable: true
labels:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}" # 如果没有查到内容相关内容显示

# the subtitle on homepage (主頁subtitle)
subtitle:
enable: true
# Typewriter Effect (开启打字效果)
effect: true
# loop (循環打字)
loop: true
# source調用第三方服務
# source: false 關閉調用
# source: 1 調用搏天api的隨機語錄(簡體)
# source: 2 調用一言網的一句話(簡體)
# source: 3 調用一句網(簡體)
# source: 4 調用今日詩詞(簡體)
# subtitle 會先顯示 source , 再顯示 sub 的內容
source: false
# 如果有英文逗号' , ',请使用转义字元 ,
# 如果有英文双引号' " ',请使用转义字元 "
# 开头不允許转义字元,如需要,请把整個句子用双引号包住
# 如果关闭打字效果,subtitle只会现示sub的第一行文字
sub:
- 你在抱怨什么呢
- 为明天到来的事,说人生像是没有意义
- 没有选择会是唯一的路
- 这不是你自己的问题,人终归要好好去生活
- 物质决定意识
- 人性一个最特别的弱点就是:在意别人如何看待自己

favicon: https://pic.imgdb.cn/item/65fae1259f345e8d03990fdc.png
avatar:
img: https://pic.imgdb.cn/item/65fe67989f345e8d03923ea6.jpg #图片路径
effect: false #头像会一直转圈


# The banner image of home page
index_img: https://pic.imgdb.cn/item/664005ea0ea9cb1403455d4c.png

# If the banner of page not setting, it will show the top_img
default_top_img: https://pic.imgdb.cn/item/664005ea0ea9cb1403455d4c.png

#归档子标签页图片
# The banner image of archive page
archive_img: https://pic.imgdb.cn/item/664005ea0ea9cb1403455d4c.png

#tag页(标签页)
tag_img: https://pic.imgdb.cn/item/664005ea0ea9cb1403455d4c.png

#category页
category_img: https://pic.imgdb.cn/item/664005ea0ea9cb1403455d4c.png

cover:
index_enable: true # 是否展示文章封面
aside_enable: true
archives_enable: true
position: both # 封面展示的位置 left/right/both

medium_zoom: false
fancybox: true

post_copyright:
enable: true
decode: true
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

aside:
enable: true
hide: false
button: true
mobile: true # display on mobile
position: right # left or right
card_author:
enable: true
description:
button: # 头像下面按钮
enable: true
icon: fab fa-github
text: 查看我的Github主页!!!
link: https://github.com/exef-star
card_announcement: # 公告
enable: true
content: 欢迎来到可执行程序的博客V3.0版本,该博客为测试版,如有Bug请QQ给作者:2667174454(Hexo:Butterfly) # 公告显示文字

social:
fab fa-github: https://github.com/exef-star || Github
fab fa-qq: https://user.qzone.qq.com/2667174454?_t_=0.3701241711847538 || QQ
fas fa-envelope-open-text: mailto:wy2667174454@163.com || 163 Email

# toc (目錄)
toc:
post: true
page: false
number: false
expand: true # 是否展开
style_simple: false # for post
scroll_percent: true

# Mouse click effects: fireworks (鼠标点击效果:萤火特效)
fireworks:
enable: false
zIndex: 9999 # -1 or 9999
mobile: false

# wordcount (字數統計)
wordcount:
enable: true
post_wordcount: true
min2read: true
total_wordcount: true

# Loading Animation (加载动画)
preloader: true

runtimeshow:
enable: true
publish_date: 5/12/2024 00:00:00 #网页开通时间
#格式: 月/日/年 时间
#也可以写成 年/月/日 时间

footer:
owner:
enable: true
since: 2022
custom_text: <p>
<a style="margin-inline:5px"target="_blank" href="https://hexo.io/">
<img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为 Hexo" alt="HEXO">
</a>
<a style="margin-inline:5px"target="_blank" href="https://butterfly.js.org/">
<img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主题采用 Butterfly" alt="Butterfly">
</a>
<a style="margin-inline:5px"target="_blank" href="https://github.com/">
<img src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub" title="本站项目由 GitHub 托管" alt="GitHub">
</a>
<a style="margin-inline:5px"target="_blank"href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
<img src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris" alt="img" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可">
</a>
</p>

copyright: false # Copyright of theme and framework

font:
global-font-size: 16px
code-font-size: 16px
font-family: SegoeUI,"Segoe UI", "Microsoft YaHei UI Light", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif
code-font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif



# busuanzi count for PV / UV in site
# 訪問人數
busuanzi:
site_uv: true
site_pv: true
page_pv: true

noticeOutdate:
enable: true
style: flat # style: simple/flat
limit_day: 365
position: top # position: top/bottom
message_prev: 并未过期!!!
message_next: 自上次更新以来的天,文章的内容可能已过时!!!

related_post:
enable: true
limit: 6 # 显示推荐文章数目
date_type: created # or created or updated 文章日期显示创建日或者更新日

新建文章

Bash中输入以下命令

hexo new "在这里写上你的标题"

上传到Github

创建一个SSH秘钥(自行百度)

在Github上登录账号(没有的可以注册一个)

然后打开你需要部署的仓库,点击右上角的Code

PNG

复制SSH秘钥

然后打开博客根目录下的_config.yml

找到最后的配置项deploy:

将刚刚复制的SSH秘钥粘贴在repo:

详细配置如下:

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: 'git'
repo: 粘贴上SSH
branch: master

之后运行以下命令

hexo c && hexo g && hexo d

再开启GithubPage服务,访问username.github.io

PNG

小插曲

Hexo同步更新Github仓库,但不更新Page

这里因为github将默认分支改为了main,所以要用户自行修改分支名

PNG

然后在左侧侧边栏中的Pages选项中选择经典部署

PNG

将分支改为我们刚才改的main分支

PNG

再切回Github Actions,来到Actions检查,你会发现Page现在正在部署,不一会就更新完成了,这时候访问就可以看到我们更新的内容

PNG

那么到这里,感谢你阅读完了全文,拜了个拜👋