Anran758's blog

0%

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

发表于 更新于 分类于 阅读次数： Disqus：
本文字数： 12k 阅读时长 ≈ 14 分钟

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

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

  • git(版本控制) 的基础使用
  • markdown 的使用

为什么要搭建博客

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

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

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

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

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

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

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

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

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

start

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

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

1
2
3
4
5
6
7
8
9
10
# 检查 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>

commanddescription
help获取命令的帮助
init创建一个新的 Hexo 文件夹
version显示版本信息

使用 hexo help [command] 可以查看更多的信息, 如:

1
2
3
4
5
6
7
8
9
10
11
12
hexo help init
# Usage: hexo init [destination]

# Description(描述):
# 在指定的路径或当前目录中创建一个新的Hexo文件夹.

# Arguments（参数）:
#  destination  文件夹路径。 如果未指定，则在当前文件夹中初始化

# Options（选项）:
#  --no-clone    复制文件而不是从GitHub克隆
#  --no-install  跳过 npm 依赖安装(默认初始化会自动装依赖)

全局选项：

optionsdescription
--config指定配置文件而不是使用默认的 _config.yml
--cwd指定 CWD
--debug显示终端中的所有详细消息
--draft显示草稿帖子
--safe禁用所有插件和脚本
--silent在控制台上隐藏输出

在官网 commands 中可以找到全部完整的解释。

建站

在终端上，我们可以看到有一个 init 的命令，我们可以使用这个命令来初始化 hexo 项目，但再建站之前我们需要先决定在哪里存放博客源代码。

我推荐使用如微软的 OneDrive（win10 系统自带）之类的云文件夹。你可以白嫖它 5G 的云储存空间。当你在设备A下修改了文件，它会自动同步到云端上。切换回设备B并登录账号后，它又会自动从云端下载数据，是一个便捷的方式。

但值得注意的是 OneDrive 毕竟是国外服务，由于众所周知的原因可能需要科学上网才能使用。该方式只是数据备份与同步的问题，不使用它也不会影响下文的构建。

1
2
3
4
5
6
7
8
9
10
11
# 如果你是 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

安装完成后目录如下:

1
2
3
4
5
6
7
8
9
.
├── _config.yml   (网站的配置信息)
├── package.json  (应用依赖信息)
├── node_modules  (依赖包)
├── scaffolds     (模板文件)
├── source        (资源文件夹是存放用户资源的地方)
|   ├── _drafts      (草稿文件夹，刚初始化时可能不存在)
|   └── _posts       (文章/帖子源码列表)
└── themes        (主题)

配置

建站完成后我们需要进行 配置，hexo 中主要有两项配置。一项是站点配置文件，路径为 /_config.yml。另一项是主题配置文件,路径是/themes/(下载的主题)/_config.yml。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Hexo Configuration

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

#网站副标题，可选
subtitle:

# 网站描述, SEO元素之一，用于告诉搜索引擎关于这个站点的描述
description: 分享生活、分享技术

# 网站的关键词，如:
keywords: Front end

# 网站作者
author: anran758

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

启动

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

1
2
3
4
5
6
7
8
# 启动服务，默认端口为 4000，启动服务后可以在浏览器输入 `http://localhost:4000` 查看效果
hexo server

# or 简写方式
hexo s

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

写作步骤

我们一般通过命令行来操作博客:

比如创建文章的方式如下: hexo new [layout] <title>

layout是指定布局，Hexo默认有post、page 和 draft 三种布局，它们分别对应不同的路径。我们也可以自定义布局，但实际页面会和post相同，都将储存到source/_posts文件夹。

按照我个人的写作习惯，通常写作步骤是：

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

创建草稿(drafts)

1
2
$ hexo new draft "My first post"
# INFO  Created: ~/blog/source/_drafts/My-first-post.md

在初次创建草稿会生成一个名为 _drafts 的草稿文件夹，接着该文件夹下有一个我们刚刚创建的草稿，名为 My-first-post.md 的 markdown 文件，文件内容如下:

1
2
3
4
---
title: My first post
tags:
---

在本地服务器查看草稿(drafts)

我们可以启动本地服务器一边写作一边预览,但默认情况下草稿是不会被展示出来的，如果你想查看草稿的话，可以输入以下命令:

1
2
3
4
5
$ hexo s -p 9000 --draft
# INFO  Start processing
# INFO  Hexo is running at http://localhost:9000 . Press Ctrl+C to stop.

# 如果需要退出服务器，按住 control + c

发布草稿(publish)

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

1
2
3
4
# 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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 生成文件
$ 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 为例:

theme next

笔者一开始使用 next 主题时，版本才 5.x，当时仍有很多博客所需的东西没有集成。如今回头一看，发现 next 升级了好几个大版本。github 主题仓库也迁移至了 https://github.com/theme-next 里，乃至文档都有两个不同的版本。

新文档是采用它自身主题的一个scheme来建成，是全英文文档，可以保证信息资料是最新的。旧文档布局便于阅读，同时是中文文档，大多参数也能在该文档找到，但毕竟没有再过多的维护，建议还是以最新文档为参考。

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

1
2
3
4
5
6
7
8
$ 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:

1
2
3
4
5
6
7
8
9
# _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账号的话，那你需要先注册一个账号。

步骤如下:

  1. 访问github.com，点击sign up注册账号。

  2. 进入注册页，输入账号密码和邮箱，输入验证码!

  3. 选择免费用户

  4. 接着是关于github推荐服务的调查，当然你也可以跳过它.

  5. 验证完毕后，它会提示你创建一个仓库，这里我们先创建一个blog。

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

    1
    npm install hexo-deployer-git --save
    1
    2
    3
    4
    5
    6
    7
    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 分支，如果该分支不存在，就会自动创建它

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    # 或者使用`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"

  8. 接着在我们创建的blog下进入settings项，设置 github pages 为 gh-pages 也就是之前在配置里设置的分支即可。这样就可以在线上查看我们部署的状况啦~

优化与扩展

下面介绍一下文档中没有提到的相关问题与扩展。

本地搜索

next 有内置本地搜索的配置项，但文档上说明需要额外安装 hexo-generator-searchdb 这个依赖。但该项目现在已经被归档了，它还存在一些问题没有修复。你可以使用 hexo-generator-search 来代替它。接者在站点配置文件添加如下配置:

1
2
3
4
5
6
7
8
# Expansion: hexo-generator-search
# 站内搜索
# https://github.com/wzpan/hexo-generator-search
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

在使用本地搜索功能时，你可能会遇到以下错误：

1
2
3
4
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

1
2
3
4
5
6
7
8
# Use Github Emojis
# Docs: https://github.com/crimx/hexo-filter-github-emojis
githubEmojis:
  enable: true
  className: github-emoji
  unicode: false
  styles:
  localEmojis:

sitemap

为了让搜索引擎能找到我们的网站，我还需要给搜索引擎的网络蜘蛛提供站点地图文件。

1
2
# hexo sitemap 生成器以及百度的 sitemap 生成器
npm install hexo-generator-sitemap hexo-generator-baidu-sitemap --save

依赖安装完后在站点配置文件中添加如下配置:

1
2
3
4
5
6
7
8
9
10
11
# 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

设置无分页的归档

如果你期望将归档目录在一页中全部加载出来，那么你可以添加如下配置:

1
2
3
4
5
# hexo-generator-archive
# 该插件默认内置于 hexo 中，只需参考文档添加配置即可
# https://github.com/hexojs/hexo-generator-archive
archive_generator:
  per_page: 0

图片的引入

在 hexo 中引用图片主要有两种方式：

  • 在本地通过资源文件夹引入
  • 使用图床

在本地资源的引入，需要修改 _config.yml 的配置:

1
post_asset_folder: true

设置完选项后，以后每次使用 hexo new [layout] <title> 后就会生成一个同名的文件夹。然后可以使用 `

` 来引入图片资源:
1
2
3
4
<!-- 例如插入一个 banner 图，hexo 会自动寻找同名文件夹下的文件 -->
{% asset_img banner.png banner %}

这里是一段示例内容。

该方法的缺点是需要占用本地资源，如果你是使用 git 进行部署，因为使 .git 文件变大(即便删除了该文件，它还会存在 git 的 commit 信息中)。

第二种方式可以使用图床，免费图床有个问题就是服务可能会不稳定，风险不由自己掌控，相对没那么保险。但是它能节省空间，甚至在网络传输上下载速度更快。如果使用图床的话，可以尝试新浪微博图床，将插件下载至 chrome，登录后即可上传得到相应的 url.

README

默认情况下，将源码生成部署至服务器会将上一次生成的数据覆盖掉。如果你期望在 github上保留一个 README.md 给读者看说明的话，可以通过 _config.yml 来设置它：

1
skip_render: ['images/loading.gif', 'README.md']

外链音乐播放器插件

网易云音乐提供了一个外链音乐播放器，可以插入博客中，样式以及播放的歌单都是通过url控制的。我们稍微封装一下，添加如下代码：

/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
# 网易云音乐插件
# 控制台: https://music.163.com/#/outchain/0/{% music.id %}/m/use/html
# 网易云音乐插件默认提供三种模式，不同模式设有不同宽高，样式也可能会略有不同。
# 如果你想调整默认的宽高的话，可以设置 width | height 覆盖原先 modal 的宽度
# modal: 1(310 X 430) | 2(310 X 90) | 3(278 | 32)
music:
  enable: true
  id: 102842761      # 网易云分享的ID
  autoplay: false    # 是否开启自动播放
  modal: 2           # 模式, 默认为 modal 2
  # width: 310       # 宽度, 默认为 modal 2
  # height: 90       # 高度, 默认为 modal 2

添加 netease-cloud-music.swig 模板:

/next/layout/_partials/sidebar/netease-cloud-music.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
{##
 # extend layout: 网易云音乐外链播放器
 # @author anran758
 #}
{%- if theme.music and theme.music.enable %}
  {# default size #}
  {%- set music_model = theme.music.modal or 2 %}
  {%- set music_width = 310 %}
  {%- set music_height = 90 %}
  {%- set music_padding = 20 %}

  {# default config #}
  {%- set music_id = theme.music.id or 102842761 %}
  {%- set music_auto = 0 %}
  {%- if theme.music.autoplay %}
    {%- set music_auto = 1 %}
  {%- endif %}

  {%- if theme.music.width %}
    {%- set music_width = theme.music.width %}
  {%- elif music_model === 1 or music_model === 2 %}
    {%- set music_width = 310 %}
  {%- elif music_model === 3 %}
    {%- set music_width = 278 %}
  {%- endif %}

  {%- if theme.music.height %}
    {%- set music_height = theme.music.height %}
  {%- elif music_model === 1 %}
    {%- set music_height = 430 %}
  {%- elif music_model === 2 %}
    {%- set music_height = 90 %}
  {%- elif music_model === 3 %}
    {%- set music_height = 32 %}
  {%- endif %}

  <iframe
    frameborder="no"
    border="0"
    marginwidth="0"
    marginheight="0"
    width="{{ music_width + music_padding}}"
    height="{{ music_height + music_padding }}"
    src="//music.163.com/outchain/player?type=0&id={{ music_id }}&auto={{ music_auto }}&height={{ music_height }}"
    style="margin: 10px 0 50px;"
  ></iframe>
{%- endif %}

在 layout/_macro/sidebar.swig 中插入模板：

layout/_macro/sidebar.swig
1
2
3
4
5
6
7
8
<div class="site-overview-wrap sidebar-panel">
  {{ partial('_partials/sidebar/site-overview.swig', {}, {cache: theme.cache.enable}) }}

  <!-- 插入下列代码 -->
  {{ partial('_partials/sidebar/netease-cloud-music.swig', {}, {cache: theme.cache.enable}) }}

  {{- next_inject('sidebar') }}
</div>

不过值得注意的是，虽然插件能用，但由于博客渲染的是多页面，如果是跳到了别的页面，原先播放状态就会被破坏，从用户体验来看，这个功能并不太实用。

Hexo 的介绍就说到这里了，虽然还有一些技巧相关的内容，如果有读者感兴趣的话到时候再深入讲吧~

相关文章
「请笔者喝杯奶茶鼓励一下」

欢迎关注我的其它发布渠道