Hexo博客搭建教程

工作环境:Ubuntu 20.04
阅读本教程需要用到:Linux终端操作知识

上次写完了WordPress的搭建教程,这次写一份Hexo的 其实这个教程先开的笔

安装node.js和npm

执行下列命令:

sudo apt install nodejs npm

换源

使用淘宝镜像源

注意:与一般的apt或者python换源不同,淘宝镜像使用定制的cnpm代替npm命令以此达到更换源的目的,npm的源仍为官方源,cnpm使用镜像源,二者共存

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

安装hexo

执行下列命令安装hexo

sudo cnpm install hexo-cli -g

初始化博客

在适合的文件夹下创建一个用于放置博客文件的空文件夹,这里命名为blog

mkdir blog
cd blog

初始化博客,期间会下载较多的东西,由于不可抗原因会导致速度较慢,甚至会报错,请大家自行寻找加速方法

hexo init

首次运行

初始化完成以后就可以运行看看效果了,默认会有一个Hello文件,也就是hexo的欢迎页面

执行以下命令运行

hexo g
hexo s

然后打开网址localhost:4000就可以看到hexo的欢迎页面了。

Hexo欢迎页面

还是很漂亮的,下面还有用英文写的简单的教程

文件目录分析

下面我们来说一下博客文件夹内各个文件的用途,这有助于帮助你更好的理解你的博客是如何工作的。

目录结构如下

目录结构

_config.yml

这是hexo全局的配置文件,全部的配置都写在这里

node_modules

这里装有当前博客需要的一些库,你额外安装的插件之类的也会放在这里面

package.json

这里记录的是node_modules里面安装的库的信息

package-lock.json

精确记录node_modules里面安装的库的版本的信息。按照package.json安装的时候实际安装的库的版本不一定与记录的相同,而是可能更新的兼容的库。而按照package-lock.json安装则能保证版本信息完全一致。

scaffolds

模板文件夹,使用下面的hexo命令生成新的页面文件时

hexo new "page name"

会自动向页面文件中填写模板里的内容,在这里可以根据你自己的需求填写

source

source文件夹下的_post文件夹就是存放你的博客文件的地方

about文件夹是存放博客的关于页面文件的地方

themes

顾名思义,这里时存放博客主题文件的地方

public

如果你按照上面的步骤首次运行过hexo,你就会发现会有一个public文件夹。

该文件夹就是你的博客根目录,如果你想往博客中插入图片,但又没有好用的图床,将图片的链接写为/images/**.png,在生成博客以后,在public下新建images文件夹,将图片放在里面,就能看到图片了

发布自己的第一篇博客

现在来写属于自己的第一篇博客吧,在这之前你需要先熟悉markdown的语法

这里推荐一款markdown编辑器,Typora

在md文件的开头你需要加入如下内容

---
title: 博客的标题
tags:
- ***
- ***
---

hexo会根据title生成对应的博客文章的标题

tags定义本篇博客的标签,对于使用插件云的博客非常有用

建议在合适的位置加入下面的代码

<!--more-->

hexo会识别他的位置,然后在对应地方将文章截断,避免在目录页将文章内容全部展示出来导致所占的篇幅过大,影响观感

写完了以后将md文件放到source/_post文件夹下,然后执行

hexo g  #生成博客
hexo s  #启动服务

然后就可以在localhost看到你的文章啦

以本教程为例

示例博客

强烈建议另开一个仓库保存你的博客文件,因为hexo推上去的只有public下生成好的文件,并不包含source下的文件

一些简单的配置

到这里博客搭建基本就完成了,但是我们还需要多做一些东西再能弄出一个个性化的博客

安装主题

在这里,你可以找到自己喜欢的主题,并且上面也详细写着如何安装、如何启用

备份

强烈推荐你做好备份,你可以在Github或者Gitee上弄一个备份仓库,以防不测发生或者换机导致博客丢失 说多了都是泪

Pages

Github和Gitee提供了免费的Pages服务,使用该服务别人就可以访问你的博客了

如果你没有安装git,那么请先安装

sudo apt install git

之后你可能需要先配置一下git,比如设置git的用户名和邮箱,这里不多赘述,请自行搜索具体方法

然后需要配置hexo,在_config.yml最下面找到下列代码

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: ''

将其改为

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: 你的git仓库的地址

建议使用SSH链接,即 [email protected]你的仓库地址 的形式,这样每次部署到git上时就不用输一遍用户名和密码了

这里你可能需要恶补一下SSH的知识

还有一点需要注意,你的仓库的名称只有和你的用户名称一致,最后显示出的网址才会是xxx.gitee.io或者xxx.github.io等类似的网址,如果不一致最后显示出的网址则是仓库的地址

在本地生成完博客以后,执行下列命令将其部署到git上

hexo deploy

接下来配置page,这里以访问速度相对较快的gitee为例

进入你相应的仓库,单击服务,可以看到第一个gitee pages服务选项

gitee 服务选项卡

单击进去

gitee pages服务配置选项

这里我已经部署好了,所以会显示两个按钮,没有启用时只有一个启用按钮,推荐勾选 强制使用HTTPS,加密传输更安全一点 虽然没有什么好泄露的东西

成功启用后,上面会显示出你的pages的网址,访问之后就可以看到你的博客啦

顺便安利一下我的hexo博客,使用的主题是这款 Gandalfr(意思是甘道夫?),目前用来放置我自己汉化的Py-ART教程,感兴趣的可以去看看 传送门

Py-ART博客

《Hexo博客搭建教程》上有1条评论

  1. hexo那边之前说会完善对yarn的支持,不知道现在怎么样了。用cnpm还是不优雅,毕竟有的依赖npm的安装脚本是不会单独做个cnpm的适配的)

发表评论

电子邮件地址不会被公开。 必填项已用*标注