前言
Hello World
接触过代码的人总是对这个单词抱有特殊的情感。
同样的,Hexo新建的网站也总是有一篇标题为《Hello World》的文章。些许问候再加上简单的发布方法,这也许就是一个程序员最纯粹的友善与热情。
我们回应这种友善与热情,同时也对名为“开源”的精神致以最高的敬意,将引擎框架的名称注明在网站页脚,期待能带来更多的荣光与赞誉。
言归正传,这次我们同样先使用Hexo初始默认的名为landscape的主题,发布这篇已经被写好的《Hello World》。
毕竟你说的第一句话也总是别人教你的嘛。
已经完成的事情
node.js
环境配置
github
仓库建立
Hexo
安装完成
では、ゲームを始めましょう
新建本地资源库 Init Local Library
在上一章的学习中,我们已经认识到网址的构成,也应该明白了本地资源库的重要性。
所以在此我们新建一个本地资源库的文件夹,当然,这个操作使用 Hexo
的命令行来完成。
我们将这个文件夹命名为 Blog
好啦,假如我们想让它存在在 miao
这个文件夹之下
打开 终端
/cmd
windows系统的文件路径分隔符是 \
,示例的系统环境为MacOS,请注意区分
cd /miao # 进入你想要安装的路径
hexo init Blog # 在/miao路径下初始化 Blog 资源库
cd /miao/Blog # 进入这个路径
npm install # 安装必要文件
open . # windows系统的命令符为 start | 打开当前路径文件夹,此时指向的是Blog
命令行的含义解释
涉及操作
cd 路径
将工作区设置到路径
hexo init 文件夹
创立“文件夹”的初始化Hexo本地库
npm install 插件名称
使用npm下载叫“插件名称”的插件,本次不加插件名称会自动下载必要文件
Mac: open .
/Windows: start .
打开当前工作区路径的文件夹
npm操作若出现 EACCESS 的权限不足报错,可以尝试在命令前加上 sudo
强制以管理员权限执行
例如 sudo npm install 插件名称
上述代码运行完毕,会自动打开已经新建的本地资源库文件夹 - Blog
。我们可以看见里面已经有了Hexo的网站模板与发布资源,像是文章文件、图片资源、插件、渲染缓存……
更改这些文件夹当中的文件,进行渲染部署,网站就会应声而变。
此后我们几乎所有的操作都要 cd
进这个文件夹里,千万不要搞错工作区。
让我们一起来看看这里面都有些什么宝贝吧~
认识资源库
上一个步骤的最后一步我们打开了这个文件夹,分别来看看这些文件夹中的文件夹与文件的作用。
资源文件夹 /source/
你能很轻松的在这Blog文件夹中找到一个名为source
的文件夹,它用来存放用户的资源。
没什么意外的话,这里面有一个 _posts
文件夹在等着你,文件夹中还有一篇名为 hello-world.md
的文章。
以后我们所有的文章都会保存在
_posts
文件夹中
这篇文章是Hexo
自带的一篇文章,里面用英文讲述了一些基本的操作,也是我们将要发布到网站上的第一篇文章。
你不会已经迫不及待准备好了自己的第一篇文章吧?那一定要记得照着这篇文章的样子修改成 .md 文件之后加上正文前面的格式,不然渲染器是不会将普通的txt或者docx文件渲染生成html的。
配置文件 /_config.yml
配置文件,网站的各种参数都是在这里配置的。
一些列关于网站配置的参数都在这个代码文件里,而 .yml
文件的代码语言相对简单。相比较于代码,它更像是一个配置的开关,设置 true/false 或简单的关键字来开启其中的配置或者样式。所以几乎没有门槛就可以很快看懂。
在hexo5.0以上的版本中,至少存在两个yml文件,他们间存在优先级覆盖设置。
一般来说,优先级:/Blog/_config.主题.yml >/Blog/theme/_config.yml > /Blog/_config.yml
主题文件夹 /themes/
主题文件夹,你下载的 Hexo
主题存放在这里
Hexo
提供了大量的主题皮肤,你可以在hexo.io/themes/中预览并下载这些主题,把它运用到你的网站中
主题的提供者同时会提供详细的配置教程,选择文档详细的以及还在更新中的主题可以减少很多不必要的麻烦。大部分时间下,你需要修改 /Blog/theme/_config.yml
来更改你网站的具体配置。
在 Hexo5
以后的版本中,很多开发者喜欢将yml文件放在源文件夹,以 _config.主题.yml
命名来方便配置。如果你下载的是新版本的Hexo与主题,那么就不需要在意theme文件夹中的yml文件情况了, /Blog/_config.主题.yml
会完全覆盖 /Blog/theme/_config.yml
的配置。
不过,关于将本地资源上传到云端的端口以及一部分小细节需要配合源文件夹下面的 _config.yml
,千万别手误删掉喔。
共享文件夹 /public/
这个文件夹是渲染完成的.html
等文件存放的地方
误触public文件夹导致渲染出错
在命令行中运行 hexo clean
就行。
public是临时文件夹,每一次渲染都会重新生成,如果因为误触导致渲染产生问题,有可能是缓存没有刷新。
模板文件夹 /scaffolds/
这是Hexo
新建样式模板存放的地方,一般来说里面会有三个.md
文件
draft.md
- 新建草稿模板page.md
- 新建分页模板post.md
- 新建文章模板
用新建文章举例,如果你修改了post.md
中两条---
之中的东西,在你使用Hexo
命令行新建文章的时候,会自动在开头添加上这些。
这些东西是新建文章的Markdown
文件渲染生成的html的相关索引,专有名称为 Front-matter
。
在之后的内容会详细讲它,现在暂时不要修改。
插件文件夹 /node_modules/
Hexo
提供了相当多的插件,使用这些插件可以让你网站的功能变得更多。
比如我就使用了一个可以让你在我的网站单击鼠标显示不同颜色社会主义核心价值观的插件,希望你不会觉得烦因为我不知道怎么关掉它可喜可贺,我终于关掉它了,因为我手动在这个文件夹里面把它删了
插件被安装在这个目录,里面也有一些Hexo
必备的自带插件。
插件一般是通过 npm
命令安装的,还记得之前安装hexo的时候我们使用的npm命令行吗?
npm命令的简单复习
npm install 插件名称 # 下载[插件名称]的插件,若有[插件名称@版本号],则为下载该版本号版本的插件npm install # 下载必须插件npm list # 命令行中展示插件目录npm update 插件名称 # 升级[插件名称]插件,用install再安装一遍也会自动覆盖升级npm uninstall 插件名称 # 卸载该插件
在Hexo调用中,会在总文件夹下生成名称为 package.json
的数据文件,里面记录了当前使用的插件目录。
在使用install和uninstall命令时,建议使用 npm i -S
即 npm install --save
形式,自动写入到上述数据文件中进行记录。
连接云端 Repo to Github
本地资源库的构造我有没有讲明白呢?
建立网站实际上就是在网络上开放一个窗口,让别人访问你让他们能看见的内容,而网页和它的子网页也都是这样的文件夹形式。
为了发表网站到网络上,我们首先需要联系我们的本地文件和 Github 中云端的仓库。
首先,打开自己的Github主页,进入我们之前新建的仓库
在 <Code>
这一栏,在第一行的蓝框中 HTTP|SSH
选择 SSH
你可以看见一个 git@github.com:名字/网站
形式的东西,复制它
打开 Blog/_config.yml
,拉到最后一行,将其修改为这个形式:
# Deployment 部署设置
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: 刚才复制的东西 # 刚才复制的
branch: master # 给予权限
保存之后,本地和云端就连接好啦~
Hello World
首先安装一个hexo用于部署的插件
npm install hexo-deployer-git --save # cd在Blog中
然后就可以在github上面进行部署了
hexo g -d
等待大概1min后,输入你的域名,就可以看到一篇自带的 Hello World
文章
可能出现的问题
如果出现 unable to auto-detect email address
的报错,说明没有匹配到github的注册邮件地址
在博客文件夹下找到 .git
文件夹, config
文件,使用记事本或者vscode打开email = your email
name = your name
填写上github的邮箱和用户名就可以啦
结束语
我们大致了解了本地资源库的构成并过了一遍部署文件的过程,在接下来的说明之中,我们将进入到配置主题和发布文章的过程,成就感有没有逐渐升起呢?
虽然目前的网站样式仍是默认,而文章也只有自带的一篇 Hello World
。
千里之行,始于足下。
很快我们将会进行文章相关的编写和主题配置,你的网站也会很快充实并绚丽起来。
那么我们移步到下一章
评论