Hexo网站博客搭建与基础配置

JantoK

博客

发布于：2020年7月4日

本篇会介绍如何使用Hexo框架快速搭建一个博客网站。

学习本篇前，你必须具备以下知识储备：

对于环境配置以及命令行等操作熟悉
对于Github有初步的认识和了解
有自己查阅文档的能力

如果有以下知识储备，那就更好了：

对前端项目有大致的了解
非常熟悉git命令行

什么是Hexo？为什么选择Hexo？

最初在笔者想搭建一个私人博客用于记录整理一些前端知识点的时候，在不了解当前博客技术的情况下，很自然而然的想到了需要非常多的技术栈才能完成

一个好看的前端。
为了有一个好看的前端你可能还需要先绘画出前端原型图。
一个的后端，这个后端可能还需要有很强的健壮性。
一台云服务器，需要对服务器端有一定知识了解，甚至可能还需要对服务器的普通配置以及攻击防御等配置有一定的了解。
一个域名。
通过什么样的方式写一篇博客并且保存，每次都创建一个新页面？
。。。

在设想了这么多之后，会发现所需的技术栈以及要考虑的东西越来越多，甚至已经可以独立超脱出来成为一个产品了。

而我们最初的想法，仅仅只是想搭建一个博客，用于完成一些普遍的需求而已。

但按照上面的设想，这对于搭建人员的技术要求是否太高了，甚至对于一些非技术人员，但又想搭建一个自己博客的人来说，真的就是遥不可及了么

那么，在如今各种插件包与框架百花齐放的时代，有没有什么既可以快速搭建一个五脏六腑俱全的博客，又可以自定义属于自己的、好看的前端样式，如果可以甚至对代码能力需求较弱的博客框架出现呢？

有，而且主流的博客非常的多，如Wordpress等。

那为什么选择Hexo框架呢？因为它真的很简单。

对于Hexo是什么，可以进去官网查看文档，了解以下。对于技术人员来说，会自行查看文档解决，自我解决问题是一个必备的能力。

而如果并没有兴趣进行文档查阅，你只需要知道以下几点即可：
Hexo可以把你用markdown所写成的文章，自动生成对应的html静态页面。
截止到目前2020/07/04，官网上已经拥有超过311种主题。
高度定制化，你可以自定义文章的样式、主题的样式。如果有一定代码能力，你甚至可以去修改主题源码。
不需要后端，这一点非常重要。
你甚至可以不需要云服务器，连域名都不需要，0成本直接挂载到github上，并且拥有自己的域名。但通过github挂载的方式，您的网站不能够被收录与百度或者是google中，也就是不可被搜索到。

项目安装配置

若以下相关配置您的环境已经配置了，可自行跳过。

命令行工具

linux与mac下自带的命令行环境已经足够便捷于开发，笔者使用的是mac环境。对于windows推荐，推荐安装Git Bash命令行工具

非常不推荐使用黑窗窗（也就是cmd）进行开发于运行。对于Git Bash的安装，推荐这个教程。

配置完成之后，输入以下命令行：

1	git version

看到有输出为：

git version x (y)

则表示配置完成。x表示版本号，y为其他附加信息。

NodeJs

Hexo基于nodeJs环境所进行开发。

windows安装教程

输入以下命令，有版本号输出即安装完成：

1 2	node -v npm -v

安装Hexo

新建一个文件夹，用来存放博客的文件。
在命令行下进入到该文件夹页面。使用cd命令，或者windows用户可以在点击进入该文件夹的情况下，右键，然后点击 git base here表示在该文件夹路径下大概git命令行。
使用hexo命令进行安装：
1
npm i -g hexo
等待命令跑完，且正常后，输入以下命令：
1
hexo init
表示用hexo初始化创建该文件夹。之后该文件夹下会生成如下文件：
node_modules：用来存放安装的依赖包，一般不需要管理。
public：存放hexo自动生成的页面文件。
scaffolds：用于生成文章的格式模板。
source：用于存放各种生成的文章（在该文件夹下使用markdown语法编写md文件后，hexo会自动生成对应的web页面）
themes：用于存放主题文件夹。
_config.yml: （重要）在此对整个hexo项目进行配置。
db.json: source文件夹的解析文件，一般不需要管理。
package.json：项目所需的配置信息管理，一般不需要管理。

运行hexo
首选，输入以下命令，对整个hexo项目进行清理。

（每次改动后在运行之前，都需要进行清理，必须要养成这样习惯）
1
hexo clean
然后，生成网页文件。其中g是generate的简写。
1
hexo g
然后，运行hexo项目。s是service的简写。
1
hexo s
接着你就会看到如下提示，则表示运行成功：

INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

若看到如下页面:

FATAL Port 4000 has been used. Try other port instead.
FATAL Something’s wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html

则表示项目端口已被占用。项目默认运行端口为4000，可以在配置文件中进行修改。

若项目运行正常，则在游览器中复制打开显示的localhost网址，你就会看到如下页面：

则表示运行成功。其中你所看到的是hexo的默认主题，后续可进行更改。

这步操作中所用到的三条命令行clean，g，s是hexo的三部曲，要熟记，后面还有d-deploy表示发布。

至此，则hexo的基础搭建完成。