从0到1搭建博客

发表于 | 栏目
本文共 2k字 | 阅读时长 ≈ 7分钟

Hexo官方介绍：

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

Hexo中文官网

1. 本地准备：安装环境

1.1 安装Node.js

首先，我们需要给电脑安装Node环境。

进入Node.js官方网站，根据你的操作系统下载对应版本的安装包并安装。
点击进入： Node.js官方下载地址

安装完成后，检查是否安装成功，方法如下。

Windows系统检查方法

按下键盘的[win(开始键)]和[R]键，打开“运行”窗口，输入cmd，再按下回车键。

输入命令并按下回车键，查看Node.js的版本：

1
node -v

若看到vxx.xx.xx则表示Node.js安装成功，下图是我本机的Node版本（v10.15.0），你们的版本号应该会比我的更高。

macOS

打开“终端”，输入：

1
node -v

若能看到版本号，则表示Node.js安装成功。

1.2 安装Git

进入Git官方网站，根据你的操作系统下载对应版本的安装包并安装。
点击进入： Git官方下载地址

由于某些原因，在官网下载Git安装包速度可能较慢。Windows用户可以到第三方软件平台下载，提升下载速度。
点击进入： 腾讯软件中心Git下载地址

找到适合你系统位数的安装包，点“普通下载”即可。

安装完成后，需要检查是否安装正确。方法和上文提到的校验Node.js版本相同，Windows系统的用户使用cmd、macOS用户使用终端，输入：

1
git --version

若返回git版本号，则表示Git安装成功。下图是我执行后的结果：

1.3 安装Hexo

在你的电脑中新建一个文件夹，作为存放博客程序的地方。

Windows

如，我在E盘新建了一个名为“blog”的文件夹。打开文件夹。
按键盘上的[shift]键，再按鼠标右键，选择“在此处打开 Powershell 窗口”：

输入下面的命令后按回车键，开始安装Hexo。

1
npm install -g hexo-cli

安装过程中，你无法输入内容，安装完成后才会再次出现输入框。
等待片刻，安装完成。输入命令并回车，查看是否安装成功：

1
hexo v

此时，你会发现文件夹依然为空，并没有新增任何文件。接下来，初始化项目。
输入命令并回车：

1
hexo init

当你看到“INFO Start blogging with Hexo!”的提示时，表示博客程序已经初始化成功，再看看文件夹，已经有了文件。

接着输入命令并回车：

1
npm install

1.4 配置Hexo

打开博客程序文件夹中的_config.yml文件。（推荐使用Notepad++、Sublime等编辑器打开）
可以看到如下内容：

1
2
3
4
5
6
7
8
# Site
title: Hexo
subtitle:
description:
keywords:
author: John Doe
language:
timezone:

title: Hexo表示网站的主标题叫Hexo，你可以修改为自己喜欢的标题。
subtitle表示副标题，description是网站描述，keywords是网站的关键词，author表示作者，language表示网站所用的语言文件，timezone表示时区。

此处需要注意，如果你希望博客被谷歌、百度等搜索引擎收入，未来要做SEO，建议你把title、keywords和description填上。

以上信息你可以根据自己的喜好和需要进行修改，我只修改了一部分，如下：

1
2
3
4
5
title: Jason's Blog
subtitle:
description: This is Jason's Blog.
keywords:
author: Jason

注意，在冒号 : 后面要加一个空格，否则会出现解析出错的情况。

1.5 启动Hexo

在博客程序目录打开命令行工具，可参考《1.3 安装 Hexo》中的方法打开 Powershell。
输入以下命令并回车：

1
hexo s

从Hexo返回的信息中可以看到，博客已经启动，复制 http://localhost:4000 到浏览器中打开即可访问。如果想停止本地服务，请按[Ctrl]+[C]键。

2. 日常操作

2.1 新增内容

2.1.1 新建文章

在博客程序目录打开命令行工具，输入以下命令并回车：

1
hexo new "post_name"

把命令中的post_name换成你要发布的文章名称。
例如，想新增一篇名为《first-post》的文章，则输入hexo new "first-post"，程序会在博客程序目录下的source/_posts文件夹中，自动生成一个名为first-post.md的文件。

2.1.2 编辑文章

进入博客程序目录下的source/_posts文件夹中，编辑first-post.md文件（推荐使用Notepad++、Sublime等编辑器）。

打开后可以看到如下内容（date后面的日期会和我的不同）：

1
2
3
4
5
---
title: first-post
date: 2019-02-02 18:04:28
tags:
---

title表示文章标题，可以修改（支持中文），date表示文章的创建日期（非必选，可删除），tags表示文章的标签（非必选，可删除）。
除此之外，还可以给文章添加所属分类categories

我们修改成如下内容：

1
2
3
4
5
6
7
8
9
---
title: 第一篇生活日志
date: 2019-02-02 18:04:28
tags: 
- 测试
- 第一篇
categories: 
- 生活感想
---

可以看出，我把这篇文章归类到了“生活感想”中，并给它加了2个标签：“测试”、“第一篇”。

2.1.3 生成文章

新增和编辑好文章之后，还需要生成为静态文件。
输入命令并回车：

1
hexo g

接着，再执行hexo s，即可看到效果。

2. 远程准备

2.1 注册GitHub

2.2 新建仓库

3. 正式发布

在生成以及部署文章之前，需要安装一个扩展：npm install hexo-deployer-git –save

常用命令

生成并部署到Github

1
hexo d -g

阅读全文

在文章中使用 <!–more–> 标签隔开上下文，标签后的内容将被隐藏，需要点击“阅读全文”后才可查看。

1
2
3
标签前为可以在首页显示的内容
<!--more-->
标签后为隐藏的内容，需点击阅读全文才可查看

添加分类

执行命令：

1
hexo new page categories

执行后会在source目录中生成一个名为categories的文件夹。

进入source/categories文件夹，编辑名为index.md的文件。

在文件中添加一行 type: “categories”，如下所示：

1
2
3
4
5
---
title: categories
date: 2019-02-01 10:44:12
type: "categories"
---

添加标签

执行命令：

1
hexo new page tags

执行后会在source目录中生成一个名为tags的文件夹。

进入source/tags文件夹，编辑名为index.md的文件。

在文件中添加一行 type: “tags”，如下所示：

1
2
3
title: tags
date: 2019-02-01 10:47:28
type: "tags"

菜单图标

菜单图标来自
fontawesome

可以进入网站挑选自己喜欢的图标

底部通用版权设置

底部隐藏“由Hexo强力驱动”、“主题–NexT.Mist”

打开 themes/next/layout/_partials/footer.swig，注释或编辑相应代码

注释：

1
2
3
4
5
<!--
{% if theme.footer.powered %}
  ...
{% endif %}
-->

添加站点地图

站点地图是一种文件，可以通过该文件列出网站上的网页，从而将您网站内容的组织架构告知Google和其他搜索引擎。Googlebot等搜索引擎网页抓取工具会读取此文件，以便更加智能地抓取您的网站

安装插件
打开hexo目录下的dos命令行，分别安装百度和google插件

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

在博客目录的_config.yml中添加如下代码

1
2
3
4
5
# 自动生成sitemap
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

编译你的博客
hexo g

如果你在你的博客根目录的public下面发现生成了sitemap.xml以及baidusitemap.xml就表示成功了！

首页title的优化

更改index.swig文件，文件路径是your-hexo-site\themes\next\layout，将下面代码

1
{% block title %}  {{ config.title }}  {% endblock %}

改成

1
{% block title %}  {{ config.title }} - {{ theme.description }}  {% endblock %}