编程

静态网站的基本结构

科技工程模块 科技工程模块 关注 Jun 18, 2019 · 预计阅读 4 分钟
静态网站的基本结构

本文的目标是:以 Jekyll 为例讲述静态网站的基本结构。

本文适合以下读者:

  • 想要自己构建一个静态站点并发布;
  • 对前端相关概念名词有基本的了解,比如 HTML CSS 等。

本文不适合以下读者:

  • 小白:文中的一些概念可能会让你迷惑,建议你首先了解相关基本术语;
  • 快速完成者:相较于自己构建(无论是静态还是动态站点),已有平台可能更适合你的需求,如 Wordpress.com 等;
  • 高阶人士:本文的目标人群是静态网站初学者,你的时间值得花费在一些更重要的事情上。当然我非常欢迎你对本文提出批评和指正。

正文中首先说明静态站点的组分概念和逻辑关系,然后以 Jekyll 为例解释上述概念。

1. 静态网站的构成和逻辑

按照组分类型分类,静态网站由以下三个部分组成:

  1. HTML, CSS, JS;
  2. 配置文件;
  3. 用户内容。

1.1 HTML, CSS, JS

互联网早期经典的网站三剑客,到今天依然是建站的基本组成部分。三者在互相协作之下构建了网站页面:其中 HTML 确定结构,CSS 美化样式,JS 定义动作。这部分内容就不再多说了,有不明白的地方请善用 Google 和 Wikepedia。

1

通过使用上面的三件套,我们就可以发布网页了!但是等等…手写网站?你在逗我吗?!这似乎是在上个世纪八九十年代互联网早期我们父母那代人的日常工作吧?现在还要这么搞吗?

不幸的是我们确实需要它们(HTML, CSS, JS)来组件网页,不过好消息是现在我们可以简单的通过站点生成器来完成大部分的工作!

1.2 配置文件

为了避免手写网页这些繁重的工作,人们通常通过在站点生成器中使用模板来完成建站工作。想象一下这个情景:只需要简单的几行命令(甚至是几下点击),我们就建立了一个外观精美功能齐全的网站!太棒了!(有很多种编译器,如 Jekyll, Hexo, Hugo 等等,不过考虑到它们都是标准化的东西,所以本文就不再多说了。)

与此同时,我们就需要面对一种新的内容:配置文件。

它的作用是提供一些基本信息,比如站点名称、插件信息等,以便生成器能够构建满足我们需求的网站。它们可能用于不同的格式,如 YAML, JSON 等等。不管什么格式,它们的作用都是一样的。

1.3 用户内容

在上面我们谈到通过配置文件(而非手写)来生成 HTML, CSS, JS,总之,最后我们得到了一个站点。下一步就是提供网站内容,在单个页面上,我们可以呈现文本、图像、视频以及其他多媒体内容。

这样,一个静态站点就完成了。总结一下,它包括:

  • HTML, CSS, JS:单个页面;
  • 配置文件:生成上述页面;
  • 用户内容:包括文本、图像等多媒体内容。

2. 以 Jekyll 为例

在上文中有一部分被略过不讲的内容:编译器,虽然是标准化的东西,但是在实际操作是往往会带给我们很多麻烦,比如安装失败、编译错误等,尤其是在不同机器上都需要安装一次编译环境更让人头疼。

这就是本文以 Jekyll 为例的原因,通过 Github pages 我们将这些工作交给云端服务器处理,从而我们只需要关注文本内容。换句话说,我们只需要一个文本编辑器!

下面我们来看一个典型且最简洁的 Jekyll 目录。首先我们有 HTML, CSS, JS 文件:

.
├── index.html              # HTML单页面 
├── _layouts                # HTML页面布局模板,被单页面引用
|   ├── default.html
|   └── post.html
├── _includes               # HTML组件,被单页面或模板引用
|   ├── footer.html
|   └── header.html
└── assets                  # 资源文件夹
    ├── css                 # CSS文件
    |   └── main.css
    └── js                  # JS文件
        └── main.js

然后,我们有配置文件:

.
└── _config.yml             # YAML配置文件
└── _data                   # YAML配置文件夹
    └── members.yml

最后,我们的内容:

.
├── _posts                   # 文章文件夹
|   ├── 2007-10-29-A.md
|   └── 2009-04-26-B.md
└── assets                   # 资源文件夹
    └── images               # 图像文件夹
        └── a.jpg

以上,就是 Jekyll 文件夹中最基本的文件结构。

  1. 这张有趣而生动的图片来源于此网站。 

边文博 - 订阅
通过电子邮件订阅最新博文,获取我关于智能时代的思考。
科技工程模块
本文作者:科技工程模块 关注
自律、执行!什么是工具?