天天看点

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项目就算建好了,接下来我们使用如下命令检查项目是否成功创建:

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

执行上述两个命令之后,可以在命令行上看到提示,在浏览器中访问

http://localhost:4000

,可以成功访问则表示你的Hexo项目创建成功了。

创建Github仓库

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

生成SSH密钥

执行如下命令生成SSH密钥

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

执行完成之后,在

C:\Users\Administrator\.ssh

下会生成两个文件

id_rsa

id_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,以我的配置为例:

deploy:
  type: git
  repo: https://github.com/huyongli/huyongli.github.io.git
  branch: master
           

注意配置参数与值之间是需要有一个空格的,不然配置是无法生效的,

type

表示我们使用的是

git

repo

表示你

github

上的仓库地址,

branch

表示你仓库的分支,一般默认都是

master

部署Hexo

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

hexo generate
hexo deploy
           

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

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的安装部署就结束了

继续阅读