Hexo+GitHub免费搭建个人博客

发布时间 2023-11-19 01:00:56作者: 沦陷在梦里

安装Hexo

安装Hexo前需要先准备好需要的工具,并配置好环境。

需要的工具有:

安装Node.js

Node.js下载地址

image

注意:选择长期维护版,根据自己的系统下载安装包。安装过程中记得更改路径,最好不要安装到C盘。

安装教程参考:http://xueai8.com/blog/31

安装Git

Git下载地址

image

安装教程参考:https://blog.csdn.net/mukes/article/details/115693833

安装Hexo

安装完上述软件并配置好环境后,就可以开始安装Hexo了。

右击桌面,点击 Git Bash Here(Win11 中需要选择显示更多选项才能找到)打开 Git Bash 窗口,或者直接使用Win键并搜索 Git Bash。

输入命令安装Hexo:

npm install -g hexo-cli

验证是否安装成功:

hexo -v

初始化文件夹

  1. 首先建一个文件夹给 Hexo 进行初始化

  2. 进入你新建的文件夹,右键菜单中打开 Git Bash

  3. 初始化文件夹

hexo init

出现下图所示信息代表初始化成功

image

此时可以看到文件夹多出了很多文件

image

文件夹目录如下:

.
├── _config.yml
├── package.json
├── scaffolds
|	├── draft.md
|	├── page.md
|	└── post.md
├── source
|   ├── _drafts
|   └── _posts
└── themes
  • _config.yml:网站的配置信息,在这里对网站进行配置。
  • package.json:应用程序的信息。EJS, StylusMarkdown 渲染引擎 已默认安装。
  • scaffolds:模版 文件夹。当新建文章时,Hexo 会根据 scaffold 来创建文件。Hexo 的模板是指在新建的文章文件中默认填充的内容。例如,如果修改 scaffold/post.md 中的 Front-matter 内容,那么每次新建一篇文章时都会包含这个修改。
  • source:资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。
  • themes:主题 文件夹。Hexo 会根据主题来生成静态页面
  1. 本地运行Hexo进行预览

可以借助 WebStorm 开发工具使用,具体下载和使用方式可以自行了解,有可视化界面方便修改一些配置文件。

hexo s

运行成功后打开链接 http://localhost:4000/ 查看网站初始状态。

更改博客主题

Hexo官方收录主题

我在搭建的时候选择的主题是Aurora

image

这个主题有详细的配置文档,可以自行查阅参考。

注意:

  • 教程内的新建 about 页面命令有误,应为:hexo new page about

  • 按照文档配置完成后发现主题未生效的问题,只需要修改 _config.yml 文件里的 theme 主题配置。

theme: aurora

结合GitHub Page 进行部署

注册 GitHub

如果你没有 GitHub 账号,请先前往[官网](GitHub: Let’s build from here · GitHub)注册。点击 Sign up 自行注册。

image

配置Git

Git官方文档

  1. 为计算机上的每个存储库设置 Git 用户名
git config --global user.name "此处填写你想要的用户名,尽量使用英文"
  1. 检查是否设置成功
git config --global user.name
  1. 为计算机上的每个存储库设置 Git 邮箱
git config --global user.email "此处填写你的邮箱"
  1. 检查是否设置成功
git config --global user.email

生成 SSH Key

可以参考 gitee 帮助文档github 帮助文档

ssh-keygen -t ed25519 -C "此处可以填写你的邮箱"
  • -t Key类型
  • -C 注释

读取公钥文件

cat ~/.ssh/id_ed25519.pub

复制公钥,将公钥添加到 Gitee 账户 或 GitHub 账户。

添加到账户的步骤:

测试是否添加成功:

  • GitHub: ssh -T git@github.com
  • Gitee: ssh -T git@gitee.com

创建 GitHub 仓库

image

填写完成后点击 Greate repository 创建仓库。

配置 Hexo

打开你博客根目录下的 _config.yml 文件,拉到最下面,修改配置。

deploy:
  type: git
  repository: "git@github.com:xxx/xxx.github.io.git" # 把你 GitHub 仓库的 SSH 地址填写到这里
  branch: master # 分支

写文章 & 发布文章

  1. 首先在博客根目录打开 Git Bash,安装一个扩展
npm install hexo-deployer-git --save
  1. 新建一个文章
hexo new post "文件名"
  1. 对文章内容编写完成后,推送到 GitHub 上
hexo clean # 清理缓存
hexo g # 生成静态文件
hexo s # 本地预览
hexo d # 部署到 GitHub Page
  1. 打开你的 GitHub Page 地址(地址就是你的仓库名)就可以看到你的博客网站了