0%

利用 GitHub+Hexo+NexT 搭建你的个人博客

为什么要搭建自己的博客

如果你需要有一个创作环境——无论是作为个人文集还是产品展示主页,而你又:

  1. 忍受不了博客服务网站纷乱无序、不讲道理的广告
  2. 忍受不了博客服务网站提供的粗糙排版格式
  3. 忍受不了博客服务网站长而难记的域名,标识度、个性度不够
  4. 不喜欢博客服务网站的社交元素,就是类似「关注」的功能
  5. 是个极简主义者

那么你有两个选择,一是微信公众号,二是参考本文为自己搭建个人博客。

GitHub Pages 设置

首先要在 GitHub 里注册账号,用户名+Email+密码三段式注册,简单明快。

注册后登陆你的账号,点击右上角的➕,选择 New Repository,并在 Repository Name 一栏里填入「你的用户名.github.io」,如果你不知道用户名是什么,就是 Owner 字段下面的那段文字。见上图,例如我的用户名是 patricorgi,Repository Name 就是 patricorgi.github.io 。之后点击页面下方的 Create Repository 绿色按钮,这样 GitHub Pages 的准备就做完了。每个 GitHub 账号能且仅能创建一个这样的主页。

安装 Hexo

什么是 Hexo?

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

什么是 Markdown 语言?

Markdown 语言易读易写,妈妈再也不用纠结我的文章排版问题了,只需要花两三分种学习一下基本语法,你就可以写出排版精致的文章。Markdown 语法学习,请看这篇文章中「Markdown 语法的简要规则」部分。

在安装 Hexo 之前,还需要先确保电脑中已安装 Node.jsGit,然后只要在终端中执行一条命令即可完成 Hexo 的安装

npm install -g hexo-cli

有些 macOS 用户可能会在这一步遇到问题,那么请安装 Xcode 8.1 并进入 Xcode 8.1 -> Preference -> Location -> 选择 Command Line Tools,问题应该能解决。

至此 Hexo 已经安装在你的电脑上。

建站

在终端里cd到你用来建站的路径下,建好之后一般就不移动了,所以要选个风水宝地哦。然后执行下面的命令:

hexo init blogname
cd blogname
npm install

其中blogname是用来存放你个人站点内容的文件夹名称,包括 Hexo 博客的框架文件、主题文件、博文资源等等——我们就称之为「站点文件夹」或「站点根目录」把。

将 Hexo 站点与 GitHub Pages 关联

vim打开站点根目录下的「站点配置文件」_config.yml,找到deploytype字段。删除这两行,然后加入以下四行:

deploy:
type: git #注意以下三行前面都有一个 Tab 的缩进
repo: https://github.com/patricorgi/patricorgi.github.io.git
branch: master

这里repo: 后的网址对应于你的 GitHub Pages 提交代码的 git 地址,一般来说是https://github.com/你的用户名/你的用户名.github.io.git,这里的「你的用户名」与 GitHub Pages 设置里的「你的用户名」一样。比如我的用户名是patricorgi。

保存「站点配置文件」,然后在站点文件夹下使用hexo s命令测试一下网站是否配置成功,如果成功应该会提示Hexo is running at http://localhost:4000/. Press Ctrl+C to stop,这时候在浏览器中打开localhost:4000站点,如果能够正常显示页面(见下图),则表示建站成功。

你可以在「站点配置文件」中靠前的部分看到这几行

title: ## 冒号后面输入你的博客名称
subtitle: ## 副标题
description: ## 对博客的一段文字描述
author: ## 作者,也就是你的名字
language: zh-Hans ## 这一行如果不是这样就改成这样,这样一来就是中文界面
timezone: #在这一行不用管 

发布网页

因为 Hexo 是静态博客,所以我们必须进行「发布」操作才能更新博客。何为静态?按笔者的理解就是,你无法直接在网站中更改内容,你的每一次修改,都需要在你的电脑里「发布」后,才能更新到博客中去,哪怕只是修改一个句号也必须重新「发布」。

发布网页的命令只有以下三行:

hexo clean ## 清理缓存,这句不执行也可
hexo g ## 或 hexo generate 生成网页
hexo d ## 或 hexo deploy 发布网页

更改 NexT 主题

上面你看到的站点页面是 Hexo 自带的 Landscape 主题,我觉得好丑啊。于是我将其更改为 NexT 主题,你可以在NexT 官网查看该主题的安装流程。

配置 NexT 主题之后,仍要对站点进行生成和发布操作才能更新你的博客。再强调一次,任何修改要更新到网页上去都必须重新「发布」。

创建新博文

建站之后有默认的一篇博文「Hello World」,里面详述了如何创建新博文。除了利用这篇博文中介绍的hexo new post NAME的命令之外,你还可以通过在「站点根目录」的source/_posts文件夹中创建 Markdown 文件来创建新博文,不过要在文件开头加上这么几行:

---
title: 利用 GitHub+Hexo+NexT 搭建你的个人博客
date: 2016-11-2 15:3824
tags: 
- blog
- markdown
---

以设置博文的标题、日期、标签,否则你的博文只会显示为「未命名」。

结语

至此,你已经拥有自己的网站啦。如果你觉得域名中存在 github.io 字段,还不够个性。你还可以尝试绑定自己购买的域名,然后在 「站点文件夹」下的 public 中新建「CNAME」文件,并添加你的域名到第一行即可。

![](http://ww3.sinaimg.cn/large/006tNc79jw1f9brc50sfaj304w04wdfu.jpg)