【Hexo博客】从搭建到部署，快速构建私人博客

有时候我们希望有一个受控的博客，来记录或分享一些东西。这个博客的主题内容由你自己来决定，可以是技术分享(编程、汉化分享等)，也可以是生活感想。

本文将介绍一个可以迅速搭建并部署的受控博客。

获取更多内容，请访问博主的个人博客 爱吃猫的小鱼干的Blog

为什么搭建博客

在线类博客有很多选择，为什么我们需要从零搭建新的博客呢？自己搭建的博客有什么好处吗？

首先，前文所提的 “博客受控”，指的就是能够自己控制的博客的样式、内容等，自己想怎么改就怎么改。

内容受控是指我们知道在线类的博客是受平台限制的，这意味着你所发表的内容是需要受审才能发出的，一些敏感的技术词汇，该篇文章都可能会被和谐或被删除。但在自己搭建博客就没有这样的问题，最起码能保留源文件。

其二，博客的样式是受控的。像著名在线博客CSDN上一些博主的文章确实是有学习参考的价值，但问题的是该站广告是在是太多了，字体和排版的阅读体验并不太好。但如果是自己搭建的博客的话，就可以自己着手优化这些问题。

但博客的搭建还需要我们从各方面考虑利弊。平台类博客会有相应的推荐系统，会对同类型文章相互引流，在 SEO 方面会做得比我们好。

个人搭建的博客，刚起步时的浏览量并不高，但是可以通过SEO等方式来逐步增加自己网站的权重。或者提高博客的质量和干货，读者认为文章有价值，自然会收藏起来形成熟客。

那么博客能写什么东西呢？在日常生活中，有很多知识点是呈碎片状，写博客的本质上就是对自己知识的一种梳理，然后再将这些知识分享出来，可能会有对这方面知识有疑惑，或者想找到解决方案，自身分享出来的东西能给读者做一定的参考。同时这也会是一个良性循环，因为分享的同时，你可能也需要去查询一些资料，同时也可以找到别人遇到过并分享出来的解决方案，是一个相互收益的过程。

我们的基本需求是梳理与分享，那么更应该把注意力放在内容本身，网站布局的排版样式等则是增加读者阅读体验的问题。因此我们可以使用现成的博客框架快速完成这些事。

博客框架有很多种选择，笔者选择的是 Hexo，因为它足够便捷优雅。

开始

Hexo 依赖 Node.js 和 NPM包管理，Node.js 安装后一般会自带NPM。

我们打开终端(Windows PowerShell / cmd.exe、bash、macOS 里的终端)，输入以下命令：

# 1 检查npm版本
npm -v

# 2 安装 hexo cli，
npm install -g hexo-cli

# 3 检查 hexo 是否安装成功
hexo -v

# 4 查看使用方式
hexo help

在官网 commands 中可以找到hexo命令完整的解释。

建站

我们可以使用 init 命令来初始化 hexo 项目，但在建站之前我们需要先决定在哪里存放博客源代码。

笔者使用 iCloud 云文件夹，将源文件在多设备同步。当然根据个人情况也可以选择 OneDrive 等云存储空间。

该方式只是数据备份与同步的问题，不使用它也不会影响下文的构建。如果读着暂时没有合适的云存储空间，可以直接存储在本地。

# 1 查看路径（Unix系统）
pwd
# /Users/susu/Library/Mobile Documents/com~apple~CloudDocs

# 2 初始化文件夹名为 blog
hexo init blog

cd blog

初始化安装完成后，blog文件夹下的文件目录如下：

.
├── _config.yml  # 网站的配置信息
├── node_modules  # 应用依赖信息
├── package-lock.json
├── package.json  # 依赖包
├── scaffolds  # 模板文件
├── source  # 资源文件夹是存放用户资源的地方
│   ├── _drafts  # 草稿文件夹，刚初始化时可能不存在
│   ├── _posts  # 文章/帖子源码列表
└── themes  # 博客主题

配置

建站完成后我们需要进行 配置，hexo 中主要有两项配置。

• 站点配置文件，路径为 /_config.yml ；
• 主题配置文件 ，路径是 /themes/(下载的主题)/_config.yml 。

我们可以先在 站点配置文件 修改以下基础选项：

# Hexo Configuration

# 网站主标题，SEO元素之一
title: blog

# 网站副标题，可选
subtitle:

# 网站描述, SEO元素之一，用于告诉搜索引擎关于这个站点的描述
description: 

# 网站的关键词
keywords: 

# 网站作者
author: SuSu

# 网站使用的语言, 由于 Hexo 具备多语言配置，默认为英文，我们需要修改回中文语言
language: zh-CN

启动

初始化项目后默认会安装相关的依赖，接着在命令行输入如下命令来 运行博客 ：

# 启动服务，默认端口为 4000，启动服务后可以在浏览器输入 `http://localhost:4000` 查看效果
hexo server
# 简写方式
hexo s

# 还可以使用 -p, 指定 9000 端口
hexo s -p 9000

写作

一般我们都会使用 hexo new <title> 来建立文章，这种建立方法会将新文章建立在 source/_posts 目录下，当使用 hexo generate 编译 markdown 文件时，会将其 HTML 结果编译在 public 目录下，之后 hexo deploy 将会把 public 目录下所有文章部署到 GitHub，这是我们熟悉的 Hexo 流程。

这种建立文章方式的缺点是：若我们同时编辑多篇文章，只要其中一篇文章尚未编辑完成，也会随着 hexo deploy 一起部署到 GitHub，也就是 GitHub 可能会看到我们尚未完成的文章。

笔者个人的写作习惯是：

1. 创建草稿 (drafts )
2. 在草稿上进行写作
3. 整理细节并在本地服务器上查看效果(server)
4. 发布至正式的帖子上
5. 生成静态文件并部署

创建草稿

# hexo new draft <title>
hexo new draft ”博文示例“

Hexo 提供 draft 机制，它将新文章将建立在 source/_drafts 目录下。博文示例.md 是一个 markdown 文件，默认的内容如下：

---
title: 博文示例
tags: 
---

在本地服务器预览草稿

hexo s --draft

Hexo 的 Hexo server 另外提供 --draft 参数，这让我们可以达到一边编辑 markdown 文章，一边使用浏览器预览的目的。

发布草稿

如果我们在本地服务器上校队完草稿细节后，可以将草稿发布为文章，否则在后续生成博客静态文件时不会被打包出来：

# hexo publish [layout] <filename>
hexo publish post 博文示例

输入命令后你可以发现发布的文章被转移到了source/_posts/上，这样就完成了本地的文章发布。

生成静态文件

Hexo框架的一项工作就是将源文件 markdown 最后生成为 HTML：

# 生成文件
hexo g

# 监控文件变化，并生成静态文件
hexo g --watch

# 生成文件并部署(部署后面单独章节来讲)
hexo g -d

主题

熟悉了博客系统的操作后，接下来就是美化博客。Hexo 支持主题，我们可以根据官网的创建主题教程自己来设计，也可以直接在主题商城 中找现成的主题。这里以笔者的主题为例，演示安装主题的步骤。（主题配置及自定义各种功能，在随后的系列文章讲解）

安装主题可以通过 git clone 克隆至 blog/theme/ 目录下：

pwd
# /Users/susu/Library/Mobile Documents/com~apple~CloudDocs

# 启动主题前需要清除缓存与已部署的文件
hexo clean

# clone 主题（在主题商城中，每个主题都提供了各自的安装说明）
git clone <主题的GitHub仓库地址> themes/next

接着在 站点配置文件(/_config.yml) 中启动 theme 。

# _config.yml
- theme: landscape
+ theme: 下载的主题名称

部署

我们使用git进行部署，可以将网站部署至私人服务器、也可以部署到免费的github pages上。本文将介绍部署至github的方法，如果你还没有github账号的话，那你需要先注册一个账号。

1. 注册 github 账号

2. 创建一个仓库，这里我们先创建一个blog。

   

   接着

   

3. 复制仓库链接，拷贝至 站点配置文件(/_config.yml) 里。同时安装 hexo-deployer-git 的依赖：

   npm install hexo-deployer-git --save
   

   url: https://yourname.github.io/blog  # 修改为 github io 的地址
   root: /blog/  # 要将资源映射到仓库名
   
   deploy:
     type: git
     repo: https://github.com/yourname/blog.git  # blog 的 git 地址
     branch: gh-pages  # 发布至 gh-pages 分支，如果该分支不存在，就会自动创建它
   
   

4. 接着开始部署。如果你还没配置git账号的话，会提示你输入账号密码，输入正确的账号密码后就部署成功了。

   hexo g -d
   

5. 接着在github创建的 blog 下进入 settings 项，设置 github pages 为 gh-pages 也就是之前在配置里设置的分支即可。

6. github pages 绿色底色处提示我们博客的地址，点击就可以线上查看啦~

获取更多内容，请访问博主的个人博客 爱吃猫的小鱼干的Blog