东子个人博客

从0搭建一个Hexo博客

  1. 1. 前言
  2. 2. 正文
    1. 2.1. 前置准备
    2. 2.2. 安装脚手架
    3. 2.3. 创建Hexo项目
    4. 2.4. 效果预览
    5. 2.5. 常用命令
      1. 2.5.1. 新建文章
      2. 2.5.2. 部署上线
  3. 3. 后记

前言

什么是Hexo?官网是这样介绍的快速、简洁且高效的博客框架,顾名思义,是一款博客框架,与wordpress、typecho等有区别的它是一款静态博客框架。也就是说,它不会有数据库,它也不会用php啊java啊等语言动态渲染,写好文章后,通过使用命令,它会生成博客所需的所有静态页面,我们只需要把这些静态页面放到服务器上或通过Vercel、一些Pages服务部署到公网上即可。

正文

前置准备

Hexo依赖Node.js,我们首先需要在电脑上安装Node.js,可以前往官网下载。
Nodejs官网图

安装脚手架

安装好之后,我们来安装hexo脚手架,打开终端,输入以下命令:

npm install hexo-cli -g

创建Hexo项目

安装好之后,我们打开一个文件夹,通过输入以下命令来创建一个Hexo项目

hexo init blog

待命令执行结束,我们会发现原本的文件夹多一个名为blog的文件夹,这就是我们创建的Hexo博客项目,目录结构大概如下图:
Hexo目录结构

效果预览

在这里就大功告成一半了,我们这时打开终端,输入以下命令,在本地进行预览:

hexo s

它会给出个地址,我这里是localhost:4000,打开后如下图:
Hexo博客预览图

常用命令

新建文章

在Hexo中,如何创建文章呢,我们在命令行输入以下命令:

hexo new "我的第一篇文章"

输入完以上命令后,我们发现我们项目目录下的source/_posts/会多出一个文件:
Hexo文章目录图
这也就是我们刚刚新建的文章,我们可以用Markdown格式来写文章了,写完之后,通过刚刚的本地预览命令就可以在本地查看效果。

部署上线

我们通过输入以下命令,就可以让Hexo给我们生成静态文件:

hexo clean && hexo g

这时,我们项目根目录下会多出一个文件夹叫public,打开后如下:

这里面就是Hexo为我们生成的静态页面,我们把它丢到服务器或虚拟主机上即可,也可以用另一种方式。

即将项目所有代码推送到Github仓库里,让Vercel、Cloudflare Pages来帮我们部署,Edgeone Pages同样也可以,大家可以根据自己需求自行选择。

后记

到这,本篇文章就结束了,感谢小伙伴们的浏览。