简介
@small-tech/site.js 是一个小型的，基于 JavaScript 的静态网站生成器，它提供了许多有用的功能，包括文件编译，CSS 处理，JavaScript 打包，图片优化等等。在本文中，我们将学习如何使用它来构建自己的网站。
安装
在开始之前，您需要确保已经正确安装了 Node.js 和 npm，如果没有可以参考官方文档进行安装。
@small-tech/site.js 可以通过 npm 安装，只需在终端运行以下命令：
npm install @small-tech/site.js --save-dev
配置
在安装完成后，我们需要创建一个新的 @small-tech/site.js 项目。打开终端，创建一个新文件夹，并在其中运行以下命令：
npx site init
这个命令将会初始化一个新的 @small-tech/site.js 项目，并在当前目录下生成一些必要的文件和目录。
在项目中，我们可以通过编写配置文件来调整和定制化 @small-tech/site.js 的行为。配置文件位于项目根目录下的 .site.js 文件中。我们可以通过添加或修改配置项来控制网站的生成过程。
以下是一个简单的 .site.js 示例文件：
module.exports = {
title: "My Website",
url: "https://example.com",
output: "dist/",
files: "src/**/*.{html,css,js}",
ignore: "src/**/_*",
};上面的配置文件将会生成一个名为 "My Website" 的站点，它将会从 src 目录中读取 HTML，CSS 和 JavaScript 文件，并将它们编译后输出到 dist 目录中。在编译的过程中，@small-tech/site.js 将会忽略所有以 _ 开头的文件。
开发
在配置文件编写完成后，我们可以开始编写我们的代码了。我们可以将我们的 HTML，CSS 和 JavaScript 文件放在 src 目录中，并将它们输入到 dist 目录中。
在开发过程中，我们可以使用以下命令来启动一个本地服务器：
npx site serve
这个命令将启动一个本地服务器，我们可以在浏览器中访问 http://localhost:8080 来查看我们的网站。
此外，@small-tech/site.js 还提供了许多有用的内置功能，例如自动刷新页面，自动编译文件，CSS 和 JavaScript 的前缀处理等等。我们可以根据需要在配置文件中进行配置。
构建
完成开发后，我们可以使用以下命令来构建网站：
npx site build
这个命令将会将我们的网站编译，并输出到 dist 目录中。我们可以将这个目录中的文件部署到任何支持静态网站的服务器中。
示例代码
以下是一个简单的示例代码，它使用了 @small-tech/site.js 来构建一个简单的网站：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- --------------
----- --------------- ---------------------------- -----------------
----- ---------------- -------------------
-------
------
---------- -----------
------- -- - ------ ------- ----- ----- -- -------------------------------------------------------------------------
------- ------------------------
-------
--------- -------------------- ---- ------- ---- - ------------ ----------- ----------------- ----- ------ ----- - -- - ------ ----- -
console.log("Hello, world!");总结
我们通过本文了解了如何使用 @small-tech/site.js 来构建小型静态网站。@small-tech/site.js 提供了许多有用的功能，例如文件编译，CSS 处理，JavaScript 打包等等。在使用它来构建网站时，我们可以根据需要进行配置和定制化，并通过编写 HTML，CSS 和 JavaScript 文件来定制化我们的网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/144762