[原创]HEXO博客搭建日记

时间:2023-03-08 20:01:05
[原创]HEXO博客搭建日记

博客系统折腾了好久,使用过Wordpress,Ghost,Typecho,其中Typecho是我使用起来最舒心的一种,Markdown编辑+轻量化设计,功能不多不少刚好,着实让我这种强迫症患者舒服了好久。但是有那么一天,我的主机空间和Typecho突然冲突了,求助了好久也没有得到解决办法,最终不得已开始考虑更换,因为在Typecho上使用的就是移植的NexT主题,于是就对HEXO有了些兴趣,再加上HEXO也是原生的Markdown编辑,最终思量再三后决定就是HEXO了。

下面是我参考了网上的一些博文的安装教程后对自己安装的一个记录,希望可以帮助到对HEXO有兴趣的人。

HEXO介绍

HEXO是一个快速、简洁且高效的博客框架。可以方便快捷的生成博客网页。HEXO是一个基于Node.js的静态博客程序,可以支持多种主题。总之,HEXO加上Github就可以搭建一个免费的博客空间了,而且访问速度也还是可以的哦。

好了闲话不再多说,让我们进入今天的主题,HEXO环境的搭建。

Node.js安装

在上面的介绍中我们也都知道了HEXO是基于Node.js的博客框架,那么作为主体的Node.js是必不可少的了,有关其下载,可以进入Node.js官网或者Node.js中文网进行下载。

下载完成后可以运行然后一路确认安装(即按照默认配置),其中安装路径可以根据自己喜好进行修改,安装完成后可以使用快捷键win+R打开cmd命令行,在其中可以输入以下命令行进行Node版本信息的查看,如果可以正常观察到版本信息,则说明Node.js安装成功,此部分就告一段落,否则需要重装Node.js。

1
2
node -v # 查看node版本号
npm -v # 查看npm版本号

Git安装

Git软件是一个分布式版本控制工具,但是我们在此仅仅用到了一点点的功能,一些关于Git的详细介绍可以点此进行查阅。Git软件的下载可以在官网,如果觉得下载速度慢也可以在国内热心人搭建的下载站进行下载,国内下载站版本可能稍有落后。

有人选择在软件安装中如下界面处将选项设置为Use Git from Windows CMD prompt,这里主要是为了在windows的CMD下对Git进行些设置(因为默认是只能在Git Bash中执行的)。但是仍然有些操作只能在Git Bash下运行,但是选择这个确实更加方便一些。其他地方一路默认即可(同上,安装路径自定义)。

[原创]HEXO博客搭建日记

在按照上述的安装后我们一样打开CMD来运行一条指令来看下Git的版本号。

1
git --version # 查看Git版本号

如果正常显示,则安装成功,继续后面步骤,反之需要重新安装。

GitHub部署

这里需要一个Github账号,没有的请进入Github官网自行申请,这里不多描述申请。在有了一个账号之后,进行网站代码库的部署。首先新建一个知识库,在右上角找到+号,然后选择New repository,进入代码库创建页面。如下图。

[原创]HEXO博客搭建日记

Repository name那里填写yourname.github.io。注意此处的yourname为你的github账户名,格式必须按照上文中所说的来。Description部分选填,空间类型选择Public,然后点击Create repository*进行创建,创建完成后将会看到这样的一个空间。

[原创]HEXO博客搭建日记

然后我们点击界面中的Setting,就是那个小齿轮,向下拖动,看到GitHub Pages部分,点击Automatic page generator,然后一路向下,系统会自行的给你创建一个网页,稍微等待一会儿,就可以发现yourname.github.io这个网址已经可以打开了。

至此,GitHub网站部署完成。

Git部署

生成SSH Key

在GitHub部署完成后,需要对电脑客户端的Git进行配置部署。此步骤主要是添加SSH-Key。首先使用你的GitHub用户名和密码进行配置,在空白处鼠标右键选择Git Bash Here进入Git命令行,键入以下两条指令。

1
2
git config --global user.email "web@webmail.com"
git config --global user.name "yourname"

其中,web@webmail.com为你申请GitHub账户时使用的邮箱,yourname为GitHub的用户名。

之后,生成密钥。

1
ssh-keygen -t rsa -C "web@webmail.com"

然后一路默认回车,最后它将会生在默认路径生成一个.ssh的文件夹,里面会有一个id_rsaid_rsa.pub的文件。这是我使用命令行生成后的结果,不同用户所产生的名字可能略微有不同。

GitHub添加SSH Key

使用编辑器打开id_rsa.pub文件,复制其中的内容。打开GitHub的Setting,添加到自己的SSH Key。若找不到位置,可以点此快捷进入。

本地Git配置

将上面生成的.ssh文件夹复制到Git的安装路径,比如我的就是D:\Program Files\Git\.ssh

最后可以可以使用如下命令验证一下。

1
ssh -T git@github.com

HEXO部署

HEXO安装

在硬盘上选择一个合适的位置,新建一个空文件夹(最好为英文路径)作为存放博客数据的地方。使用Shift+鼠标右键的方式打开命令行,这样路径就自动设置在当前路径下了,后续若有打开命令行操作,还都以此方式打开。

在命令行中输入以下命令进行HEXO的安装

1
npm install -g hexo # 安装HEXO

可能会出现一个WARNING,但是没有很大关系,继续下面操作即可。

mpm install hexo –save # 保存HEXO(此步骤可以跳过)

安装完成后我们可以使用如下命令来看所安装HEXO的版本号

1
hexo -v # 查看HEXO版本号

HEXO初始化

在命令行中继续键入

1
hexo init # 初始化组件

进行博客的初始化搭建。上述命令执行完就可以看到文件路径下有了一些文件,这些都是你博客运行所需要的文件。

使用

1
hexo g # 生成 public 静态文件

生成静态页面,然后使用

1
hexo s # 启动服务器,查看本地效果

启动本地服务,进入文章预览调试。在http://localhost:4000下就可以看到所生成的静态页面了

[原创]HEXO博客搭建日记

建立与GitHub的关联

在我们所设定的路径下,安装HEXO后生成了一些文件,其中_config.yml文件需要重点说一下,这个文件可以说是我们的站点配置文件,里面有着网站的一些信息。在建立与GitHub的关联时,我们需要编辑这个文件,使用编辑器打开_config.yml文件,翻到最下面的deploy配置项,改成如下的样式。

1
2
3
4
deploy:
type: git
repo: git@github.com:yourname/yourname.github.io.git
branch: master

其中yourname为你GitHub的用户名。我看有些博文中也有在repo项直接使用url形式的,类似这种

1
https://github.com/yourname/yourname.github.io.git

但是我在搭建过程中这种却有些问题,没能成功,建议还是使用上面的一种方法。更改完成后保存关闭文件,在命令行中键入

1
npm install hexo-deployer-git --save # 安装使用git 方式进行部署所需要的插件

执行完成后接着键入配置命令

1
hexo d # 部署到GitHub上

执行完成后就可以在浏览器中键入yourname.github.io进行博客的打开了。

到这里,HEXO的部署就完成了。

域名解析

如果你入手了一个域名,想要将域名解析到你的HEXO + GitHub博客地址,那要怎么做呢?

设置CNAME

在博客目录下的source文件夹下,创建一个CNAME的文件,里面内容设定为你的域名,我的就是

1
www.airbird.info

域名解析

在你的域名解析商处添加解析信息,添加这样的两条解析内容。只需要将你的记录值按照你自己的更改为yourname.github.io即可。

[原创]HEXO博客搭建日记

这里我使用的解析服务是DNSPod,这里因人而异,你的可能是域名购买商本身的解析服务也可能是别的地方的解析服务,不过更改的办法都是大同小异。解析更改到开始运行都有着一定的等待刷新时间,还请耐心等待。不过我使用DNSPod来看,还是很快的,不一会就可以通过自有域名进入到你的博客了。

书写一篇博文

在HEXO框架下,书写博文首先需要在命令行中键入

1
hexo new "postname"

它会在博客文件下source/_posts路径下生成一个“postname.md”的Markdown文档供你保存。

当然你也可以将编辑完成的md文件直接复制进来,它一样会显示在网站上。注意,这里在网站上的显示顺序是按照文档的最终修改时间排序后进行显示的。

这里的md文档和一般的md文档还有些微的差别,比如在文章的开头需要有着标题、分类、标签这些消息。类似下面的这种。

1
2
3
4
5
6
7
8
9
10
---
title: post title(这里是文章显示的标题)
categories:
- cate(文章的分类)
tags:
- tag1(文章标签)
- tag2(文章标签)
---
博文内容...

在每次添加内容后,最好都在命令行中使用以下3个命令来保证页面信息的同步。

1
2
3
hexo clean # 清除之前public文件夹的内容
hexo g # 生成静态的public文件夹,部署时候也是直接拷贝此文件夹里的文件。
hexo d # 部署到Github上

部署完成后就可以刷新页面进行查阅了。

HEXO常用命令

单条指令

1
2
3
4
5
6
7
8
hexo new "postName" # 新建文章
hexo new page "pageName" # 新建页面
hexo clean # 清除之前 public 文件夹的内容
hexo generate # 生成静态页面至public目录
hexo deploy # 将.deploy目录部署到GitHub
hexo server # 开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo help # 查看帮助
hexo version # 查看HEXO的版本

简写指令

1
2
3
4
5
hexo n == hexo new
hexo g == hexo generate
hexo d == hexo deploy
hexo s == hexo server
hexo v == hexo version

复合指令

1
2
3
hexo deploy -g #生成加部署
hexo server -g #生成加预览
hexo d --g 或者 hexo g --d #生成加部署

参考感谢

[1] hexo你的博客
[2] 史上最详细的Hexo博客搭建图文教程
[3] Hexo + Git 搭建免费的个人博客
[4] HEXO+Github,搭建属于自己的博客
[5] Hexo搭建Github静态博客