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

需要的工具

node.js
git

安装and部署

安装node.js和git
node.js
git
安装hexo
npm install hexo -g
安装后使用hexo -v查看hexo是否安装完成
创建hexo项目文件夹作为博客的目录
创建完成后在该目录使用cmd命令hexo init初始化博客
使用hexo generate或hexo g生成当前的博客
使用hexo server或hexo s启动服务器
可以用localhost:4000访问博客（此时博客是在本地运行）
生成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简介
Ctrl+C退出后，在GitHub上新建一个新的仓库，仓库名为(你的用户名.github.io)
然后到仓库页面上有个setting点击后进入页面
页面的左侧的选项卡，部署选择添加部署键，添加密钥。
修改hexo配置文件
打开本地博客的根目录，找到_config.yml文件
在文件的开头处，第二部分，URL部分改成如下内容：

# 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

在文件的结尾处，改成如下内容：

deploy:
  type: 'git'
  repo: 'https://github.com/(你的用户名)/(你的用户名).github.io.git'
  branch: main

使用hexo clean清除扫描
使用hexo g生成博客
使用npm install hexo-deployer-git --save安装插件
使用hexo deploy或hexo 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 g 或 hexo 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 属性。
修改后的文件示例如下：

---
title: 标题
layout: about
---

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

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

关于更多

可以看Fluid主题使用手册

添加网站运行时间

注意缩进

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

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不用）

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

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

支持的自定义域类型	示例

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 用户手册

Hexo博客搭建（含美化）