教你用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设置

blog.wingogo.tk是本案例的博客域名, 图中4号位置填上你的博客域名

配置域名

DNS设置CNAME记录值为github page的url

在source文件夹添加文件CNAME, 在CNAME文件中填上你的博客域名

官方原文

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.

设置url为域名

参考:

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