许 志强

许 志强

1658354160

靜態站點生成器 (SSG):如何使用 SSG 創建網站

在本教程中,您將了解靜態站點生成器 (SSG) 以及如何使用 SSG 創建靜態站點。SSG 是一種應用程序,可自動創建呈現網站所需的 HTML、CSS 和 JavaScript 文件。 

有許多用於創建網站的軟件和工具。一種迅速成為主流的工具稱為靜態站點生成器(SSG)。SSG 是一種應用程序,可自動創建呈現網站所需的 HTML、CSS 和 JavaScript 文件。SSG 因其靈活性而廣受歡迎。它可以用作獨立工具,也可以深度集成到您選擇的 Web 架構中。

為了概述支持 SSG 的底層 Web 技術以及使它們變得有用的特性,本文將探討與“靜態”、“站點”和“生成器”相關的各種概念。

靜止的

當用戶查看網站上的頁面時,會向 Web 服務器發出請求。Web 服務器根據該請求返回特定文件。

例如,假設用戶請求傳統或動態網站上的頁面。服務器可能需要查詢數據庫,將結果發送到模板應用程序,然後最終生成 HTML 文件以呈現給瀏覽器。每次在此體系結構中發出請求時,都會按需生成此頁面。

相反,在靜態站點上,請求的文件已經位於 Web 服務器上。這就是術語靜態的含義:用於呈現站點的文件是不變的,因為它們已經包含 HTML、CSS 和 JavaScript 代碼。無需按需轉換、生成或轉換,因為它們是在頁面請求之前生成的。

需要明確的是,靜態站點仍然可以是交互式的。JavaScript 代碼、CSS 動畫、視頻和音頻元素以及 JSON 等數據格式仍然受支持,並且可以在靜態站點上正常運行。唯一的區別是文件本身是提前生成的,而不是按需生成的。

您可以將登錄頁面或博客文章視為靜態站點的示例。另一方面,體育直播頁面或評論部分是動態網站的示例。對於像這樣的動態站點,您需要一個服務器或一個 API 調用來執行額外的處理,以便正確地向用戶呈現一個元素。您可以閱讀有關渲染範圍的信息,以更好地了解網站如何使用各種技術向用戶展示內容。

地點

在任何網站上,您都需要一種組織和創建內容的方法。靜態站點生成器提供了一種簡化的方式來完成此任務。使用 SSG,您可以創建和組織站點結構,同時還可以直接訪問內容。許多 SSG 共有的用於幫助管理所有這些的集成技術之一稱為模板引擎

模板引擎

模板引擎是為出現在您網站上的常見元素創建模板的軟件。模板引擎不是為您網站上的每個頁面硬編碼重複的 HTML,而是幫助為您的所有頁面創建這些元素。例如,如果您的網站上的每個頁面都需要頁眉和頁腳,則可以編寫一次此代碼,然後將其應用於帶有模板代碼的頁面。您還可以使用變量和表達式來構建或替換模板中的值。

請記住,許多 SSG 允許您選擇模板語言,而有些則帶有已經為您選擇的前端框架和模板語言。NunjucksPugLiquidBlade等模板引擎為您提供了不同的模板創建方式。

以下是Nunjucks 模板引擎中的基本模板示例:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Your Website</title>
    </head>
    <body>
        <header>
            {% block header %}
                This is your header content
            {% endblock %}
        </header>

        <div id="content">{% block content %}{% endblock %}</div>
        
        <footer>
            {% block footer %}
                This is your footer content
            {% endblock %}
        </footer>
    </body>
</html>

您可以將基本模板視為佔位符的容器。{% block %}標籤是模板代碼塊。這些可以包含內容或留空,以便被子模板填充或覆蓋。請注意,每個{% block %}標籤都附加了一個變量名。例如,嵌套在<header>HTML 標記內,有一個{% block header%}標記指定此塊名為 header。您可以隨意命名,但最好使用描述性變量名稱以避免混淆。

模板引擎執行一些繁重的工作來創建這些可重用的模板,然後將這些模板轉換為 HTML。這些模板文件通常放在一個名為layouts或的目錄中templates。因為模板是可重用的,所以您通常不會直接在模板文件中編寫內容。對於內容,您可以創建所謂的Markdown文件。

降價

Markdown 是一種標記語言,用於在將純文本文檔轉換為 HTML 之前添加格式。雖然不能完全替代編寫 HTML,但 Markdown 可以幫助您編寫和構建您的內容,而無需過多擔心 HTML 標籤。

例如,如果你需要在 HTML 中創建一個無序列表,你必須創建一個<ul>標籤,然後嵌套在標籤中的列表元素<li>。在 Markdown 中,您可以使用星號創建此列表*

<ul>
    <li>Thing 1</li>
    <li>Thing 2</li>
    <li>Thing 3</li>
</ul>
* Thing 1
* Thing 2 
* Thing 3

除了包含的代碼庫之外,許多 SSG 允許您在 Markdown 中編寫所有內容。這樣,您可以專注於編寫內容而不是代碼,儘管您可以選擇在 Markdown 文件中編寫純 HTML。這些文件通常稱為內容文件,通常存儲在內容特定目錄中。當與模板的強大功能和前端使用的元數據配合使用時,您的內容將相應地呈現。

元數據和前沿

SSG 工具箱中的另一個強大工具是有助於配置和格式化元數據的語言。YAMLTOMLJSON是用於在內容文件的前端定義元數據的語言。前端是描述或定義有關內容的屬性的結構化數據。您還可以使用此數據應用模板中的特定佈局。此數據通常位於任何給定內容文件的最頂部。

例如,您可以使用 front matter 定義標題、作者、提供內容的簡要描述,並使用模板中的特定佈局:

---
title: Front Matter Matters
author: Author Name
description: Write out your description here
layout: base.html
---

此示例使用 YAML 語言來定義頁面的內容。頂部和底部的三個連字符---封裝了您的前端元數據。如果沒有這些連字符,您的元數據將無法正常工作。實際上,您可以包含更多或更少的元數據元素。與模板引擎和 Markdown 配合使用,您的內容將根據您構建網站的方式呈現到頁面。

隨著站點的增長,構建前端內容可能會變得越來越複雜。儘管本文無法解釋錯綜複雜的內容,但您可以使用前端來創建鏈接、標籤等來自定義您的網站。

發電機

在為您的網站構建和創建內容之後,剩下的就是構建它。在此構建過程中,您的所有資產(包括 CSS、圖像、JavaScript、元數據等)都會輸入管道並拼湊在一起。這些資產通常被縮小、轉譯、編譯、捆綁,然後最終作為靜態文件提供給用戶。

縮小

當您的資產被縮小時,應用程序會刪除空格、縮進、新行、長變量名和代碼註釋,以使文件盡可能小。這有時被稱為“醜化”您的代碼,因為它刪除了許多易於閱讀的格式。雖然看起來很奇怪,但您的代碼在縮小後仍然可以正常工作。

以下是縮小之前的一些 CSS 代碼示例:

html {
    box-sizing: border-box;
}
*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}
body {
    background: seagreen;
    font-family: sans-serif;
}
.wrapper {
    padding: 1rem;
    border-radius: 1rem;
    display: flex;
}

這是相同的代碼,但縮小了:

html{box-sizing:border-box}*,::after,::before{box-sizing:inherit;margin:0;padding:0}body{background:#2e8b57;font-family:sans-serif}.wrapper{padding:1rem;border-radius:1rem}

縮小的文件不應該被編輯。由於縮小後的代碼包含在一個新文件中,因此它是在生產站點上使用的那個。相反,如果您需要編輯,請編輯原始未縮小文件,重新保存並重新編譯縮小文件,然後在服務器上替換它以反映您的更改。

捆綁

在開發過程中將代碼編寫在單獨的文件中是一種常見的做法。這使您可以使用更小、更易於管理的代碼塊,而不是使用包含站點所有代碼的單個單一文件。

例如,您可能有多個腳本和模塊在單擊按鈕時相互調用。您可能還為站點上的不同頁面和元素設置了多個 CSS 樣式表。此外,您的腳本和 CSS 的功能也可能相互依賴。當您的網站處於生產狀態時,必須單獨請求所有這些資源可能會減慢您的網站速度,因為每個資源都會給渲染過程增加一點延遲。這就是捆綁設計要解決的問題。

代碼捆綁是將代碼組合和合併到單個文件中的過程。例如,如果您的 JavaScript 函數、模塊和組件包含在單獨的文件中,則捆綁會將它們合併到一個 JavaScript 文件中。如果您使用 CSS 預處理器(如SASS )編寫樣式,情況也是如此,其中代碼是分開的。捆綁還會將這些文件編譯成單個 CSS 文件。

最後,捆綁和縮小一樣,是一個優化過程。通過捆綁瀏覽器可能只需要請求幾個,而不是請求多個腳本或樣式表。

不同的打包程序使用不同的流程將您的代碼合併在一起。那裡有很多捆綁器,每個 SSG 通常都與一個集成在一起。rollup.jsParcelwebpack是捆綁器的示例。像 Gatsby 和 Next.js 這樣的 SSG 使用 webpack 來捆綁他們的資產。

轉譯和編譯

轉譯和編譯過程實質上是將您的代碼轉換為任何 Web 瀏覽器都可以讀取和執行的文件。

通常,編譯器是將高級編程語言翻譯和轉換為低級編程語言的應用程序。例如,編譯器可以將 C 代碼翻譯成 1 和 0 的機器代碼,以便運行程序。

轉譯器是一種將代碼從一種編程語言翻譯成另一種等效編程語言的編譯器。例如,轉譯過程可能意味著將用 Typescript 編程語言編寫的代碼轉換為 JavaScript 語言。由於網絡瀏覽器不理解 Typescript 代碼,因此需要將其翻譯成 JavaScript 以便瀏覽器執行它。

流行的 JavaScript 應用程序Babel就是這些概念在實踐中的一個例子。Babel 盡最大努力確保 JavaScript 代碼在舊瀏覽器和現代瀏覽器中都是可讀的。另一個例子是Autoprefixer。它檢測較新的 CSS 功能並插入適當的後備以支持更廣泛的瀏覽器。

無論您是使用遺留代碼庫還是使用最新語法,轉譯和編譯過程都會為瀏覽器解釋代碼以實現最深入的瀏覽器支持,以便用戶可以按照您的預期與頁面交互。

構建命令

創建完站點後,您可以build在終端中輸入 SSG 的特定命令。此命令配置為縮小、轉譯、編譯、捆綁您的代碼,以及執行提供靜態文件所需的任何其他任務。例如,如果您使用的是 Gatsby SSG,您可以在gatsby build終端中輸入以啟動構建。

在構建過程中,您可能會注意到終端輸出構建的進度。這包括有關如何處理文件的具體細節。在此過程中,您可能還會遇到錯誤消息,告訴您發生故障的位置。如果一切運行成功,終端會在構建完成後告訴您。

在成功構建期間,呈現站點所需的靜態 HTML、CSS 和 JavaScript 文件放置在publicordist目錄中。此文件夾的確切名稱取決於您的配置。

建立您的網站後,您最終可能會得到與此類似的網站結構:

your_project_root
├── node_modules
├── public
├── src
│   ├── css
│   │   └── styles.css
│   ├── js
│   │   └── script1.js
│   │   └── module.js
│   ├── images
│   │   ├── dog.jpg
│   │   └── cat.jpg
│   ├── _includes
│   │   ├── partials
│   │   │   └── about.html
│   │   └── layouts
│   │       └── base.html
│   ├── posts
│   │   ├── post-1.md
│   │   ├── post-2.md
│   │   ├── post-3.md
│   └── index.html
├── .your_SSG_config.js
├── package.json
├── package-lock.json
├── README.md
└── .gitignore

請注意,根據您使用的 SSG,您的文件結構可能包含不同的文件和目錄。儘管在使用 SSG 創建站點時可能需要進行大量的前期工作,但收益是靜態文件將被提供,無需額外的服務器進程,從而為您的用戶創造更快的加載體驗。

超越靜態

靜態站點生成器本身就是強大的工具。再加上其他網絡技術,它們可以模糊靜態和動態之間的界限。SSG 在Jamstack 生態系統中扮演著不可或缺的角色。與 LAMP 或 MEAN 堆棧一樣,Jamstack 是另一種創建和構建網站或 Web 應用程序的方式。它利用 SSG 的強大功能創建靜態 HTML,並利用 JavaScript 和 API 調用連接到後端服務和數據庫。

SSG 也可以與 CMS 協同工作。這種另一種開發模式稱為無頭 CMS。使用無頭 CMS,您可以存儲數據,有一個圖形用戶界面可以與內容交互,以及一個 API 端點可以連接。在此模型中,您將從後端管理系統中移除表示層——“頭部”。SSG 填補了表示層的這一缺失角色。例如,編輯器可以使用 CMS 界面創建內容,然後將其存儲在數據庫中。然後,開發人員可以通過 API 端點訪問該內容並創建一個視圖以向用戶顯示該內容。

SSG 也是可擴展的。使用不同的插件和模塊,您的 SSG 可以變得比最初的產品更多。例如,在Eleventy中,您可以使用插件來優化和調整圖像大小,甚至可以利用無服務器功能來創建動態頁面。根據您的需要,SSG 可以增加複雜性和功能,同時仍輸出靜態文件。

結論

在這篇概念性文章中,您了解了靜態站點生成器用於創建網站的一些底層技術。有了這些信息,您現在可以更好地了解如何使用 SSG 創建靜態站點。

原文來源https://www.digitalocean.com

#html #css #javascript #webdev #ssg

What is GEEK

Buddha Community

靜態站點生成器 (SSG):如何使用 SSG 創建網站
许 志强

许 志强

1658354160

靜態站點生成器 (SSG):如何使用 SSG 創建網站

在本教程中,您將了解靜態站點生成器 (SSG) 以及如何使用 SSG 創建靜態站點。SSG 是一種應用程序,可自動創建呈現網站所需的 HTML、CSS 和 JavaScript 文件。 

有許多用於創建網站的軟件和工具。一種迅速成為主流的工具稱為靜態站點生成器(SSG)。SSG 是一種應用程序,可自動創建呈現網站所需的 HTML、CSS 和 JavaScript 文件。SSG 因其靈活性而廣受歡迎。它可以用作獨立工具,也可以深度集成到您選擇的 Web 架構中。

為了概述支持 SSG 的底層 Web 技術以及使它們變得有用的特性,本文將探討與“靜態”、“站點”和“生成器”相關的各種概念。

靜止的

當用戶查看網站上的頁面時,會向 Web 服務器發出請求。Web 服務器根據該請求返回特定文件。

例如,假設用戶請求傳統或動態網站上的頁面。服務器可能需要查詢數據庫,將結果發送到模板應用程序,然後最終生成 HTML 文件以呈現給瀏覽器。每次在此體系結構中發出請求時,都會按需生成此頁面。

相反,在靜態站點上,請求的文件已經位於 Web 服務器上。這就是術語靜態的含義:用於呈現站點的文件是不變的,因為它們已經包含 HTML、CSS 和 JavaScript 代碼。無需按需轉換、生成或轉換,因為它們是在頁面請求之前生成的。

需要明確的是,靜態站點仍然可以是交互式的。JavaScript 代碼、CSS 動畫、視頻和音頻元素以及 JSON 等數據格式仍然受支持,並且可以在靜態站點上正常運行。唯一的區別是文件本身是提前生成的,而不是按需生成的。

您可以將登錄頁面或博客文章視為靜態站點的示例。另一方面,體育直播頁面或評論部分是動態網站的示例。對於像這樣的動態站點,您需要一個服務器或一個 API 調用來執行額外的處理,以便正確地向用戶呈現一個元素。您可以閱讀有關渲染範圍的信息,以更好地了解網站如何使用各種技術向用戶展示內容。

地點

在任何網站上,您都需要一種組織和創建內容的方法。靜態站點生成器提供了一種簡化的方式來完成此任務。使用 SSG,您可以創建和組織站點結構,同時還可以直接訪問內容。許多 SSG 共有的用於幫助管理所有這些的集成技術之一稱為模板引擎

模板引擎

模板引擎是為出現在您網站上的常見元素創建模板的軟件。模板引擎不是為您網站上的每個頁面硬編碼重複的 HTML,而是幫助為您的所有頁面創建這些元素。例如,如果您的網站上的每個頁面都需要頁眉和頁腳,則可以編寫一次此代碼,然後將其應用於帶有模板代碼的頁面。您還可以使用變量和表達式來構建或替換模板中的值。

請記住,許多 SSG 允許您選擇模板語言,而有些則帶有已經為您選擇的前端框架和模板語言。NunjucksPugLiquidBlade等模板引擎為您提供了不同的模板創建方式。

以下是Nunjucks 模板引擎中的基本模板示例:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Your Website</title>
    </head>
    <body>
        <header>
            {% block header %}
                This is your header content
            {% endblock %}
        </header>

        <div id="content">{% block content %}{% endblock %}</div>
        
        <footer>
            {% block footer %}
                This is your footer content
            {% endblock %}
        </footer>
    </body>
</html>

您可以將基本模板視為佔位符的容器。{% block %}標籤是模板代碼塊。這些可以包含內容或留空,以便被子模板填充或覆蓋。請注意,每個{% block %}標籤都附加了一個變量名。例如,嵌套在<header>HTML 標記內,有一個{% block header%}標記指定此塊名為 header。您可以隨意命名,但最好使用描述性變量名稱以避免混淆。

模板引擎執行一些繁重的工作來創建這些可重用的模板,然後將這些模板轉換為 HTML。這些模板文件通常放在一個名為layouts或的目錄中templates。因為模板是可重用的,所以您通常不會直接在模板文件中編寫內容。對於內容,您可以創建所謂的Markdown文件。

降價

Markdown 是一種標記語言,用於在將純文本文檔轉換為 HTML 之前添加格式。雖然不能完全替代編寫 HTML,但 Markdown 可以幫助您編寫和構建您的內容,而無需過多擔心 HTML 標籤。

例如,如果你需要在 HTML 中創建一個無序列表,你必須創建一個<ul>標籤,然後嵌套在標籤中的列表元素<li>。在 Markdown 中,您可以使用星號創建此列表*

<ul>
    <li>Thing 1</li>
    <li>Thing 2</li>
    <li>Thing 3</li>
</ul>
* Thing 1
* Thing 2 
* Thing 3

除了包含的代碼庫之外,許多 SSG 允許您在 Markdown 中編寫所有內容。這樣,您可以專注於編寫內容而不是代碼,儘管您可以選擇在 Markdown 文件中編寫純 HTML。這些文件通常稱為內容文件,通常存儲在內容特定目錄中。當與模板的強大功能和前端使用的元數據配合使用時,您的內容將相應地呈現。

元數據和前沿

SSG 工具箱中的另一個強大工具是有助於配置和格式化元數據的語言。YAMLTOMLJSON是用於在內容文件的前端定義元數據的語言。前端是描述或定義有關內容的屬性的結構化數據。您還可以使用此數據應用模板中的特定佈局。此數據通常位於任何給定內容文件的最頂部。

例如,您可以使用 front matter 定義標題、作者、提供內容的簡要描述,並使用模板中的特定佈局:

---
title: Front Matter Matters
author: Author Name
description: Write out your description here
layout: base.html
---

此示例使用 YAML 語言來定義頁面的內容。頂部和底部的三個連字符---封裝了您的前端元數據。如果沒有這些連字符,您的元數據將無法正常工作。實際上,您可以包含更多或更少的元數據元素。與模板引擎和 Markdown 配合使用,您的內容將根據您構建網站的方式呈現到頁面。

隨著站點的增長,構建前端內容可能會變得越來越複雜。儘管本文無法解釋錯綜複雜的內容,但您可以使用前端來創建鏈接、標籤等來自定義您的網站。

發電機

在為您的網站構建和創建內容之後,剩下的就是構建它。在此構建過程中,您的所有資產(包括 CSS、圖像、JavaScript、元數據等)都會輸入管道並拼湊在一起。這些資產通常被縮小、轉譯、編譯、捆綁,然後最終作為靜態文件提供給用戶。

縮小

當您的資產被縮小時,應用程序會刪除空格、縮進、新行、長變量名和代碼註釋,以使文件盡可能小。這有時被稱為“醜化”您的代碼,因為它刪除了許多易於閱讀的格式。雖然看起來很奇怪,但您的代碼在縮小後仍然可以正常工作。

以下是縮小之前的一些 CSS 代碼示例:

html {
    box-sizing: border-box;
}
*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}
body {
    background: seagreen;
    font-family: sans-serif;
}
.wrapper {
    padding: 1rem;
    border-radius: 1rem;
    display: flex;
}

這是相同的代碼,但縮小了:

html{box-sizing:border-box}*,::after,::before{box-sizing:inherit;margin:0;padding:0}body{background:#2e8b57;font-family:sans-serif}.wrapper{padding:1rem;border-radius:1rem}

縮小的文件不應該被編輯。由於縮小後的代碼包含在一個新文件中,因此它是在生產站點上使用的那個。相反,如果您需要編輯,請編輯原始未縮小文件,重新保存並重新編譯縮小文件,然後在服務器上替換它以反映您的更改。

捆綁

在開發過程中將代碼編寫在單獨的文件中是一種常見的做法。這使您可以使用更小、更易於管理的代碼塊,而不是使用包含站點所有代碼的單個單一文件。

例如,您可能有多個腳本和模塊在單擊按鈕時相互調用。您可能還為站點上的不同頁面和元素設置了多個 CSS 樣式表。此外,您的腳本和 CSS 的功能也可能相互依賴。當您的網站處於生產狀態時,必須單獨請求所有這些資源可能會減慢您的網站速度,因為每個資源都會給渲染過程增加一點延遲。這就是捆綁設計要解決的問題。

代碼捆綁是將代碼組合和合併到單個文件中的過程。例如,如果您的 JavaScript 函數、模塊和組件包含在單獨的文件中,則捆綁會將它們合併到一個 JavaScript 文件中。如果您使用 CSS 預處理器(如SASS )編寫樣式,情況也是如此,其中代碼是分開的。捆綁還會將這些文件編譯成單個 CSS 文件。

最後,捆綁和縮小一樣,是一個優化過程。通過捆綁瀏覽器可能只需要請求幾個,而不是請求多個腳本或樣式表。

不同的打包程序使用不同的流程將您的代碼合併在一起。那裡有很多捆綁器,每個 SSG 通常都與一個集成在一起。rollup.jsParcelwebpack是捆綁器的示例。像 Gatsby 和 Next.js 這樣的 SSG 使用 webpack 來捆綁他們的資產。

轉譯和編譯

轉譯和編譯過程實質上是將您的代碼轉換為任何 Web 瀏覽器都可以讀取和執行的文件。

通常,編譯器是將高級編程語言翻譯和轉換為低級編程語言的應用程序。例如,編譯器可以將 C 代碼翻譯成 1 和 0 的機器代碼,以便運行程序。

轉譯器是一種將代碼從一種編程語言翻譯成另一種等效編程語言的編譯器。例如,轉譯過程可能意味著將用 Typescript 編程語言編寫的代碼轉換為 JavaScript 語言。由於網絡瀏覽器不理解 Typescript 代碼,因此需要將其翻譯成 JavaScript 以便瀏覽器執行它。

流行的 JavaScript 應用程序Babel就是這些概念在實踐中的一個例子。Babel 盡最大努力確保 JavaScript 代碼在舊瀏覽器和現代瀏覽器中都是可讀的。另一個例子是Autoprefixer。它檢測較新的 CSS 功能並插入適當的後備以支持更廣泛的瀏覽器。

無論您是使用遺留代碼庫還是使用最新語法,轉譯和編譯過程都會為瀏覽器解釋代碼以實現最深入的瀏覽器支持,以便用戶可以按照您的預期與頁面交互。

構建命令

創建完站點後,您可以build在終端中輸入 SSG 的特定命令。此命令配置為縮小、轉譯、編譯、捆綁您的代碼,以及執行提供靜態文件所需的任何其他任務。例如,如果您使用的是 Gatsby SSG,您可以在gatsby build終端中輸入以啟動構建。

在構建過程中,您可能會注意到終端輸出構建的進度。這包括有關如何處理文件的具體細節。在此過程中,您可能還會遇到錯誤消息,告訴您發生故障的位置。如果一切運行成功,終端會在構建完成後告訴您。

在成功構建期間,呈現站點所需的靜態 HTML、CSS 和 JavaScript 文件放置在publicordist目錄中。此文件夾的確切名稱取決於您的配置。

建立您的網站後,您最終可能會得到與此類似的網站結構:

your_project_root
├── node_modules
├── public
├── src
│   ├── css
│   │   └── styles.css
│   ├── js
│   │   └── script1.js
│   │   └── module.js
│   ├── images
│   │   ├── dog.jpg
│   │   └── cat.jpg
│   ├── _includes
│   │   ├── partials
│   │   │   └── about.html
│   │   └── layouts
│   │       └── base.html
│   ├── posts
│   │   ├── post-1.md
│   │   ├── post-2.md
│   │   ├── post-3.md
│   └── index.html
├── .your_SSG_config.js
├── package.json
├── package-lock.json
├── README.md
└── .gitignore

請注意,根據您使用的 SSG,您的文件結構可能包含不同的文件和目錄。儘管在使用 SSG 創建站點時可能需要進行大量的前期工作,但收益是靜態文件將被提供,無需額外的服務器進程,從而為您的用戶創造更快的加載體驗。

超越靜態

靜態站點生成器本身就是強大的工具。再加上其他網絡技術,它們可以模糊靜態和動態之間的界限。SSG 在Jamstack 生態系統中扮演著不可或缺的角色。與 LAMP 或 MEAN 堆棧一樣,Jamstack 是另一種創建和構建網站或 Web 應用程序的方式。它利用 SSG 的強大功能創建靜態 HTML,並利用 JavaScript 和 API 調用連接到後端服務和數據庫。

SSG 也可以與 CMS 協同工作。這種另一種開發模式稱為無頭 CMS。使用無頭 CMS,您可以存儲數據,有一個圖形用戶界面可以與內容交互,以及一個 API 端點可以連接。在此模型中,您將從後端管理系統中移除表示層——“頭部”。SSG 填補了表示層的這一缺失角色。例如,編輯器可以使用 CMS 界面創建內容,然後將其存儲在數據庫中。然後,開發人員可以通過 API 端點訪問該內容並創建一個視圖以向用戶顯示該內容。

SSG 也是可擴展的。使用不同的插件和模塊,您的 SSG 可以變得比最初的產品更多。例如,在Eleventy中,您可以使用插件來優化和調整圖像大小,甚至可以利用無服務器功能來創建動態頁面。根據您的需要,SSG 可以增加複雜性和功能,同時仍輸出靜態文件。

結論

在這篇概念性文章中,您了解了靜態站點生成器用於創建網站的一些底層技術。有了這些信息,您現在可以更好地了解如何使用 SSG 創建靜態站點。

原文來源https://www.digitalocean.com

#html #css #javascript #webdev #ssg

Static Site Generator (SSG): How to Create a Website with SSG

In this tutorial, you'll learn about Static Site Generator (SSG) and how static sites are create with SSG. A SSG is an application that automatically creates the HTML, CSS, and JavaScript files necessary to render a website. 

There are a number of software and tools used to create websites. One tool that is fast becoming a mainstay is called a Static Site Generator (SSG). A SSG is an application that automatically creates the HTML, CSS, and JavaScript files necessary to render a website. SSGs have gained popularity because of their flexibility. It can be used as a stand-alone tool or deeply integrated into a web architecture of your choice.

To outline the underlying web technologies that power SSGs and the features that make them useful, this article will explore various concepts as they relate to ‘static,’ ‘site,’ and ‘generator.’

Read more https://www.digitalocean.com

#html #css #javascript #webdev #ssg

Static Site Generator (SSG): Como criar um site com SSG

Neste tutorial, você aprenderá sobre o Static Site Generator (SSG) e como os sites estáticos são criados com um SSG. Um SSG é um aplicativo que cria automaticamente os arquivos HTML, CSS e JavaScript necessários para renderizar um site. 

Há uma série de softwares e ferramentas usadas para criar sites. Uma ferramenta que está rapidamente se tornando um pilar é chamada Static Site Generator (SSG). Um SSG é um aplicativo que cria automaticamente os arquivos HTML, CSS e JavaScript necessários para renderizar um site. Os SSGs ganharam popularidade devido à sua flexibilidade. Ele pode ser usado como uma ferramenta autônoma ou profundamente integrado em uma arquitetura web de sua escolha.

Para delinear as tecnologias da Web subjacentes que alimentam os SSGs e os recursos que os tornam úteis, este artigo explorará vários conceitos relacionados a 'estático', 'site' e 'gerador'.

Estático

Quando um usuário visualiza uma página em um site, uma solicitação é feita a um servidor web. O servidor web responde de volta com um arquivo específico com base nessa solicitação.

Por exemplo, digamos que um usuário solicite uma página em um site tradicional ou dinâmico. O servidor pode precisar consultar um banco de dados, enviar os resultados para um aplicativo de modelagem e, finalmente, gerar o arquivo HTML para renderizar no navegador. Esta página é gerada, sob demanda, cada vez que uma requisição é feita nesta arquitetura.

Por outro lado, em um site estático, os arquivos solicitados já estão no servidor web. Isto é o que significa o termo static : os arquivos usados ​​para renderizar o site são imutáveis ​​porque já contêm o código HTML, CSS e JavaScript. Não há nada para converter, gerar ou transformar sob demanda porque eles foram gerados antes da solicitação da página.

Para ser claro, um site estático ainda pode ser interativo. Coisas como código JavaScript, animações CSS, elementos de vídeo e áudio e formatos de dados como JSON ainda são suportados e podem ser executados normalmente em um site estático. A única diferença é que os próprios arquivos são gerados antecipadamente em vez de serem gerados sob demanda.

Você pode pensar em uma landing page ou um post de blog como exemplos de um site estático. Por outro lado, uma página de esportes ao vivo ou uma seção de comentários são exemplos de sites dinâmicos. Para sites dinâmicos como esses, você precisa de um servidor ou de uma chamada de API para realizar processamento adicional para renderizar um elemento para o usuário corretamente. Você pode ler sobre o espectro de renderização para entender melhor como os sites usam uma variedade de técnicas para revelar conteúdo aos usuários.

Local

Em qualquer site, você precisa de uma maneira de organizar e criar conteúdo. Os geradores de sites estáticos oferecem uma maneira simplificada de realizar essa tarefa. Com um SSG, você pode criar e organizar a estrutura do seu site, além de ter acesso direto ao conteúdo. Uma das tecnologias integrais comuns a muitos SSGs para ajudar a gerenciar tudo isso é chamada de mecanismo de modelo .

Mecanismo de modelo

Um mecanismo de modelo é um software que cria modelos para elementos comuns que aparecem em seu site. Em vez de codificar HTML repetitivo para cada página do seu site, um mecanismo de modelo auxilia na criação desses elementos para todas as suas páginas. Por exemplo, se você tiver um cabeçalho e um rodapé que devem estar em todas as páginas do seu site, você pode escrever esse código uma vez e aplicá-lo às páginas com código de modelo. Você também pode usar variáveis ​​e expressões para criar ou substituir valores em um modelo.

Tenha em mente que muitos SSGs permitem que você escolha sua linguagem de modelagem, enquanto alguns vêm com uma estrutura de front-end e uma linguagem de modelagem já selecionada para você. Os mecanismos de modelo como Nunjucks , Pug , Liquid e Blade oferecem diferentes maneiras de criar modelos.

Aqui está um exemplo de um modelo base no mecanismo de modelo Nunjucks:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Your Website</title>
    </head>
    <body>
        <header>
            {% block header %}
                This is your header content
            {% endblock %}
        </header>

        <div id="content">{% block content %}{% endblock %}</div>
        
        <footer>
            {% block footer %}
                This is your footer content
            {% endblock %}
        </footer>
    </body>
</html>

Você pode pensar em um modelo base como um contêiner de espaços reservados. As {% block %}tags são blocos de código de modelo. Eles podem conter conteúdo ou ser deixados vazios para serem preenchidos ou substituídos por modelos filhos . Observe que cada {% block %}tag tem um nome de variável anexado. Por exemplo, aninhada dentro da <header>tag HTML, há uma {% block header%}tag que especifica que esse bloco é denominado header. Você pode nomear isso como quiser, no entanto, é uma prática recomendada usar nomes de variáveis ​​descritivos para evitar confusão.

Os mecanismos de modelo realizam um trabalho pesado para criar esses modelos reutilizáveis ​​que são transformados em HTML. Esses arquivos de modelo geralmente são colocados em um diretório chamado layoutsou templates. Como os modelos devem ser reutilizáveis, você não costuma escrever conteúdo diretamente em seus arquivos de modelo. Para conteúdo, você pode criar os chamados arquivos Markdown .

Remarcação

Markdown é uma linguagem de marcação que é usada para adicionar formatação a documentos de texto simples antes de serem convertidos em HTML. Embora não seja um substituto completo para escrever HTML, o Markdown pode ajudá-lo a escrever e estruturar seu conteúdo sem se preocupar muito com tags HTML.

Por exemplo, se você precisa criar uma lista não ordenada em HTML, você precisa criar uma <ul>tag e, aninhada dentro dela, os elementos da sua lista são agrupados com a <li>tag. No Markdown, você pode criar essa lista com um asterisco *.

<ul>
    <li>Thing 1</li>
    <li>Thing 2</li>
    <li>Thing 3</li>
</ul>
* Thing 1
* Thing 2 
* Thing 3

Muitos SSGs permitem que você escreva todo o seu conteúdo no Markdown, além da base de código abrangente. Dessa forma, você pode se concentrar em escrever conteúdo em vez de código, embora tenha a opção de escrever HTML simples em um arquivo Markdown. Esses arquivos são geralmente chamados de arquivos de conteúdo e normalmente são armazenados em um diretório específico de conteúdo. Seu conteúdo será renderizado de acordo quando combinado com o poder de seus templates e os metadados usados ​​no front Matter .

Metadados e Front Matter

Outra ferramenta poderosa na caixa de ferramentas SSG são as linguagens que auxiliam na configuração e formatação de metadados. YAML , TOML e JSON são as linguagens usadas para definir metadados no conteúdo principal de seus arquivos de conteúdo. Front Matter são os dados estruturados que descrevem ou definem atributos sobre o conteúdo. Você também pode usar esses dados para aplicar um layout específico de seus modelos. Esses dados geralmente ficam no topo de qualquer arquivo de conteúdo.

Por exemplo, com o assunto principal, você pode definir um título, um autor, fornecer uma breve descrição do seu conteúdo e usar um layout específico de seus modelos:

---
title: Front Matter Matters
author: Author Name
description: Write out your description here
layout: base.html
---

Este exemplo usa a linguagem YAML para definir o conteúdo da página. Os três hífens ---na parte superior e inferior encapsulam os metadados do assunto principal. Sem esses hífens, seus metadados não funcionarão. Na prática, você pode incluir mais ou menos elementos de metadados. Emparelhado com um mecanismo de modelagem e Markdown, seu conteúdo será renderizado em uma página de acordo com a forma como você estruturou seu site.

A estruturação de sua matéria de frente pode se tornar cada vez mais complexa à medida que seu site cresce. Embora esteja além deste artigo explicar os meandros, você pode usar a matéria prima para criar links, tags e muito mais para personalizar seu site.

Gerador

Depois de estruturar e criar conteúdo para o seu site, o que resta é construí-lo. Durante esse processo de construção, todos os seus ativos – incluindo coisas como CSS, imagens, JavaScript, metadados e muito mais – são inseridos em um pipeline e reunidos. Esses ativos são normalmente reduzidos, transcompilados, compilados, agrupados e, em última análise, servidos a um usuário como arquivos estáticos.

Minificação

Quando seus ativos são reduzidos , um aplicativo remove espaços em branco, recuo, novas linhas, nomes de variáveis ​​longos e comentários de código para manter o arquivo o menor possível. Isso às vezes é chamado de “enfeitiçar” seu código, pois remove grande parte da formatação que facilita a leitura. Embora possa parecer estranho, seu código ainda funciona da mesma forma quando reduzido.

O seguinte é um exemplo de algum código CSS antes da minificação:

html {
    box-sizing: border-box;
}
*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}
body {
    background: seagreen;
    font-family: sans-serif;
}
.wrapper {
    padding: 1rem;
    border-radius: 1rem;
    display: flex;
}

Aqui está o mesmo código, mas reduzido:

html{box-sizing:border-box}*,::after,::before{box-sizing:inherit;margin:0;padding:0}body{background:#2e8b57;font-family:sans-serif}.wrapper{padding:1rem;border-radius:1rem}

Arquivos reduzidos não devem ser editados. Como o código minificado está contido em um novo arquivo, é aquele que é usado no site de produção. Em vez disso, se você precisar de edições, edite o arquivo não reduzido original, salve novamente e recompile o arquivo reduzido e substitua-o no servidor para refletir suas alterações.

Agrupamento

É uma prática comum escrever código em arquivos separados durante o desenvolvimento. Isso permite que você use pedaços de código menores e mais gerenciáveis ​​em vez de um único arquivo monolítico contendo todo o código do seu site.

Por exemplo, você pode ter vários scripts e módulos que chamam uns aos outros quando um botão é clicado. Você também pode ter várias folhas de estilo CSS para as diferentes páginas e elementos do seu site. Além disso, também pode ser verdade que seus scripts e CSS dependam um do outro para funcionalidade. Quando seu site está em produção, ter que solicitar todos esses recursos individualmente pode deixar seu site mais lento, pois cada um adiciona um pouco de latência ao processo de renderização. Isso é o que o empacotamento foi projetado para resolver.

Agrupamento de código é o processo de combinar e mesclar código em um único arquivo. Por exemplo, se suas funções, módulos e componentes JavaScript estiverem contidos em arquivos separados, o agrupamento os mesclará em um arquivo JavaScript. O mesmo acontece se você escrever seus estilos usando um pré-processador CSS, como SASS , onde o código é separado. O agrupamento também compilará esses arquivos em um único arquivo CSS.

No final, agrupar, como minificar, é um processo de otimização. Em vez de solicitar vários scripts ou folhas de estilo, ao agrupar o navegador, pode ser necessário solicitar apenas alguns.

Diferentes empacotadores usam processos diferentes para mesclar seu código. Existem alguns bundlers por aí e cada SSG geralmente é integrado a um. rollup.js , Parcel e webpack são exemplos de empacotadores. SSGs como Gatsby e Next.js usam webpack para agrupar seus ativos.

Transpilar e compilar

O processo de transcompilação e compilação essencialmente transforma seu código em arquivos que qualquer navegador da Web pode ler e executar.

Em geral, um compilador é um aplicativo que traduz e converte uma linguagem de programação de nível superior em uma linguagem de programação de nível inferior. Por exemplo, um compilador pode traduzir código C em 1's e 0's, código de máquina, para executar um programa.

Um transpilador é um tipo de compilador que traduz o código de uma linguagem de programação para outra linguagem de programação equivalente. Como exemplo, o processo de transpilação pode significar transformar o código escrito na linguagem de programação Typescript na linguagem JavaScript. Como os navegadores da Web não entendem o código Typescript, ele precisa ser traduzido para JavaScript para que um navegador o execute.

O popular aplicativo JavaScript chamado Babel é um exemplo desses conceitos na prática. O Babel faz o possível para garantir que o código JavaScript seja legível em navegadores antigos e modernos. Outro exemplo disso é o Autoprefixer . Ele detecta recursos CSS mais recentes e insere os substitutos adequados para um suporte mais amplo ao navegador.

Esteja você trabalhando em uma base de código herdada ou com a sintaxe mais recente, o processo de transcompilação e compilação interpreta o código para que o navegador obtenha o suporte mais profundo possível para que os usuários possam interagir com a página conforme pretendido.

Comando de compilação

Quando terminar de criar seu site, você pode digitar o buildcomando específico do seu SSG em seu terminal. Este comando está configurado para minificar, transpilar, compilar, agrupar seu código, bem como executar quaisquer outras tarefas necessárias para servir seus arquivos estáticos. Por exemplo, se você estiver usando o Gatsby SSG, digite em gatsby buildseu terminal para iniciar a compilação.

Durante o processo de compilação, você pode observar o terminal exibindo o progresso da compilação. Isso inclui detalhes específicos sobre como os arquivos estão sendo processados. Você também pode encontrar mensagens de erro durante esse processo informando onde ocorreu a falha. Se tudo for executado com sucesso, o terminal informará após a conclusão da compilação.

Durante uma compilação bem-sucedida, os arquivos estáticos HTML, CSS e JavaScript necessários para renderizar o site são colocados em um diretório publicou dist. O nome exato desta pasta dependerá de sua configuração.

Depois de construir seu site, você pode acabar com uma estrutura de site semelhante a esta:

your_project_root
├── node_modules
├── public
├── src
│   ├── css
│   │   └── styles.css
│   ├── js
│   │   └── script1.js
│   │   └── module.js
│   ├── images
│   │   ├── dog.jpg
│   │   └── cat.jpg
│   ├── _includes
│   │   ├── partials
│   │   │   └── about.html
│   │   └── layouts
│   │       └── base.html
│   ├── posts
│   │   ├── post-1.md
│   │   ├── post-2.md
│   │   ├── post-3.md
│   └── index.html
├── .your_SSG_config.js
├── package.json
├── package-lock.json
├── README.md
└── .gitignore

Observe que, dependendo do SSG que você usa, sua estrutura de arquivos pode incluir diferentes arquivos e diretórios. Embora possa haver uma quantidade significativa de trabalho inicial ao criar um site com um SSG, a recompensa são os arquivos estáticos que serão servidos, sem processos de servidor adicionais, criando uma experiência de carregamento mais rápida para seus usuários.

Além da Estática

Geradores de sites estáticos por si só são ferramentas poderosas. Juntamente com outras tecnologias da web, eles podem borrar a linha entre estático e dinâmico. Os SSGs desempenham um papel fundamental no ecossistema Jamstack . Como uma pilha LAMP ou MEAN, o Jamstack é outra maneira de criar e arquitetar um site ou aplicativo da web. Ele usa o poder dos SSGs para criar HTML estático e utiliza JavaScript e chamadas de API para se conectar a serviços de back-end e bancos de dados.

Um SSG também pode trabalhar em conjunto com um CMS. Este outro modelo de desenvolvimento é chamado de CMS headless . Com um CMS headless, você tem uma maneira de armazenar dados, tem uma interface gráfica do usuário para interagir com o conteúdo e um endpoint de API para se conectar. Neste modelo, você está removendo a camada de apresentação – a “cabeça” – do sistema de gerenciamento de back-end. Um SSG preenche essa função ausente para a camada de apresentação. Por exemplo, um editor pode usar a interface do CMS para criar conteúdo que será armazenado no banco de dados. Um desenvolvedor pode acessar esse conteúdo por meio do endpoint da API e criar uma visualização para exibir o conteúdo aos usuários.

SSGs também são extensíveis. Com diferentes plugins e módulos, seu SSG pode se tornar algo um pouco mais do que sua oferta inicial. Por exemplo, no Eleventy , você pode usar um plugin para otimizar e redimensionar suas imagens e até mesmo utilizar funções serverless para criar páginas dinâmicas. Dependendo de suas necessidades, um SSG pode crescer em complexidade e funcionalidade, enquanto ainda gera arquivos estáticos.

Conclusão

Neste artigo conceitual, você aprendeu sobre algumas das tecnologias subjacentes que os geradores de sites estáticos usam para criar um site. Com essas informações, agora você entende melhor como os sites estáticos são criados com um SSG.

Fonte do artigo original em https://www.digitalocean.com

#html #css #javascript #webdev #ssg

Zenon  Pruschke

Zenon Pruschke

1658303400

Static Site Generator (SSG): So erstellen Sie eine Website mit SSG

In diesem Tutorial erfahren Sie mehr über den Static Site Generator (SSG) und wie statische Sites mit einem SSG erstellt werden. Ein SSG ist eine Anwendung, die automatisch die HTML-, CSS- und JavaScript-Dateien erstellt, die zum Rendern einer Website erforderlich sind. 

Es gibt eine Reihe von Software und Tools, die zum Erstellen von Websites verwendet werden. Ein Tool, das sich schnell zu einer Hauptstütze entwickelt, heißt Static Site Generator (SSG). Ein SSG ist eine Anwendung, die automatisch die HTML-, CSS- und JavaScript-Dateien erstellt, die zum Rendern einer Website erforderlich sind. SSGs haben aufgrund ihrer Flexibilität an Popularität gewonnen. Es kann als eigenständiges Tool verwendet oder tief in eine Webarchitektur Ihrer Wahl integriert werden.

Um die zugrunde liegenden Webtechnologien, die SSGs antreiben, und die Funktionen, die sie nützlich machen, zu skizzieren, werden in diesem Artikel verschiedene Konzepte in Bezug auf „statisch“, „Site“ und „Generator“ untersucht.

Statisch

Wenn ein Benutzer eine Seite auf einer Website anzeigt, wird eine Anfrage an einen Webserver gestellt. Der Webserver antwortet mit einer bestimmten Datei basierend auf dieser Anfrage.

Angenommen, ein Benutzer fordert eine Seite auf einer herkömmlichen oder dynamischen Website an. Der Server muss möglicherweise eine Datenbank abfragen, die Ergebnisse an eine Templating-Anwendung senden und schließlich die HTML-Datei generieren, die im Browser gerendert wird. Diese Seite wird bei Bedarf jedes Mal generiert, wenn in dieser Architektur eine Anforderung gestellt wird.

Auf einer statischen Site befinden sich die angeforderten Dateien hingegen bereits auf dem Webserver. Das ist mit dem Begriff static gemeint : Die Dateien, die zum Rendern der Website verwendet werden, ändern sich nicht, da sie bereits den HTML-, CSS- und JavaScript-Code enthalten. Bei Bedarf muss nichts konvertiert, generiert oder transformiert werden, da sie vor der Seitenanforderung generiert wurden.

Um es klar zu sagen, eine statische Site kann immer noch interaktiv sein. Dinge wie JavaScript-Code, CSS-Animationen, Video- und Audioelemente und Datenformate wie JSON werden weiterhin unterstützt und können wie gewohnt auf einer statischen Website ausgeführt werden. Der einzige Unterschied besteht darin, dass die Dateien selbst im Voraus und nicht bei Bedarf generiert werden.

Als Beispiele für eine statische Website können Sie sich eine Zielseite oder einen Blogbeitrag vorstellen. Andererseits sind eine Live-Sportseite oder ein Kommentarbereich Beispiele für dynamische Websites. Für dynamische Websites wie diese benötigen Sie einen Server oder einen API-Aufruf, um eine zusätzliche Verarbeitung durchzuführen, damit ein Element für den Benutzer korrekt gerendert wird. Sie können sich über das Rendering-Spektrum informieren , um besser zu verstehen, wie Websites eine Vielzahl von Techniken verwenden, um Benutzern Inhalte anzuzeigen.

Seite? ˅

Auf jeder Website benötigen Sie eine Möglichkeit, Inhalte zu organisieren und zu erstellen. Statische Site-Generatoren bieten eine optimierte Möglichkeit, diese Aufgabe zu erfüllen. Mit einem SSG können Sie Ihre Seitenstruktur erstellen und organisieren und haben gleichzeitig direkten Zugriff auf die Inhalte. Eine der integralen Technologien, die viele SSGs gemeinsam haben, um all dies zu verwalten, wird als Vorlagen-Engine bezeichnet .

Template-Engine

Eine Vorlagen-Engine ist eine Software, die Vorlagen für allgemeine Elemente erstellt, die auf Ihrer Website erscheinen. Anstatt sich wiederholendes HTML für jede Seite Ihrer Website fest zu codieren, hilft eine Vorlagen-Engine bei der Erstellung dieser Elemente für alle Ihre Seiten. Wenn Sie beispielsweise eine Kopf- und Fußzeile haben, die auf jeder Seite Ihrer Website vorhanden sein müssen, können Sie diesen Code einmal schreiben und ihn mit Vorlagencode auf die Seiten anwenden. Sie können auch Variablen und Ausdrücke verwenden, um Werte innerhalb einer Vorlage zu erstellen oder zu ersetzen.

Denken Sie daran, dass Sie bei vielen SSGs Ihre Templating-Sprache auswählen können, während einige mit einem Frontend-Framework und einer bereits für Sie ausgewählten Templating-Sprache ausgestattet sind. Vorlagen-Engines wie Nunjucks , Pug , Liquid und Blade bieten Ihnen verschiedene Möglichkeiten, Vorlagen zu erstellen.

Hier ist ein Beispiel für ein Basis-Template in der Template-Engine von Nunjucks:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Your Website</title>
    </head>
    <body>
        <header>
            {% block header %}
                This is your header content
            {% endblock %}
        </header>

        <div id="content">{% block content %}{% endblock %}</div>
        
        <footer>
            {% block footer %}
                This is your footer content
            {% endblock %}
        </footer>
    </body>
</html>

Sie können sich eine Basisvorlage als Container mit Platzhaltern vorstellen. Die {% block %}Tags sind Vorlagencodeblöcke. Diese können Inhalt enthalten oder leer bleiben, um von untergeordneten Vorlagen gefüllt oder überschrieben zu werden . Beachten Sie, dass an jedes {% block %}Tag ein Variablenname angehängt ist. Beispielsweise gibt es innerhalb des <header>HTML-Tags ein {% block header%}Tag, das angibt, dass dieser Block Header heißt. Sie können dies beliebig benennen, es empfiehlt sich jedoch, aussagekräftige Variablennamen zu verwenden, um Verwirrung zu vermeiden.

Vorlagen-Engines leisten einiges an Arbeit, um diese wiederverwendbaren Vorlagen zu erstellen, die dann in HTML umgewandelt werden. Diese Vorlagendateien werden normalerweise in einem Verzeichnis namens layoutsoder abgelegt templates. Da Vorlagen wiederverwendbar sein sollen, schreiben Sie Inhalte nicht oft direkt in Ihre Vorlagendateien. Für Inhalte können Sie sogenannte Markdown- Dateien erstellen.

Abschlag

Markdown ist eine Auszeichnungssprache, die verwendet wird, um Klartextdokumente zu formatieren, bevor sie in HTML konvertiert werden. Obwohl Markdown kein vollständiger Ersatz für das Schreiben von HTML ist, kann es Ihnen helfen, Ihre Inhalte zu schreiben und zu strukturieren, ohne sich zu viele Gedanken über HTML-Tags machen zu müssen.

Wenn Sie beispielsweise eine ungeordnete Liste in HTML erstellen müssen, müssen Sie ein <ul>Tag erstellen, in das dann Ihre Listenelemente eingebettet sind, die mit dem <li>Tag umschlossen sind. In Markdown können Sie diese Liste mit einem Sternchen erstellen *.

<ul>
    <li>Thing 1</li>
    <li>Thing 2</li>
    <li>Thing 3</li>
</ul>
* Thing 1
* Thing 2 
* Thing 3

Viele SSGs ermöglichen es Ihnen, abgesehen von der umfassenden Codebasis, alle Ihre Inhalte in Markdown zu schreiben. Auf diese Weise können Sie sich auf das Schreiben von Inhalten statt auf Code konzentrieren, obwohl Sie die Möglichkeit haben, einfaches HTML in eine Markdown-Datei zu schreiben. Diese Dateien werden normalerweise als Inhaltsdateien bezeichnet und werden typischerweise in einem inhaltsspezifischen Verzeichnis gespeichert. Ihre Inhalte werden entsprechend gerendert, wenn sie mit der Leistungsfähigkeit Ihrer Vorlagen und den in der Titelei verwendeten Metadaten kombiniert werden .

Metadaten und Titelbild

Ein weiteres leistungsstarkes Tool in der SSG-Toolbox sind Sprachen, die beim Konfigurieren und Formatieren von Metadaten helfen. YAML , TOML und JSON sind die Sprachen, die zum Definieren von Metadaten in der Titelseite Ihrer Inhaltsdateien verwendet werden. Front Matter sind die strukturierten Daten, die Attribute zum Inhalt beschreiben oder definieren. Sie können diese Daten auch verwenden, um ein bestimmtes Layout aus Ihren Vorlagen anzuwenden. Diese Daten befinden sich normalerweise ganz oben in einer bestimmten Inhaltsdatei.

Bei der Titelei können Sie beispielsweise einen Titel und einen Autor definieren, eine kurze Beschreibung Ihres Inhalts angeben und ein bestimmtes Layout aus Ihren Vorlagen verwenden:

---
title: Front Matter Matters
author: Author Name
description: Write out your description here
layout: base.html
---

Dieses Beispiel verwendet die YAML-Sprache, um den Inhalt der Seite zu definieren. Die drei Bindestriche ---oben und unten kapseln Ihre Front-Matter-Metadaten. Ohne diese Bindestriche sind Ihre Metadaten nicht funktionsfähig. In der Praxis können Sie mehr oder weniger Metadatenelemente einschließen. Gepaart mit einer Templating-Engine und Markdown wird Ihr Inhalt auf einer Seite gerendert, je nachdem, wie Sie Ihre Website strukturiert haben.

Die Strukturierung Ihrer Titelseite kann mit dem Wachstum Ihrer Website immer komplexer werden. Obwohl es den Rahmen dieses Artikels sprengen würde, die Feinheiten zu erklären, können Sie Titel verwenden, um Links, Tags und mehr zu erstellen, um Ihre Website anzupassen.

Generator

Nachdem Sie Inhalte für Ihre Website strukturiert und erstellt haben, müssen Sie sie nur noch erstellen. Während dieses Erstellungsprozesses werden alle Ihre Assets – einschließlich Dinge wie CSS, Bilder, JavaScript, Metadaten und mehr – in eine Pipeline eingegeben und zusammengesetzt. Diese Assets werden in der Regel minimiert, transpiliert, kompiliert, gebündelt und schließlich einem Benutzer als statische Dateien bereitgestellt.

Minimierung

Wenn Ihre Assets minimiert werden , entfernt eine Anwendung Leerzeichen, Einrückungen, neue Zeilen, lange Variablennamen und Codekommentare , um die Datei so klein wie möglich zu halten. Dies wird manchmal als „hässlich“ Ihres Codes bezeichnet, da ein Großteil der Formatierung entfernt wird, die ihn leichter lesbar macht. Obwohl es seltsam aussehen mag, funktioniert Ihr Code immer noch gleich, wenn er minimiert wird.

Das Folgende ist ein Beispiel für einen CSS-Code vor der Verkleinerung:

html {
    box-sizing: border-box;
}
*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}
body {
    background: seagreen;
    font-family: sans-serif;
}
.wrapper {
    padding: 1rem;
    border-radius: 1rem;
    display: flex;
}

Hier ist der gleiche Code, aber minimiert:

html{box-sizing:border-box}*,::after,::before{box-sizing:inherit;margin:0;padding:0}body{background:#2e8b57;font-family:sans-serif}.wrapper{padding:1rem;border-radius:1rem}

Minimierte Dateien sollen nicht bearbeitet werden. Da der minimierte Code in einer neuen Datei enthalten ist, wird diese auf der Produktionsseite verwendet. Wenn Sie Änderungen benötigen, bearbeiten Sie stattdessen die ursprüngliche, nicht minimierte Datei, speichern und kompilieren Sie die minimierte Datei erneut und ersetzen Sie sie auf dem Server, um Ihre Änderungen widerzuspiegeln.

Bündelung

Es ist üblich, Code während der Entwicklung in separate Dateien zu schreiben. Auf diese Weise können Sie kleinere, besser zu verwaltende Codeblöcke verwenden, anstatt eine einzelne monolithische Datei, die den gesamten Code für Ihre Website enthält.

Beispielsweise könnten Sie mehrere Skripts und Module haben, die sich gegenseitig aufrufen, wenn auf eine Schaltfläche geklickt wird. Möglicherweise haben Sie auch mehrere CSS-Stylesheets für die verschiedenen Seiten und Elemente Ihrer Website. Darüber hinaus kann es auch wahr sein, dass Ihre Skripte und CSS für die Funktionalität voneinander abhängig sind. Wenn sich Ihre Website in der Produktion befindet, kann es Ihre Website verlangsamen, wenn Sie alle diese Ressourcen einzeln anfordern müssen, da jede einzelne eine kleine Latenz zum Rendering-Prozess hinzufügt. Dies ist, was die Bündelung lösen soll.

Codebündelung ist der Prozess des Kombinierens und Zusammenführens von Code in einer einzigen Datei. Wenn beispielsweise Ihre JavaScript-Funktionen, -Module und -Komponenten in separaten Dateien enthalten sind, werden sie beim Bündeln in einer JavaScript-Datei zusammengeführt. Das Gleiche gilt, wenn Sie Ihre Stile mit einem CSS-Präprozessor wie SASS schreiben , bei dem der Code getrennt wird. Beim Bündeln werden diese Dateien auch zu einer einzigen CSS-Datei kompiliert.

Letztendlich ist das Bündeln wie das Minimieren ein Optimierungsprozess. Anstatt mehrere Skripte oder Stylesheets anzufordern, muss der Browser durch die Bündelung möglicherweise nur einige wenige anfordern.

Verschiedene Bundler verwenden unterschiedliche Prozesse, um Ihren Code zusammenzuführen. Es gibt einige Bundler da draußen und jedes SSG ist normalerweise mit einem integriert. rollup.js , Parcel und webpack sind Beispiele für Bundler. SSGs wie Gatsby und Next.js verwenden Webpack, um ihre Assets zu bündeln.

Transpilieren und Kompilieren

Der Transpiling- und Kompilierungsprozess wandelt Ihren Code im Wesentlichen in Dateien um, die jeder Webbrowser lesen und ausführen kann.

Im Allgemeinen ist ein Compiler eine Anwendung, die eine Programmiersprache höherer Ebene in eine Programmiersprache niedrigerer Ebene übersetzt und konvertiert. Beispielsweise könnte ein Compiler C-Code in 1 und 0, Maschinencode, übersetzen, um ein Programm auszuführen.

Ein Transpiler ist eine Art Compiler, der Code von einer Programmiersprache in eine andere äquivalente Programmiersprache übersetzt. Beispielsweise könnte der Transpiling-Prozess bedeuten, dass Code, der in der Programmiersprache Typescript geschrieben wurde, in die Sprache JavaScript umgewandelt wird. Da Webbrowser Typescript-Code nicht verstehen, muss er in JavaScript übersetzt werden, damit ein Browser ihn ausführen kann.

Die beliebte JavaScript-Anwendung namens Babel ist ein praktisches Beispiel für diese Konzepte. Babel tut sein Bestes, um sicherzustellen, dass JavaScript-Code in alten und modernen Browsern gleichermaßen lesbar ist. Ein weiteres Beispiel hierfür ist Autoprefixer . Es erkennt neuere CSS-Funktionen und fügt die richtigen Fallbacks für eine breitere Browserunterstützung ein.

Unabhängig davon, ob Sie innerhalb einer Legacy-Codebasis oder mit der neuesten Syntax arbeiten, der Transpilierungs- und Kompilierungsprozess interpretiert den Code für den Browser, um die tiefstmögliche Browserunterstützung zu erreichen, sodass Benutzer wie beabsichtigt mit der Seite interagieren können.

Baubefehl

Wenn Sie mit der Erstellung Ihrer Site fertig sind, können Sie den spezifischen buildBefehl Ihres SSG in Ihr Terminal eingeben. Dieser Befehl ist so konfiguriert, dass er Ihren Code minimiert, transpiliert, kompiliert, bündelt und alle anderen Aufgaben ausführt, die für die Bereitstellung Ihrer statischen Dateien erforderlich sind. Wenn Sie beispielsweise den Gatsby SSG verwenden, würden Sie gatsby buildin Ihr Terminal eingeben, um den Build zu initiieren.

Während des Build-Vorgangs bemerken Sie möglicherweise, dass das Terminal den Fortschritt des Builds ausgibt. Dazu gehören spezifische Details darüber, wie die Dateien verarbeitet werden. Während dieses Vorgangs können auch Fehlermeldungen auftreten, die Ihnen mitteilen, wo der Fehler aufgetreten ist. Wenn alles erfolgreich läuft, teilt Ihnen das Terminal mit, nachdem es mit dem Build fertig ist.

Während eines erfolgreichen Builds werden die statischen HTML-, CSS- und JavaScript-Dateien, die zum Rendern der Site benötigt werden, in einem publicoder -Verzeichnis abgelegt dist. Der genaue Name dieses Ordners hängt von Ihrer Konfiguration ab.

Nachdem Sie Ihre Site erstellt haben, erhalten Sie möglicherweise eine Site-Struktur, die der folgenden ähnelt:

your_project_root
├── node_modules
├── public
├── src
│   ├── css
│   │   └── styles.css
│   ├── js
│   │   └── script1.js
│   │   └── module.js
│   ├── images
│   │   ├── dog.jpg
│   │   └── cat.jpg
│   ├── _includes
│   │   ├── partials
│   │   │   └── about.html
│   │   └── layouts
│   │       └── base.html
│   ├── posts
│   │   ├── post-1.md
│   │   ├── post-2.md
│   │   ├── post-3.md
│   └── index.html
├── .your_SSG_config.js
├── package.json
├── package-lock.json
├── README.md
└── .gitignore

Bitte beachten Sie, dass Ihre Dateistruktur je nach verwendetem SSG unterschiedliche Dateien und Verzeichnisse umfassen kann. Obwohl beim Erstellen einer Website mit einer SSG im Vorfeld ein erheblicher Arbeitsaufwand anfallen kann, werden statische Dateien ohne zusätzliche Serverprozesse bereitgestellt, wodurch eine schnellere Ladeerfahrung für Ihre Benutzer entsteht.

Jenseits von Statik

Statische Site-Generatoren an sich sind leistungsstarke Tools. In Verbindung mit anderen Webtechnologien können sie die Grenze zwischen statisch und dynamisch verwischen. SSGs spielen eine wesentliche Rolle im Jamstack-Ökosystem . Wie ein LAMP- oder MEAN-Stack ist der Jamstack eine weitere Möglichkeit, eine Website oder Webanwendung zu erstellen und zu gestalten. Es nutzt die Leistungsfähigkeit von SSGs, um statisches HTML zu erstellen, und verwendet JavaScript- und API-Aufrufe, um eine Verbindung zu Backend-Diensten und Datenbanken herzustellen.

Ein SSG kann auch mit einem CMS zusammenarbeiten. Dieses andere Entwicklungsmodell wird Headless CMS genannt . Mit einem Headless-CMS haben Sie die Möglichkeit, Daten zu speichern, haben eine grafische Benutzeroberfläche, mit der Sie Inhalte abrufen können, und einen API-Endpunkt, mit dem Sie sich verbinden können. In diesem Modell entfernen Sie die Präsentationsschicht – den „Kopf“ – aus dem Backend-Verwaltungssystem. Ein SSG füllt diese fehlende Rolle für die Präsentationsschicht. Beispielsweise kann ein Redakteur über die CMS-Oberfläche Inhalte erstellen, die dann in der Datenbank gespeichert werden. Ein Entwickler kann dann über den API-Endpunkt auf diesen Inhalt zugreifen und eine Ansicht erstellen, um den Inhalt Benutzern anzuzeigen.

SSGs sind auch erweiterbar. Mit verschiedenen Plugins und Modulen kann Ihr SSG etwas mehr werden als sein ursprüngliches Angebot. In Eleventy können Sie beispielsweise ein Plugin verwenden, um Ihre Bilder zu optimieren und in der Größe anzupassen, und sogar serverlose Funktionen verwenden, um dynamische Seiten zu erstellen. Abhängig von Ihren Anforderungen kann ein SSG an Komplexität und Funktionalität zunehmen, während es immer noch statische Dateien ausgibt.

Fazit

In diesem konzeptionellen Artikel haben Sie einige der zugrunde liegenden Technologien kennengelernt, die Static-Site-Generatoren zum Erstellen einer Website verwenden. Mit diesen Informationen haben Sie jetzt ein besseres Verständnis dafür, wie statische Sites mit einer SSG erstellt werden.

Quelle des Originalartikels unter https://www.digitalocean.com

#html #css #javascript #webdev #ssg

منشئ الموقع الثابت (SSG): كيفية إنشاء موقع ويب باستخدام SSG

في هذا البرنامج التعليمي ، ستتعرف على Static Site Generator (SSG) وكيف يتم إنشاء المواقع الثابتة باستخدام SSG. SSG هو تطبيق يقوم تلقائيًا بإنشاء ملفات HTML و CSS و JavaScript اللازمة لعرض موقع ويب. 

هناك عدد من البرامج والأدوات المستخدمة لإنشاء مواقع الويب. إحدى الأدوات التي أصبحت بسرعة دعامة أساسية تسمى مولد الموقع الثابت (SSG). SSG هو تطبيق يقوم تلقائيًا بإنشاء ملفات HTML و CSS و JavaScript اللازمة لعرض موقع ويب. اكتسبت مجموعات SSG شعبية بسبب مرونتها. يمكن استخدامه كأداة قائمة بذاتها أو مدمج بعمق في بنية الويب التي تختارها.

لتوضيح تقنيات الويب الأساسية التي تدعم مجموعات SSG والميزات التي تجعلها مفيدة ، سوف تستكشف هذه المقالة مفاهيم مختلفة من حيث صلتها بـ "ثابت" و "موقع" و "مُنشئ".

ثابتة

عندما يعرض المستخدم صفحة على موقع ويب ، يتم تقديم طلب إلى خادم الويب. يستجيب خادم الويب مرة أخرى بملف معين بناءً على هذا الطلب.

على سبيل المثال ، لنفترض أن المستخدم يطلب صفحة على موقع ويب تقليدي أو ديناميكي. قد يحتاج الخادم إلى الاستعلام عن قاعدة بيانات ، وإرسال النتائج إلى تطبيق القوالب ، ثم إنشاء ملف HTML لعرضه في المتصفح. يتم إنشاء هذه الصفحة ، عند الطلب ، في كل مرة يتم فيها تقديم طلب في هذه البنية.

على العكس من ذلك ، على موقع ثابت ، فإن الملفات المطلوبة موجودة بالفعل على خادم الويب. هذا هو المقصود بالمصطلح ثابت : الملفات المستخدمة لعرض الموقع لا تتغير لأنها تحتوي بالفعل على كود HTML و CSS وجافا سكريبت. لا يوجد شيء للتحويل أو الإنشاء أو التحويل عند الطلب لأنه تم إنشاؤها قبل طلب الصفحة.

لكي نكون واضحين ، لا يزال من الممكن أن يكون الموقع الثابت تفاعليًا. لا تزال أشياء مثل كود JavaScript والرسوم المتحركة CSS وعناصر الفيديو والصوت وتنسيقات البيانات مثل JSON مدعومة ويمكن تشغيلها كالمعتاد على موقع ثابت. الاختلاف الوحيد هو أن الملفات نفسها يتم إنشاؤها مسبقًا بدلاً من إنشاؤها عند الطلب.

يمكنك التفكير في صفحة مقصودة أو منشور مدونة كأمثلة على موقع ثابت. من ناحية أخرى ، تعد صفحة الرياضة الحية أو قسم التعليقات أمثلة على مواقع الويب الديناميكية. بالنسبة للمواقع الديناميكية مثل هذه ، فأنت بحاجة إلى خادم أو استدعاء API لإجراء معالجة إضافية من أجل عرض عنصر للمستخدم بشكل صحيح. يمكنك أن تقرأ عن طيف العرض لفهم أفضل لكيفية استخدام مواقع الويب لمجموعة متنوعة من التقنيات للكشف عن المحتوى للمستخدمين.

موقع

في أي موقع ، تحتاج إلى طريقة لتنظيم المحتوى وإنشائه. توفر مولدات الموقع الثابتة طريقة مبسطة لإنجاز هذه المهمة. باستخدام SSG ، يمكنك إنشاء هيكل موقعك وتنظيمه ، مع التمتع أيضًا بوصول مباشر إلى المحتوى. يُطلق على إحدى التقنيات المتكاملة الشائعة في العديد من مجموعات SSG للمساعدة في إدارة كل هذا محرك القالب .

محرك النموذج

محرك النموذج هو برنامج يقوم بإنشاء قوالب للعناصر الشائعة التي تظهر عبر موقعك. بدلاً من ترميز HTML الثابت المتكرر لكل صفحة على موقع الويب الخاص بك ، يساعد محرك القالب في إنشاء هذه العناصر لجميع صفحاتك. على سبيل المثال ، إذا كان لديك رأس وتذييل مطلوب وجودهما في كل صفحة على موقعك ، فيمكنك كتابة هذا الرمز مرة واحدة وتطبيقه على الصفحات التي تحتوي على رمز القالب. يمكنك أيضًا استخدام المتغيرات والتعبيرات لبناء القيم أو استبدالها داخل قالب.

ضع في اعتبارك أن العديد من مجموعات SSG تسمح لك باختيار لغة القوالب الخاصة بك ، بينما يأتي بعضها بإطار أمامي ولغة قوالب تم اختيارها بالفعل لك. تقدم لك محركات القوالب مثل Nunjucks و Pug و Liquid و Blade طرقًا مختلفة لإنشاء القوالب.

فيما يلي مثال على قالب أساسي في محرك قالب Nunjucks:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Your Website</title>
    </head>
    <body>
        <header>
            {% block header %}
                This is your header content
            {% endblock %}
        </header>

        <div id="content">{% block content %}{% endblock %}</div>
        
        <footer>
            {% block footer %}
                This is your footer content
            {% endblock %}
        </footer>
    </body>
</html>

يمكنك التفكير في القالب الأساسي كحاوية للعناصر النائبة. العلامات {% block %}هي كتل من رمز القالب. يمكن أن تحتوي هذه على محتوى أو تركها فارغة لكي يتم ملؤها أو تجاوزها بواسطة القوالب الفرعية . لاحظ أن كل {% block %}علامة لها اسم متغير مُلحق. على سبيل المثال ، متداخلة داخل <header>علامة HTML ، هناك {% block header%}علامة تحدد أن هذه الكتلة تسمى header. يمكنك تسمية هذا ما تريد ، ولكن من الأفضل استخدام أسماء المتغيرات الوصفية لتجنب الالتباس.

تقوم محركات القوالب ببعض الرفع الثقيل لإنشاء هذه القوالب القابلة لإعادة الاستخدام والتي يتم تحويلها بعد ذلك إلى HTML. عادة ما يتم وضع ملفات القوالب هذه في دليل يسمى layoutsأو templates. نظرًا لأن القوالب من المفترض أن تكون قابلة لإعادة الاستخدام ، فلن تكتب غالبًا المحتوى مباشرةً داخل ملفات القالب. بالنسبة للمحتوى ، يمكنك إنشاء ما يسمى ملفات Markdown .

تخفيض السعر

Markdown هي لغة ترميز تُستخدم لإضافة تنسيق إلى مستندات نص عادي قبل تحويلها إلى HTML. على الرغم من أن Markdown ليس بديلاً كاملاً لكتابة HTML ، إلا أنه يمكن أن يساعدك في كتابة وتنظيم المحتوى الخاص بك دون القلق بشأن علامات HTML.

على سبيل المثال ، إذا كنت بحاجة إلى إنشاء قائمة غير مرتبة في HTML ، فيجب عليك إنشاء <ul>علامة ، ثم تكون متداخلة بداخلها ، حيث يتم تغليف عناصر القائمة <li>بالعلامة. في Markdown ، يمكنك إنشاء هذه القائمة بعلامة النجمة *.

<ul>
    <li>Thing 1</li>
    <li>Thing 2</li>
    <li>Thing 3</li>
</ul>
* Thing 1
* Thing 2 
* Thing 3

تسمح لك العديد من مجموعات SSG بكتابة كل المحتوى الخاص بك في Markdown بصرف النظر عن قاعدة الشفرة الشاملة. بهذه الطريقة ، يمكنك التركيز على كتابة المحتوى بدلاً من التعليمات البرمجية ، على الرغم من أن لديك خيار كتابة HTML عادي في ملف Markdown. يشار إلى هذه الملفات عادةً باسم ملفات المحتوى ويتم تخزينها عادةً في دليل محتوى محدد. سيتم عرض المحتوى الخاص بك وفقًا لذلك عند إقرانه بقوة القوالب الخاصة بك والبيانات الوصفية المستخدمة في المقدمة .

البيانات الوصفية والشيء الأمامي

أداة قوية أخرى في مربع أدوات SSG هي اللغات التي تساعد في تكوين وتنسيق البيانات الوصفية. YAML و TOML و JSON هي اللغات المستخدمة لتحديد البيانات الوصفية في المقدمة لملفات المحتوى الخاصة بك. الواجهة الأمامية هي البيانات المنظمة التي تصف أو تحدد سمات المحتوى. يمكنك أيضًا استخدام هذه البيانات لتطبيق تخطيط معين من القوالب الخاصة بك. عادةً ما توجد هذه البيانات في الجزء العلوي من أي ملف محتوى معين.

على سبيل المثال ، في المقدمة ، يمكنك تحديد العنوان ، والمؤلف ، وتقديم وصف موجز للمحتوى الخاص بك ، واستخدام تخطيط معين من القوالب الخاصة بك:

---
title: Front Matter Matters
author: Author Name
description: Write out your description here
layout: base.html
---

يستخدم هذا المثال لغة YAML لتحديد محتويات الصفحة. تقوم الواصلات الثلاثة الموجودة ---في الأعلى والأسفل بتغليف البيانات الوصفية للمادة الأمامية. بدون هذه الواصلات ، لن تعمل البيانات الوصفية الخاصة بك. في الممارسة العملية ، يمكنك تضمين أكثر أو أقل من عناصر البيانات الوصفية. مقترنًا بمحرك نموذجي و Markdown ، سيتم عرض المحتوى الخاص بك على صفحة وفقًا لكيفية هيكلة موقعك.

يمكن أن تصبح هيكلة الواجهة الأمامية معقدة بشكل متزايد مع نمو موقعك. على الرغم من أن شرح التعقيدات يتجاوز هذه المقالة ، إلا أنه يمكنك استخدام المقدمة لإنشاء روابط وعلامات والمزيد لتخصيص موقعك.

مولد كهرباء

بعد هيكلة وإنشاء محتوى لموقعك ، ما تبقى هو بنائه. أثناء عملية الإنشاء هذه ، يتم إدخال جميع أصولك - بما في ذلك أشياء مثل CSS والصور وجافا سكريبت والبيانات الوصفية والمزيد - في خط أنابيب وتجميعها معًا. عادةً ما يتم تصغير هذه الأصول ، وترجمةها ، وترتيبها ، وتجميعها ، ثم عرضها في النهاية على المستخدم كملفات ثابتة.

تصغير

عندما يتم تصغير أصولك ، يقوم أحد التطبيقات بإزالة المسافة البيضاء والمسافة البادئة والأسطر الجديدة والأسماء المتغيرة الطويلة وتعليقات التعليمات البرمجية من أجل إبقاء الملف صغيرًا قدر الإمكان. يُشار إلى هذا أحيانًا باسم "تقويض" الكود الخاص بك ، لأنه يزيل الكثير من التنسيق الذي يجعل من السهل قراءته. على الرغم من أنه قد يبدو غريبًا ، إلا أن التعليمات البرمجية الخاصة بك لا تزال تعمل بنفس الطريقة عند تصغيرها.

فيما يلي مثال على بعض أكواد CSS قبل التصغير:

html {
    box-sizing: border-box;
}
*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}
body {
    background: seagreen;
    font-family: sans-serif;
}
.wrapper {
    padding: 1rem;
    border-radius: 1rem;
    display: flex;
}

هذا هو نفس الرمز ، ولكن مصغر:

html{box-sizing:border-box}*,::after,::before{box-sizing:inherit;margin:0;padding:0}body{background:#2e8b57;font-family:sans-serif}.wrapper{padding:1rem;border-radius:1rem}

الملفات المصغرة ليس من المفترض أن يتم تحريرها. نظرًا لأن الكود المصغر موجود في ملف جديد ، فهو الرمز الذي يتم استخدامه في موقع الإنتاج. بدلاً من ذلك ، إذا كنت تحتاج إلى تعديلات ، فقم بتحرير الملف الأصلي غير المصغر ، وأعد حفظ الملف المصغر وأعد تجميعه ، واستبدله على الخادم ليعكس تغييراتك.

التجميع

من الشائع كتابة التعليمات البرمجية في ملفات منفصلة أثناء التطوير. يتيح لك ذلك استخدام أجزاء من الكود أصغر حجماً وأكثر قابلية للإدارة بدلاً من ملف واحد مترابط يحتوي على جميع الأكواد الخاصة بموقعك.

على سبيل المثال ، قد يكون لديك العديد من البرامج النصية والوحدات النمطية التي تتصل ببعضها البعض عند النقر فوق الزر. قد يكون لديك أيضًا أوراق أنماط CSS متعددة للصفحات والعناصر المختلفة على موقعك. علاوة على ذلك ، قد يكون صحيحًا أيضًا أن البرامج النصية و CSS تعتمد على بعضها البعض من أجل الوظائف. عندما يكون موقعك قيد الإنتاج ، فإن الاضطرار إلى طلب كل هذه الموارد بشكل فردي يمكن أن يؤدي إلى إبطاء موقعك ، حيث يضيف كل منها القليل من وقت الاستجابة لعملية العرض. هذا هو ما تم تصميم التجميع لحل.

تجميع الكود هو عملية دمج ودمج التعليمات البرمجية في ملف واحد. على سبيل المثال ، إذا كانت وظائف JavaScript ووحداتها ومكوناتها مضمنة في ملفات منفصلة ، فإن التجميع يدمجها في ملف JavaScript واحد. وينطبق الشيء نفسه إذا كتبت أنماطك باستخدام معالج CSS مسبق ، مثل SASS ، حيث يتم فصل الكود. سيعمل التجميع أيضًا على تجميع هذه الملفات في ملف CSS واحد.

في النهاية ، التجميع ، مثل التصغير ، هو عملية تحسين. بدلاً من طلب عدة نصوص أو أوراق أنماط ، قد يحتاج المتصفح فقط من خلال تجميع عدد قليل منها.

تستخدم الحزم المختلفة عمليات مختلفة لدمج التعليمات البرمجية الخاصة بك معًا. هناك عدد غير قليل من الحزم ، وعادة ما يتم دمج كل SSG مع واحد. rollup.js و Parcel و webpack هي أمثلة على الحزم. تستخدم مجموعات SSG مثل Gatsby و Next.js حزمة الويب لتجميع أصولها.

النقل والترجمة

تحول عملية التحويل والترجمة بشكل أساسي التعليمات البرمجية الخاصة بك إلى ملفات يمكن لأي متصفح ويب قراءتها وتنفيذها.

بشكل عام ، المترجم هو تطبيق يقوم بترجمة وتحويل لغة برمجة ذات مستوى أعلى إلى لغة برمجة ذات مستوى أدنى. على سبيل المثال ، يمكن للمترجم أن يترجم كود C إلى كود الآلة 1 و 0 ، من أجل تشغيل برنامج.

المترجم هو نوع من المترجم الذي يترجم الكود من لغة برمجة إلى لغة برمجة أخرى مكافئة. على سبيل المثال ، يمكن أن تعني عملية التحويل تحويل التعليمات البرمجية المكتوبة بلغة البرمجة Typescript إلى لغة JavaScript. نظرًا لأن متصفحات الويب لا تفهم كود Typescript ، فيجب ترجمتها إلى JavaScript حتى يتمكن المستعرض من تنفيذها.

تطبيق JavaScript الشهير المسمى Babel هو مثال على هذه المفاهيم في الممارسة. يبذل Babel قصارى جهده للتأكد من أن كود JavaScript قابل للقراءة في المتصفحات القديمة والحديثة على حدٍ سواء. مثال آخر على ذلك هو Autoprefixer . يكتشف ميزات CSS الأحدث ويدرج العناصر الاحتياطية المناسبة لدعم المتصفح على نطاق أوسع.

سواء كنت تعمل ضمن قاعدة تعليمات برمجية قديمة أو باستخدام أحدث بناء جملة ، فإن عملية التحويل والترجمة تفسر التعليمات البرمجية للمتصفح لتحقيق أعمق دعم ممكن للمتصفح حتى يتمكن المستخدمون من التفاعل مع الصفحة بالشكل الذي تريده.

بناء القيادة

عندما تنتهي من إنشاء موقعك ، يمكنك كتابة buildالأمر المحدد لـ SSG في جهازك. تم تكوين هذا الأمر لتصغير التعليمات البرمجية الخاصة بك ونقلها وتجميعها وتجميعها ، بالإضافة إلى تنفيذ أي مهام أخرى مطلوبة لخدمة ملفاتك الثابتة. على سبيل المثال ، إذا كنت تستخدم Gatsby SSG ، فستكتب في gatsby buildجهازك الطرفي لبدء الإنشاء.

أثناء عملية الإنشاء ، قد تلاحظ أن المحطة الطرفية تُخرج تقدم البناء. يتضمن هذا تفاصيل محددة حول كيفية معالجة الملفات. قد تواجه أيضًا رسائل خطأ أثناء هذه العملية تخبرك بمكان حدوث الفشل. إذا تم تشغيل كل شيء بنجاح ، ستخبرك المحطة الطرفية بعد الانتهاء من الإنشاء.

أثناء البناء الناجح ، يتم وضع ملفات HTML و CSS و JavaScript الثابتة اللازمة لعرض الموقع في دليل publicأو dist. سيعتمد الاسم الدقيق لهذا المجلد على التكوين الخاص بك.

بعد بناء موقعك ، قد ينتهي بك الأمر ببنية موقع مشابهة لما يلي:

your_project_root
├── node_modules
├── public
├── src
│   ├── css
│   │   └── styles.css
│   ├── js
│   │   └── script1.js
│   │   └── module.js
│   ├── images
│   │   ├── dog.jpg
│   │   └── cat.jpg
│   ├── _includes
│   │   ├── partials
│   │   │   └── about.html
│   │   └── layouts
│   │       └── base.html
│   ├── posts
│   │   ├── post-1.md
│   │   ├── post-2.md
│   │   ├── post-3.md
│   └── index.html
├── .your_SSG_config.js
├── package.json
├── package-lock.json
├── README.md
└── .gitignore

يرجى ملاحظة أنه بناءً على SSG الذي تستخدمه ، قد تتضمن بنية ملفك ملفات وأدلة مختلفة. على الرغم من أنه يمكن أن يكون هناك قدر كبير من العمل مقدمًا عند إنشاء موقع باستخدام SSG ، فإن المردود هو ملفات ثابتة سيتم تقديمها ، بدون عمليات خادم إضافية ، مما يخلق تجربة تحميل أسرع للمستخدمين.

ما وراء ساكنة

مولدات الموقع الثابتة في حد ذاتها هي أدوات قوية. إلى جانب تقنيات الويب الأخرى ، يمكنهم طمس الخط الفاصل بين الثابت والديناميكي. تلعب مجموعات SSG دورًا أساسيًا في نظام Jamstack البيئي . مثل حزمة LAMP أو MEAN ، فإن Jamstack هي طريقة أخرى لإنشاء وتصميم موقع ويب أو تطبيق ويب. يستخدم قوة SSGs لإنشاء HTML ثابت ويستخدم استدعاءات JavaScript و API للاتصال بخدمات وقواعد البيانات الخلفية.

يمكن أن تعمل SSG أيضًا جنبًا إلى جنب مع CMS. يسمى هذا النموذج الآخر للتطوير CMS مقطوعة الرأس . باستخدام نظام CMS بدون رأس ، لديك طريقة لتخزين البيانات ، ولديك واجهة مستخدم رسومية للتفاعل معها للمحتوى ، ونقطة نهاية API للاتصال بها. في هذا النموذج ، تقوم بإزالة طبقة العرض التقديمي - "الرأس" - من نظام إدارة الواجهة الخلفية. يملأ SSG هذا الدور المفقود لطبقة العرض التقديمي. على سبيل المثال ، يمكن للمحرر استخدام واجهة CMS لإنشاء محتوى يتم تخزينه بعد ذلك في قاعدة البيانات. يمكن للمطور بعد ذلك الوصول إلى هذا المحتوى عبر نقطة نهاية API وإنشاء طريقة عرض لعرض المحتوى للمستخدمين.

SSGs هي أيضا قابلة للتوسيع. مع الإضافات والوحدات النمطية المختلفة ، يمكن أن يصبح SSG الخاص بك شيئًا أكثر قليلاً من عرضه الأولي. على سبيل المثال ، في برنامج Eleventy ، يمكنك استخدام مكون إضافي لتحسين صورك وتغيير حجمها وحتى استخدام وظائف بدون خادم لإنشاء صفحات ديناميكية. اعتمادًا على احتياجاتك ، يمكن أن تنمو SSG من حيث التعقيد والوظائف ، مع الاستمرار في إخراج الملفات الثابتة.

استنتاج

في هذه المقالة المفاهيمية ، تعرفت على بعض التقنيات الأساسية التي تستخدمها مولدات المواقع الثابتة لإنشاء موقع ويب. باستخدام هذه المعلومات ، يكون لديك الآن فهم أفضل لكيفية إنشاء المواقع الثابتة باستخدام SSG.

مصدر المقال الأصلي على https://www.digitalocean.com

#html #css #javascript #webdev #ssg