Hexo博客搭建(含美化)

本文最后更新于:2 个月前

Hexo博客搭建教程(包括上传到GitHub和博客美化)

需要的工具

  • node.js
  • git

安装and部署

  1. 安装node.js和git
    node.js
    git

  2. 安装hexo
    npm install hexo -g
    安装后使用hexo -v查看hexo是否安装完成

  3. 创建hexo项目文件夹作为博客的目录
    创建完成后在该目录使用cmd命令hexo init初始化博客

  4. 使用hexo generatehexo g生成当前的博客

  5. 使用hexo serverhexo s启动服务器
    可以用localhost:4000访问博客(此时博客是在本地运行)

  6. 生成ssh密钥
    打开Git Bash,使用以下命令配置git,(推荐在博客目录下)
    git config --global user.name "你的github用户的名字"
    git config --global user.name "你的github用户的邮箱"
    ssh-keygen -t rsa -C "你的github账户邮箱"
    连续三次回车
    eval "$(ssh-agent -s)",添加到ssh-agent
    ssh-add ~/.ssh/id_rsa,添加生成的SSH密钥到ssh-agen
    cat ~/.ssh/id_rsa.pub
    复制此时显示的内容,内容应该是ssh-rsa简介

  7. Ctrl+C退出后,在GitHub上新建一个新的仓库,仓库名为(你的用户名.github.io)
    然后到仓库页面上有个setting点击后进入页面
    页面的左侧的选项卡,部署选择添加部署键,添加密钥。

  8. 修改hexo配置文件
    打开本地博客的根目录,找到_config.yml文件
    在文件的开头处,第二部分,URL部分改成如下内容:

1
2
3
4
5
6
7
8
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://(你的用户名).github.io/ (后面如果需要域名访问改成你的域名)
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks

在文件的结尾处,改成如下内容:

1
2
3
4
deploy:
type: 'git'
repo: 'https://github.com/(你的用户名)/(你的用户名).github.io.git'
branch: main
  1. 使用hexo clean清除扫描
  2. 使用hexo g生成博客
  3. 使用npm install hexo-deployer-git --save安装插件
  4. 使用hexo deployhexo d将部署到GitHub上,打开你的GitHub Pages设置进入输入的url,就可以的博客了。以上两步也可以连写为hexo d -g

博客美化(本文使用Fluid主题)

安装主题

Fluid 是基于 Hexo 的一款 Material Design 风格的主题

TIP
致主题的新用户:

本指南经过数个版本打磨,绝大部分的功能都有详细说明,请仔细阅读,节约自己和他人的时间;

本指南中提到的:”博客配置” 指的 Hexo 博客目录下的 _config.yml,”主题配置” 指的是 theme/fluid/_config.yml 或者 _config.fluid.yml ,注意区分;

本指南中提到的 source 目录都指的是博客目录下的 source 文件夹,不推荐修改主题内 source 目录;

每次无论 hexo ghexo s,都最好先使用 hexo clean 清除本地缓存;

页面结果以本地 hexo s 为准,部署后的异常大部分是线上缓存原因,在确认没有报错的情况下,等待若干时间后即可正常;

由于主题的不同版本会存在配置差异,本指南以最新版本为准。

方式一

Hexo 5.0.0 版本以上,推荐通过 npm 直接安装,进入博客目录执行命令:
npm install --save hexo-theme-fluid
然后在博客目录下创建_config.fluid.yml,将主题的_config.yml
内容复制过去。

方式二

下载最新release版本解压到 themes 目录,并将解压出的文件夹重命名为 fluid。

指定主题

如下修改 Hexo 博客目录中的 _config.yml

1
2
theme: fluid  # 指定主题
language: zh-CN # 指定语言,会影响主题显示的语言,按需修改

创建关于页

在git-bash或cmd里执行命令
hexo new page about
创建成功后修改 /source/about/index.md,添加 layout 属性。
修改后的文件示例如下:

1
2
3
4
5
6
---
title: 标题
layout: about
---

这里写关于页的正文,支持 Markdown, HTML

WARNING
layout: about 必须存在,并且不能修改成其他值,否则不会显示头像等样式。

关于更多

可以看Fluid主题使用手册

添加网站运行时间

注意缩进

1
2
3
4
5
6
7
8
9
10
content: '
<a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
<i class="iconfont icon-love"></i>
<a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>
<div>
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script src="/js/duration.js"></script>
</div>
'

JS文件

如果是npm安装则在 博客目录下 blog/node_modules/hexo-theme-fluid/source创建 duration.js

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
var now = new Date();

function createtime() {
var grt = new Date("08/30/2021 20:00:00");//在此处修改你的建站时间,格式:月/日/年 时:分:秒
now.setTime(now.getTime() + 250);
days = (now - grt) / 1000 / 60 / 60 / 24;
dnum = Math.floor(days);
hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
hnum = Math.floor(hours);
if (String(hnum).length == 1) {
hnum = "0" + hnum;
}
minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes);
if (String(mnum).length == 1) {
mnum = "0" + mnum;
}
seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds);
if (String(snum).length == 1) {
snum = "0" + snum;
}
document.getElementById("timeDate").innerHTML = "本站已安全运行 " + dnum + " 天 ";
document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}

setInterval("createtime()", 250);

添加访客量

主题配置文件 大概431行(展示网站的 PV、UV 统计数)
enable: true
source: "busuanzi"
leancloud需要注册且设置(busuanzi不用)

更多样式(在主题配置下

custom_js:

1
2
3
4
5
6
7
8
9
custom_js:
# - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/DynamicRibbon.min.js # 动态彩带
# - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/Ribbon.min.js # 静态彩带
# - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/DynamicLine.min.js # 动态黑色线条
# - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/snowflake.min.js # 小雪花飘落
# - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/Cherry.min.js #樱花飘落
# - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/star.min.js # 鼠标跟随小星星
# - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/containsWord.min.js # 鼠标点击出字
# - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/love.min.js #鼠标点击出爱心

启用某个就把注释删除掉
custom_css:

1
2
#  - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/shubiao.css #鼠标指针
# - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/scroll.css # 滚动条颜色

使用所购买的域名访问博客

GitHub Pages 可使用两种类型的域名:子域名和 apex 域名。 有关不支持的自定义域名列表

1
2
3
4
5
支持的自定义域类型	示例

www 子域 www.example.com
自定义子域 blog.example.com
Apex 域 example.com

管理 GitHub Pages 站点的自定义域
在主题目录下 source下创建一个文件CNAME 该文件无后辍,内容为你所解析的域名内容
例如:我的是yorg.top 文件内就写 yorg.top

配置评论

主题文件搜索Comment plugin打开评论插件 类型选waline
配置waline

waline

1
2
serverURLs: '(填写你的站点)' 
emoji: ['https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/bilibili']

本文参考:

在GitHub上部署hexo博客
【作者:codeanime】
在github上部署hexo【作者:戴维汉姆】
Hexo + Fluid 美化 【作者:EmoryHuang】
Hexo Fluid 用户手册


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!