Hexo + gh-pages 搭建个人博客

发表于 更新于 分类于 阅读次数： 本文字数： 1.1k 阅读时长 ≈ 4 分钟

使用 hexo 和 GitHub Pages 来搭建属于自己的个人博客，可以随时随地通过网络进行对自己的博客进行访问

安装 Hexo

在安装 hexo 之前请确保已经安装了 nodejs 以及其相关的包管理工具，如 npm 和 yarn ，还需要安装了 git

1
2
3
4
# npm 安装
npm install hexo-cli -g
# yarn 安装
yarn global add hexo-cli

搭建博客

安装完 hexo 以后就可以开始使用 hexo 进行搭建个人博客了

初始化 hexo

首先要为自己写博客的地方新建一个文件夹，然后在这个目录当中输入一下的命令，这时候 hexo 就会下载一些需要用到的文件

1
hexo init

启动博客

初始化完成以后，可以执行下面的命令来在本地启动博客

1
hexo server

启动完成以后可以打开浏览地址栏输入 http://localhost:4000/ 进行访问，默认会生成一篇 hello world 的文章，也可以指定一个端口进行访问

1
2
# 使用 8888 端口进行访问
hexo server --port 8888	# http://localhost:8888/

新建文章

启动博客后就可以开始编写文章了，执行一下命令进行新建，文章使用 markdown 进行编写

1
hexo new <title>

<title> 是文章的文件名，同时也是文章标题，就比如这样

1
hexo new "我的第一篇博客"

新建以后就会在 source/_posts 目录下生成了一个 .md 的文件，这时候就可以对它进行编辑，如果已经在本地启动了博客，在编辑完文章后可以通过刷新浏览器对预览进行更新

但是通过 new 直接生成的文章默认是发布状态，但很多时候文章并没有写完，或者同时在编辑多个文章，这时候就需要草稿了

1
hexo new draft <title>

新建的草稿不会被发布，但是草稿是没办法直接预览效果的，所以需要将已经启动的博客先停掉 输入键盘按下 Ctrl + C 就可以停止博客了，需要预览草稿，可以输入一下指令来启动本地博客

1
hexo server --draft

Front-matter

Front-matter 是指一些文章的属性，是在生成的文章头部的包含以下内容的部分

1
2
3
4
---
title: xxxx
date: xxxx/x/xx xx:xx:xx
---

里面的属性是文章的属性

  • title 是文章的标题
  • date 是文章的发布日期
  • tag 是文章的标签

  • layout 是文章的布局

    文章内容需要在 front-matter 下进行编写

1
2
3
4
5
---
title: xxxx
date: xxxx/x/xx xx:xx:xx
---
这里是文章内容

发布文章

在草稿已经编辑完成时，就需要将文章进行发布，只需要输入

1
hexo publish <filename>

<filename> 是指文件名而不是文章标题，因为有可能在编辑草稿时会修改文章标题

部署博客

在此之前，博客都是在本地运行的，需要将它们部署在服务器上，并且需要一个公网 IP 或者域名才能让其他人进行访问，但是有种更省钱的办法，就是利用 GitHub Pages 进行部署

首先要注册一个 GitHub 的账号，然后再新建一个名为 <username>.github.io 的远程仓库，这个<username> 是指 GitHub 的用户名

做完这些就需要开始编辑 _config.yml 文件了，将其最底部的信息改成一下内容

1
2
3
4
deploy:
  type: "git"
  branch: "gh-pages"
  repo: "https://github.com/<username>/<username>.github.io"

不过部署到 GitHub 上还需要安装一个插件

1
2
3
4
# npm
npm install hexo-deployer-git --save
# yarn
yarn add hexo-deployer-git

安装完成后，只需要输入以下命令就可以一键部署到 GitHub 了

1
hexo clean && hexo generate && hexo deploy
  • hexo clean 是清理之前生成的网页文件
  • hexo generate 是生成新的网页文件
  • hexo deploy 是将生成后的网页文件部署到服务器

开启访问

部署完以后还有一件事，就是让这个网站变得可以访问，首先要进到刚刚创建的远程仓库里，选择 settings

然后去到网页的最下面选着修改可视属性

将其修改为 public ，如果原本就是，那就不用修改

回到最上面，在侧边栏里悬着 Pages

选择对应的分支并保存

image-20220324221009853

这时候点上面的链接就可以到个人博客里了，以后谁都可以通过这个链接访问到自己的个人博客