Hexo+GitHub搭建个人博客

发表于 更新于 阅读次数： 105 Changyan： 0 本文字数： 1.8k 阅读时长 ≈ 7 分钟
现代社会，人无时无刻在接收外界的输入，这个时候一个博客来作为自己输出的平台就格外重要。该文将详细讲解基于Hexo+GitHub从零搭建个人博客

写在前面

该文将步步讲解从零搭建个人博客。此外本文聚焦于易上手快速搭建博客，主要涉及实操，关于理论，背后原理等请自行查看各官方文档。

当读者成功搭建博客后，无需花费很多的精力美化修饰博客，当然美化也无可厚非。我只是想说，比起关注博客的形式，更需关注自身内容的输出。黑猫白猫能抓到老鼠的就是好猫

使用的工具及系统环境

个人博客框架是hexo，博客文件拖管于github。

我个人的系统环境是window11，本文教程都基于此。

其他macOS和Linux也大同小异 触类旁通。

Hexo博客框架

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

安装前提

  • Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
  • Git

如果你的电脑中已经安装上述必备程序，你可以直接前往 生成博客 步骤。

如果你的电脑中尚未安装所需要的程序，为避免重复造轮子，互联网上有很多详细的安装教程。请读者自行安装。同时提供Hexo官方文档，这里也有Node和Git的安装教程。

最后打开cmd查看版本信息以确认环境配置信息：

1
2
3
node -v # 查看node版本信息
npm -v # 查看npm版本信息
git -v # 查看git版本信息

当你的设备成功安装以上程序，会输出版本信息。如果出现类似“npm”不是内部的命令等，请检查系统变量中path是否正常配置。

生成博客

安装

有了npm包管理软件，安装hexo就很方便了，在cmd只需要一行命令：

1
npm install hexo-cli -g # 全局安装hexo命令行工具

其中-g参数表示全局安装，没有这个参数就只在当前目录下安装，建议全局安装。

初始化

运行命令：

1
hexo init "你的博客目录名称" # 目录名称不含空格的时候双引号可以省略

得到如下的反馈信息：

1
2
3
4
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
# 一些可能的中间信息
INFO  Start blogging with Hexo!

然后进入博客目录：

1
cd "博客目录"

安装博客需要的其他支持：

1
npm install # 安装的依赖项在package.json文件的dependencies字段中可以看到

博客项目目录结构介绍

进入博客目录

1
2
3
4
5
6
7
8
├── _config.landscape.yml
├── _config.yml
├── node_modules
├── package-lock.json
├── package.json
├── scaffolds
├── source
└── themes

各部分的含义：

  • _config.yml

    为全局配置文件，网站的很多信息都在这里配置，比如说网站名称，副标题，描述，作者，语言，主题等等。具体可以参考官方文档：https://hexo.io/zh-cn/docs/configuration.html。

  • scaffolds

    骨架文件，是生成新页面或者新博客的模版。可以根据需求编辑，当hexo生成新博客的时候，会用这里面的模版进行初始化。

  • source

    这个文件夹下面存放的是网站的markdown源文件，里面有一个_post文件夹，所有的.md博客文件都会存放在这个文件夹下。现在，你应该能看到里面有一个hello-world.md文件。

  • themes

    网站主题目录，hexo有非常丰富的主题支持，主题目录会存放在这个目录下面。

    我们后续会以默认主题来演示，更多的主题参见：https://hexo.io/themes/

生成新文章

1
2
3
hexo new post "test" # 会在 source/_posts/ 目录下生成文件 ‘test.md’，打开编辑
hexo generate        # 生成静态HTML文件到 /public 文件夹中
hexo server          # 本地运行server服务预览

此时，访问http://localhost:4000 即可预览你的博客：

hexo预览

项目文件托管GitHub仓库

创建GitHub仓库

进入github仓库创建界面，新建repository。这里仓库名一定要你的用户名/比如你的用户名为丁真，那么就应该为 丁真.github.io。因为只有这样的仓库名称最后才能以静态页面展示。如图：XXX的内容一定要与红色的框里的文本一致。勾选Public。

仓库搭建

​ 仓库创建好之后 如图设置main/root。

仓库设置

部署到Git

此步骤可选择直接修改文件也可使用cmd修改，这里给出两种步骤方法。

直接修改文件_config.yml(俩者选一)

进入博客目录选择_config.yml，修改如下字段

1
2
3
4
deploy:
 type: git
 repo:https://github.com/xxxx/xxx.github.io.git
 branch: main

其中：

  • type值对应的是你所部署的的服务器类型，我们这里填写git就可以。
  • repo是你的仓库地址，也就是仓库克隆的地址，推荐用https的链接。其中xxx为你的用户名，此地址直接从你仓库复制即可
  • branch不写默认是master，通常我们写成main就可以。

cmd修改(俩者选一)

1
2
3
4
5
cd "博客目录"
git initgit add .
git commit -m "my blog first commit"
git remote add origin "远端github仓库地址"
git branch -M maingit push -u origin main

部署

以上配置完成后保存 然后回到终端执行npm install hexo-deployer-git --save安装一个插件，这样才能将你写好的文章部署到github服务器上并让别人浏览到。安装完成后在终端中依次执行如下代码(为了简单后续统称为三步)

  • hexo clean 清理缓存
  • hexo generate 进行渲染 简写 hexo g
  • hexo server 部署到本地(调试使用) 简写 hexo s。然后浏览器输入 http://localhost:4000 就可以看到你博客的效果啦，不过这是本地调试用，其他人是看不到的。(调试完毕后记得 control + C 关闭本地端口，不然下次就进不去啦)
  • 调试完毕后使用 hexo deploy 简写为 hexo d来部署到git服务器。

如果出现

1
2
3
4
5
6
7
8
9
*** Please tell me who you are.

Run

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

这个错误是因为当前本地的Git还没配置用户信息, 所以执行以下命令:

1
2
3
4
5
git config --global user.email "你的邮箱"

git config --global user.name "你的用户名"
#在这一步时会跳出git和GitHub绑定界面 按提示操作即可
hexo d #重新部署

出现INFO Deploy done: git即部署成功 在浏览器访问http://你github名字.github.io 进入博客

新建博客

此步可看 生成新文章生成md文件，打开书写即可。推荐使用Typora书写。关于Typora和markDown语法后续会更新。

后续升级

后续博客网站可用netlify生成，国内访问采用cloudflare进行CDN加速。使用这个解决方案的原因是不需要云服务器，也不需要备案，只需要有一个域名即可。目前本人暂无域名需求，有需要的读者可自行查看相关教程。