引言
sssg（Simple Static Site Generator）是一款基于 Node.js 的静态网站生成器，它可以帮助前端开发者快速生成静态网站，非常适合需要搭建简单博客或个人网站的开发者使用。本文将详细介绍 sssg 的使用方法，包括安装、配置以及使用示例。
安装
在开始使用 sssg 之前，需要先安装 Node.js 和 npm。你可以在 Node.js 官网下载最新版的 Node.js，并自带安装了 npm。
在安装 Node.js 和 npm 之后，我们可以使用以下命令来全局安装 sssg：
npm install -g sssg
安装完成后，我们就可以使用 sssg 命令来生成静态网站。
配置
sssg 的配置文件为 sssg.config.js，我们需要在项目根目录下创建该文件。下面是一个示例的配置文件：
-- -------------------- ---- -------
-------------- - -
------ --- ------
---------- -------
------ -------------
------------ -----------
--------- --------
----------- ----------
--------------- -----
---- -
----- ----
------ --------------
-------- ---------------
-
--- title：网站的标题，将会被用于生成页面的 title 标签以及部分默认布局的页面标题；
- outputDir：网站生成后的输出目录；
- index：网站首页的文件名，默认为 index.html；
- articlesDir：存放文章的目录，默认为 articles；
- pagesDir：存放单独页面的目录，默认为 pages；
- layoutsDir：存放布局文件的目录，默认为 layouts；
- enableMarkdown：是否启用 Markdown，启用后可以直接在文章中使用 Markdown；
- nav：网站的导航栏，用于生成导航栏。
使用示例
在创建好配置文件之后，我们就可以开始使用 sssg 生成静态网站了。下面是一个简单的示例，我们将创建一个包含单独页面和文章的博客。
创建页面
首先，我们在 pages 目录下创建一个关于页面 about.html。该页面的内容如下：
--- title: About layout: default --- <h1>About</h1> <p>Welcome to my blog!</p>
其中，通过三个短横线部分的 YAML 头来设置页面的信息，可以设置页面的标题（title），布局文件（layout）等信息。下面是该页面的默认布局文件 default.html：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- - ------------------------
-------
------
--------
------------------
-----
------- ------------
-- ----------------------------
---------
------
---------
------
-------------
-------
--------
- ---- -- ----
---------
-------
-------使用 {{{content}}} 表示页面内容会被插入到该位置。我们可以在其中嵌入其他 HTML 或者使用 sssg 提供的模板语法插入网站的其他部分，例如导航栏。
创建文章
我们在 articles 目录下创建一篇文章。文章的文件名可以为任意名称，sssg 会自动提取文件的 YAML 头信息来生成页面。该文章的内容如下：
--- title: My First Blog date: '2020-12-01' layout: default --- Hello World!
其中，我们可以使用 Markdown 语法编写文章的内容。
生成网站
在创建好页面和文章之后，我们就可以使用 sssg 命令生成网站了：
sssg build
该命令会在配置的 outputDir 目录下生成静态网站。
结语
本文详细介绍了 sssg 的使用方法，包括安装、配置和使用示例。sssg 是一款简单好用的静态网站生成器，非常适合前端开发者使用。如果你有搭建个人网站的需求，可以尝试使用 sssg 来生成静态网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e781e8991b448e08f5