抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

前言

在自己搭建网站的过程中,我翻阅了许多搭建Hexo博客的教程,居然没有一篇有好好讲一下在搭建完成之后,面对一个空荡荡的网站和一篇“Hello World”的英文文章我们该做些什么与能做些什么,而Hexo的官方文档又众所周知的莫名其妙。所以我整理了建站之后更新网站的基础操作,希望能对你有所帮助。

前提条件

可以通过网址访问网站

では、ゲームを始めましょう

新建文章 hexo new

对于 hexo 开头的命令均在 终端/cmd 当中, cd 到网站所在的文件夹中运行

tips: 我们在这里先假设自己的文件夹名字叫做 blog 好了

简写: hexo n

简单操作

新建一个名称为“miao”的文章

hexo n miao

在目录 /Website/source/_post 的文件夹中会出现一个名字为 miao.md 的文件以及一个名字为 miao 的文件夹。这个 md 文件就是以markdown语法为基础的文章原件,我们直接在这个文件里写文章就好啦。

同名的文件夹用来存放在 md 文件当中使用的图片等资源,没有这个文件夹也无伤大雅,嫌弃它占地方的话甚至可以手动删掉,用正确的markdown语法引用或者主题自带的标签插件来显示图片就可以了。

邪门操作:直接去 /source/_posts 文件夹手动新建一个 .md 文件,它们没有任何区别,开头记得添加 Font-matter

详细表述

新建项目的完整表述为

hexo new [layout] <title>
  • <title> 新建的文章标题 使用时不加<>
    • 空格 需要使用 `/ ` 或者 `" "` 处理,例如 `miao/ miao` 或者 `"miao miao"`
  • [layout] 新建的类型,非必填项
    • 文章 post: 不填时默认的类型
    • 分页 page: 新建网站的分页
    • 草稿 draft: 草稿不会显示在发布的地方,未完成的文章可以先放在这里

上面那个新建名字为“miao”的文章的完整表述就是以下的模样了

hexo new post miao # 不写post默认为post

其实我比较推荐直接在 blog/source/_post 路径下直接手动新建 .md 文件,然后手动添加 Front-matter ,这样甚至更快一些。

替换文章 hexo -r

如果您想要新建一个同名的空白文档,可以使用 hexo -r 这个命令来替换文章

# 将《miao miao》的文章替换为同名的空白文档
hexo -r miao/ miao # 空格需要使用 /空格 的方式表述

它命令的词源全称为 --replace

邪门操作:同样的,可以直接在 blog/source/_post 手动搞掉这个文章,倒不如说这样子更方便。

撰写文章 Edit

在新建出来的 .md 文件里面直接修改就可以了

.md文件即_Markdown_格式编码的文件,它可以通过简单的符号处理生成好看的笔记与文章格式
如果您处理过_LaTax_文件,那么_markdown_语法上手会相当幼儿园

关于_Markdown_更为详细的介绍及语法参考Kuuhaku老师的教程 - 这年头谁还用Word写文档啊!

关于编写_Markdown_格式,直接百度关键词markdown就可以了,有相当多的免费编辑器可以使用。因为markdown格式与普通文本格式上只有编写语法的不同,事实上,如果对实时预览的要求不高,并且可以记住常用的markdown语法,直接用记事本编辑再更改后缀名也是完全可行的。

页头 Front-matter

在新建_Markdown_文件的开头,你会看见一个使用两个 --- 划分的区域,这个区域里面是这篇文章的基本属性设置

请注意,以下代码出现在生成的 .md 文件内部。

最基本的 Front-matter 形式如下:

---
title: Miao               # 文档的标题
date: 2020-08-22 13:01:18 # 文档创建的时间
categories:               # 文档的分类,通常会在“分类”的分页看见
    - cat
tags:                     # 文档的标签
    - miaomiaomiao

---

渲染器会根据每个 .md 文件的开头 Front-matter 将文章自动打上相对应的标签与分类,这部分的设置是相当重要的

需要注意的是,在不同的主题和插件当中,对 Front-matter 还有不同的设定。比如封面图片、评论功能、置顶等等,其语法和基本语法大同小异,一看就懂,不再赘述

默认categories属性的一些知识点

Hexo 的分类和其他搭建博客的逻辑稍微有所不同,它不会创建平行分类。也就是说,在默认情况下,不会有一个文章存在两个 categories 属性。

categories:
- miao
- miaomaio

这个的意思通常是 miaomiaomiao的子分类,类似于 miao = 猫 miaomaio = 布偶猫 的样子。

相对来说,tags 则是平行分类,一篇文章被允许脚踩很多条 tags

举个例子

title: Miao
date: 2020-08-22 13:01:18
categories:
- cat
- ragdollcat
tags:
- miao
- white
- like

分类为cat大类中的ragdollcat小类,同时具有miao、white、like3个标签.

这些设置会根据主题有所改变,比如说产生平行分类,还请仔细阅读主题文档。

本地预览 hexo s

在本地服务器上预览网页

在进行网站更改之后,我们在上传更新之前或许需要提前预览一下,尤其是在部署到正式服务器上时更需如此,它可以帮我们消除bug并节省经费。

hexo s 命令可以将目前保存的网站更新至本地服务器进行预览,全称为 hexo server

终端/cmd 当中,blog 路径下

hexo s

在进行该命令之后,你可以在命令窗口看见这样的提示

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

这时候,按住 ctrl 或者 command 单击这个链接,就可以在浏览器中预览已经搭建好的网页了。

这个预览并不会被部署到云端,它仅仅是你自己可以看见的一个本地预览。我们可以灵活使用这个预览来确定自己的网站的实际观感,在最终确定之后进行发布上传。

该预览是半实时的,更改的 .md 文件并保存后,刷新网页会进行响应
而当修改 .yml 等涉及渲染配置的文件时,渲染器并不会响应,需要 ctrl + c 停止后再次渲染一遍

清除冗杂数据

预览网页的时候,Hexo会将 .md 文本渲染为 html 静态网页,这个过程中会产生缓存数据

  • 缓存文件 db.json
  • 生成的静态文件 public 文件夹中

我们可以通过下面这个代码清除缓存数据

hexo clean

经常清理冗杂数据可以解放本地文件存储内存,可以至少在心理层面加快hexo命令和本地计算机的运行速度

Bug修复: 如果你发现上传网站并没有进行更新,请尝试使用这个代码来刷新本地的静态文件,可以解决大约70%的问题。

发布网站 hexo g -d

此时,你已经完成了一篇文章的写作,它有这样的固有属性

  • 存放于 /_posts
  • 文件后缀名为 .md

接下来,我们需要做的是部署网站
首先,我们需要生成静态网页文件

生成静态网页

生成静态网页的命令为generate,它也可以简写为g

hexo g      # 先不着急这么做,下面会和其他操作进行合并进行

生成静态文件并且没有报错之后,我们就可以部署网站了

部署网站

部署网站的命令为deploy,它也可以简写为d,即我们在上一篇部署hellworld时所使用的的代码

我们可以将两个命令合起来写,这样会方便很多

hexo g -d    # 写成 d -g 也是允许的

网站就更新成功了

☆YA☆DA☆ZE☆

当然,你也有可能在命令窗口发现warning的提示,一般来说,网站仍然可以正常上传,不过部分功能可能会产生bug。请静下心来好好观察下提示吧,你可以很快地从提示中发现自己产生错误的地方。

此时,你也可以进行清除冗杂数据的操作,来释放本地操作系统空间和减少下一次部署网站bug的可能

结束语

以上就是网站文章更新的全部流程,我在进行流程描述的同时,也加入了一些关于Hexo基本框架的简单解释,方便大家进行邪门操作

当然,这个流程也许会漏洞百出,但是它既没有报错也没有bug又能更新网站……

能用就行。

关于如何美化自己的Hexo并且给它安装插件和主题的简要说明参考下一章

评论