GitHub Page + Hexo + NEXT 博客建站

发表于 更新于 分类于 本文字数： 3k 阅读时长 ≈ 5 分钟

Github page和Hexo搭配NEXT主题建站过程中的步骤和问题，机器用Mac，安装有homebrew， ssh -T git@github.com通，本文用的NEXT版本为8.23.0

安装部署

Hexo安装

安装nodejs

1
brew install node

安装hexo cli

1
npm install -g hexo-cli

Hexo初始化和NEXT安装

1
2
3
4
mkdir blog
cd blog
hexo init
git clone https://github.com/theme-next/hexo-theme-next themes/next

连接到GitHub

新开一个repo，命名为username.github.io，复制ssh的url

1
2
3
4
5
deploy:
  type: git # 使用git
  repo: git@github.com:username/username.github.io.git # 写入ssh的url
  branch: main # 填入branch
  message: autosave # 这里是commit信息

初次上传

1
2
# 在blog目录下
hexo clean && hexo g && hexo d

打开https://username.github.io查看博客

博客设置

CNAME设置

在根目录中

1
touch source/CNAME

将域名添加到这个文件

Permalink设置

在根目录_config.yml中修改

1
permalink: :urlname

urlname在新建文章中和title同级

新建页面（关于、标签、分类等）

1
2
3
hexo new page about
hexo new page tags
hexo new page categoris

在根目录的source/xxx/index.md中分别加入

1
2
3
type: "about"
type: "tags"
type: "categoris"

执行hexo s本地部署

新建空白页面，以star为例：

  1. 在themes/next/_config.yml中的menu选项新增项目并且设置图标
1
2
3
4
5
6
7
8
9
10
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat
  star: /star/ || fa fa-star
  1. 新建页面并索引
1
hexo new page star

在根目录的source/star/index.md中加入

1
type: "star"
  1. 在themes/next/languages/zh-CN.yml中的menu加入star: 收藏夹
  2. 执行hexo s本地部署

背景图片设置

  1. 创建用户的styl目录及相关文件，在根目录下
1
2
mkdir source/_data
touch source/_data/styles.styl
  1. 复制背景图片到themes/next/source/images，例如themes/next/source/images/background.jpg
  2. 添加背景图片，在source/_data/styles.styl中添加
1
2
3
4
5
6
7
body {
    background:url(/images/background.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}
  1. 为header、sidebar和post设置半透明，在source/_data/styles.styl中添加
1
2
3
4
5
6
7
8
9
10
11
12
.post-block {
    background-color: rgba(255, 255, 255, 0.9);
}
.header.header {
    background-color: rgba(255, 255, 255, 0.9);
}
.sidebar {
    background-color: rgba(255, 255, 255, 0.9);
}
.popup {
    background-color: rgba(255, 255, 255, 0.9);
}
  1. 在themes/next/_config.yml中启用用户的style
1
2
custom_file_path:
  style: source/_data/styles.styl

圆角矩形设置

在source/_data/styles.styl中添加

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
// 文章block的圆角矩形
.main-inner .post-block {
    border-radius: 20px 20px 20px 20px;
}
.main-inner .post-block:not(:first-child):not(:first-child) {
    border-radius: 20px 20px 20px 20px;
}
// 导航栏的圆角矩形
.header.header {
    border-radius: 20px 20px 20px 20px;
}
// 搜索框圆角矩形
.popup {
    border-radius: 20px 20px 20px 20px;
}
// 导航栏标题的圆角矩形
.site-brand-container {
    border-radius: 20px 20px 0px 0px;
}
// 侧边栏的圆角矩形
.sidebar {
    border-radius: 20px 20px 20px 20px;
}
.sidebar-inner {
    border-radius: 20px 20px 20px 20px;
}
// 回到顶部的圆角矩形
.back-to-top {
    border-radius: 0px 0px 20px 20px;
}

设置撑满页面

在source/_data/styles.styl中添加

1
2
3
.main {
    width: 100%;
}