---
title: Hexo博客搭建
date: 2020-07-08 14:33:48
tags: [博客搭建]
categories: [博客搭建]
keywords: [博客搭建]
author: Anges黎梦
---
> 写给想要搭建个人博客，但是没有方法的同学们。

## 什么是Hexo？

Hexo 是一个基于nodejs 的静态博客网站生成器，作者是来自台湾的 Tommy Chen。

官方网站：[Hexo](https://hexo.io/)

特点：

- 不可思议的快速 ─ 只要一眨眼静态文件即生成完成

- 支持 Markdown

- 仅需一道指令即可部署到 GitHub Pages 和 Heroku

- 已移植 Octopress 插件

- 高扩展性、自订性

- 兼容于 Windows, Mac & Linux

## 搭建步骤

### 安装 Node.js

> 什么是 Node.js ？
 这得从什么是 JS 说起，JS 也就是 JavaScript。
>JavaScript 是一种编程语言，我们所见到的网页中的交互和逻辑处理几乎都是由 JavaScript 完成。
 JavaScript 语法简单，易学易用。
 在 Node.js 诞生前，JavaScript 都运行于浏览器端。也就是说，它是鱼，浏览器是装满了水的水缸。
 2008 年，Chrome V8 诞生。2009 年，Node.js 诞生。并成为 GitHub 早期最著名的开源项目。GitHub 可能大家已有所了解，后续再说。
 Node.js 便是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
>按照我的理解，JavaScript 是鱼，Chrome V8 就是抽水机，Node.js 则把这台抽水机也装在你电脑上。于是你的电脑也有了 Node.js 这个和浏览器相似的水缸，也可以在里面运行 JavaScript 了！
 当然 Node.js 和浏览器端还是因为自身定位和一些历史原因而有些许区别的，不再展开。

[Node.js | 百度百科](https://baike.baidu.com/item/node.js/7567977)
[JavaScript | MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript)

[下载｜ Node.js](https://nodejs.org/zh-cn/)

建议下载**长期支持版**而非**当前发布版**（因为如果是最新版，容易出现一些奇妙的 bug）。

全部默认下一步进行安装。

Windows 打开命令提示符，macOS 打开终端。
Linux 用户右上角关闭本标签页。

后续如提到输入命令，均默认指打开终端进行输入。

输入 **node --version**，如果得到的版本号与你方才安装的一致，那么 Node.js 就已经成功安装。

> Node.js 安装成功时也默认安装了 npm，在此后将会用到。
  npm 是随 Node.js 一起被安装的包管理工具，你可以理解成 Node.js 自带的应用商店。

对了，国内使用 npm 可能很慢。

你可以考虑切换为 taobao 镜像源。

```shell script
npm config set registry https://registry.npm.taobao.org
```

>[npm & yarn 常用包与命令](https://www.yuque.com/yunyoujun/notes/npm-and-yarn#nrm)

### 安装 Git

> 下载 [Git](https://git-scm.com/) 并安装（如果国内速度太慢，可以试试[这里](https://pc.qq.com/detail/13/detail_22693.html)）
  
  macOS 用户可以下载官网的安装包进行安装，也可以直接安装 App Store 的 Xcode（附带会安装 Git，但是比较大）。
  
  类似的工具还有：SVN。但始终更推荐 Git，因为它功能更为强大且它的背后还有更强大的生态：GitHub。

### 安装 Hexo

[Hexo官方文档](https://hexo.io/)

GitHub: [https://github.com/hexojs/hexo](https://github.com/hexojs/hexo)
[官方文档](https://hexo.io/zh-cn/docs/index.html)（直接参考文档也是一个不错的选择）

在终端中输入以下命令：

```shell script
npm install hexo-cli -g
# 如果安装失败，可能是没有权限，可以尝试头部加上 sudo 重新执行
# sudo npm install hexo-cli -g
```

> install 自然是安装。
  hexo-cli 则是 hexo 的终端工具，可以帮助你生成一些模版文件，之后再用到。
  -g 代表的是全局安装。也就是在任何地方都可以使用，否则会只能在安装的目录下使用。

此时，请先通过 cd 进入你本地电脑打算存储网站代码的文件夹目录。

[cd | DOS 命令](https://baike.baidu.com/item/cd/3516393)
[cd （LINUXSHELL 命令）](https://baike.baidu.com/item/cd/3516411)

譬如：

> 注意：这里是你自定义的目录，请不要复制粘贴
  
```shell script
hexo init 你的博客项目名称
```

> hexo 正是因为我们之前安装了 hexo-cli 这一个包，所以我们可以在终端中使用 hexo 这一命令。
  init 初始化博客的模版文件。后面跟的是你要新建的文件夹，最好和你此前新建的仓库名一致。

```shell script
# 进入你的博客文件夹
cd 你的博客项目名称
# 默认安装所有 `package.json` 文件中提到的包
npm install
# 你也可以缩写成 hexo s
hexo server
```

出现如下图的情况，就已经初始化好了一个初始化的博客。

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/build-blog/1.png)

**server** 代表开启本地的 Hexo 服务器，这时你就可以打开浏览器，在地址栏中输入 **localhost:4000** 就可以看到本地的网页了。

按 **Ctrl + C** 中断服务器的运行。

至此，基础的模版页面便已经搭建好了。

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/build-blog/2.png)

我们可以看到启动成功。复制地址： **http://localhost:4000** 在浏览器打开，即可看到博客的页面。

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/build-blog/3.png)

### Hexo项目

博客内所有的项目配置都在 **_config.yml** 这个文件中。

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/build-blog/4.png)

### 使用 Hexo 主题

Hexo 默认提供的是 **hexo-theme-landscape** 主题。

默认主题样式简单，功能较少。所以大多数人并不会使用默认主题。

当然也可以自己对博客样式进行编辑。

我们可以在 [官方博客主题](https://hexo.io/themes/) 找到很多主题。

下载之后可以安装到我们的hexo中进行使用。

#### 主题安装

在主题列表中，选则一个喜欢的主题。然后找到他的git地址。

在我们的博客地址下面，找到**themes**路径，使用下面命令：

```shell script
cd ./themes/
git clone 主题地址
```

#### 主题使用

我们在 **_config.yml** 文件中找到**themes**配置，这里我们可以看到配置。

在**themes**目录下，安装好主题之后，把landscape改成你下载好的hexo主题即可。

```shell script
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape
```

#### 主题配置

每一个主题中，都有一个 **_config.yml** 文件。这里配置的是主题内的内容。

具体的配置内容，需要大家看一下你选择的主题的配置。

### Hexo部署

关于Hexo的部署，官方文档给我们准备了三个方法。

[将 Hexo 部署到 GitHub Pages](https://hexo.io/zh-cn/docs/github-pages)
[将 Hexo 部署到 GitLab Pages](https://hexo.io/zh-cn/docs/gitlab-pages)
[部署到服务器上](https://hexo.io/zh-cn/docs/one-command-deployment)

这里我们查看官方文档的方法即可。