从搭建到部署，快速构建一个私人博客

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

本文将介绍一个可以迅速搭建并部署的受控博客。阅读本文前，希望你对以下知识点有所了解:

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

评论、订阅、数据统计、SEO 等部分功能配置已经集成至 next 主题配置中，但大多还需要额外添加依赖还需要根据文档来配置。next 在主题配置中集成了由于配置自定义项过多，读者可以根据自己所需添加相应的统计、SEO 相关的 app key 等就不进一步展开讲。

部署

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

步骤如下:

访问github.com，点击sign up注册账号。
进入注册页，输入账号密码和邮箱，输入验证码!
选择免费用户
接着是关于github推荐服务的调查，当然你也可以跳过它.
验证完毕后，它会提示你创建一个仓库，这里我们先创建一个blog。

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

copy

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                            # 发布至 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']

原文出自：从搭建到部署，快速构建一个私人博客

从搭建到部署，快速构建一个私人博客

为什么要搭建博客

start

建站

配置

启动

写作步骤

主题

部署

优化与扩展

本地搜索

github emoji

sitemap

设置无分页的归档

图片的引入

README

anran758

引用和评论

Promise 与异步编程

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号