手把(mo)手教你搭建hexo博客(小白向)

由于最近有些非计算机行业的朋友对这个博客的搭建有兴趣，但是官网和网上的教程都或多或少涉及到一些开发上的东西。所以有了这篇文章，从小白的角度，零开发基础搭建hexo博客。

关于hexo博客的详细介绍强烈建议到官网瞧一瞧 https://hexo.io/zh-cn/ ，不是计算机小白也建议直接到官网看文档。

一、搭建篇

1.简单认识node,npm

1-1.关于node

node.js是javascript的一种运行环境。以下取自百度百科：

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。 [1]

Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。

1-2.关于npm

npm是node的一个包管理器。之于maven对于java的关系一样，但也有区别。

1-3.安装

首先安装nodejs，下载地址 https://nodejs.org/en/download/ ，安装过程记得勾选 Add to PATH 以把它加入到系统变量中。安装完成后npm也就已存在了，可以在cmd输入node -v和npm -v查看版本确定是否已安装上。

1
2

node -v
npm -v

2.安装hexo

2-1.安装脚手架

首先安装hexo脚手架，控制台输入命令：

1

npm install -g hexo-cli

等待安装完成即可。

安装完成后同样可以查看版本情况：

1

hexo -v

如图：

附上官网上的hexo和node版本兼容情况：

2-2.安装依赖

安装完hexo脚手架后，在任意地方（比如d盘）打开cmd执行以下3条命令以拉取所需文件：

1
2
3

hexo init <folder>
cd <folder>
npm install

分别对应为初始化文件夹，进入文件夹，安装依赖。<folder>为文件夹名称，可任意修改。我这里命名为hexoTest，方面下面解释。

*注意等待每条命令执行结束再进行下一步，可能会有点慢。

*这里补充一个打开cmd的方法，可以在指定目录的地址栏直接输入cmd，然后回车即可。

2-3.文件目录

安装完成后，文件夹里面的目录结构为：

这里不一一解释所有文件，只挑常用的说明：

• _config.yml 配置文件，全局配置
• source 里面的_posts文件夹，里面存放的就是文章
• themes 存放主题，一般都会根据喜好更改主题，默认的有点丑，主题在官网上有很多

3.本地运行

3-1.启动试水

项目根目录下打开cmd，也就是上面hexoTest里面打开，输入以下3条命令

1
2
3

hexo clean
hexo g
hexo s

分别对应为：清除、生成、本地部署。

完成后可以看到提示已运行在本地4000端口：

然后在浏览器网址输入localhost:4000即可访问，注意cmd此时不能关闭。

以上就是默认样式，至此也成功在本地试运行。

4.使用示例

4-1.修改_config.yml

打开文件，yml文件可以直接用记事本打开（当然技术人员肯定有自己的吃饭家伙）

试着改改标题，

title: Hexo —>title: Test

修改完成后同样输入上面3条命令重新生成。

对了，先关闭上面的试运行应用。按提示输入ctrl+c关闭它。或者直接关掉cmd窗口然后再次打开。

可以看到标题成功修改了。

然后对应其他的修改可以看官网详细说明。

4-2.写文章

写文章的话用到的是markdown语法，这种格式一般搞技术的都很熟悉了，对于非技术人员，那可能你得先看一看书写方法，也不难，就几个标签，不需要背，用到查就是了。传送门 https://www.runoob.com/markdown/md-tutorial.html 。

当然也得下载对应的编辑工具，这里推荐Typora。

好了回到主题，写文章。

同样打开cmd窗口，输入

1

hexo new <title>

<title>为文章标题名。

回车后会在source\_posts目录下生成对应文章：

用markdown编辑工具打开它：

写完记得保存。

同样地，3条命令。打开网址看看效果：

可以看到新增的文章有了。

hexo不仅有很多主题，插件也十分丰富，再次说明，官网上应有尽有。

到这里，基本的使用就讲解的差不多了，但是不可能就只在本地运行给自己看对不对，好文章肯定希望分享给大家，给大家指点，让自己提升（zhuangbi）一下。

那么接下来就是部署到公网上面的教程了。

二、部署篇

1.部署在github

1-1.创建git仓库

github注册就不细说了，欢迎来到大型交友平台。注册后新建一个仓库，仓库名注意一定是“注册名+github.io”，这里我已经创建过了所有报重复：

项目为public才能开启github page。

验证（可跳过）：创建仓库后你可以新增一个index.html文件（内容随意）然后在网页访问你的“注册名+github.io”看看能否显示你index里面的内容。

1-2.安装git

git用来将本地的代码和文件上传到github仓库（是否可以在本地打包后手动放到仓库里呢我也没试过），先以主流的方式进行。安装地址

git安装完一般会配置ssh秘钥与本机绑定，这里先忽略。

1-3.上传

修改_config.yml里面的内容，拖到最下面：

1
2
3
4

deploy:
  type: git
  repo: https://github.com/用户名/用户名.github.io
  branch: master

若有配置ssh，repo也可以设定为你的ssh地址。

然后，还是在你的项目目录下打开cmd，即示例的hexoText下，输入以下3条命令：

1
2
3

hexo clean
hexo g
hexo d

hexo d就会把文件上传到你配置的git仓库，若使用https地址，其中会需要输入git的用户名密码，输入完确认等待上传。

完成后，访问你的“用户名.github.io”吧。

1-4.绑定个人域名

通过xxx.github.io有时候访问不了？这就对了。毕竟它是一个国外的网站，有些地方的dns确实就不能访问，这时可以通过绑定域名的方式，用个人域名访问你的博客。看起来也更高级。

首先需要买一个域名，域名到处都可以买，腾讯云阿里云，都不贵，很多1块钱就1年了。购买的域名需要实名认证，认证后，有时候需要1天左右时间审核。关于购买域名的事情自行百度。

比如我的是阿里云的，进入控制台后解析域名，总共增加两条记录，主要填3项：主机记录、记录类型、记录值，主机记录和记录类型一般固定为以上两条，记录值就填你的“xxx.github.io”。关于这些东西具体什么意思，右上说明文档。

配置完成后，打开github仓库，点击setting，找到Custom domain，把你的域名填上去。

全部搞定后，就可以愉快的通过个人域名访问自己的博客了。

2.部署在gitee或coding

首先还是注册。gitee新建仓库时的命名要与用户名一致：

更多帮助详情。

然后在_config.yml文件修改deploy：

1
2
3
4
5
6

deploy:
  type: git
  repo:
    github: https://github.com/用户名/用户名.github.io.git
    gitee: https://gitee.com/用户名/用户名.git
  branch: master

当然你可以两个都写上。修改完同上述3条命令完成上传，这时就可以通过xxx.gitee.io访问了，由于gitee是国内网站，访问gitee会比github快上一点，而且不存在哪里访问不到的问题，但是有一点，绑定个人域名不是免费的。

每次上传文件后记得点击gitee page进行手动更新。

coding也是类似的操作就不介绍了。

三、优化篇

内容包括：博客主题选择，hexo丰富插件，博客加速，评论功能等。

我们下次再见。