简介
在前端开发中，我们经常会需要创建一个静态网站作为项目的展示页面或者是开发文档。但是如果每次都从零开始手动搭建一个网站，无疑是非常浪费时间和精力的。为了解决这个问题，我们可以使用 website-cli 这个 npm 包来快速的生成一个简单的静态网站。
website-cli 是一个基于 Node.js 的命令行工具，它可以帮助我们快速创建静态网站，还支持自定义模板和样式。
安装和使用
安装
在使用 website-cli 之前，我们需要先安装 Node.js 和 npm 环境。你可以从 Node.js 官网 下载对应的安装包进行安装。
安装 Node.js 和 npm 环境之后，我们可以使用以下命令来安装 website-cli：
--- ------- -- -----------
使用
安装完毕之后，我们就可以愉快地使用 website-cli 来创建静态网站了。
创建网站
使用以下命令来创建一个新的网站：
----------- ------ -------------
其中，projectName 为你的项目名称。
例如，下面的命令将会创建一个名为 my-website 的新网站：
----------- ------ ----------
然后，进入项目目录并启动开发服务器：
-- ---------- --- --- ---
现在，你可以在浏览器中打开 http://localhost:3000/，看到你的网站已经成功的运行起来了。
添加页面
使用以下命令来添加一个新页面：
----------- ------- ----------
其中，pageName 为你的页面名称。
例如，下面的命令将会在 src/pages 目录下创建一个名为 about 的新页面：
----------- ------- -----
自定义模板
你可以通过自定义模板来定制你的网站的外观和功能。
在 src/templates 目录中创建一个新文件夹，并在该文件夹中创建一个名为 index.html 的模板文件。该模板文件将作为网站的主页。
例如，下面是一个简单的模板文件：
--------- -----
------
------
----- ----------------
--------- ----- ----------
-------
------
-- ------- --
-------
-------在模板文件中可以使用双括号 {{ }} 来插入动态内容，例如，在上面的模板文件中，{{ title }} 将会被替换为网站的标题。
自定义样式
你可以在 src/styles 目录中创建一个名为 style.scss 的 Sass 文件来自定义网站的样式。
例如，下面是一个简单的 Sass 文件：
--------------- --------
---- -
----------------- -----
-
-- -
------ ---------------
-在 Sass 文件中，我们定义了一个 $primary-color 变量，然后使用该变量来设置标题的颜色。
最后，我们在 index.html 文件中引入此样式文件：
------
----- ----------------
--------- ----- ----------
----- ---------------- -------------------------
-------现在，在浏览器中刷新页面，你会发现我们自定义的样式已经生效了。
构建网站
使用以下命令来构建你的网站：
--- --- -----
该命令将会在 dist 目录中生成一个编译后的网站，你可以将该目录中的文件上传到你的 Web 服务器上来发布。
总结
本文介绍了如何使用 npm 包 website-cli 来快速创建一个简单的静态网站。通过阅读本文，你应该已经掌握了 website-cli 的基本使用方法，并且可以使用自定义模板和样式来定制你的网站。希望本文对你的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671058dd3466f61ffdd60