用Hexo在Github搭建自己的博客网站

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

本文将介绍在MacOS环境下如何快速搭建Hexo环境,创建自己的第一篇文章,以及设置主题添加评论等操作。最后会介绍如何把博客部署到Github Pages上,让其他人可以看到我们的博客。

准备和安装

安装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装Node.js。如果没有安装可以通过下列命令安装Node.js(如果你的Mac没有安装brew,请移步安装 Brew

1
brew install node

安装Hexo

1
npm install -g hexo-cli

建立博客

安装完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

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

编辑配置文件

在博客目录下已经生成了命名为_config.yml的配置文件,这里可以设置网站的大部分设置。详情可参考官方文档

这里修改了一些主要的设置

1
2
3
4
# Site
title: Mike Blog # 网站标题
description: 网站描述
timezone: Asia/Shanghai

这时你再执行命令hexo s,就能看到你自己的博客了。按Ctrl+C 停止Server。

部署到Github Pages

首先,在Github建立与你用户名对应的仓库, 仓库名称为: userName.github.io。别忘了把你的个人公钥上传的Github。

然后编辑配置文件,找到下列内容

1
2
3
4
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:

修改成如下:

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com/userName/userName.github.io.git # 你Github 创建的仓库的地址
branch: master

除此之外还需要安装这个插件

1
npm install hexo-deployer-git --save

然后只需要,输入命令hexo d,即可将你的博客部署到 Github Pages 上。

创建第一篇文章

创建完成后会有一篇默认的文章hello-word.md 在 source/_post目录下,你可以删除它,然后创建一篇自己的文章。

1
hexo new '我的第一篇文章'

你可以在刚才的目录下新生成的我的第一篇文章.mdMarkdown文件,打开并编辑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
title: 我的第一篇文章
date: 2018-12-21 17:21:22
tags:
- 此文章的标签
- 标签二
---

# 标题一
这是我的第一篇文章。

<!-- more --> 通过这个标记可以在首页只显示标记前面的内容。
## 标题二
### 标题三

1. 你好
2. 欢迎

保存后,执行命令hexo g生成文章,再执行hexo s便可查看刚才写好的文章。

设置主题

可以通过改变主题来改变博客样式,可以点击这里挑选你喜欢的主题。

这里我选择了一个比较常用的主题NexT,首先下载主题到themes目录下,如下;

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

编辑_config.yml配置文件:

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

然后再重新生成即可

1
2
hexo g
hexo s

添加评论功能

NexT主题支持多种评论插件快速添加,详情请看文档

这里介绍使用Disqus的评论服务。

  1. Disqus注册一个账号,登录后,点击GET STARTED,然后选择I want to install Disqus on my site选项,然后你将看到Create a new site界面。

  2. 输入你的WebSite Name,该名称将作为您的Disqus短名称,并从下拉菜单中选择一个类别。然后单击Create Site按钮。

  3. 选择I don't see my platform listed, install manually with Universal Code,为您的站点配置Disqus,然后单击Complete Setup按钮。

  4. 编辑在next主题目录下的_config.yml文件

    1
    2
    3
    4
    disqus:
    enable: true
    shortname: your-short-disqus-name
    count: true

总结

Hexo可以简单快速的简历自己的博客, 功能十分丰富,如果想了解更多的内容可以到官网了解详细的内容。NexT主题也提供了样式的修改、统计和站内搜索等功能,感兴趣的朋友点击这里去了解。