前言
如今，前端开发已经成为了互联网行业的一个重要组成部分。然而，面对庞杂的前端生态圈，很多开发者感到无从下手。
npm 是一个面向 JavaScript 的包管理器，用来分享、组织以及安装代码等组件。它能够帮助开发者有效地处理复杂的前端生态圈，让开发变得更加简单。
在本文中，我们将介绍一款名为 @nxus/static-site 的 npm 包。它可以帮助你快速构建静态网站并进行部署。该包功能强大、易用，非常适合前端开发者使用。
操作步骤
步骤一：安装
在终端中输入以下命令：
npm install @nxus/static-site
这样，我们就可以成功安装这个 npm 包。
步骤二：配置
在安装完毕后，我们需要进行一些配置。
2.1 创建项目
首先，我们需要创建一个新的项目，用来进行测试。
在终端中执行以下命令：
mkdir my-static-site cd my-static-site npm init -y
需要注意的是，这里的 my-static-site 是项目名，可以根据实际情况进行更改。
2.2 添加依赖
接下来，我们需要添加一些依赖包。打开终端，输入以下命令：
npm install express pug @nxus/core @nxus/static-site
这样，我们就安装好了项目所需的依赖包。
2.3 配置使用
在安装了 @nxus/static-site 后，我们需要使用它提供的静态文件路由和渲染器。要实现这点，我们需要在我们的项目中使用它。因此，我们需要在 ./src/index.js 中添加以下代码：
const nxus = require('@nxus/core')
const staticSite = require('@nxus/static-site')
nxus.use(staticSite)
nxus.start()这样，我们在项目里使用了 @nxus/static-site，就可以开始构建我们的静态网站。
步骤三：构建网站
在完成了以上所有配置后，我们可以开始构建我们的网站了。
3.1 创建路由
在 ./src/routes 目录下创建 home.js 文件，并添加以下代码：
module.exports = function home({router}) {
router.get('/', (req, res) => {
res.render('home', {title: 'Hello World!'})
})
}在上述代码中，我们定义了一个路由，这个路由将请求 / 转向了 home 视图。
3.2 创建视图
在 ./src/views 目录下创建 home.pug 文件，并添加以下代码：
html
head
title= title
body
h1= title这样，我们就已经实现了一个最基础的静态网站。
步骤四：部署网站
在完成了网站的构建后，我们需要进行部署。
4.1 生成静态文件
在项目目录中执行以下命令：
npm run generate
这样，我们就可以获得一个 ./dist 目录，其中包含了我们的网站所有的静态文件。
4.2 部署至 GitHub Pages
假设我们现在已经拥有了 GitHub Pages 账户，并为该账户下分配了一个仓库。
将刚刚生成的 ./dist 目录中的所有文件上传至该仓库，然后在仓库的设置中，将 GitHub Pages 的源设置为 master 分支，并将目标路径设置为 docs。
这样，我们的静态网站就成功部署到了 GitHub Pages 上。
示例代码
最后，我们提供最终的示例代码：
// ./src/index.js
const nxus = require('@nxus/core')
const staticSite = require('@nxus/static-site')
nxus.use(staticSite)
nxus.start()// ./src/routes/home.js
module.exports = function home({router}) {
router.get('/', (req, res) => {
res.render('home', {title: 'Hello World!'})
})
}// ./src/views/home.pug
html
head
title= title
body
h1= title总结
在本文中，我们介绍了如何使用 npm 包 @nxus/static-site 快速构建静态网站。通过复杂的配置，我们能够在几步之内完成网站的构建和部署。我们希望这篇文章能够为前端开发者提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bd0967216659e244e7c