利用 Hexo 搭建个人免费博客

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

安装

实际上安装 Hexo 很简单,看官方文档就基本上能安装部署成功,这里只做简单介绍。

准备工作

首先确保本机已经安装以下程序:

如果没有安装,安装方式可以点击以上链接来了解。

安装 Hexo

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。

1
npm install -g hexo-cli

建站

安装 Hexo 后,找一个目录执行以下命令

1
2
3
hexo init <folder>
cd <folder>
npm install

其中 <folder> 就是你要存放博客程序的文件夹名称。

写作

Hexo 建立完成后就可以开始写作了,进入 Hexo 网站文件夹,执行一下命令

1
hexo new hello

这样就建立了一个一篇文章,查看 source/_posts/ 目录会发现新增加了一个 hello.md 文件。打开文件即可编写内容。

预览

在博客文件夹下执行以下命令,启动本地服务器

1
hexo s

打开浏览器访问 http://localhost:4000 即可看到效果

注意: 该服务启动后不要关掉,这样修改文章后,只要浏览器刷新页面就可以看到最新的效果。

发布

发布前需要做点其他事情,一般来说 Hexo 都是搭配 GitPage 或 CodingPage 服务,这里以 CodingPage 为例。

CodingPage

首先就是要注册一个 CodingPage 用户

创建项目

在网站右上角点击按钮创建一个新项目。

项目名称有讲究,格式为:<Coding用户名>.coding.me

点击创建即可。

启用 Pages 服务

这里有个坑点,Coding.net 貌似正在更新 UI,但新 UI 部分功能未做完,会有点小影响,最好先切换为旧版 UI。日期:2018.10.04

切换到旧版本后,点击项目,选择刚刚创建的项目。
侧边栏 > 代码 > Pages 服务

在其中启动Pages服务。

配置

打开博客目录下的_config.yml文件

  1. url 字段修改为你的 codingpage 地址.一般为 <用户名>.coding.me
  2. 找到 deploy 段,将 coding 上的仓库地址填入(填https协议的也可),如图:

    最后面 master 表示使用的是 master 分支.

编译

在博客目录下执行

1
npm install hexo-deployer-git --save

安装完成之后运行如下命令

1
2
3
hexo clean
hexo g
hexo d

分别对应:清理、生成、发布。
PS 由于这里仓库使用的是 Https 协议,所以在发布过程中会要求输入 Coding 的用户名和密码。

等待命令执行完成后就可以打开浏览器访问 <用户名>.coding.me ,不出意外即可看到博客页面。