有时候我们希望有一个受控的博客，来记录或分享一些东西。这个博客的主题内容由你自己来决定，可以是技术分享(编程、汉化分享等)，也可以是生活感想。
本文将介绍一个可以迅速搭建并部署的受控博客。阅读本文前，希望你对以下知识点有所了解:
-
git(版本控制)的基础使用 -
markdown的使用
为什么要搭建博客
在线类博客有很多选择，为什么我们需要从零搭建新的博客呢？自己搭建的博客有什么好处吗？
首先，前文所提的 “博客受控”，指的就是能够自己控制的博客的样式、内容等，自己想怎么改就怎么改。
内容受控是指我们知道在线类的博客是受平台限制的，这意味着你所发表的内容是需要受审才能发出的，一些敏感的技术词汇，该篇文章都可能会被和谐或被删除。但在自己搭建博客就没有这样的问题，最起码能保留源文件。
其二，博客的样式是受控的。像著名在线博客CSDN上一些博主的文章确实是有学习参考的价值，但问题的是该站广告是在是太多了，字体和排版的阅读体验并不太好。但如果是自己搭建的博客的话，就可以自己着手优化这些问题。
但博客的搭建还需要我们从各方面考虑利弊。平台类博客会有相应的推荐系统，会对同类型文章相互引流，在 SEO 方面会做得比我们好。
个人搭建的博客，刚起步时的浏览量并不高，但是可以通过SEO等方式来逐步增加自己网站的权重。或者提高博客的质量和干货，读者认为文章有价值，自然会收藏起来形成熟客。
那么博客能写什么东西呢？在日常生活中，有很多知识点是呈碎片状，写博客的本质上就是对自己知识的一种梳理，然后再将这些知识分享出来，可能会有对这方面知识有疑惑，或者想找到解决方案，自身分享出来的东西能给读者做一定的参考。同时这也会是一个良性循环，因为分享的同时，你可能也需要去查询一些资料，同时也可以找到别人遇到过并分享出来的解决方案，是一个相互收益的过程。
我们的基本需求是梳理与分享，那么更应该把注意力放在内容本身，网站布局的排版样式等则是增加读者阅读体验的问题。因此我们可以使用现成的博客框架快速完成这些事。
博客框架有很多种选择，笔者选择的是 Hexo，因为它足够便捷优雅。
start
Hexo 依赖 Node.js 和 NPM包管理，Node.js 安装后一般会自带NPM。
我们打开终端(Windows PowerShell / cmd.exe、bash、macOS 里的终端)，输入以下命令:
# 检查 npm 是否安装成功
npm -v
# 安装 hexo cli，
# 如果安装速度过慢的话，可以安装国内的淘宝镜像
# 在命令行输入 ` npm install -g cnpm --registry=https://registry.npm.taobao.org`
npm install -g hexo-cli
# 检查 hexo 是否安装成功，并查看版本
hexo -v
依赖安装成功后，我们可以在命令行输入 hexo help 查看使用方式(描述是英文，示例部分笔者将其转为中文):
Usage: hexo <command>
| command | description |
|---|---|
help |
获取命令的帮助 |
init |
创建一个新的 Hexo 文件夹 |
version |
显示版本信息 |
使用 hexo help [command] 可以查看更多的信息, 如:
hexo help init
# Usage: hexo init [destination]
# Description(描述):
# 在指定的路径或当前目录中创建一个新的Hexo文件夹.
# Arguments（参数）:
# destination 文件夹路径。 如果未指定，则在当前文件夹中初始化
# Options（选项）:
# --no-clone 复制文件而不是从GitHub克隆
# --no-install 跳过 npm 依赖安装(默认初始化会自动装依赖)
全局选项：
| options | description |
|---|---|
--config |
指定配置文件而不是使用默认的 _config.yml
|
--cwd |
指定 CWD |
--debug |
显示终端中的所有详细消息 |
--draft |
显示草稿帖子 |
--safe |
禁用所有插件和脚本 |
--silent |
在控制台上隐藏输出 |
在官网 commands 中可以找到全部完整的解释。
建站
在终端上，我们可以看到有一个 init 的命令，我们可以使用这个命令来初始化 hexo 项目，但再建站之前我们需要先决定在哪里存放博客源代码。
我推荐使用如微软的 OneDrive（win10 系统自带）之类的云文件夹。你可以白嫖它 5G 的云储存空间。当你在设备A下修改了文件，它会自动同步到云端上。切换回设备B并登录账号后，它又会自动从云端下载数据，是一个便捷的方式。
但值得注意的是 OneDrive 毕竟是国外服务，由于众所周知的原因可能需要科学上网才能使用。该方式只是数据备份与同步的问题，不使用它也不会影响下文的构建。
# 如果你是 unix 系统的话，可以使用该命令查看当前路径
pwd
# /Users/anran/OneDrive
# 初始化文件夹名为 blog
hexo init blog
# INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
# other install info ...
# 进入文件夹
cd blog
安装完成后目录如下:
.
├── _config.yml (网站的配置信息)
├── package.json (应用依赖信息)
├── node_modules (依赖包)
├── scaffolds (模板文件)
├── source (资源文件夹是存放用户资源的地方)
| ├── _drafts (草稿文件夹，刚初始化时可能不存在)
| └── _posts (文章/帖子源码列表)
└── themes (主题)
配置
建站完成后我们需要进行 配置，hexo 中主要有两项配置。一项是站点配置文件，路径为 /_config.yml。另一项是主题配置文件,路径是/themes/(下载的主题)/_config.yml。
我们可以先在站点配置文件修改以下基础选项:
# Hexo Configuration
# 网站主标题，SEO元素之一
title: blog
#网站副标题，可选
subtitle:
# 网站描述, SEO元素之一，用于告诉搜索引擎关于这个站点的描述
description: 分享生活、分享技术
# 网站的关键词，如:
keywords: Front end
# 网站作者
author: anran758
# 网站使用的语言, 由于 Hexo 具备多语言配置，默认为英文，我们需要修改回中文语言
language: zh-CN
启动
初始化项目后默认会安装相关的依赖，接着在命令行输入如下命令来运行博客：
# 启动服务，默认端口为 4000，启动服务后可以在浏览器输入 `http://localhost:4000` 查看效果
hexo server
# or 简写方式
hexo s
# 还可以使用 -p, 指定 9000 端口
hexo s -p 9000
blog preview
写作步骤
我们一般通过命令行来操作博客:
比如创建文章的方式如下: hexo new [layout] <title>
layout是指定布局，Hexo默认有post、page 和 draft 三种布局，它们分别对应不同的路径。我们也可以自定义布局，但实际页面会和post相同，都将储存到source/_posts文件夹。
按照我个人的写作习惯，通常写作步骤是：
- 创建草稿(
drafts) - 在草稿上进行写作
- 整理细节并在本地服务器上查看效果(
server) - 发布至正式的帖子上
- 生成静态文件并部署(后续讲)
创建草稿(drafts)
$ hexo new draft "My first post"
# INFO Created: ~/blog/source/_drafts/My-first-post.md
在初次创建草稿会生成一个名为 _drafts 的草稿文件夹，接着该文件夹下有一个我们刚刚创建的草稿，名为 My-first-post.md 的 markdown 文件，文件内容如下:
---
title: My first post
tags:
---
在本地服务器查看草稿(drafts)
我们可以启动本地服务器一边写作一边预览,但默认情况下草稿是不会被展示出来的，如果你想查看草稿的话，可以输入以下命令:
$ hexo s -p 9000 --draft
# INFO Start processing
# INFO Hexo is running at http://localhost:9000 . Press Ctrl+C to stop.
# 如果需要退出服务器，按住 control + c
preview
发布草稿(publish)
如果我们在本地服务器上校队完草稿细节后，可以将草稿发布为文章，否则在后续生成博客静态文件时不会被打包出来:
# hexo publish [layout] <filename>
# 将草稿发布为文章
$ hexo publish post My-first-post
# INFO Published: ~/blog/source/_posts/My-first-post.md
输入命令后你可以发现发布的文章被转移到了source/_posts/上，这样就完成了本地的文章发布。
生成静态文件(generate)
Hexo框架的一项工作就是将源文件 markdown 最后生成为 HTML：
# 生成文件
$ hexo generate
# INFO Start processing
# INFO Files loaded in 275 ms
# INFO Generated: 2019/08/11/My-first-post/index.html
# INFO 1 files generated in 152 ms
# 简写形式
$ hexo g
# 监控文件变化，并生成静态文件
$ hexo g --watch
# 生成文件并部署(部署后面单独章节来讲解)
$ hexo g -d
主题
我们熟悉完博客系统的操作后，接下来就是美化博客。Hexo 支持主题，我们可以根据官网的创建主题教程自己来设计，也可以直接在主题商城 中找现成的主题。这里以笔者推荐的主题 Next 为例:
hexo theme
theme next
笔者一开始使用 next 主题时，版本才 5.x，当时仍有很多博客所需的东西没有集成。如今回头一看，发现 next 升级了好几个大版本。github 主题仓库也迁移至了 https://github.com/theme-next 里，乃至文档都有两个不同的版本。
新文档是采用它自身主题的一个scheme来建成，是全英文文档，可以保证信息资料是最新的。旧文档布局便于阅读，同时是中文文档，大多参数也能在该文档找到，但毕竟没有再过多的维护，建议还是以最新文档为参考。
安装主题可以通过git clone克隆至blog/theme/下:
$ pwd
# /Users/anran/OneDrive/Blog
# 启动主题前需要清除缓存与已部署的文件
$ hexo clean
# clone 主题
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
接着在 站点配置文件(/_config.yml) 中启动 theme。再打开主题配置文件(/themes/next/_config.yml)选择 Scheme:
# _config.yml
- theme: landscape
+ theme: next
# /themes/next/_config.yml
# 提供三种模式
#scheme: Muse
#scheme: Mist
scheme: Pisces
image
评论、订阅、数据统计、SEO 等部分功能配置已经集成至 next 主题配置中，但大多还需要额外添加依赖还需要根据文档来配置。next 在主题配置中集成了由于配置自定义项过多，读者可以根据自己所需添加相应的统计、SEO 相关的 app key 等就不进一步展开讲。
部署
我们使用git进行部署，可以将网站部署至私人服务器、也可以部署到免费的github pages上。本文将介绍部署至github的方法，如果你还没有github账号的话，那你需要先注册一个账号。
步骤如下:
-
访问
github.com，点击sign up注册账号。 -
进入注册页，输入账号密码和邮箱，输入验证码!
sign up
-
选择免费用户
choose free account
-
接着是关于
github推荐服务的调查，当然你也可以跳过它.
调查
-
验证完毕后，它会提示你创建一个仓库，这里我们先创建一个
blog。
create blog
-
复制仓库链接，copy 至
站点配置文件(/_config.yml)里。同时安装hexo-deployer-git的依赖：
copy
npm install hexo-deployer-git --saveurl: https://yourname.github.io/blog # 修改为 github io 的地址 root: /blog/ # 要将资源映射到仓库名 deploy: type: git repo: https://github.com/yourname/blog.git # blog 的 git 地址 branch: gh-pages # 发布至 gp-pages 分支，如果该分支不存在，就会自动创建它 -
接着开始部署。如果你还没配置
git账号的话，它会提示你输入账号密码，输入正确的账号密码后就部署成功了。# 或者使用`hexo d -g`, 两者是等价的效果 hexo g -d # *** Please tell me who you are. # Run # git config --global user.email "you@example.com" # git config --global user.name "Your Name" # to set your account's default identity. # Omit --global to set the identity only in this repository. # fatal: unable to auto-detect email address (got '29625@DESKTOP-0R7P8H4.(none)') # Logon failed, use ctrl+c to cancel basic credential prompt. # Username for 'https://github.com': anran758 INFO Start processing INFO Files loaded in 621 ms INFO 0 files generated in 424 ms INFO Deploying: git INFO Clearing .deploy_git folder... INFO Copying files from public folder... INFO Copying files from extend dirs... INFO Congratulations! Your are using the latest version of theme NexT. Enumerating objects: 131, done. Counting objects: 100% (131/131), done. Delta compression using up to 8 threads Compressing objects: 100% (91/91), done. Writing objects: 100% (131/131), 257.72 KiB | 2.48 MiB/s, done. Total 131 (delta 43), reused 0 (delta 0) remote: Resolving deltas: 100% (43/43), done. To https://github.com/yourname/blog.git * [new branch] HEAD -> gh-pages Branch 'master' set up to track remote branch 'gh-pages' from 'https://github.com/yourname/blog.git'. # 如果没有配置全局 git 账号的话可以先配置，不然下次部署还是会提示你输入账号密码 git config --global user.email "you@example.com" git config --global user.name "Your Name" -
接着在我们创建的
blog下进入settings项，设置github pages为gh-pages也就是之前在配置里设置的分支即可。这样就可以在线上查看我们部署的状况啦~
settings
githu pages
finish
优化与扩展
下面介绍一下文档中没有提到的相关问题与扩展。
本地搜索
next 有内置本地搜索的配置项，但文档上说明需要额外安装 hexo-generator-searchdb 这个依赖。但该项目现在已经被归档了，它还存在一些问题没有修复。你可以使用 hexo-generator-search 来代替它。接者在站点配置文件添加如下配置:
# Expansion: hexo-generator-search
# 站内搜索
# https://github.com/wzpan/hexo-generator-search
search:
path: search.xml
field: post
format: html
limit: 10000
在使用本地搜索功能时，你可能会遇到以下错误：
This page contains the following errors:
error on line 86 at column 35: Input is not proper UTF-8, indicate encoding !
Bytes: 0x08 0xE8 0xB7 0x9F
Below is a rendering of the page up to the first error.
出现这种错误原因大多是因为搜狗输入法带来的特殊字符串，我们在源码中替换它即可。打开编辑器（比如vscode），在全局搜索错误信息Bytes 第一个字节 /x08 替换为空。
github emoji
如果你希望在博客中支持 emoji 的话，你可以安装 hexo-filter-github-emojis
# Use Github Emojis
# Docs: https://github.com/crimx/hexo-filter-github-emojis
githubEmojis:
enable: true
className: github-emoji
unicode: false
styles:
localEmojis:
sitemap
为了让搜索引擎能找到我们的网站，我还需要给搜索引擎的网络蜘蛛提供站点地图文件。
# hexo sitemap 生成器以及百度的 sitemap 生成器
npm install hexo-generator-sitemap hexo-generator-baidu-sitemap --save
依赖安装完后在站点配置文件中添加如下配置:
# Expansion: hexo-generator-sitemap
# generate sitemap.
# https://github.com/hexojs/hexo-generator-sitemap
sitemap:
path: sitemap.xml
# Expansion: hexo-generator-baidu-sitemap
# 针对百度进行优化的 sitemap，作者还是建议手动提交至百度会比较好
# https://github.com/coneycode/hexo-generator-baidu-sitemap
baidusitemap:
path: baidusitemap.xml
设置无分页的归档
如果你期望将归档目录在一页中全部加载出来，那么你可以添加如下配置:
# hexo-generator-archive
# 该插件默认内置于 hexo 中，只需参考文档添加配置即可
# https://github.com/hexojs/hexo-generator-archive
archive_generator:
per_page: 0
图片的引入
在 hexo 中引用图片主要有两种方式：
- 在本地通过资源文件夹引入
- 使用图床
在本地资源的引入，需要修改 _config.yml 的配置:
post_asset_folder: true
设置完选项后，以后每次使用 hexo new [layout] <title> 后就会生成一个同名的文件夹。然后可以使用 {% asset_img slug [title] %} 来引入图片资源:
<!-- 例如插入一个 banner 图，hexo 会自动寻找同名文件夹下的文件 -->
{% asset_img banner.png banner %}
这里是一段示例内容。
该方法的缺点是需要占用本地资源，如果你是使用 git 进行部署，因为使 .git 文件变大(即便删除了该文件，它还会存在 git 的 commit 信息中)。
第二种方式可以使用图床，免费图床有个问题就是服务可能会不稳定，风险不由自己掌控，相对没那么保险。但是它能节省空间，甚至在网络传输上下载速度更快。如果使用图床的话，可以尝试新浪微博图床，将插件下载至 chrome，登录后即可上传得到相应的 url.
README
默认情况下，将源码生成部署至服务器会将上一次生成的数据覆盖掉。如果你期望在 github上保留一个 README.md 给读者看说明的话，可以通过 _config.yml 来设置它：
skip_render: ['images/loading.gif', 'README.md']
网友评论