静态博客搭建指北（一）

发表于 | 更新于 | 分类于

作为一只小白，从零开始自己搭建博客站点，可能要踩很多坑。

写这篇文章，最重要的目的就是记录过程，万一日后玩脱了也不致于从搜索开始全部重来一遍。

Let’s go!

部署前的准备

博客放在哪里

首先要决定博客托管的地方。
GitHub Pages 是一个不错的选择，毕竟 GitHub 出品，安全、稳定、高效，拥有如此多的优点并且免费，对我来说就是首选了。

使用什么框架

Google 一下适用于 GitHub Pages 的静态博客框架，出现频率最高的是 Hexo 和 Jeckll ，GitHub 似乎对 Jeckll 有某种程度上对原生支持，但 Hexo 是基于 JavaScript 和 Nodejs 的应用，对一个前端学习者而言，凡是能和所学搭边的都有无比对吸引力，于是毫不犹豫选择 Hexo 。

GitHub 上需要做的准备

在你的 GitHub 上新建一个仓库，注意仓库名的规则，否则不能用作 GitHub Pages 。

username.github.io

这里的 “uesrname” 就是你创建仓库时前面的 “Owner” 下的名字。

之后勾选下面的 “Initialize this repository with a README”，点击创建仓库即可。

部署过程

Hexo文档上有详实的部署及配置说明，在此只列出部分基本操作，更多具体选项和配置请阅读文档相关条目（其实就是不会 →_→ ）。

安装 Hexo

安装 Hexo 前，首先检查计算机中是否已安装下列应用程序：

上述应用程序安装完毕后，就可以安装 Hexo 了。

1
$ npm install -g hexo-cli

在本地建站

安装完后执行下列命令， Hexo 会在指定文件夹内新建所需的文件。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

执行命令后在指定文件夹内会出现以下文件结构。

1
2
3
4
5
6
7
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

再执行以下命令，安装 hexo-deployer-git

1
$ npm install hexo-deployer-git --save

配置

“_config.yml” 文件保存了大部分网站配置信息，部分配置说明如下。

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site #博客的基本信息
title: Blog Title #博客标题
subtitle: #博客副标题
description: #博客描述，部分主题会用来生成简介
author: Your Name #博客作者
language: zh-Hans #语言
timezone: #时区，默认与你的计算机相同

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com #你自己的域名
root: / #根目录位置，如果只是github pages的子目录需要更改
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory #文件结构 默认即可
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing #编辑博文的选项
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight: #代码高亮
  enable: true #是否启用
  line_number: true #是否显示行号
  auto_detect: true
  tab_replace:

# Category & Tag #分类与标签
default_category: uncategorized
category_map:
tag_map:

# Date / Time format #日期显示格式
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination #分页器
## Set per_page to 0 to disable pagination
per_page: 3
pagination_dir: page

# Extensions #拓展
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
## 主题安装参照下文所述
theme: next #主题更换

# Deployment #部署参数
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:username/username.github.io.git #你的GitHub仓库地址
  branch: master

index_generator:
  per_page: 3 ##首頁默认10篇文章标题 如果值为0不分页

archive_generator:
  per_page: 10 ##归档页面默认10篇文章标题
  yearly: true  ##生成年视图
  monthly: true ##生成月视图

tag_generator:
  per_page: 10 ##标签分类页面默认10篇文章

category_generator:
   per_page: 10 ###分类页面默认10篇文章

常用指令

  • hexo n <title>: 新建一篇文章
  • hexo g: 生成静态文件
  • hexo d: 部署上线
  • hexo s: 启动本地服务器
  • hexo clean: 清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

美化及扩展

换一个主题

如果不喜欢 Hexo 的默认主题，可以在主题商店中挑选你好看的主题安装，下面以使用人数较多的 NexT 主题为例讲解如何安装一款主题。

  • 执行下列命令，安装主题。

    1
    2
    $ cd hexo
    $ git clone https://github.com/theme-next/hexo-theme-next themes/next

  • 执行下列命令，更新主题

    1
    2
    $ cd themes/next
    $ git pull

  • 更新 Hexo 配置文件 “_config.yml”

    1
    theme: next

至此，主题更换完毕

装一个插件

初始状态下的 NexT 主题是没有搜索功能的，所以我们需要为其安装搜索服务。

我选取 Local Search 做为我的博客的搜索服务。

  • 安装 hexo-generator-searchdb ，在站点的根目录下执行以下命令

    1
    $ npm install hexo-generator-searchdb --save

  • 编辑站点配置文件 _config.yml ，新增以下内容

    1
    2
    3
    4
    5
    search:
        path: search.xml
        field: post
        format: html
        limit: 10000

  • 编辑主题配置文件 _config.yml(位于 theme/next 内)，启用搜索功能

    1
    2
    3
    # Local search
    local_search:
        enable: true

执行部署命令后，博客就有了搜索功能了。

这里给出 NexT 主题的第三方集成服务网址，上面给出了各个第三方服务的详细安装方法。

初次部署完结结语

到此为止，整个博客的基础功能已经具备了，静态博客搭建指北的第一篇就到这里结束了。有些地方写的并不十分详细，原因就是懒→_→

贴出一篇更为详细的搭建说明留作参考，更多配置相关请查看官方文档。

日后研究出更多 Hexo 功能或插件的使用方法再来继续更新这个系列。

以上！