基于Hexo+GitHub-Pages博客搭建（一）

C75 75
  2023-02-09 12:20:35 2023-02-09 12:20      2.3k 字  8 分钟  

引言

个人博客搭建，网上教程繁多且详细，我根据网上教程搭建博客，但是搭建过程总会出现各种错误，为了更加详细以及复盘搭建博客的过程，我编写了以下文章。

  • 本文针对Windows10系统，其他诸如Mac系统还有Linux系统请参考百度相关内容。

Hexo的搭建步骤[^1]

安装Git Bash

Git Bash （选择合适的版本下载，我的版本是Git-2.33.1-64-bit.exe）是用来管理Hexo博客文章，并将文章上传到GitHub平台的工具，具体安装步骤可参考Git详细安装教程 。

报错

若右键打开Git Bash Here，输入npm -v出现以下情况:

1
2
$ git -v
bash: npm: command not found

原因：环境变量未添加

解决步骤：

1）右键此电脑：属性=>高级系统设置=>高级=>环境变量出现以下界面

环境变量

2）用户变量=>编辑环境变量=>新建添加以下环境变量

1
2
/usr/local/mingw64/bin
/usr/local/Git/bin

注：其中/usr/local/mingw64（我的这个在C盘）、/usr/local/Git（我的这个在D盘）分别为安装Git文件夹，该路径请不要出现中文，否者会报错

安装Node.js

Hexo是基于Node.js （复制到浏览器下载软件）编写的，所以需要安装该软件。从官网下载，然后安装即可，直接选择LTS（长期支持版）版本的。 安装完成后，打开管理员命令行输入命令 node-v以及 npm-v，查看有没有安装成功。

安装成功界面

报错

若右键打开Git Bash Here，输入npm -v出现以下情况:

1
2
$ npm -v
bash: npm: command not found

原因：环境变量未添加

解决步骤：

1）右键此电脑：属性=>高级系统设置=>高级=>环境变量

2）系统变量=>编辑环境变量=>新建添加以下环境变量

1
/usr/local/node/node_global

注：其中/usr/local/node为安装Node.js文件夹，该路径请不要出现中文，否者会报错

安装Hexo

1）创建一个文件夹Blog，然后进入该文件夹右键Git Bash Here打开。输入命令 npm install-g hexo-cli，至此就安装完成了。

2）安装完成后，还需要初始化hexo，即执行如下命令：

1
2
hexo init
npm install

3）新建完成后，在Blog文件夹下会出现许多新的文件，目录如下：

  • node_modules：依赖包
  • scaffolds：命令生成Markdown文章等的模板
  • source：用命令创建的各种Markdown文章
  • themes：主题文件夹，Hexo 会根据主题来生成静态页面
  • _config.yml：站点配置文件，您可以在此配置大部分的参数
  • db.json：source解析所得到的
  • package.json：项目所需模块项目的配置信息

4）输入如下命令，然后在浏览器中输入 localhost:4000(本地查看)即可查看用Hexo生成的博客了。

1
2
hexo g
hexo s

博客页面

使用ctrl+c可以把服务关掉

5）至此，Blog文件夹下会多出两个目录

  • .deploy_git
  • public

Hexo关联到GitHub

静态页面已经有了，还需要将其部署到GitHub上。一来博客可以以链接形式被访问到，二来可以有个托管平台，这样就可以关注博客内容本身而不是麻烦的管理。

GitHub创建个人仓库[^2]

（1）注册一个GitHub账号（若GitHub打不开，请参考此文章[^3]）

（2）点击New，新建仓库

按照下图所示操作后，点击Create repository即创建成功。由于我已创建过，下图仓库名称重复出错。

创建仓库

生成SSH添加到GitHub

（1）在git bash输入如下命令

1
2
git config --global user.name "yourname"
git config --global user.email "youremail"

（2）创建SSH，一路回车

1
ssh-keygen -t rsa -C "youremail"

这个时候会生成了.ssh的文件夹。在电脑中找到这个文件夹后可以发现有两个文件（一般位于C盘），如下图所示：

密钥文件

（3）记事本打开id_rsa.pub复制其中的密钥内容，将其粘贴至如下位置

粘贴密钥

Hexo部署到GitHub

（1）用vscode（当然也可以用其他软件打开，我用的是vscode）打开站点配置文件_config.yml。搜索关键词（crtl+f）deploy，改成如下所示：

1
2
3
4
5
## 注意这里每个参数`:`后都有一个间距的空格，否者会报错
deploy: 
  type: git
  repository: https://github.com/YourgithubName/YourgithubName.github.io.git  # 你的仓库地址
  branch: main  # 这里不应该用master,而是用main，很多团队已经重命名他们的默认主干名为 main . 这是因为2020 年非裔男子乔治·弗洛伊德因白人警察暴力执法惨死而掀起的 Black Lives Matter(黑人的命也是命)运动，很多人认为 master 不尊重黑人，呼吁改为 main.

（2）这个时候需要先安装deploy-git ，也就是部署的命令,这样你才能用命令部署到GitHub。

1
npm install hexo-deployer-git --save

（3）创建博客文章

1
hexo n bolgname

创建文章

之后可以发现Blog/source/_posts目录下出现一个名为test的Markdown文章，用Typora软件打开，文件最上方以 --- 分隔的区域，有用于指定个别文件的变量的Front-matter。开始可使用几个基本参数：title，author，date，tags，categories，如下所示：

Front-matter参数

用Typora打开模板文件Blog/scaffolds/post.md文件，可以进行相应的设置。

Blog/scaffolds目录，其实该目录下一共有三个文件，刚刚只提到了post.md，还有另外两个文件。

scaffolds目录
然后这三个文件是对应三种不同的布局（layout)。

1
2
3
4
5
hexo n [layout] <tittle> # 之前在创建文章时，layout默认是post，名为title的文章在Blog/source/_posts文件夹下
hexo n draft <tittle> # draft是草稿的意思，名为title的文章在Blog/source/_drafts文件夹下，
hexo s --draft # 草稿写好文章后，可以在本地开启预览
hexo p draft <tittle> # 将名为title的文章发送到Blog/source/_posts文件夹下
hexo new page board # 系统会自动在source文件夹下创建一个board文件夹，以及board文件夹中的index.md，这样你访问的board对应的链接就是http://xxx.xxx/board

（4）然后使用以下命令部署文章到GitHub

1
2
3
4
5
6
7
hexo g  # 生成静态文章
hexo d  # 部署文章
## 以上两个命令可合成为一个使用
hexo g --d

## 部署文章前可先在本地预览效果
hexo s  # 本地(localhost:4000)预览效果

至此，Hexo+GitHub-pages搭建博客基本框架搭建完毕，基于Hexo+GitHub-Pages博客搭建（二）将进一步完善博客内容。

附加

绑定域名[^4]

虽然在Internet上可以访问的网站，但是网址是GitHub提供的:http://username.github.io ,而想使用个性化域名，这就需要绑定的域名。这里演示的是在阿里云万网的域名绑定，在国内主流的域名代理厂商也就阿里云和腾讯云。

（1）创建解析

登录到阿里云，进入管理控制台的域名列表，找到个性化域名，进入解析

域名解析

添加解析

添加解析

包括添加两条解析记录，185.199.111.153是GitHub的地址，你也可以ping 你的 http://username.github.io的ip地址，填入进去。第二个记录类型是CNAME，CNAME的记录值是：username.github.io 这里千万别弄错了。

（2）输入域名

登录GitHub，进入之前创建的仓库，点击settings，设置Custom domain，输入你的域名：

设置域名

点击save保存。

（3）创建CNAME文件

进入本地博客文件夹 ，进入blog/source目录下，创建一个记事本文件，输入域名。如果带有www，那么以后访问的时候必须带有www完整的域名才可以访问，但如果不带有www，以后访问的时候带不带www都可以访问。所以建议，不要带有www。这里我是不带有www：

CNAME文件设置

保存，命名为CNAME （注意该文件不要添加扩展名称，如.txt）

这时在Git Bash中输入以下命令，后可直接使用CNAME文件中设置的域名打开

1
2
hexo clean
hexo g --d

Hexo常用命令[^4]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
npm install hexo -g  # 安装Hexo
npm update hexo -g  # 升级
hexo init  # 初始化博客

## 命令简写
hexo n Bolgname == hexo new Bolgname  # 新建文章
hexo g == hexo generate  # 生成
hexo s == hexo server  # 启动服务预览
hexo d == hexo deploy  # 部署

hexo server  # Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s  # 静态模式
hexo server -p 5000  # 更改端口
hexo server -i 192.168.1.1  # 自定义 IP
hexo clean  # 清除缓存，若是网页正常情况下可以忽略这条命令

参考资料

[^1]: 基于Hexo和GitHub免费搭建个人博客网站 - 知乎 (zhihu.com)
[^2]: 还不会使用 GitHub ？ GitHub 教程来了！万字图文详解 - 知乎 (zhihu.com)
[^3]: (33条消息) 都什么年代了，你居然还连不上GitHub？_SYBH.的博客-CSDN博客
[^4]: GitHub+Hexo 搭建个人网站详细教程 - 知乎 (zhihu.com)

  • 本文标题：基于Hexo+GitHub-Pages博客搭建（一）
  • 本文作者：C75
  • 创建时间：2023-02-09 12:20:35
  • 本文链接：https://hi-c75.top/2023/02/09/基于Hexo+GitHub-Pages博客搭建（一）/
  • 版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
此页目录
基于Hexo+GitHub-Pages博客搭建（一）
  1. 引言
  2. Hexo的搭建步骤[^1]
    1. 安装Git Bash
      1. 报错
    2. 安装Node.js
      1. 报错
    3. 安装Hexo
    4. Hexo关联到GitHub
      1. GitHub创建个人仓库[^2]
      2. 生成SSH添加到GitHub
      3. Hexo部署到GitHub
  3. 附加
    1. 绑定域名[^4]
    2. Hexo常用命令[^4]
  4. 参考资料