Hexo入门使用 - 技术分享

CSDN 博客文章方法整理：GitHub Pages + Hexo 搭建个人博客

文章标题: GitHub Pages + Hexo搭建个人博客网站，史上最全教程

文章链接: https://blog.csdn.net/yaorongke/article/details/119089190

文章内容:

本文档介绍如何使用 GitHub Pages + Hexo搭建个人博客网站，完全免费，所有内容本人亲测，绝对可用。

一、准备工作

GitHub 账号:
- 需要有一个 GitHub 账号。
- 参考: GitHub申请账号
安装 Git:
- 在自己电脑上安装好 Git，用于 Hexo 部署到 GitHub。
- 参考: Git安装(Windows)
安装 NodeJS:
- 在自己电脑上安装好 NodeJS，Hexo 是基于 NodeJS 编写的，以及 npm 工具。
- 参考: NodeJS安装及配置(Windows)

二、创建仓库

在 GitHub 上创建一个新的代码仓库，用于保存网页。
仓库名格式必须为 <用户名>.github.io

点击 creating a new file 创建一个新文件 index.html 作为网站主页。
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>yaorongke</title>
</head>
<body>
  <h1>yaorongke的个人主页</h1>
  <h1>Hello ~</h1>
</body>
</html>

GitHub Pages 中找到主页的地址：https://<用户名>.github.io/

三、安装 Hexo

1	npm install -g hexo-cli

hexo -v

1
2
3

hexo init hexo-blog
cd hexo-blog
npm install

1 2	hexo g hexo server

*   浏览器访问 `http://localhost:4000`

四、更换主题

NexT 主题:

1 2	cd hexo-blog git clone https://github.com/iissnan/hexo-theme-next themes/next

打开 _config.yml 文件，修改 theme: next
本地启动:

1 2	hexo g -d hexo s

Fluid 主题:
*摘自 Fluid 官网[https://github.com/fluid-dev/hexo-theme-fluid]（https://github.com/fluid-dev/hexo-theme-fluid) *
- 下载最新 release 版本解压到 themes 目录，并将解压出的文件夹重命名为 fluid。
- 修改 Hexo 博客目录中的 _config.yml
  1
  2
  theme: fluid # 指定主题
  language: zh-CN # 指定语言，影响主题显示的语言，按需修改
- 创建「关于页」
  1
  hexo new page about
  创建成功后，编辑博客目录下 /source/about/index.md，添加 layout 属性。
  
  修改后的文件示例如下:
  1
  2
  3
  4
  5
  6
  7
  8
  ---
  title: about
  date: 2020-02-23 19:20:33
  layout: about
  
  ---
  
  这里写关于页的正文，支持 Markdown, HTML
- 本地启动:
1
2
hexo g -d
hexo s
- 浏览器访问 http://localhost:4000

五、创建文章

1	post_asset_folder: true

1	hexo new post 测试文章

*   在 `source/_posts` 目录下生成一个 `md` 文件和一个同名的资源目录。

示例，在 测试文章.md 中添加内容如下，演示了图片的三种引用方式。

---
title: 测试文章
date: 2021-06-10 16:35:20
tags:
  - 原创
categories:
  - Java
---

这是一篇测试文章

{% asset_img test.png 图片引用方法一 %}

![图片引用方法二](test.png)

![图片引用方法三](/images/test.png)

本地启动

1 2	hexo g -d hexo s

浏览器访问 http://localhost:4000

六、个性化页面展示

浏览器 tab 页名称:
- 修改根目录下 _config.yml 中的 title 字段。
博客标题:
- 主题目录 themes\fluid 下 _config.yml 中的 blog_title 字段。
主页正中间的文字:
- 主题目录 themes\fluid 下 _config.yml 中的 text 字段。

七、添加阅读量统计

借助 Leancloud 的免费服务来进行统计.

申请 LeanCloud 账号并创建应用:
- 进入官网注册账号
- 需实名认证验证邮箱
- 进入应用的设置->应用凭证，找到 AppID 和 AppKey，记录下来。
修改 Fluid 配置:
- 打开主题目录 themes\fluid 下的 _config.yml 文件。
- 单篇文章阅读量计数：
  - 打开统计开关。
  - 配置 leancloud 的 app_id 和 app_key。
  - 打开计数功能，统计来源改为 leancloud。
- 页面底部展示网站的 PV、UV 统计数

八、添加评论功能

打开主题目录 themes\fluid下的 _config.yml 文件，修改配置。
- 启用评论插件
  - 配置 LeanCloud 的 appId 和 appkey

九、发布到GitHub Pages

方式一:

1	npm install hexo-deployer-git --save

修改根目录下的 _config.yml，配置 GitHub 相关信息：

deploy:
  type: git
  repo: https://github.com/<用户名>/<用户名>.github.io.git
  branch: main
  token: <GitHub Personal access tokens>

部署到 GitHub:

hexo g -d

方式二:
- 直接将 public 目录中的文件和目录推送至 GitHub 仓库和分支中。

十、发布到自己服务器，Nginx 代理:

打开 hexo-blog 根目录下的 _config.yml，增加如下配置：
1
root: /blog
根目录下执行打包命令，打包好的文件在 public 目录下:hexo g
将public 目录下的文件复制到服务器上的某个目录下

修改 Nginx 配置文件，在 server 节点下添加如下配置

location /blog {
alias /opt/rkyao/fronted/hexo-blog;
index index.html index.htm;
}

重启 Nginx
访问博客 http://<服务器IP>/blog/

十一、最终效果展示:

可访问如下地址查看
https://yaorongke.github.io/

注: 请将代码中的 <用户名> 替换成您自己的 GitHub 用户名， <GitHub Personal access tokens> 替换成自己的GitHub 个人访问令牌

CSDN 博客文章 方法整理：GitHub Pages + Hexo 搭建个人博客

CSDN 博客文章方法整理：GitHub Pages + Hexo 搭建个人博客