hexo建立个人博客并部署到GitHub

介绍

hexo是什么

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

fluid是什么

Fluid 是基于 Hexo 的一款 Material Design 风格的主题

开始

推荐搭配官方文档一起看

本教程基于Linux环境，作者用的是Debian12，window环境请搜索别的教程

使用以下命令安装git

1

sudo apt-get install git-core

安装Node.js 下载并导入 Nodesource GPG 密钥

1
2
3
4


sudo apt-get update
sudo apt-get install -y ca-certificates curl gnupg
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg

创建 deb 存储库

NODE_MAJOR可以根据需要的版本进行更改

1
2


NODE_MAJOR=21
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list

更新并安装

1
2


sudo apt-get update
sudo apt-get install nodejs -y

安装hexo

1

npm install -g hexo-cli

安装完成后选择一个目录新建所需文件，作者这里用hexo文件夹

1
2
3


hexo init <folder>   #新建所选目录
cd <folder>
npm install

主题

到这里基本的安装已经完成，作者安装fluid主题，当然，别的也可以

到fluid下载最新的source code.tar.gz
使用tar -zxvf xxxxx.tar.gz解压
然后将解压完的文件重命名为fliud
将它移动到第四步你设定的目录下的themes文件夹
修改hexo根目录下的_config.yml文件，设定主题

1
2


theme: fluid
language: zh-CN

根据主题的教程，这时候我们需要创建一个关于页

1

hexo new page about

创建后修改/source/about/index.md的内容，添加layout属性

1
2
3
4
5


---
title: 你的标题
layout: about
---
#下面写正文

其他的请看用户手册，就不细说了

配置好主题后我们生成一个本地的预览网页

1

hexo s

输入http://localhost:4000就能看到生成的预览，注意只能本机访问

默认的文章是hello world,你可以使用hexo n "标题"来新建博客，包括初始的hello world ，都在source/_posts目录，如果想删掉文章，直接用rm命令就行

目录介绍

source/_posts	存放文章
public	生成的html
themes	存放主题
_config.yml	配置文件，主题文件夹里的是主题的配置文件

部署到Github

因为本地启动之能我们自己看，要想让别人也看到就要部署到GitHub或者绑定域名

其他托管网站也行，比如gitee，只是方法有点不同，这里用GitHub

确保你安装了git执行以下命令配置git

1
2


git config --global user.name "你的Github用户名"  #冒号不用删
git config --global user.email "你的Github邮箱"

配置完后开始生成密钥

1

ssh-keygen -t rsa -C "你的Github邮箱"

默认三个全回车就行，完成后会生成id_rsa.pub

1

cat ~/.ssh/id_rsa.pub  #查看密钥

复制ssh开头的输出，打开GitHub，找到settings-SSH and GPG Keys 选择add new名字随便取，在ssh里填入你刚刚复制的内容，点击添加
执行以下命令，会询问你是否连接，输入yes后如果有Hi xxx! You’ve successfully authenticated…就代表连接成功

1

ssh -T git@github.com

再去创建一个名为用户名.github.io的仓库，选项默认就行
回到hexo，vim编辑_config.yml文件，修改deploy

1
2
3
4


deploy:
  type: git
  repo: git@github.com:你的用户名/你的用户名.github.io.git
  branch: master

修改完后用以下命令生成并部署到GitHub

1
2
3


hexo clean #清理缓存
hexo g  #生成静态网页
hexo d  #部署到GitHub

完成后再浏览器里访问用户名.github.io如果没有404，那就成功了

如果出现extends includes/layout.pug block content include includes/recent-posts.pug include includes/partial，可以尝试安装

1

npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

基础写作

开始写文章前需要设定几个参数，我这里列举几个比较常用的

1
2
3
4
5
6
7


---
title: #你的标题
date: #写作日期
tags: #标签
categories: #分类
updated: #更新日期
---

如果想添加多个tags，可以用[tags1,tags2,tags3]来设定

迁移至新电脑

如果换电脑或重装系统，只需保留

1
2
3
4
5
6
7
8


_config.yml #配置文件
themes #主题文件夹
_config.<themename>.yml #如果有
package.json #插件列表
package-lock.json 
source #文章
scaffolds 
db.json

将文件移入hexo文件夹，使用npm install安装插件

参考

2022【保姆级教程】含泪搭建hexo博客

hexo文档

CSDN-大数据梦想家

Last modified on 2023-08-12