Hexo+Github博客搭建_cyanstyle

前言：

基于Hexo+Github搭建的博客教程

工具：

• Node.js
• Git
• Hexo

1 初始化博客

新建blog文件夹，进入文件夹，Git Bash Here

# 安装 hexo 框架
npm install -g hexo-cli
# 初始化文件夹
hexo init
# 安装 hexo 依赖包
npm install
1
2
3
4
5
6

博客框架搭建完成后，继续执行

# 生成静态网站
hexo g
# 启动服务器
hexo s
1
2
3
4

2 美化主题

themes

在 Hexo 博客根目录(…\blog)下，右键，选择Git Bash Here，执行下面命令：

git clone https://github.com/wizardforcel/hexo-theme-cyanstyle.git themes/cyanstyle
1

打开博客根目录下的 _config.yml，找到theme标签，默认值是landscape主题，把它改为要更换的主题名字cyanstyle，然后执行启动命令。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: cyanstyle
1
2
3
4

# 清理 && 生成 && 启动
hexo clean && hexo g && hexo s
1
2

cyanstyle

安装

git clone https://github.com/wizardforcel/hexo-theme-cyanstyle.git themes/cyanstyle
1

修改 Hexo 的 _config.yml 中的 theme 为 cyanstyle。

升级

cd themes/cyanstyle
git pull
1
2

配置

默认的_config.yml文件：

# Header
menu:
  Home: /
  Archives: /archives

# Content
excerpt_link: More
prev: Prev
next: Next
reply: Reply
share: Share
fancybox: true

# Sidebar
widgets:
- search
- music
- category
- recent_posts
- tag
- tagcloud

# Miscellaneous
google_analytics:
duoshuo_shortname: 
rss: 
google_site_verification: 
baidu_site_verification: 
favicon: 
music: 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

• menu - 导航栏的菜单，键值对形式，键为文字，值为连接
• widgets - 侧栏上的小工具，一行一个
• duoshuo_shortname - 站点的多说ID，可选
• fancybox - 是否开启 jQuery 弹出层效果
• google_analytics - Google Analytics ID ，可选
• rss - rss 订阅链接，可选
• google_site_verification - 用于谷歌站长工具验证所有权的ID，可选
• baidu_site_verification - 用于百度站长工具验证所有权的ID，可选
• favicon - 用于在浏览器标签上显示的图标，可选，如果不指定则会加载默认图标
• music - 侧栏上的播放器音乐，如果不指定音乐组件将不会显示

ayer

# 下载主题仓库到 themes 文件夹， git clone <仓库地址> themes/<主题名> 
git clone https://github.com/Shen-Yu/hexo-theme-ayer.git themes/ayer
1
2

更新主题

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: ayer
1
2
3
4

清理 生成 启动

# 清理 && 生成 && 启动
hexo clean && hexo g && hexo s
1
2

修改博客基本信息

# Site
title: NetTree
subtitle: ''
description: ''
keywords:
author: Cyan Chau
language: en
timezone: ''
1
2
3
4
5
6
7
8

打开 ayer 主题的`主题配置文件; 修改第 2 ~ 10行，关掉不需要的侧边栏。

menu:
  主页: /
  归档: /archives
  分类: /categories
  标签: /tags
 # 旅行: /tags/旅行/
 # 摄影: http://shenyu-vip.lofter.com
 # 友链: /friends
  关于我: /2023/about
1
2
3
4
5
6
7
8
9

修改第 14 ~ 18行，自定义首页滚动显示的标题。

subtitle:
  enable: true # 是否开启动效
  text: Welcome to NetTree
  text2: It's OK to be yourself, why care about the opinions of others.
  text3: I have the good heart of the Xi, although nine still not regret.
1
2
3
4
5

修改第 26 ~ 27行，修改网站图标和侧边栏logo。只需要把自己的图标文件按覆盖原来的文件，完整目录为‪\blog\themes\ayer\source\favicon.ico。

# 浏览器标签栏显示图标
favicon: /favicon.ico 
# 首页侧边栏图标
logo: /favicon.ico
1
2
3
4

修改封面

cover:
  enable: true
  path: /images/cover8.jpg
  logo: false
1
2
3
4

第 125 行，关闭右上角的 GitHub forkme

github:
  # (关闭请设置为false)
  enable: false
  url: https://github.com/Shen-Yu/hexo-theme-ayer
1
2
3
4

第 83 行，关闭打赏

reward_type: 0

1
2

改完后，执行hexo g && hexo s，刷新网页看下效果： 改完后，执行hexo g && hexo s，刷新网页看下效果：

3 撰写文章

新建文章

在博客根目录下右键，选择Git Bash Here，输入下面命令

hexo new "博客搭建教程"
1

此时先 Ctrl + C 停止服务器，执行hexo g && hexo s重新部署，刷新http://localhost:4000/，可以看到博客上多了一篇文章。

修改模板

---

title: 博客搭建教程
date: 2023-02-11 17:59:39
tags:

---

这就需要修改根目录配置文件(‪\blog_config.yml)的new_post_name参数了，其中year month day 分别表示创建文章的年月日，这样，再新建文章时，文件名将会自动加上年月日信息，便于通过日期来管理文章。当然，这个时间后面也是可以修改的。

new_post_name: :year-:month-:day-:title.md
1

此时先 Ctrl + C 停止服务器，执行hexo g && hexo s重新部署，刷新http://localhost:4000/，看看效果。

4 发布博客

新建Cyanzzy.github.io 仓库

配置 Git 参数

在博客根目录下，右键，打开Git Bash Here。

配置用户名和邮箱，这两个参数用于 Git 提交时的身份识别。

# 其中 username 和 username@XXX.com 是你注册 GitHub 的用户名和邮箱
git config --global user.name "username"
git config --global user.email "username@XXX.com"
1
2
3

生成 SSH keys，主要用于Git 提交时的权限控制和加密，本地根据 RSA 算法生成公私密钥对，然后将公钥添加到 GitHub 上，本机就可以提交代码到自己的 GitHub 库了。这个是根据当前使用的电脑的一些信息生成的，所以换电脑提交时要重新生成并添加

输入下面命令，然后一直按回车，直到结束。

# 其中 username@XXX.com 是你注册 GitHub 的邮箱
ssh-keygen -t rsa -C "username@XXX.com"
1
2

开自己的 Github 主页，点击右上角的头像，点击Settings,配置SSH公钥

安装 Hexo 发布插件

在博客根目录下，右键，打开Git Bash Here。

输入下面的命令，安装hexo-deployer-git

个插件用于把生成好的静态页面上传到 GitHub Pages 仓库。

npm install hexo-deployer-git
1

准备发布

打开博客根目录配置文件(D:\MyBlog_config.yaml)，拉到文件最后一行，修改为下面的配置（没有的配置项自行添加），保存。

# 其中 xxxxxx 是前面多次用到的你的GitHub用户名
deploy:
  type: git
  repo: git@github.com:xxxxxx/xxxxxx.github.io.git
  branch: main
1
2
3
4
5

执行命令

# 注意最后变成d了，原来的s表示服务起在本地，现在的d表示部署在远端
hexo g && hexo d
1
2

参考文章

从零开始免费搭建自己的博客(一)——本地搭建hexo框架