code前端网Hexo博客搭建原理：使用Hexo页面+github
Hexo博客搭建原理简析
我曾经使用过Hexo博客，但是原理不是很清楚。我在网上查了一些资料，对Hexo有了一些了解。新的认识，现在就记录一下吧
使用Hexo+githubpages搭建博客
记得第一次了解Hexo+githubpages搭建博客是在2016年，当时闺蜜很兴奋，告诉我。我建了一个博客，然后把地址发给我。我打开之后，感觉他的技术很惊人，这一切他都能做到（因为他不知道，创建一个网站需要一个非常复杂的过程，而且你还得让别人传地址。访问也很麻烦甚至很贵。）。
然后他告诉我这很容易。它是使用Hexo页面+github构建的。我当时很困惑。然后我搜了一下百度，发现很多人都是用Hexo页面+github来搭建博客。
作为一个拖延者，我花了几个月的时间才开始按照网上教程一步步创建自己的博客。
Github页面服务
一开始我只是按照网上教程一步步操作，将项目源码托管在github上，使用github页面服务。事实上，github Pages 服务不仅仅可以显示博客。您的每个 github 存储库都有一个页面服务。通过简单的设置就可以通过项目的index.html作为入口来展示项目。这个也很实用！但大多数页面服务用于创建个人博客。
以之前的canvasStar项目为例，我将源码上传到github，设置如下： pages服务步骤一
pages服务步骤二
github页面支持从静态页面解析
然后就可以通过图中红圈的地址访问了。
编码页面服务
我开始写博客的时候，我把代码放在github上，通过页面访问。然后我了解到国内访问github还是比较慢，而且github不会被百度收录，很不利于。 SEO，让代码托管在coding上，同样也有页面服务。我已经使用它有一段时间了，但是代码不再更新来为会员投放广告。于是我就买了自己的虚拟主机，直接把代码放在虚拟主机上。
为什么要用Hexo page + github来搭建博客
Hexo是用来生成HTML的，而github page是用来显示HTML的（根据上面的介绍可以知道，我们还可以使用页面编码服务，如果我们有服务器的话，您可以上传到您自己的服务器）。
Hexo
使用Hexo页面+github创建博客。我们刚刚简单介绍了github页面，所以现在我们需要介绍一下Hexo。我们知道Hexo是用来生成HTML的，所以在这篇文章中我们就讲一下Hexo是如何生成HTML的。
什么是Hexo？Hexo是一个快速、简洁、高效的博客框架。Hexo使用 Markdown（或其他渲染引擎）来解析文章并在几秒钟内生成精美的主题静态网页。
官方文档中安装了Hexo后，我们安装了Hexo，然后我们可以看到文档的结构如下：
.
├── _config.yml // 站点配置文件
├── db.json // 缓存文件
├── node_modules // 安装的插件以及hexo所需的一些nodejs模块
├── package.json // 项目的依赖文件
├── scaffolds // 模版文件
├── source // 源文件，用来存放你的文章 md 文件
└── themes // 主题文件然后我们就可以安装主题了，而不是已经安装的NexT主题。安装完成后，会在 theme 下创建文件，用于存储主题中的内容。文档结构如下：
.
├── LICENSE
├── README.en.md // READEME 英文版
├── README.md // READEME 中文文件
├── _config.yml // 主题配置文件
├── bower.json
├── gulpfile.coffee
├── languages // 多语言配置文件
├── layout // 模板文件
├── package.json // 项目的依赖文件
├── scripts // 主题的脚本文件
├── source // 主题的资源文件 CSS IMG
└── testHexo工作原理
这里我们分析一下Hexo每次部署的流程
- hexo g：生成静态文档。将数据和接口结合起来生成静态文件的过程。它会遍历主题文件中的
source文件夹（js、css、img等静态资源），然后创建索引，然后根据索引。此时，文件publid就是一个由html、js、css、img创建的静态文件。您可以通过index.html作为登录名访问博客。 - hexo d：文件部署。部署主要是根据中配置的仓库地址
git或者coding将文件上传到middlecoding github然后根据上面github提供的页面服务来提供页面。当然，你也可以直接将你创建的public文件上传到你自己的服务器上。
Hexo模板引擎
模板引擎的作用就是将界面与数据分离。最简单的原理就是用数据替换模板内容中指定的地方，将业务代码和逻辑代码分开。
我们可以看到，在Hexo中，文件夹source和文件夹themes是同一级的，所以我们可以把文件夹❀❀❀理解为数据库，主题文件夹与界面相同。然后我们hexo g将数据和接口结合起来生成静态文件public。模板引擎
Hexo默认是用ejs编写的。 hexo会先描述md文件，然后根据布局判断布局类型，然后调用其他文件，这样每一块的内容都是独立的，增加了代码的利用率。最后将生成html页面。
模板文件位于文件夹layout中。文件layout的文档结构如下：
.
├── _custom // 通用布局
├── _layout.swig // 默认布局布局
├── _macro // 插件模板
├── _partials // 局部布局
├── _scripts // script模板
├── _third-party // 第三方插件模板
├── archive.swig // 归档模板
├── category.swig // 分类模板
├── index.swig // 首页模板
├── page.swig // 其他模板
├── photo.swig // 照片模板（自定义）
├── post.swig // 文章模板
├── schedule.swig // 归档模板
└── tag.swig // 标签模板每个模板默认使用一个布局。可以在文章前置声明中声明。指定其他布局，例如“post”或“page”或设置为false以禁用布局功能（如果不填写，则默认post，可以在_config.yml中设置为默认值）。您甚至可以在布局中使用它。用于创建嵌套布局的另一个布局。
创建新页面或创建新文章时，您可以选择使用哪个模板。 hexo new [layout] 将使用适当的模板。
其中，_layout.swig为通用模板，引入了head、等常用组件。其他模板中会引入 _layout.swig 通用模板，如 post.swig 模板
{% extends '_layout.swig' %}
{% import '_macro/post.swig' as post_template %}
{% import '_macro/sidebar.swig' as sidebar_template %}
{% block title %} {{ page.title }} | {{ config.title }} {% endblock %}
{% block page_class %}page-post-detail{% endblock %}
{% block content %}
<div id="posts" class="posts-expand">
{{ post_template.render(page) }}
<div class="post-spread">
{% if theme.jiathis %}
{% include '_partials/share/jiathis.swig' %}
{% elseif theme.baidushare %}
{% include '_partials/share/baidushare.swig' %}
{% elseif theme.add_this_id %}
{% include '_partials/share/add-this.swig' %}
{% elseif theme.duoshuo_shortname and theme.duoshuo_share %}
{% include '_partials/share/duoshuo_share.swig' %}
{% endif %}
</div>
</div>
{% endblock %}
{% block sidebar %}
{{ sidebar_template.render(true) }}
{% endblock %}
{% block script_extra %}
{% include '_scripts/pages/post-details.swig' %}
{% endblock %} 其中 中数据 1 主要是数据的内容 hexo -g时，数据发送到swig模板，swig模板将其填充为HTML。配置文件
Hexo配置文件_config.yml中的数据使用yml语法。例如博客名称、副标题等。该数据项是在配置对象中配置的。您可以使用数字、字符串、对象和数组。
在文件中配置数据使用
如果你想在模板中使用特定的值，比如字符串、数字、逻辑变量或者对象的成员，可以直接在swig主题模板文件中使用：
{% block title %} {{ page.title }} | {{ config.title }} {% endblock %}Hexo中的变量
Hexo提供了很多变量，比如上面使用的page变量，以及等等。Hexo所赐，可立即使用。常用的变量有：
site：适合所有网站的变量，一般是site.posts.length创建围栏。site.posts所有帖子site.pages所有页面site.categories所有类别 所有标签
页面：保存当前页面信息。例如，我在index.ejs中使用page.posts来检索当前页面上的所有文章，而不是使用 ♻.posts ♻。config：config存储在主目录_config.yml中的变量信息主题：主题变量是目录下配置文件_config.yml中存储的信息。path：当前页面的路径（不包括根路径）。url：页面的完整 URL。
Page 变量
Page(page) 这里指的是 hexo new page
page.title:: 创建的页面：创建日期Articlepage.updated: 文章更新日期page.comments: 是否启用评论page.layout :outpage .content : 全文内容halaman.kutipan：文章摘要page.more：摘要以外的内容♶来源：♶文章路径的强度kaca .full_source:文章的完整原始路径page.path：文章 URL（无根路径），通常用于 url_for(page.path)page.permalink：文章永久 URLpage .prev：上一篇文章，如果这是第页，则为空。‾t：下一篇文章最后一篇文章为空页。raw：文章页的原始内容。 photos：文章照片（用于相册）page.link：文章外部链接（用于链接文章）
Post（帖子）变量
这里显示文章页面，与页面布局相同。添加以下变量：
page.polish：文章未设计且正确page .categories：文章类别pagespage。 主页（索引）page.per_page：每页显示的文章数page.total？ page .prev：上一页的页码。如果是首页，则值为 0page.prev_link：上一页的 URL。如果是第一页，值为''page .next：下一页的页码，如果是最后一页则为0page.next_link：下一页的 URL，如果是上一页，则为 ''page.path：当前页面的 URL（不带根路径），通常用于 url_for( page.path )
存档页面（存档）
与索引布局相同，但添加以下变量：
存档true❀存档年份年份）月存档月份 (不包括0）
总结
如果非要说什么Hexo的话，我是一个生成我们写的静态页面的工具，可以匹配内容。与主题模板结合，生成静态HTML文件，可以与github页面或其他可以显示静态页面的服务（如编码页面服务）结合，可以一键分发。
如果再深入讲儒家道理的话，我们应该使用yaml语言作为配置文件，使用ejs或swig作为主题模板，并与markdown编写的内容结合生成静态HTML文件。
版权声明
本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。