通过Hexo建立个人博客

发表于 更新于

近期对博客进行了重新整理。优化了提交记录，使得Git提交历史更加清晰。现将过程记录如下，以备后续查看。

站点创建

  1. 安装Node.js及hexo包
1
2
3
nvm install 14.18.0
nvm use 14.18.0
npm install -g hexo

image-20211007143054052

  1. 通过安装的hexo命令初始化站点
1
2
3
4
mkdir blog.yqxpro.com
hexo init blog.yqxpro.com
cd blog.yqxpro.com
npm install

image-20211007143905228

  1. 初始化git仓库并提交
1
2
3
git init
git add .
git commit -m "初始化提交"

image-20211007144436473

  1. 在_config.yml中修改站点信息并提交

image-20211007144950512

  1. 通过npm安装NexT主题并提交
1
npm install --save hexo-next-theme
  1. 在_config.yml中将主题配置为NexT并提交

image-20211007154435555

  1. 在_config.next.yml中对NexT主题进行配置并提交

  2. 生成分类和标签两个页面以便快速查找文章。通过下面的命令生成后，需要在页面的front-matter中将type设置为categories和tags使这两个页面自动更新为最新版本。

1
2
hexo new page categories
hexo new page tags

index-page

  1. 通过npm run server即可生成页面并通过http://localhost:4000在本地预览
1
npm run server

写作

  1. 通过hexo命令创建草稿类型的Markdown文件
1
hexo new draft <title>
  1. 通过Typora等Markdown编辑工具撰写文章内容

Note: 在文章中使用 <!-- more --> 进行截断可使首页只显示部分内容

  1. 调整Markdown文件中的图片地址，确保文章发布后能正常展示

Note: 本站点将图片放在source/image内，通过根路径进行引用

  1. 通过hexo命令将draft发布为post
1
hexo publish post <title>
  1. 对内容进行预览，检查无误后即可提交

部署

本章节将生成的站点部署到Github Pages

  1. 安装hexo-deployer-git插件
1
npm install hexo-deployer-git --save
  1. 修改_config.yml文件配置Git部署方案

image-20211007171844429

  1. 在Github中创建名为<username>.github.io的仓库

  2. 创建source/CNAME文件并在其中写入网站使用的域名以便Github生成HTTPS证书

  3. 使用hexo命令部署将网站推送至Github

1
hexo clean && hexo generate && hexo deploy
  1. 在域名解析系统中将网站的域名(如blog.yqxpro.com)CNAME解析到<username>.github.io

image-20211007172647851

  1. 稍等几分钟即可通过https://<CNAME>访问站点。需要注意的是，Github部署HTTPS证书需要一段时间。在HTPS证书未部署完成的情况下访问会提示HTTPS证书错误，等待几分钟后重新访问即可。

  2. 安装hexo-generator-sitemap插件以生成Sitemap

1
npm install hexo-generator-sitemap --save

参考资料

文档 | Hexo

hexo-next/hexo-theme-next

关于自定义域名和Github页面

常见问题 - NexT 使用文档

Configuration | NexT

解决 Hexo 搭建博客显示不出分类、标签问题_Wonz的博客-CSDN博客