教你用Hexo创建个人博客

准备工作

安装Node.js 12以上版本

https://nodejs.org/en/

安装hexo

npm install -g hexo-cli

创建博客工程

hexo init <博客工程目录>
cd <博客工程目录>
npm install

安裝hexo发布插件

在博客工程目录执行以下命令

npm install hexo-deployer-git --save

安装主题

在博客工程目录执行以下命令

npm install --save hexo-theme-fluid

然后在博客目录下创建_config.fluid.yml，将 _config.yml 内容复制进去。

参考: https://github.com/fluid-dev/hexo-theme-fluid

命令说明

清理生成的页面

hexo clean

开启本地服务器

调试页面时, 不用生成页面. 直接启动本地服务器即可
如果修改了配置文件, 重新开启本地服务器即可

hexo s

原文 https://hexo.io/zh-cn/docs/generating

生成页面

hexo g

参考: https://hexo.io/zh-cn/docs/server

发布到github (一键部署)

执行部署之前, 先需要生成页面

修改配置文件_config.yml

deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch]

执行命令

hexo d

主题设置

修改首页banner图片

建议用1920*1080分辨率的图片. 图片大小最好不要超过1MB

在source/img文件夹中加入banner图片

到_config.fluid.yml配置中修改banner图片路径

修改网站ICON图标

• 在icon网站下载彩色图标png文件
  例如: https://www.iconfont.cn/

• 把icon文件放入/source/img文件夹.
  

• 在_config.fluid文件, 修改icon文件路径
  

写作说明

文章添加封面图片

在文章的最上面设置以下信息

---
title: <文章标题> 
index_img: <文章封面图片地址>
banner_img: <文章Banner图片地址> 
date: <文章创建时间>
---

...文章内容...

创建GitHub仓库

打开 GitHub，创建一个新的公开仓库。仓库名建议使用 <GitHub用户名>.github.io，例如你的 GitHub 用户名是 JohnSmith，仓库名就填写 JohnSmith.github.io。

本文创建的是个人博客站点，仓库名需要和 GitHub Pages 的个人站点规则保持一致，使用 <GitHub用户名>.github.io。后面即使绑定自定义域名，也建议先按这个规则创建仓库。

仓库创建完成后，进入仓库的 Settings -> Pages，选择 GitHub Pages 的发布分支。使用 Hexo 部署时，一般选择 main 或 master 分支，目录选择 /root。

如果使用自定义域名，在图中4号位置填写你的博客域名。本文示例域名是 blog.9001003.xyz，实际配置时请替换成你自己的域名。

自定义域名

自定义域名不是必须配置的。如果你只想使用 GitHub Pages 默认地址 <GitHub用户名>.github.io 访问博客，可以跳过本节；只有当你希望使用自己的域名，例如 blog.9001003.xyz，才需要配置自定义域名。

自定义域名需要同时配置 DNS 和 Hexo 项目中的 CNAME 文件。

先到域名服务商的 DNS 管理页面，添加一条 CNAME 记录。记录值填写 GitHub Pages 的默认访问地址，也就是 <GitHub用户名>.github.io。

然后在 Hexo 项目的 source 文件夹中添加 CNAME 文件，文件内容只写一行你的博客域名，例如：

blog.9001003.xyz

这样每次执行 hexo g 和 hexo d 之后，生成的站点里都会带上 CNAME 文件，GitHub Pages 就不会丢失自定义域名配置。

官方原文

To set up a www or custom subdomain, such as www.example.com or blog.example.com, you must add your domain in the repository settings, which will create a CNAME file in your site’s repository. After that, configure a CNAME record with your DNS provider.

最后修改博客根目录下的 _config.yml，把 url 设置为你的正式域名。这里建议写完整地址，例如：

url: https://blog.9001003.xyz

参考:

• hexo官网: https://hexo.io/
• fluid主题: https://github.com/fluid-dev/hexo-theme-fluid