2630 字
13 分钟
Hexo_2 - Hello_World by Hexo - 发布第一篇文章

前言#

Hello World!

接触过代码的人总是对这两个单词组成的词组抱有特殊的情感。

同样的,Hexo 初始化的网站也总是有一篇标题为《Hello World》的文章。些许问候再加上简单的发布方法,这也许就是一个程序员最纯粹的友善与热情。

我们回应这种友善与热情,同时也对名为“开源”的精神致以最高的敬意,将引擎框架的名称注明在网站页脚,期待能带来更多的传播与赞誉。

言归正传,这次我们同样先使用 Hexo 初始默认的名为 landscape 的主题,发布这篇已经被写好的《Hello World》。

毕竟你说的第一句话也总是别人教你的嘛。

本篇开始前,应当已经完成的事情
  • node.js 环境已配置
  • GitHub 仓库已存在,并建立了和本地的连接
  • Hexo 安装完成

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

新建本地资源库#

在上一章中,我们已经认识到网址的构成,也应该明白了本地资源库的重要性。

在此我们先新建一个本地资源库的文件夹,当然,这个操作使用 Hexo 的命令行来完成。

将这个文件夹命名为 Blog 好啦,假如我们想让它存在在 miao 这个文件夹之下,在终端中运行:

Terminal window
cd /miao # 进入你想要安装的路径
hexo init Blog # 在/miao路径下初始化 Blog 资源库
cd /miao/Blog # 进入这个路径
npm install # 安装必要文件
open . # windows系统的命令符为 start | 打开当前路径文件夹,此时指向的是Blog

上述代码运行完毕后,会自动打开初始化好的 Blog 本地资源库文件夹。可以看见里面已经有了 Hexo 的网站模板与发布资源,像是文章文件、图片资源、插件、渲染缓存……

更改这些文件夹当中的文件,进行渲染部署,网站就会应声而变。

让我们一起来看看这里面都有些什么宝贝吧~

认识资源库#

上一个步骤的最后一步我们打开了这个文件夹,分别来看看这些文件夹中的文件夹与文件的作用。

资源文件夹 /source/#

source 是用户的资源文件夹,编写的文档原件、调用的图片附件等都存放在这里,是你进行工作的地方,也是构建网站使用的素材库。

没什么意外的话,这里面会有一个 _posts 文件夹在等着你,其中还有一篇名为 hello-world.md 的文章。

_post 是存放文档原件的地方。

这篇文章是 Hexo 自带的一篇文章,里面用英文讲述了一些基本的操作,也是我们将要发布到网站上的第一篇文章。

配置文件 /_config.yml#

网站的配置文件,网站样式、连接情况、新建格式等等的各种参数都是在这里配置的。

.yml 的代码语言相对简单。相比于代码,它更像是一个配置的开关,设置 true / false 或简单的关键字来开启其中的配置或者样式。所以几乎没有门槛就可以很快看懂。

主题文件夹 /themes/#

主题文件夹,你下载的 Hexo 主题存放在这里。

Hexo 有大量开发者提供的主题,你可以在hexo.io/themes/中预览并下载,把它运用到你的网站中。

主题开发者大多会提供详细的配置教程,选择文档详细的以及更新迭代较多、还在活跃中的主题可以减少很多不必要的麻烦。大部分时间下,你只需要修改 /Blog/theme/_config.yml 来更改网站主题的具体配置。

在 Hexo5.0 以后的版本中,很多开发者喜欢将配置文件放在根目录,以 _config.主题.yml 命名来方便配置。如果你下载的是新版本的 Hexo 与主题,那么就不需要在意 theme 文件夹中的配置文件了, /_config.主题.yml 会完全覆盖 /theme/_config.yml 的配置。

没有的话就把 theme 文件夹中的 _config.yml 手动拷贝到根目录,然后重命名成 _config.主题.yml。

不过,关于将本地资源上传到云端的端口以及一部分小细节需要配合根目录下的 _config.yml 配置文件,千万别手误删掉喔。

共享文件夹 /public/#

这个文件夹是渲染完成的.html等文件存放的地方

不用,别碰。

模板文件夹 /scaffolds/#

这是Hexo新建样式模板存放的地方,一般来说里面会有三个.md文件:

  • 新建草稿模板 draft.md
  • 新建分页模板 page.md
  • 新建文章模板 post.md

用新建文章举例,如果你修改了 post.md 中两条---之中的东西,在你使用Hexo命令行新建文章的时候,会自动在开头添加上这些。

这些东西是新建文章的Markdown文件渲染生成的html的相关索引,专有名称为 Front-matter 。

在之后的内容会详细讲它,现在暂时不要修改。

插件文件夹 /node_modules/#

Hexo 有大量开发者提供的插件,使用这些插件可以让你网站的功能变得更多。

比如我就使用了一个可以让你在我的网站单击鼠标显示不同颜色社会主义核心价值观的插件,希望你不会觉得烦。

因为我不知道怎么关掉它。

可喜可贺,我终于关掉它了,因为我手动在这个文件夹里面把它删了。

插件被安装在这个目录,里面也有一些 Hexo 必备的自带插件。

插件一般是通过 npm 命令安装的,还记得之前安装 Hexo 的时候我们使用的命令行吗?

npm 命令的简单复习
Terminal window
npm install 插件名称 # 下载[插件名称]的插件,若有[插件名称@版本号],则为下载该版本号版本的插件
npm install # 下载必须插件
npm list # 命令行中展示插件目录
npm update 插件名称 # 升级[插件名称]插件,用install再安装一遍也会自动覆盖升级
npm uninstall 插件名称 # 卸载该插件

npm 会在总文件夹下生成名称为 package.json 的数据文件,里面是当前项目(即 Hexo)使用的插件目录。

使用 install 和 uninstall 命令时,建议使用 npm i -S(即 npm install --save)形式,自动写入到上述数据文件中进行记录。

尽量不要跳过命令行去手动修改这里面的内容,即使修改了,外部也存在记录了项目依赖的 package.json 数据文件,会在下一次更新的时候重新下载回来。

连接云端#

本地资源库的构造我有没有讲明白呢?

建立网站实际上就是在网络上开放一个窗口,让别人访问你让他们能看见的内容,而网页和它的子网页也都是这样的文件夹形式。

为了发表网站到网络上,我们首先需要联系我们的本地文件和 GitHub 中云端的仓库。

首先,打开自己的 Github 主页,进入我们之前新建的远端仓库。

点击 Code - SSH,可以看见一个 git@github.com:名字/网站 形式的东西,复制它:

这里用 Hexo 官方仓库示意

本地资源库中,打开 Blog/_config.yml,拉到最后一行,将其修改为这个形式:

# Deployment 部署设置
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: 刚才复制的东西 # 连接远端仓库的SSH协议远程地址
branch: master # 远端仓库分支名称

保存之后,本地和云端就连接好啦~

Hello World#

首先在本地安装一个用于 Hexo 部署的插件:

Terminal window
npm install hexo-deployer-git --save # cd 在 Blog 中

然后就可以在 GitHub 上面进行部署了:

Terminal window
hexo g -d # 同样在 Blog 路径下

等待大概 1min 后,输入你的域名,就可以看到一篇自带的 Hello World 文章。

结束语#

我们大致了解了本地资源库的构成并过了一遍部署文件的过程,在接下来的说明之中,我们将进入到配置主题和发布文章的过程,成就感有没有逐渐升起呢?

虽然目前的网站样式仍是默认,而文章也只有自带的一篇 Hello World 。

千里之行,始于足下。

很快我们将会进行文章相关的编写和主题配置,你的网站也会很快充实并绚丽起来。

那么我们移步到下一章。

Hexo_2 - Hello_World by Hexo - 发布第一篇文章
https://lyrikp.art/posts/知识簇-hexo-2-第一篇文章/
作者
L1key
发布于
2020-08-26
许可协议
CC BY-NC-SA 4.0

分享文章

生成精美分享图或复制链接,与更多人分享本文。