使用hexo和github pages从零开始搭建个人博客

前言

从07-25到现在的09-28,鸽了怎么长时间后,那个博主终于想起了自己在使用hexo和codeberg pages从零开始搭建个人博客说的要在之后找一个时间出一个github pages的部署方法,也就是这篇博文,使用这篇博文是使用hexo和github pages从零开始搭建个人博客,主题使用next也就是这个博客目前使用的,不过本篇的博文重点是github-pages部署,关于next的个性化配置就再找一个时间出吧(-:

安装必要的软件

因为要我们使用hexo框架来构建我们的博客,所以我们需要nodejs和npm,如果你是linux使用包管理器安装,这里以arch为例:
sudo pacman -S git nodejs npm

你可能会有疑问:蛤?不是要使用hexo吗,上面为什么没有hexo这个包?
因为hexo是npm的一个插件,并不是一个软件包,所以我们要使用npm来全局安装这个博客框架
sudo npm install -g hexo-cli

其他细节参考官方文档:
https://hexo.io/zh-cn/docs/

初始化你的博客

使用npm安装好hexo后,执行以下命令来初始化(init后面的blog可以改其他名称)
hexo init blog

完成后就会在当前目录创建一个blog的文件夹,里面就是我们的博客本体,我们cd到该目录,进入该目录后使用npm来补全依赖什么的
npm install

基本配置

打开博客根目录下的_config.yml文件修改配置

1
2
3
4
5
6
7
8
9
# Site
title: Aidens的博客 #网站标题
subtitle: '' #网站副标题
description: 'linux折腾记录' #网站描述
keywords: Aidens #网站的关键词
author: Aidens-fox #名字
language: zh-CN #网站使用的语言
timezone: 'Asia/Shanghai' #网站时区

其他细节参考官方文档:
https://hexo.io/zh-cn/docs/configuration

使用next主题

默认的主题个人不大喜欢,所以我更推荐next主题,一个老牌的博客主题,一个不张扬,低调纯粹的主题,我们使用git工具把主题克隆到我们博客themes文件夹里面
git clone https://github.com/next-theme/hexo-theme-next themes/next

然后在_config.yml文件修改主题(不是主题的_config.yml,是博客根目录的_config.yml)

1
2
# theme: landscape
theme: next

这样就配置的差不多的,其他的个性化配置我之后在另一篇博文详细讲一下

注册账号

那么既然要使用github pages服务那么肯定需要一个github账号,如果没有就访问官方网站,github是一个代码托管平台,注册账号我就不细说了,只需要准备一个可以正常使用的邮箱(最好是gmail,尽量不要使用qq邮箱,有概率接送不到验证码),然后注意一下自己的用户名,因为博客网址包含用户名称

配置git

git在使用之前需要添加用户名和邮箱才可以使用,输入以下命令
git config --global user.name "你的用户名"

git config --global user.email "你的邮箱"

创建一个仓库

在 https://github.com/dashboard 下点击左边的绿色”new”的按钮创建一个存放博客文件的仓库,仓库名称填入用户名.github.io,然后创建

创建一个访问令牌

打开右上角的头像点击设置(settings)进入设置页面后往下划,找到开发者设置(Developer Settings),进入后点击个人访问令牌(Personal Access Token),选择Token(Classic)(中文翻译叫什么代币(经典)),在里面选择生成访问令牌,跳出的两个选择选择Token(Classic)(这不是脱裤子放屁嘛),名称(note)随便写一个,到期时间(Expiration)经验直接现在无过期,令牌权限(Select scopes)全部启用,然后点击下面绿色的生成令牌后会出现一串英文,赶紧复制到安全的地方,因为它只会出现这么一次

安装hexo-deployer-git插件

hexo-deployer-git用来把生成好的网页文件自动推送到远程仓库,不用再手动git到仓库,在博客根目录使用npm安装插件
npm install hexo-deployer-git --save

打开根目录下的 _config.yml 文件在找到 deploy 配置项,修改为你的仓库信息

1
2
3
4
5
deploy:
type: git
repo: https://github.com/用户名/仓库名.git
branch: main

上传代码到仓库

在你的博客根目录输入以下命令
hexo clean && hexo g && hexo d

运行后会要求你输入用户名和密码,密码就是访问令牌

仓库启用github pages服务

打开仓库的首页,上面导航栏选择设置(settings),在左侧选择pages(页面)打开,在Build and deployment(构建与部署),那个部分Source(来源)确认是从分支机构进行部署(Deploy from the branch),下面的分支(Branch)你上传时选择的分支,然后就是等待了,大概几分钟就可以访问了,网址就是你的用户名.github.io