使用Hexo搭建个人博客

记录hexo搭建个人博客的过程，也是个人github.io仓库的使用说明

安装hexo

hexo是一个静态网页框架，使用hexo搭建好环境后，作者只需要负责写作即可，hexo会自动识别sourece/_post文件夹中的文件并渲染成网页。配合TravisCI即可在每次push后自动更新网站。

安装hexo需要提前安装以下软件：

• npm
• git

运行npm install -g hexo

启动新项目

hexo init <folder> # 非全局安装使用npx hexo
cd <folder>
npm install

或者使用克隆的仓库

git clone <repo_url>
cd <repo_name>
npm install

项目配置

项目的所有配置都保存在_config.yml中，配置内容说明见官方文档，本项目修改配置为：

language: zh-CN
permalink: :year/:month-:day-:title/                # 自动生成文章url的格式
new_post_name: :year/:year-:month-:day-:title.md    # 新建文章时的文件名格式
titlecase: true            # 英文首字母大写
theme: pure                # 使用pure主题
post_asset_folder: true    # 新建文章时自动生成assert文件夹，便于markdown引用图片等资源
marked:
  prependRoot: true       # 可以使用相对路径直接导入图片[image1](image.jpg)
  postAsset: true         # build时一同打包assert文件

主题设置

本项目的使用的主题为Pure，主题配置文件为themes/pure/_config.yml，本项目修改的主要配置为：

• 修改配置文件中的个人信息以及themes/pure/source/image中的相关图片
• 暂时关闭侧边栏中的豆瓣图书
• 复制themes\pure\_source文件夹至根目录并重命名为source中，用于启用侧边栏
• 修改source\_data\links.yml中的友链
• menu_highlight: true，是当前标签高亮
• 启用不蒜子记录文章访问次数
• 注册Valine并启用Valine评论系统，可以通过LeanCloud的应用中的class进行管理

使用TravisCI自动发布文章

hexo发布了部署功能，现在修改配置后，直接使用hexo d即可发布

• githubAPP中添加TravisCI

• 在Github网页中设置App的仓库访问权限Setting > Application > TravisCI Configure > Repository access > choose GitPages Repo

• 登录Travis官网，同步仓库，在设置中添加环境变量GH_TOKEN， value为github生成的token，只需要开通repo权限即可

• 在项目目录中添加.travis.yml，Traivs会自动监控指定分支的提交，并执行hexo generate，将生成的public文件夹发布到gh-pages分支，内容如下：

  sudo: false
  language: node_js
  node_js:
    - 16 # use correct version
  cache: npm
  branches:
    only:
      - main # build master branch only
  script:
    - hexo generate # generate static files
  deploy:
    provider: pages
    skip-cleanup: true
    github-token: $GH_TOKEN
    keep-history: true
    on:
      branch: main
    local-dir: public

• 在github仓库中设置sourcce为gh-pages分支

新文章的提交

克隆仓库的主分支到本地或使用git pull更新本地仓库

npm install
hexo new filename
git add .
git commit -m "commit"
git push

如果文章中需要引用其他静态资源，可以在同一目录内新建一个相同名称的文件夹（不含后缀），可以直接使用相对引用。

例如_post\2021\demo.md引用_post\2021\demo\demo.jpg可以直接写为![img](demo.jpg)。