不知道大家有沒有發(fā)現(xiàn)，長者們的網(wǎng)站都是相似的(比如上面這倆大佬Bjarne Stroustrup,Richard Stallman)，而粉絲們(比如我)的網(wǎng)站卻各有各的不同
其實在互聯(lián)網(wǎng)早期，所有網(wǎng)站差不多長這樣,他們都是靜態(tài)的，因為當時壓根就沒有動態(tài)網(wǎng)站
不過我們今天要講的不是像長者們一樣的那種靜態(tài)網(wǎng)站,而是通過靜態(tài)網(wǎng)站生成器(SSG,Static Site Generator)生成的靜態(tài)網(wǎng)站
近年來，隨著瀏覽器發(fā)展,CDN成為主流,構建工具的廣泛應用以及入們對高性能的不斷追求,作為傳統(tǒng)動態(tài)網(wǎng)站基礎架構的替代方案，現(xiàn)代靜態(tài)網(wǎng)站生成器日漸盛行。許多導致靜態(tài)網(wǎng)站失敗的限制已不復存在?，F(xiàn)在，每周都會有新的靜態(tài)網(wǎng)站生成器發(fā)布。
下面我將帶大家一起了解靜態(tài)網(wǎng)站生成器的一些知識并利用靜態(tài)生成器搭建一個最基礎的靜態(tài)網(wǎng)站
什么是靜態(tài)網(wǎng)站？
我們在學習網(wǎng)站開發(fā)時寫的第一個頁面可能是這樣的：
<html>
<body>
<h1>Hello World</h1>
</body>
</html>
將上面的內容保存成index.html,然后扔到Apache服務器上,就可以通過互聯(lián)網(wǎng)順利訪問了
上面的index.html就叫一個靜態(tài)網(wǎng)頁,由一堆靜態(tài)網(wǎng)頁構成的網(wǎng)站就叫靜態(tài)網(wǎng)站
在網(wǎng)站設計中，純粹HTML（標準通用標記語言下的一個應用）格式的網(wǎng)頁通常被稱為“靜態(tài)網(wǎng)頁”，靜態(tài)網(wǎng)頁是標準的HTML文件，它的文件擴展名是.htm、.html，可以包含文本、圖像、聲音、FLASH動畫、客戶端腳本和ActiveX控件及JAVA小程序等。靜態(tài)網(wǎng)頁是網(wǎng)站建設的基礎，早期的網(wǎng)站一般都是由靜態(tài)網(wǎng)頁制作的。靜態(tài)網(wǎng)頁是相對于動態(tài)網(wǎng)頁而言，是指沒有后臺數(shù)據(jù)庫、不含程序和不可交互的網(wǎng)頁。靜態(tài)網(wǎng)頁相對更新起來比較麻煩，適用于一般更新較少的展示型網(wǎng)站。容易誤解的是靜態(tài)頁面都是htm這類頁面，實際上靜態(tài)也不是完全靜態(tài)，他也可以出現(xiàn)各種動態(tài)的效果，如GIF格式的動畫、FLASH、滾動字幕等。
什么是動態(tài)網(wǎng)站?
動態(tài)網(wǎng)站并不是指具有動畫功能的網(wǎng)站，而是指網(wǎng)站內容可根據(jù)不同情況動態(tài)變更的網(wǎng)站，一般情況下動態(tài)網(wǎng)站通過數(shù)據(jù)庫進行架構。 動態(tài)網(wǎng)站除了要設計網(wǎng)頁外，還要通過數(shù)據(jù)庫和編程序來使網(wǎng)站具有更多自動的和高級的功能。動態(tài)網(wǎng)站體現(xiàn)在網(wǎng)頁一般是以asp，jsp，php，aspx等結束，而靜態(tài)網(wǎng)頁一般是HTML（標準通用標記語言的子集）結尾，動態(tài)網(wǎng)站服務器空間配置要比靜態(tài)的網(wǎng)頁要求高，費用也相應的高，不過動態(tài)網(wǎng)頁利于網(wǎng)站內容的更新，適合企業(yè)建站。動態(tài)是相對于靜態(tài)網(wǎng)站而言。
動態(tài)網(wǎng)站的內容都是由服務器動態(tài)生成的,如WordPress等
靜態(tài)網(wǎng)站的優(yōu)點
-
訪問速度快
即使是最為優(yōu)化的動態(tài)網(wǎng)站，其性能也無法同靜態(tài)網(wǎng)站相比。并且，對于動態(tài)網(wǎng)站而言，緩存失效非常難以恢復，尤其是需要充分利用CDN的分布式緩存。靜態(tài)網(wǎng)站所有內容都儲存在html里面，不需要后臺服務器對內容進行渲染，避免了查詢數(shù)據(jù)庫等操作，而且可以充分利用緩存和CDN -
非常安全
動態(tài)網(wǎng)站容易遭受蠕蟲攻擊。據(jù)保守估計，超過70%的WordPress部署容易因為已知漏洞遭受攻擊（超過23%的Web網(wǎng)站以WordPress為基礎構建）。網(wǎng)站安全兩大威脅SQL注入和XSS（cross-site scritpting）攻擊，靜態(tài)站點都可以很好的避免 -
易于部署
沒有后端要求，想部署在哪兒就部署在哪兒 -
利于版本控制
靜態(tài)網(wǎng)站是由靜態(tài)文件組成，所以非常容易使用Git等工具進行版本控制
哪些網(wǎng)站可以是靜態(tài)的
-
博客
這也是靜態(tài)網(wǎng)站最主要的使用方式，與用戶的交流僅限與評論，而利用Disqus可以滿足該需求 -
文檔
僅次于博客的使用方式，因為文檔需要方便用戶快速查看，并且能夠進行版本控制文檔,而文檔一般又不需要經(jīng)常更新，所以靜態(tài)網(wǎng)站非常合適,實際上,很多開源項目的文檔都是利用Jekyll做的 -
網(wǎng)頁海報
這類網(wǎng)站通常非常簡單，很適合做成靜態(tài)網(wǎng)站
一般來說內容需要經(jīng)常改變的以及需要和用戶進行高頻度的交互的網(wǎng)站都不適合做成靜態(tài)網(wǎng)站
什么是靜態(tài)網(wǎng)站生成器
簡單來說,靜態(tài)網(wǎng)站生成器就是一個由輕量的標記語言以及模版語言和元數(shù)據(jù)以及CSS預處理器加上可以編譯成JavaScript的語言構成的用來生成靜態(tài)HTML,CSS和JS文件的程序
目前網(wǎng)上有上百種生成器，不過它們都大同小異：
-
都使用一種或多種模版語言
如Liquid，Handlebars，Jade等，這是靜態(tài)網(wǎng)站生成器最關鍵的部分，它允許你為你的網(wǎng)站構建一套主題或者說布局，在構建的時候將動態(tài)的內容插入進去 -
都使用一種或多種輕量化的標記語言
如Markdown，AsciiDoc，reStructuredText等,盡管大多數(shù)SSG都支持直接使用HTML，但是利用標記語言可以更快更容易的使用一些流行的文本編輯器進行內容編輯,比如我一般使用Typora進行MarkDown寫作 -
都在命令行下運行
大多數(shù)靜態(tài)網(wǎng)站生成器都主要是一個命令行工具 -
都包含一個本地開發(fā)服務器
允許你在正式發(fā)布之前在本地開發(fā)和測試。通常這些工具會檢測你的文件的改變然后在你編輯的過程中就重新編譯 -
都可擴展
大多數(shù)靜態(tài)網(wǎng)站生成器都允許你添加插件 -
都支持文件類型(file-based)的數(shù)據(jù)格式
如YAML，TOML，JSON，它們允許你結構化任何類型的數(shù)據(jù)而不管他的展示形式,而標記語言如Markdown等一般用來保存長期的內容
靜態(tài)網(wǎng)站生成器的選擇
那么面對五花八門的靜態(tài)網(wǎng)站生成器我們到底該選哪個好呢?
真理往往掌握在大多數(shù)人手中,在GitHub搜索靜態(tài)網(wǎng)站生成器然后按star排序
決定就是你了,jekyll
jekyll安裝與運行
jekyll是一個專注于創(chuàng)建博客的靜態(tài)網(wǎng)站生成器，他原生支持GitHub Pages，也就相當于為我們提供了免費的托管服務
下面我們按照官網(wǎng)的步驟并創(chuàng)建項目（我用的Mac，所以已經(jīng)裝好Ruby和RubyGems了）
gem install jekyll bundler
jekyll new my-awesome-site
cd my-awesome-site
這是創(chuàng)建好的文件目錄結構
其中各文件的用處如下:
- _config.yml: 這是jekyll的配置文件,在里面可以更改你網(wǎng)站的信息,如標題等
- _post: 你創(chuàng)建的新博客文件將會存放在這里
- about.md和index.md: 默認的關于頁面和主頁，除了主頁你都可以刪掉，當然你也可以添加新頁面進來
而其中的Gemfile文件是ruby的包管理工具用的,類似cocoapods的podfile,對Ruby我不太熟悉,但是我們可以打開看看
可以看到除了jekyll我們還安裝了minima,這是jekyll的默認主題,要查看它的位置我們可以運行以下命令
bundle show minima
返回目錄如下
/Library/Ruby/Gems/2.0.0/gems/minima-2.1.1
打開該目錄我們可以看到minima主題的內容
其中主要文件夾有3個,其他不用管
- _includes: 將會包含到你的模版中的內容，比如多個頁面都會用到到版權聲明
- _sass: 用來編譯生成css文件
- _layout：網(wǎng)頁的布局文件
好了,我們現(xiàn)在開始運行jekyll
jekyll serve
然后在瀏覽器打開localhost:4000
這是jekyll的默認UI，當然也可以將其更換為自己喜歡的主題
新建文章
要想新建一篇文章只需要把我們寫好的文章Markdown文件添加到_post文件夾就行了
文章文件命名格式為：年-月-日-標題.后綴名
如:2017-5-20-hello-world.md
每個文件開頭都必須有如下的YAML格式的說明
---
layout: post
title: "Welcome to Jekyll!"
date: 2017-05-21 09:02:30 -0700
categories: jekyll update
---
YAML儲存的是簡單的鍵值對數(shù)據(jù)，layout告訴jekyll使用何種模版來渲染該文件，title則是該文章的標題,data為文章發(fā)布,文件頭中的日期優(yōu)先級大于文件名的，你也可以移除文件頭中的日期使用文件名中的日期，category則是你要發(fā)布的文件屬于哪個分類
好了，現(xiàn)在我們來新建一個名為2017-5-20-hello-world.md的文件
內容如下：
---
layout: post
title: "Hello World"
date: 2017-05-21 09:02:30 -0700
categories: jekyll update
---
Hello World!
保存該文件到_post文件夾，然后我們刷新瀏覽器，就可以看到新文章了(并不需要重新運行jekyll,因為jekyll一旦檢測到文檔改變就會重新編譯)
打開Hello World就能看到該文章的詳細頁面如下
Liquid模版語言
jekyll使用了一種叫Liquid的模版語言,類似于express.js中使用的jade,關于Liquid的內容這里只做簡單介紹
打開minima主題文件夾中_layout文件夾里的home.html
---
layout: default
---
```html
<div class="home">
<h1 class="page-heading">Posts</h1>
{{ content }}
<ul class="post-list">
{% for post in site.posts %}
<li>
{% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %}
<span class="post-meta">{{ post.date | date: date_format }}</span>
<h2>
<a class="post-link" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
</h2>
</li>
{% endfor %}
</ul>
<p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></p>
</div>
Liquid使用** "{% %}" 作為循環(huán)，條件等邏輯語句的標記，而 "{{ }}" ** 作為變量替換的標記，"|"則為管道操作符,用來進行格式化操作
Liquid里面的變量來自于jekyll，可以參考jekyll變量文檔
主題布局
下面我們看看jekyll的布局文件，我們所發(fā)布的每篇文章文件頭部都需要有對布局的定義,如下面頭文件中的layout所指定的post,而這個post著來自我們的主題minima文件夾里面,打開minima文件夾,在里面的_layout文件夾里我們將會看到一個post.html的文件,這就是我們post布局,文件頭里的布局指定不能帶后綴名，比如post.html就只能指定為layout: post而不是layout: post.html
---
layout: post
title: "Hello World"
date: 2017-05-21 09:02:30 -0700
categories: jekyll update
---
Hello World!
如果你不指定layout將是這樣的結果
打開minima主題文件夾中_layout文件夾里的post.html
---
layout: default
---
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">{{ page.title | escape }}</h1>
<p class="post-meta">
<time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
{% assign date_format = site.minima.date_format | default: "%b %-d, %Y" %}
{{ page.date | date: date_format }}
</time>
{% if page.author %}
? <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>
{% endif %}</p>
</header>
<div class="post-content" itemprop="articleBody">
{{ content }}
</div>
{% if site.disqus.shortname %}
{% include disqus_comments.html %}
{% endif %}
</article>
這就是我們之前發(fā)布的文章布局post的定義文件了,該文件也有個頭信息
---
layout: default
---
可以看到,布局文件也可以有布局,我們打開default.html布局文件看看
default.html：
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}">
{% include head.html %}
<body>
{% include header.html %}
<main class="page-content" aria-label="Content">
<div class="wrapper">
{{ content }}
</div>
</main>
{% include footer.html %}
</body>
</html>
post.html文件中的所有內容都將被插入到下面content的位置
<div class="wrapper">
{{ content }}
</div>
注意default.html里面的include
{% include head.html %}
利用include我們可以直接將其他文件的內容引用進來
其他頁面
我們的網(wǎng)站當然不可能全部由文章構成，也會有一些其他頁面,比如關于頁面等，這些頁面除了不能放在_post文件夾里面以外,它們和文章頁面沒什么不同
把它們放到jekyll根目錄就行了,它們將會被自動解析到liquid標簽供你使用
下面我們在根目錄創(chuàng)建一個新文件就叫count.md
---
layout: default
title: Count
---
I have {{site.posts.size}} posts
這里我們用到了jekylly的變量來顯示文章數(shù)量
刷新過后就可以在網(wǎng)頁右上角看到,點擊進入Count頁面就能顯示文章數(shù)目
接下來
如果默認主題符合你的需求的話其實到此你的博客網(wǎng)站就已經(jīng)構建完成了,接下來只需要發(fā)布到你的服務器就行了,如果沒有服務器可以利用GitHub Pages進行發(fā)布
更多主題可以到GitHub進行搜索
