Planet X

使用Git+Node.js搭建Hexo博客的心得和错误记录

2018年05月13日更新

时隔一年半,学了不少新东西,现在回看文章,发现错误颇多,实在汗颜。故予以更正。

背景

在这次搭建Hexo博客之前,我曾经使用Wordpress,搭了一个小站(传送门),大半年都没有怎么管理,一来是没有时间,二来,虽然我是计系的本科生,但也没学过Html、css、JavaScript这些东西,对网站建设更是没有经验,经过困难重重的各种查资料搭建好Wordpress之后就没有再去花时间深入研究。后来看到付同学使用Hexo搭建的博客,对这种极简风格的轻量型博客产生了好感,于是用了一个下午的时间研究了一下如何从零开始搭建Hexo博客。

首先,我回顾了一下搭建Wordpress博客的过程:我先在本地安装了MAMP(我的系统是Mac OS,与Windows对应的是WAMP),用来在本地模拟建站,建好后在阿里云购买了域名和服务器(CentOS),在服务器管理终端安装了WDCP可视化控制面板,用来管理服务器的硬盘,分区,建站。之后使用FTP将网站内容上传至服务器,按照Wordpress自带的提示即可完成建站。

以后有时间大概会新开一篇写一写如何使用Wordpress建站,以及怎样使用服务器、域名解析等等。给一些零基础的小白提供参考,写这些东西不是因为我是这方面的大神,只是想把当时的一些想法和犯的错记录下来,让其他跟我一样的小白避免在同样的错误上耗费时间吧。

Wordpress建站的前期可能稍微有点麻烦,但一旦把Wordpress官方的网站包上传到服务器,之后就基本是傻瓜式的操作。可以理解为,Wordpress是一个定制度十分高的新浪博客。我以为Hexo建站也会这样简单的。

按照我搭建Wordpress的经验,

建站需要大概四个部件:服务器+域名+网站主体(模板)+上传工具(FTP)(+模拟建站程序(非必要))

那么,只要依次解决这四个部分,网站不就搭好了吗?

然后我开始在网上搜教程,出现了Git、Node.js、npm这样奇怪的字眼,当时真的是一脸懵逼。。当然也有一些熟悉的字眼,例如Github、Markdown等等。

网上的教程普遍都说,Hexo建站需要Git+Node.js+Github

那么Git、Node.js、npm这些究竟是什么,应该是我们要首先搞清楚的吧。(虽然完全按照网上的教程,是有可能直接搭建好的,但是了解清楚总是没坏处的。)如果你比较着急,可以直接跳到第三部分,如果这些你都懂,那么就不用看我这篇水文了。。

预备知识

其实到现在我也不是完全明白这些软件,我就按照我的理解来讲一讲吧,欢迎各位在评论里给我拍砖~(哈哈,反正我还没开通评论功能)

那就来百度一下好啦:

Node.js

Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快,性能非常好。Node.js对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好。Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。

Javascript??Google V8?? API??事件驱动??非阻塞I/O??

好吧我放弃。

不过有人这么说:

简单的说 Node.js 就是运行在服务端的 JavaScript。

Okay,那么来了解一下JavaScript吧:

JavaScript

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

所以,简而言之,JavaScript是用来在HTML网页添加动态功能的一种语言。那么。。

HTML

HTML, 超文本标记语言,标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。超文本标记语言的结构包括头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。

说人话,HTML语言就是用来写网页的,而且是写网页主体内容的,而 JavaScript语言就是用来给这网页加修饰的,加一些花样。而Node.js,就是运行在服务端的 JavaScript。

好了,我知道Node.js很厉害了,那么,为什么我们需要Node.js呢?

看一下Hexo的简介吧:

Hexo, A fast, simple & powerful blog framework, powered by Node.js.

OK,这一部分就算过了。那么npm是什么呢?(待会会用到大量的npm开头的代码)

我在廖雪峰的网站找到了一个比较通俗易懂的答案:

npm其实是Node.js的包管理工具(package manager)。

为啥我们需要一个包管理工具呢?因为我们在Node.js上开发时,会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包,每次都根据名称搜索一下官方网站,下载代码,解压,再使用,非常繁琐。于是一个集中管理的工具应运而生:大家都把自己开发的模块打包后放到npm官网上,如果要使用,直接通过npm安装就可以直接用,不用管代码存在哪,应该从哪下载。

更重要的是,如果我们要使用模块A,而模块A又依赖于模块B,模块B又依赖于模块X和模块Y,npm可以根据依赖关系,把所有依赖的包都下载下来并管理起来。否则,靠我们自己手动管理,肯定既麻烦又容易出错。

npm在我们安装Node.js的时候就会一起被安装,所以不用单独安装了。

那么Git是什么?

Git

Git是一款免费、开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。Git是一个开源的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

说实话不是很懂 版本控制软件 是什么意思,不过,在后来我的使用过程中,我发现,Git的功能其实和FTP很像。

在CMU学习了17-214 Software Construction 后,对于版本控制软件有了更深的理解。Git和FTP不能混为一谈。

FTP

FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议”。用于Internet上的控制文件的双向传输。同时,它也是一个应用程序(Application)。基于不同的操作系统有不同的FTP应用程序,而所有这些应用程序都遵守同一种协议以传输文件。在FTP的使用当中,用户经常遇到两个概念:”下载”(Download)和”上传”(Upload)。”下载”文件就是从远程主机拷贝文件至自己的计算机上;”上传”文件就是将文件从自己的计算机中拷贝至远程主机上。用Internet语言来说,用户可通过客户机程序向(从)远程主机上传(下载)文件。

所以,我一直把Git当FTP来用。。当然,Git应该更博大精深,以后再慢慢发掘吧,这里提供一个电子版的《Git Pro》手册,制作者是iissnan,本站正在使用的主题Next也是他的作品。

最后,再来了解一些Github,相信对于很多跟代码打交道的人来说,这个网站都不陌生。

Github

GitHub 是一个面向开源及私有软件项目的托管平台,因为只支持 Git 作为唯一的版本库格式进行托管,故名 GitHub。

GitHub 于 2008 年 4 月 10 日正式上线,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。目前,其注册用户已经超过350万,托管版本数量也是非常之多,其中不乏知名开源项目 Ruby on Rails、jQuery 等。

我们要做的,就是在这个网站上申请一个账号,并且利用这个账号在这个网站的服务器上划分一块区域出来,存放我们自己的网站。最后,要实现的效果就是,通过 你的Github用户名.github.io 这一个网址(例如 vamix.github.io),能访问到你的Hexo博客。

搞定以上这些概念之后,你可能还是一头雾水,别着急,跟着教程一步一步来,相信你会对这些词语有更加深刻的理解。

准备工具

了解了以上工具分别是干什么用的之后,就可以开始下载安装啦。

Node.js官网

Git官网

以下内容基于Windows10,至于为什么我用Macbook却在Windows10中搭建Hexo,我待会讲。。

安装好之后,为了确认是否安装成功,可以打开cmd终端,输入

1
git --version

如果输出版本号,类似git version 2.11.1.windows.1,则表明安装成功。

输入

1
node -v
1
npm -v

可以分别检查Node.js和 npm 的安装情况。

以上软件都安装好之后,我们还需要注册一个Github账号,去官网自行注册即可。

开始建站

安装Hexo

其实Hexo的安装过程很简单。进入官网我们就能看见以下代码赫然出现在首页:

图中的代码就是安装Hexo的关键代码。

首先,我们在自己的电脑上新建一个文件夹,名字随便起,比如,就叫blog。

然后在cmd中使用cd命令进入blog文件夹(以下代码中的blog都指我的博客文件夹名,请在相应代码处替换成你的文件夹名)

1
cd c:\blog

再执行以下命令,全局安装Hexo

1
npm install hexo-cli -g

再执行以下命令,初始化框架

1
hexo init blog
1
npm install

以上,一个Hexo博客就安装成功了。

写第一篇文章
1
hexo new "Hello,World!"

执行以上代码,就会在/source/_post里生成Hello-world-0.md文件(因为Hexo自带一篇Hello,World文章,所以命名加了一个0)

然后,想要修改文章内容,直接修改这个md文档就好。(md文档详情见第五部分)

想要在本地查看网站,可执行以下代码:

1
hexo generate (或写成 hexo g) //生成网站
1
hexo server (或写成 hexo s) //启动本地服务器

然后在浏览器中输入http://localhost:4000即可看到网站。

把博客上传到Github

想让大家都看到自己的博客,可以上传至Github。在Github中新建一个仓库(repository),仓库名(Repository name)必须是:你的用户名.github.io(例如:Vamix.github.io)

创建好后,在该仓库配置SSH,详细方法见此文章(很重要):window下配置SSH连接GitHub、GitHub配置ssh key

然后打开blog目录下的_config.yml文件,找到其中的deploy部分,按以下内容修改:

1
2
3
4
deploy:
type: git
repo: git@github.com:vamix/vamix.github.io.git //将vamix替换成你自己的Github用户名
branch: master

请注意,这三项的:后面都有一个空格。如果没有空格,会出现第六部分的error。

完成这一步之后,安装一个扩展:

1
npm install hexo-deployer-git --save

现在就可以使用deploy(部署)命令了

1
hexo deploy (或写成 hexo d)

输入ssh密码,即可把网站部署到Github

现在,访问 你的用户名.github.io 就能看到自己做的网站啦。

Tips:以上代码可能比较杂乱,安装好后,只要记住以下几条常用代码即可:

1
2
3
4
hexo new "新文章标题" //新建一篇文章
hexo generate (hexo g) //生成网站,可以理解为编程中的“编译”
hexo server (hexo s) //打开本地服务器,在本地预览网站内容
hexo deploy (hexo d) //预览无误后,部署网站到Github服务器

如果以后使用过程中有常用的代码我再补充~

编辑文章

在hexo中,使用hexo new命令自动生成的是md文档,md文档就是markdown文档,使用markdown语法进行写作,所以,要在hexo上发表文章,还需要掌握markdown基本语法以及需要一个漂亮的markdown编辑器。

以下是我搜集的资料:

在Mac端比较好用的markdown编辑器有

这两款软件的区别在于,Mou的界面是左右分栏设计,秉承“所见即所得”的观念,在左边使用markdown语法写的文字,在右边可以实时生成预览效果。

而Typora则不同,Typora的markdown语法内容会被实时转换成最终效果,预览效果

建站过程中出现的问题及解决方案

ERROR 1 Mac OS 无法安装Hexo

最开始我是使用的Mac来建站,因为Git和Node.js都有Mac版呀,我觉得使用起来问题应该不大,但操作过程中出现了许多无法解决的问题,我也曾尝试使用淘宝源,但都无法成功安装Hexo。

执行npm install hexo-cli -g代码后,使用hexo init命令,总是得到以下错误代码:

1
2
ERROR Local hexo not found in ~
ERROR Try running: 'npm install hexo --save'

表示Hexo并未成功安装,无法在本地找到Hexo。

无奈之下换回我的Windows虚拟机,用以上方法在安装过程中没有出现问题。

更新: 当年搭建博客的时候linux用的还不是很溜,针对以上错误信息没有头绪。其实这是因为mac下的文件夹默认没有开启全部的权限,至少在这里,没有执行权限。解决方案是用 chmod -R 777 blog 对整个文件夹赋予所有权限即可。

ERROR 2 Git时提示连接已存在

有时候使用Git连接Github时会提示

1
fatal: remote origin already exists.

这可能是自己之前的误操作导致,输入

1
git remote rm origin

即可,然后再重新连接。

ERROR 3 _config.yml文件出现问题

有时候在使用Git上传时会出现

1
FATAL bad indentation of a mapping entry at line 72, column 6:

这一类的命令。我的经验是凡是有明确的line,column的指示,一般是_config.yml文件出现问题。

这个文件有一些非常傲娇的特质,该有空格的地方一定要有空格,不然就无法编译。

所以,在修改这个文件的时候,不管是修改repo: title: type: 还是别的什么参数,

一定要在冒号后面加空格

ERROR 5 Git无法提交

在使用Git方法(详见最详尽-hexo+GithubPages搭建博客)上传时,有时出现以下代码:

1
update were rejected because the tip of your current branch is behind...

字面意思表明,你正在上传的文档比服务器上的文档更早,所以无法上传。

为什么明明修改过,却说时间比服务器上的文档还早?

可能是因为没有执行hexo g 进行编译,也可能是编译失败,例如ERROR 3中的情况就无法通过编译。

ERROR 6 添加标签出错

有时会出现以下错误代码:

1
2
ERROR Process failed: _posts/test.md
YAMLException: can not read a block mapping entry; a multiline key may not be an implicit key at line 9, column 1:

这种情况往往是错误修改了Hexo自动生成的文档的头部文件造成的。

Hexo自动生成的文档的头部文件是这样的:

1
2
3
4
5
---
title: new test
date: 2017-02-09 19:39:03
tags:
---

如果要添加标签,则应该按照以下格式添加:

1
2
3
4
5
6
7
---
title: new test
date: 2017-02-09 19:39:03
tags:
- test
- hexo
---

TIPS:标签的写法还有一种:tags: [test,hexo],即写成数组形式。个人感觉两种写法没有区别。

注意多个标签的短横线后都有空格,每个冒号后面都用空格,首尾的三个短横线不能删除。

ENDING

折腾了两个下午,终于把博客初步建成了。

之后慢慢优化博客吧~遇到什么问题,总结了什么经验,就继续发布出来~

参考资料

HEXO搭建个人博客

最详尽-hexo+GithubPages搭建博客

零基础免费搭建个人博客-hexo+github

使用Github搭建静态博客(HEXO)

Git错误non-fast-forward后的冲突解决

还没想好叫什么