从零开始搭建博客|Hexo+Github+NexT

发表于 | 分类于 |

个人博客是继Email、BBS、IM之后的第四种网络信息传播方式，是一个区别于当前流行的（QQ空间，微信朋友圈，微信公众号，微博，贴吧，知乎，简书，论坛）信息分享平台，他有强烈的个人标识和非常高的个性化。说了这么多，我想说的是我搭建了一个博客，我有话要说，:muscle:

博客诞生同其他几个一样，在互联网兴起之后，人们对信息分享和流通的需求逐渐加大，而这个需求在当时还不能由上述所说的各种产品满足，所以博客成为了当时的一种信息共享方式；在当时写博客的人应该多是互联网从事者，因为当时互联网使用率很低，也没有WordPress，Joomla，Hexo这样简单好用（相对而言）的建站工具，建站难度很高，个人建站的话，必须精通网络知识而且能够进行Web开发。即使博客能顺利建立，以后面临的另一个问题就是内容流通性差，互联网太广太大了，光靠搜索引擎不能使更多的信息流通起来，所以有很多的商业公司瞄准了这个市场，于是就诞生了以上的那些产品，它们各有特色，互为补充，几乎每一个国内的互联网使用者都有用过其中一二。

前言

作为一个CS专业的大学生，书写博客是我们自身的需要，它不像在纸上书写，计算机显示技术能将我们想要表达的很多内容，清晰，明确的表现出来，举几个简单的例子：代码高亮，动态图演示等，都是书本不具有的，所以各种技术论坛，如CSDN、博客园、开源中国、Stack Overflow就应运而生，从一个方面来说，个人博客存在的意义已经不大了，但从另一个方面来说，个人博客与GitHub是一张好的名片。

Talk is cheap. Show me the code.
—Linus Torvalds

正文

博客建成就是你能看到的这个样子，功能基本齐全，评论功能由于体验十分糟糕所以弃用了 ，其他的一些功能觉得不必要就没有弄，如果你有什么问题和反馈可以从侧边栏使用邮件或者通过Github给我留言。
那些深度定制的博客十分惊艳，做之前可以先看看可以达到什么样的高度。

在我建站的过程中，参考了大量他们的经验分享，这里我也将我的建站经历写出来，以供参考。

建站的首先需要安装一些软件，安装过程为了准确，我直接引用Hexo文档的内容，建议直接参考
Hexo的文档，文档写的很漂亮。

以下关于Hexo配置的内容多来自Hexo官方网站

我们正式开始

什么是 Hexo？

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

安装

安装 Hexo 只需几分钟时间，若您在安装过程中遇到问题或无法找到解决方式，请提交问题，我会尽力解决您的问题。

安装前提

安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：

Node.js

Git

如果您的电脑中已经安装上述必备程序，那么恭喜您！接下来只需要使用 npm 即可完成 Hexo 的安装。

$ npm install -g hexo-cli

如果您的电脑中尚未安装所需要的程序，请根据以下安装指示完成安装。

Mac 用户

您在编译时可能会遇到问题，请先到 App Store 安装 Xcode，Xcode 完成后，启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

安装 Git

  • Windows：下载并安装 git.

  • Mac：使用 Homebrew, MacPorts ：brew install git;或下载安装程序安装。

  • Linux (Ubuntu, Debian)：sudo apt-get install git-core

  • Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

Windows 用户

由于众所周知的原因，从上面的链接下载git for windows最好挂上一个代理，否则下载速度十分缓慢。也可以参考这个页面，收录了存储于百度云的下载地址。

安装 Node.js

安装 Node.js 的最佳方式是使用 nvm。

cURL:

$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

Wget:

$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

安装完成后，重启终端并执行下列命令即可安装 Node.js。

$ nvm install stable
或者您也可以下载 安装程序 来安装。

Windows 用户

对于windows用户来说，建议使用安装程序进行安装。安装时，请勾选Add to PATH选项。
另外，您也可以使用Git Bash，这是git for windows自带的一组程序，提供了Linux风格的shell，在该环境下，您可以直接用上面提到的命令来安装Node.js。打开它的方法很简单，在任意位置单击右键，选择“Git Bash Here”即可。由于Hexo的很多操作都涉及到命令行，您可以考虑始终使用Git Bash来进行操作。

安装 Hexo

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

$ npm install -g hexo-cli

到此为之你的Hexo博客所需的前提就已经准备完毕了，下一步需要生成一个Hexo文件并进行配置，一下内容同样来自Hexo的文档。

建站

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

$ hexo init <folder>

$ cd <folder>

$ npm install

新建完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml是网站的配置信息，您可以在此配置大部分的参数。

package.json
应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package.json
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^3.0.0",
    "hexo-generator-archive": "^0.1.0",
    "hexo-generator-category": "^0.1.0",
    "hexo-generator-index": "^0.1.0",
    "hexo-generator-tag": "^0.1.0",
    "hexo-renderer-ejs": "^0.1.0",
    "hexo-renderer-stylus": "^0.2.0",
    "hexo-renderer-marked": "^0.2.4",
    "hexo-server": "^0.1.2"
  }
}

scaffolds

模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。
Hexo的模板是指在新建的markdown文件中默认填充的内容。
例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source

资源文件夹是存放用户资源的地方。除_posts文件夹之外，开头命名为 _(下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public文件夹，而其他文件会被拷贝过去。

themes

主题文件夹。Hexo 会根据主题来生成静态页面。后面我们会为我们的博客安装NexT主题。

又一里程碑，这一个部分我们需要对我们的博客进行配置，新手就按照官方文档配置就可以，先看到结果，后续你可以进行复杂的配置和高度的个性化定制，在博客上花时间越多，你就越理解Hexo这个框架的逻辑。

配置

写在前面的话，网站的配置对格式的要求非常严格，特别是缩进的要求，一般都是冒号之后一个空格，然后参数值，这个问题需要特别主要，最好使用Atom之类的编辑器来编辑，因为它会根据不同的缩进有不同的颜色颜色

您可以在 _config.yml 中修改大部份的配置。

网站

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
author 您的名字
language 网站使用的语言 zh-Hans
timezone 网站时区。Hexo 默认使用您电脑的时区，大陆使用的是 Asia/Shanghai

本站的网站配置

1
2
3
4
5
6
7
8
# Site
title: GALAXY
subtitle:
description: 永远年轻，永远热泪盈眶
keywords:
author: 沼泽星空
language: zh-Hans
timezone: Asia/Shanghai

网址

参数 描述 默认值
url 网址，用于连接你部署的域名
Root 网站根目录
permalink 文章的永久链接 格式 :year/:month/:day/:title/
permalink_defaults 永久链接中各部分的默认值

本站的网址配置

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://https://yangchaofu.cn/
root: /
permalink: :title.html
permalink_defaults:

如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。

目录

参数 描述 默认值
source_dir 资源文件夹，这个文件夹用来存放内容。 source
public_dir 公共文件夹，这个文件夹用于存放生成的站点文件。 public
tag_dir 标签文件夹 tags
archive_dir 归档文件夹 archives
category_dir 分类文件夹 categories
code_dir Include code 文件夹 downloads/code
i18n_dir 国际化（i18n）文件夹 :lang
skip_render 跳过指定文件的渲染，您可使用 glob 表达式来匹配路径。

本站的目录配置

1
2
3
4
5
6
7
8
9
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

提示

如果您刚刚开始接触Hexo，通常没有必要修改这一部分的值。

文章

参数 描述 默认值
new_post_name 新文章的文件名称 :title.md
default_layout 预设布局 post
auto_spacing 在中文和英文之间加入空格 false
titlecase 把标题转换为 title case(大写) false
external_link 在新标签中打开链接 true
filename_case 把文件名称转换为 (1) 小写或 (2) 大写 0
render_drafts 显示草稿 false
post_asset_folder 启动 Asset 文件夹 false
relative_link 把链接改为与根目录的相对位址 false
future 显示未来的文章 true
highlight 代码块的设置

本站的文章配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Writing
new_post_name: :title-:year-:month-:day.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

相对地址

默认情况下，Hexo生成的超链接都是绝对地址。例如，如果您的网站域名为example.com,您有一篇文章名为hello，那么绝对链接可能像这样：http://example.com/hello.html，它是绝对于域名的。相对链接像这样：/hello.html，也就是说，无论用什么域名访问该站点，都没有关系，这在进行反向代理时可能用到。通常情况下，建议使用绝对地址。

分类 & 标签

参数 描述 默认值
default_category 默认分类 uncategorized
category_map 分类别名
tag_map 标签别名

本站的分类&标签配置

1
2
3
4
# Category & Tag
default_category: uncategorized
category_map:
tag_map:

日期 / 时间格式

Hexo 使用 Moment.js 来解析和显示时间。

参数 描述 默认值
date_format 日期格式 YYYY-MM-DD
time_format 时间格式 H:mm:ss

本站的日期/时间配置

1
2
3
4
5
6
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

分页

参数 描述 默认值
per_page 每页显示的文章量 (0 = 关闭分页功能) 10
pagination_dir 分页目录 page

本站的分页配置

1
2
3
4
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

扩展

参数 描述
theme 当前主题名称。值为false时禁用主题
deploy 部署部分的设置

本站的扩展配置

1
2
3
4
5
6
7
8
9
10
11
12
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  //这里需要注意，请严格按照以下格式来书写，避免麻烦，如果不想暴漏密码可以找网上的其他教程
  repo: https://yourname:yourpassword@github.com/yourname/yourname.github.io.git
  branch: master

以上我基本就是把官方文档抄了一遍，然后对应给出我的网站的配置，初看官方文档如同课本一样，会觉得晦涩难懂，但配合着我的配置和我的博客的外观，你应该能够多数看明白，所以，你即使看不懂也要大概的过一遍，自己建博客的时候就不会两眼一发黑。

以上的配置有一个地方初次使用时需要注意，即主题，NexT主题是需要下载安装的，未下载了配置可能会出错，主题安装在后续给出说明。

又完成了一个重要步骤，下一过程你就可以创建你的第一篇博文并部署测试了

几个重要的命令写在前面，使用博客过程中你会大量使用的这几条命令，先混个眼熟，有些命令是缩写，括号内部给出全程

命令 描述
hexo init 对一个文件夹进行初始化，进行Hexo的本地配置
hexo clean 对public中生成的文件进行删除
hexo g （generate） 根据sources文件中的博文和站点配置文件以及主题配置文件生成文件放入public
hexo d（deploy） 将public中的文件部署到_config.yml中deploy配置的地方
hexo s（server） 对博客进行本机测试，理解B/S结构程序的同学应该都明白，不明白不要紧

_生成和部署命令可以混合使用，例如：hexo g -d

生成一篇本地新博文

1
2
3
hexo new "tiele"
//事例
hexo new 我的第一篇博文

该命令会生成一篇位于source/_posts/的博文，生成的博文会根据_config.yml的new_post_name:来生成博文名；还会根据 scaffolds 模版文件中的post中的内容对新建的博文进行填充一部分内容，你可以自己定义内部的内容。

比如本博客的博文名生成方式如下：

1
new_post_name: :title-:year-:month-:day.md # File name of new posts

根据以上事例就会得到这样一个博文名字：

我的第一篇博文-2018年-5月-10日

然后根据scaffolds中的post文件家生成的填充内容如下：

1
2
3
4
5
6
7
8
9
10
---
title: 我的第一篇博文-2018年-5月-10日
comments: true      //开启评论功能，需要有外部的文件支持，由于体验不好所以，本博客暂时没有使用评论系统
date: 2018-05-10 17:24:13 //创建时间
tags:   //标签
  - Hexo
  - NexT
categories: //分类，分类和标签在官方文档中有很好的说明
  - 随笔
---

后面你就可以写你的博文内容了，Hexo默认使用的是Markdown来作为内容书写格式，你需要简单的学习一下Markdown语法，但是不是非常困难，可以依托互联网快速学习，其中有很多深入的东西，比如画图和数学公式可以稍微放一下，主要对标题、序列、代码、图片、超链接、表格、加粗、斜体等了解即可，当然，这么优雅的语言深入学习是必须的，还有，书写的时候可以配合html来做到更好的效果，官方也为我们提供了一些特别的标签，可以参考官方文档，使用一些插件，我们可以在我们的博文中引入图片和视频这些比较高大上的东西，这个内容在后续会单独说说道。
注意一点，博文会有阅读全部和部分的摘要两个方面，怎么分割呢，使用 <!-- more -->来实现

第一篇博文写好了之后，就是使用控制台或者Git Bash进行发布的时候了，比如说我们使用Windows，我们用控制台进入到我们博客站点所在的文件夹下，然后进行hexo g命令生成文件，然后使用hexo s，在浏览器中输入localhost:4000进入预览，然后进行更改，觉得没有问题之后使用hexo d进行部署到GitHub的仓库中，在浏览器中输入yourgithubname.github.io即可进行访问。
你的第一篇博文就诞生了，但是官方主题相对第三方而言差了一点，所以我们复习要对它进行主题的更改，这里就需要安装NexT这个优雅的主题了，这里希望大家照着NexT的官方文档一步一步来，弄不清楚多看几遍，网络上的好多内容参差不齐，官方文档是相对而言最好的参考，质量有保证。
NexT官方文档

好，到这一步假设你已经安装好了NexT，并进行了一些配置，但是你肯定忘了一些，或者根本无从下手的，那么再从这几个地方看看，你配置了吗？

根据NexT官方文档对该主题进行配置之后，你的博客将具有侧边栏的头像，侧边栏的链接,同时你的菜单将拥有关于，标签，归档，本地搜索这些菜单选项，已经十分强大了，基本上我们的博客就建立完毕了，如果你没有更多的要求，那么，已经可以收手了，博客主要还是要有内容的保证

深度的定制

对于希望博客更加好用好看的同学，可以参考以下两个内容，第一个功能非常的繁多，可以从中选择自己喜欢的进行配置，而第二个就需要特别隆重的推荐一下了，我觉得这是Hexo建站的巅峰，我见过做过最好的一个，而且毫不吝啬的给出来深度定制的教程，好多内容可以从中参考，希望自己的博客也能如此漂亮的同学可以通过他给出的文档得到满足。

还有一个问题是文件的存储问题，一般网络上都是使用网络存储空间然后引用的方法，这里推荐大家一个存储的地方，目前是免费的。

参考

牛顿曾经说过：我之所以能看的远，是因为我站在了巨人的肩膀上；IT界也有一种说法叫不到万不得已，不自己“造轮子”，其实他们是一样的概念，知识是人类巨大的宝库，参考别人的经验是一个人一生学习的技能。