【个人博客】Hexo+Github搭建个人博客（2023全）

相关环境准备

安装Node.js

可以参考由 Node.js 提供的 指导。

安装git

大家查询相关资料下载即可

安装 Hexo

1
2
3
npm config set registry https://registry.npm.taobao.org # 将npm源替换为阿里的镜像，安装更快
npm install hexo-cli -g # 安装Hexo
hexo -v # 返回Hexo版本，确定安装成功

博客构建

本地测试

在本地创建一个目录，然后运行下述命令

1
2
3
hexo init # 初始化博客
hexo generate # 申城网站信息
hexo server # 开始网站服务

然后在浏览器中输入 localhost:4000 , 就能看到，我们的博客就初步搭建成功啦

hello world

Github部署

首先注册一个github账号，简单学习一下Github的使用方法，不会的可以查一查，这方面的资料非常多。

相信这一步应该不用教学吧ψ(._. )>

在你的github中新建仓库“username.github.io”，其中，username就是你注册时使用的用户名。

修改你博客根目录下的_config.yml文件中的deploy配置项：

1
2
3
4
deploy:
  type: git
  repository: git@github.com:username/username.github.io.git  # 你的仓库地址
  branch: gh-pages

他会在你的仓库的gh-pages分支部署你的页面，然后再master分支保存你网站的源代码，不会相互覆盖。

通过如下代码进行部署：

1
2
3
4
5
6
7
8
9
10
11
12
hexo clean # 清除缓存
hexo generate # 生成网站
hexo deploy # 部署至远程网络

# 简写
hexo cl
hexo g
hexo d

# 简简写
hexo cl
hexo g -d  # hexo d -g

然后就可以在浏览器上输入username.github.io访问你的博客了。

博客优化

网站信息

1
2
3
4
5
6
7
title: 网站名称
subtitle: '子标题'
description: '网站描述'
keywords:
author: 你的名字（昵称）
language: zh-CN
timezone: ''

image-20230707162938139

网站导航

修改根目录下的_config.landscape.yml文件

1
2
3
4
5
6
7
menu:
  首页: / || fas fas fa-home
  分类: /categories/ || fas fa-folder-open
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  友情链接: /link/ || fas fa-link
  关于我: /about/ || fas fa-heart

关键页面生成

进入 Hexo 博客的根目录，执行以下命令生成页面：

1
hexo new page pagename

此处的pagename为categories、archives、tags、link、about等

打卡source/pagename/index.md，修改其中内容：

1
2
3
4
5
---
title: 中文pagename
date: 2023-06-28 12:53:45
type: "pagename"
---

如此就初步构建好了你的博客啦，之后可以进一步使用butterfly主题优化你的博客。