个人博客搭建

GitHub Pages + Hexo组合搭建个人博客环境

1 Github

1.1 创建仓库

创建仓库{用户名}.github.io，将来即可根据域名https://{用户名}.github.io/访问博客。

1.2 设置GitHub Pages

1.3 创建Token给Hexo使用

配置全局变量GITHUB_TOKEN_FOR_HEXO

2 Hexo

2.1 安装

先安装node，通过node安装Hexo

brew install node
npm install -g hexo-cli

升级插件sudo npm update --save hexo-cli

2.2 创建项目

hexo init hexo-blog

2.3 初始化启动

cd hexo-blog
npm install
hexo s

2.4 安装Fluid主题

Fluid主题配置

配置项可以参考官网Fluid官网，根据README操作。

2.4.1 指定主题

修改hexo配置，文件根目录/_config.yml

theme: fluid

2.4.2 创建AboutMe

hexo new page about

修改根目录/source/about/index.md，添加layout属性

---
title: about
date: 2023-02-27 22:43:06
layout: about
---

2.5 文章同名资源目录

存放图片文件

修改hexo配置文件，文件根目录/_config.yml

post_asset_folder: true

2.6 个性化页面

2.6.1 浏览器tab页名称

hexo配置文件根目录/_config.yml中title

5 # Site
6 title: 光秃秃的猫子
7 subtitle: ''
8 description: 'Bannirui博客'
9 keywords:
10 author: Banirui
11 language: zh-CN
12 timezone: ''

2.7 文章中图片链接

为了兼容markdown格式以及typora的相对路径

2.7.1 typora setting

2.7.2 plugin

npm install hexo-image-link --save

2.7.3 check

本地环境验证

hexo clean && hexo g && hexo s

2.7.4 index.js

即编译好的图片是放在public文件夹下/yyyy/mm/dd/title/img.png路径，如果发现hexo页面的图片路径不对，则修改插件hex-image-link的源码。

2.8 发布到GitHub

该部分的配置请看 Hexo主题-Fluid

2.8.3 创建文章

hexo new post {文章名称}

或者指定分类的目录hexo new post 文章名称 -p /目录/文件名.md

2.8.4 发布访问

hexo g -d

2.9 更换新设备

2.9.1 reqirements

install the requirements

• node

  apt search node
  sudo apt install nodejs

• npm

  sudo apt install npm

• hexo-cli

  sudo npm install -g hexo-cli

• gitalk

  sudo npm install hexo-plugin-gitalk --save

sync the config file and settings

cd ~/MyDev/env/os_script
./configure

• _configure.yml

• _config.fluid.yml

• _config.next.yml

2.9.2 clone

git clone git@github.com:Bannirui/Bannirui.github.io.git

cd Bannirui.github.io

sudo npm install

hexo s

2.9.3 报错

git config --global user.name "Banirui"
git config --global user.email "banirui@outlook.com"

执行完依然报错，就索性删除了远程master分支

git push origin :master

hexo clean && hexo g -d

但是github pages的页面不能正确打开博客了

重新配置github pages