从头教你搭建Hexo博客

本文讲解基础的hexo、Node.js、git知识,然后搭建在线编辑器。这不是一个一键安装指南,需要你自己理解每一步到底在干什么。


如果你:

  • 希望拥有一个自己的博客
  • 受够了了网上博客服务的各种广告
  • 受够了word和印象笔记的谜之所见即所得
  • 希望学习前后端相关web开发技术
  • 喜欢折腾自己的服务器
  • 最重要的,在寻找一款针对Hexo开发的在线markdown编辑器

满足了任意一条,那这篇文章就可能对你有用。

什么是Hexo

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

简单的来说,Hexo让你用纯文本写文章然后生成漂亮的博客网站。

使用Hexo写博客的流程如下:

  1. 通过一种纯文本的标记语言(markdown)来表示文章结构,例如章节、列表、图片、加粗等,同时不关注文章的具体样式,例如颜色,字形,字号,排列对齐方式等。
  2. 然后通过Hexo将纯文本标记转换为html网页,即博客
  3. 然后将网页上传至服务器,使用服务器提供网页,就像哔哩哔哩提供给我们玩耍的B站一样
  4. 在浏览器访问博客,就像我们在B站看视频
1
文本 > Hexo > html > 服务器 > 博客页面

Hexo负责将我们写下的文字转换为网页,然后发布到对应的服务器。如果没有Hexo,我们要自己排版写网页,自己上传文件。

安装Hexo

在继续之前,请先用你的浏览器打开Hexo文档/#安装前提。这篇官方指南中提到了Hexo需要Node.js和Git

什么是Node.js:一个运行javascript(JS)的环境。Hexo是一个javascript(JS)语言的程序。一般JS运行在浏览器中,但是也有一种非浏览器环境也可以运行JS。这个环境是Node.js

什么是Git:一个版本控制软件。Hexo博客源码由纯文本构成,管理纯文本项目的最好办法之一就是使用Git。还记得word里面的历史记录和版本回退功能么?简单的来说,Git就提供了类似功能,只不过更强大。

安装Git

对于中国大陆地区用户,可以前往 淘宝 Git for Windows 镜像 下载 git 安装包。

打开后你会看到如下内容,每一行包括了文件信息和发布时间。需要选择时间最新的,文件名中没有rc的版本,因为RC是预发布版本,你可以理解为游戏内测版。这里选择v2.25.1.windows.1/。然后在下一级文件夹中选择Git下载。一般只需要下载Git-xxx-64-bit.exe即可。你看到的文件名可能和我的不同,但是要明白下载的是用于64-bit windows版本的Git (而不是MinGit或者PortableGit,除非你知道自己为什么那么做)

1
2
3
4
5
6
7
8
9
10
// https://npm.taobao.org/mirrors/git-for-windows/
Mirror index of https://github.com/git-for-windows/git/releases/
v2.24.1.windows.2/ 2019-12-10T19:22:30Z -
v2.25.0-rc0.windows.1/ 2019-12-29T18:48:38Z -
v2.25.0-rc1.windows.1/ 2020-01-03T22:03:09Z -
v2.25.0-rc2.windows.1/ 2020-01-09T13:41:53Z -
v2.25.0.windows.1/ 2020-01-13T21:37:14Z -
v2.25.1.windows.1/ 2020-02-19T18:30:02Z -
v2.26.0-rc0.windows.1/ 2020-03-06T16:00:52Z -
v2.26.0-rc1.windows.1/ 2020-03-10T21:11:33Z -

如果你用的是mac或者linux,那你很可能已经拥有git了。在终端运行git --version查看。

下载后根据安装指引安装,默认即可。

注意!这不意味着你可以无脑下一步,安装指引的英文很简单,如果你能有兴趣自己部署Hexo,那你一定已经有了足够的英文水平看安装指引!

1
2
C:\Users\winwin\Desktop> git --version
git version 2.25.0.windows.1

如果你在控制台(命令提示符或者PowerShell)中输入git --version后成功看到了Git的版本号,则证明你安装成功

安装Node.js

对于中国大陆地区用户,可以前往 淘宝 Node.js 镜像 下载。

类似于Git的下载,我们选择latest-v12.x/下载,这是一个长期支持版本,使用这个版本可以获得更好的稳定性。请不要尝试其他版本,除非你知道换版本可能导致的问题。这里同样选择使用于64位windows的安装包node-v12.9.1-x64.msi

同样根据指引安装。不要无脑下一步!

1
2
3
4
C:\Users\winwin\Desktop> node -v
v12.16.0
C:\Users\winwin\Desktop> npm -v
6.13.4

同样尝试打印版本号。注意除了node我们还检查了npm的版本号。npm的全称是node package managernode包管理器,你可以理解为针对Node的360软件管家。

安装Hexo

1
npm install -g hexo-cli

上面的命令是告诉npm我们需要安装一个包叫做hexo-cli-g意味着我们要将包安装在全局,这样我们无论在什么地方都可以运行Hexo。

1
2
3
4
5
6
7
8
C:\Users\winwin\Desktop> hexo -v
hexo-cli: 3.1.0
os: Windows_NT 10.0.17763 win32 x64
node: 12.16.0
......
icu: 64.2
tz: 2019c
unicode: 12.1

同样打印版本号验证安装是否成功

如果你发现这一步安装很慢,可以移步这里配置npm的加速镜像。

安装hexo-server

就为了在你的电脑上打开博客看一眼。这是一个在本地预览博客的程序。

1
2
3
4
myblog > npm install hexo hexo-server
+ hexo@4.2.0
+ hexo-server@1.0.0
added 43 packages from 25 contributors in 6.519s

建站/初始化博客

请打开Hexo的官方教程,往往官方教程都是很好的,觉得难只是因为初次接触而已。

1
2
3
$ hexo init myblog
$ cd myblog
myblog $ npm install

在这你可能发现网速很慢,可以运行下面的代码提升速度。关于为什么可以提升速度,移步这里

1
2
myblog > npm config set registry http://registry.npm.taobao.org
myblog > npm install

在初始化hexo之后还需要初始化git

1
2
3
C:\Users\winwin\Desktop\myblog> git init
Initialized empty Git repository in C:/Users/winwin/Desktop/myblog/.git/
C:\Users\winwin\Desktop\myblog [master]>

你的控制台输出可能和我的不太一样,但是应该都有初始化成功的消息。

如果你不需要部署,只在本地写作的话,到目前为止配置环节就结束了

用git备份你的文章

在Github上新建一个项目作为你的博客源文件的存储路径。然后使用这个项目存储

配置hexo deploy

参考这里

安装@winwin/hexo-editor

这是我自己写的编辑器,用来在线编辑和部署hexo博客

请查看快速上手教程

winwin-hexo-editor即将更名为Hexon。请查看https://github.com/gethexon