Hexo 博客搭建与部署

Hexo 是一个快速,简单而强大的博客框架,使用 Markdown 语言编写文章,Hexo 可以在几秒钟内生成具有美丽主题的静态页面文件。

一、环境搭建

1、Node.js

Node.js 是基于 Chrome JavaScript 运行时建立的一个平台,npm 是 node.js 的包管理工具。Hexo 是基于 Node.js 的,使用 Hexo 搭建博客,就需要本地有 Node.js 环境。Node.js 环境点击这里,一路 next。安装完成后可以用命令行查看版本号。

1
2
3
node -v //查看node.js的版本

npm -v //查看包管理器的版本

由于国内环境使用 npm 速度感人,可以安装 cnpm,把镜像源换成淘宝的

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

之后可以命令行输入 cnpm,如果能打出帮助界面表示安装成功。

2、Git

git 的相关配置不在此赘述。hexo 的很多操作都要依赖于 git

3、Hexo

Hexo 依托于 npm 包管理器,我们可以直接下载

1
cnpm install -g hexo-cli
-g 命令是在全局安装 Hexo 命令行工具。当安装完成后,我们可以查看 hexo 版本来检查是否安装成功
1
hexo -v    //查看Hexo版本

二、博客搭建

首先我们新建一个存放博客的文件目录。之后我们的操作全部在此目录下。如果之后我们搭建错误想要从头再来,直接删掉这个目录新建一个即可。

然后我们初始化 hexo

1
hexo init
初始化后,文件目录下面就会自动生成 hexo 的基础框架,后续博客都是基于这个框架来做。

之后安装 hexo 的依赖组件

1
cnpm install

目前目录下面有如下几个部分:

  • node_modules:存的是利用【npm install --save】下载安装的组件
  • scaffolds:存放模板文件,可以创建 post、page、draft 三种页面
  • source:存放用户资源,即我们的待发布文档
  • themes:存放主题文件夹,默认 landspace
  • _config.yml:此文件很重要,是我们网站的配置信息
  • package.json:应用程序的信息

此时会自动生成一篇 Helloworld 的博客,我们可以启动博客来看看效果。

1
2
3
hexo clean      //清空缓存,即清空我们的public文件夹
hexo g //hexo generate命令,在本地生成静态页面,即pubilc文件夹
hexo s //hexo server命令,开启本地服务器,可供我们本地预览
本地服务器开启后,我们可以访问 localhost:4000 来本地预览,输入 Ctrl+C 关闭本地服务器

三、写博客

1
2
3
4
5
6
7
hexo n "第一篇文章"
//hexo new [layout] <title>
//hexo new命令,不设置layout会根据_config.yml中的default_layout在source\\_posts目录下生成一篇博客文章
//如果标题包含空格,使用引号括起来

//-p 自定义路径
hexo new page --path about/me "About me"

生成博客还是老三样

1
2
3
hexo clean
hexo g
hexo s

四、部署到 github

执行完上述步骤,我们的博客只能在本地看,我们必须部署到网上才能通过网络来看。Github 提供 GitPages 免费站点服务,自带域名和 1G 免费空间,存放博客资源和网页信息足够。

git 本地配置和 ssh 公钥配不再赘述

1、新建 git 仓库

要注意仓库名必须要符合规则,即【用户名.github.io】格式。git 会跟进这个仓库来创建域名。

2、hexo 配置 git 插件

1
cnpm install --save hexo-deployer-git

安装完成后我们需要修改_config.yml 文件中的 Deployment 信息(最下面)

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

3、部署远端

在之前的基础上,可以把本地文章部署到远端了

1
2
3
4
5
hexo clean
hexo g
hexo s

hexo d //hexo deploy命令,部署远端

此时我们的 github 仓库就有内容了,我们也可以输入域名直接访问我们的博客。

五、自定义域名

虽然 gitpages 给我们提供了一个域名,但是我们还可以自己申请一个属于自己的域名。我绑定的是腾讯的域名。

在腾讯云里申请域名,此流程很快。

域名申请下来后,需要绑定我们的博客网站。在腾讯云的控制台上进行域名解析。一般解析两条,A 对应 IP,CNAME 对应域名。我们博客的 IP,直接 ping 我们博客的域名即可。

域名解析完成后,我们要进行域名绑定,在 source 目录下新建一个 CNAME 文件,写入自己的域名。然后在 GitPages 上也进行配置,进入 Github 的 settings 中,添加 GitPages 的 Custom Domain 为我们的自定义域名。我们可以勾选 Enforce HTTPS 来开启 https

最后在_config.yml 的 url 选项中填写我们的自定义域名。完成发布。