Hexo搭建静态博客

前言

前段时间因为我的WordPress博客进入后台非常慢,严重影响操作使用,再加上服务器时间的限制,所以就讲博客从WordPress迁移到了Hexo上,这篇文章记录下我创建Hexo博客的一些流程步骤。

Hexo

Hexo是一个简单地、轻量地、基于NodeJS的一个静态博客框架,可以方便的生成静态网页托管在github或者是国内的coding.net上

Github Pages

GitHub Pages 可以被认为是用户编写的、托管在github上的静态网页。因为Github的空间免费稳定, 因此可以用于将自己的静态站点托管在github上来搭建自己的个人博客站点。另外国内的coding.net也支持Pages服务,同样可以进行托管静态网页。

Github上生成的网站的默认域名一般都是username.github.io,这里的username是指你在github上注册的用户名,当然github的网站也支持自定义绑定域名。

安装Git

因为我们要将最终的静态网页文件推送到github上,所以第一步我们需要先在机器上安装Git,Git下载地址:https://git-for-windows.github.io/,安装完成之后配置好相关全局参数,如user,email等

安装NodeJS

因为Hexo是基于NodeJS的,所以还需要安装NodeJS,下载地址:http://nodejs.org/

安装Hexo

在磁盘上任意目录下右键鼠标选择Git Bash,使用如下命令进行Hexo的安装
npm install -g hexo

创建Hexo项目

初始化Hexo项目

在磁盘上新建一个文件夹作为自己Hexo项目的根目录,如:D:\Hexo,在此目录下右键鼠标选择Git Bash,然后执行如下命令进行Hexo项目的初始化
hexo init

安装Hexo项目依赖

npm install

本地查看Hexo站点

依赖安装完成之后,Hexo项目就算建好了,接下来我们使用如下命令检查项目是否成功创建:

1
2
hexo generate //此命令表示生成静态文件
hexo server //比命令表示启动服务,启动之后在本地可以查看站点

执行上述两个命令之后,可以在命令行上看到提示,在浏览器中访问http://localhost:4000,可以成功访问则表示你的Hexo项目创建成功了。

创建Github仓库

在github上创建一个与自己账户名一致的仓库:账号名.github.io,当然没有github账号的赶紧先去注册一个账号。

生成SSH密钥

执行如下命令生成SSH密钥

1
ssh-keygen -t rsa -C “你的邮箱地址”,按3个回车,密码为空

执行完成之后,在C:\Users\Administrator\.ssh下会生成两个文件id_rsaid_rsa.pub

打开id_rsa.pub,复制全文,打开https://github.com/settings/ssh,Add SSH key,粘贴复制的文本内容

这样设置之后,将静态文件从本地推送到github上时就不要输入用户名和密码了,当然也可以不设置github的ssh,这样的话在推送文件到github上时会提示你输入用户名和密码

配置Hexo项目

Hexo目录结构

Hexo项目创建成功之后,我们在项目根目录下会发现这样几个我们经常用到的目录

  1. source 这个目录是用来存放我们写的博客文件
  2. themes 这个目录里是所有hexo安装的主题
  3. _config.yml 这个文件是Hexo项目的主配置文件

配置Hexo

使用文本编辑器打开上面介绍的_config.yml文件,按照官网https://hexo.io/docs/configuration.html上的提示配置好相关配置,具体配置细节我就不多介绍了,自己在官网上看吧

我只介绍一个配置项deploy配置,这个配置就是用来配置你的静态站点是要部署到哪个上面,一般都是用github,以我的配置为例:

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

注意配置参数与值之间是需要有一个空格的,不然配置是无法生效的,type表示我们使用的是gitrepo表示你github上的仓库地址,branch表示你仓库的分支,一般默认都是master

部署Hexo

配置完Hexo之后,就可以将Hexo站点部署到github上了,执行如下命令进行部署:

1
2
hexo generate
hexo deploy

如果在部署的过程中出现如下错误:

1
2
3
4
ERROR Deployer not found: git
执行如下命令:
npm install hexo-deployer-git --save

在创建Hexo或是部署的过程中可能会多次出现类似的错误,一般都是使用npm install hexo-deployer-XXX --save类似的命令进行插件安装

上述命令执行成功后,重新部署,部署成功后,命令行上会提示Deploy done: git

成功部署后,过个几分钟就可以在浏览器上通过你的仓库地址访问你的博客了,还是以我的为例:http://huyongli.github.io

安装Hexo主题

Hexo默认的主题很丑,如果想自己的博客看着舒服的话,需要安装另外的主题插件,我使用主题的是next

进入next主题主页https://github.com/iissnan/hexo-theme-next
将此主题代码完整下下来,然后解压放到Hexo根目录下的themes目录下,然后将hexo项目的主题配置修改为next:theme: next

至于next主题的具体配置参考该主题的详细使用介绍吧http://theme-next.iissnan.com/

到此,整个Hexo的安装部署就结束了


原创文章,本文采用知识共享署名 2.5(中国大陆许可协议)进行许可,欢迎转载,但转载请注明来自ittiger.cn,并保证转载后文章内容的完整性。本人(laohu)保留所有版权相关权利。



评论