随着前端发展的趋势,静态网站生成器成为越来越流行的工具。而使用 npm 包管理工具,可以方便地安装和维护这些工具。本文将介绍如何使用 npm 包 generator-makestatic 构建静态网站。
简介
generator-makestatic 是一个生成器,基于 Yeoman 框架开发,用于快速构建静态网站和博客。它使用 Handlebars 模板、Markdown 和 LESS 等技术,可以快速搭建一个现代化的静态网站。此外,它还提供了许多有用的功能,比如自动生成文章目录、代码高亮、RSS 订阅等。
安装
首先,你需要先安装 Node.js 和 npm。如果你还没有安装,请到官网下载并安装。
接着,在控制台中输入以下命令来安装 generator-makestatic:
--- ------- -- -- --------------------
需要注意的是,-g 参数表示全局安装,在安装完成后,你可以通过任何目录来使用 generator-makestatic。
创建项目
在控制台中进入你要创建项目的目录,然后输入以下命令:
-- ----------
这个命令会提示你输入一些基本信息,包括网站名称、作者、描述等。输入完毕后,generator-makestatic 会在当前目录创建一个新的项目,并在其中生成一些基本文件和文件夹。
开发
在项目目录中,有一个 src 文件夹,里面存放了项目的所有源代码。
模板
模板使用 Handlebars 语言,它是一种超越 HTML 的模板语言。在 src/templates 目录下,可以看到一些已经创建好的模板文件,比如 layout.hbs、index.hbs、post.hbs 等。
样式
样式使用 LESS 预处理器,可以很方便地书写样式。在 src/less 目录下,可以看到一个 main.less 文件,你可以在此文件中写入你的样式。
内容
内容使用 Markdown 语言,可以在 src/content 目录下创建你的文章和页面。
生成
在命令行中输入以下命令:
---------- -------
这个命令会将项目编译成静态页面,并启动一个本地服务器,以便你可以预览和测试你的网站。在浏览器中打开 http://localhost:3000/,你就可以看到你的网站了。如果你想停止服务器,可以在命令行中按 Ctrl+C。
部署
当你完成网站的开发后,想要部署到线上服务器上,可以使用以下命令:
---------- -------
这个命令会将项目编译成静态页面,并将其输出到 build 目录中,你可以将这个目录上传到你的服务器上。
示例代码
以下是一个简单的网站示例。
src/templates/layout.hbs
--------- ----- ----- ---------- ------ ----- ---------------- ------------------------ ----- ---------------- -------------------- ------- ------ -------- ------------------ ----- ---- ------ ---------------------- ------ --------------------------------- ----- ------ --------- ------ --- ------ ------- -------- --------- -------- -------------- --------- ------- -------------------------- ------- -------
src/templates/index.hbs
--------- -------------- ------- ------- --------- -------- ------------------ --------------- --------- --------- ------------- ---------- -------- ---- ------- ------ ----------------- --------- ----- --------- ---------- --------- -----------
src/templates/post.hbs
--------- ------------- --------- -------- ------------------ --------------- --------- --------- ------------- ---------- ---------- -----------
src/content/home.md
--- ------ -- ---- --- - ------- -- -- ---- ---- -- --- ---- ---- -- -- ----- ---- --- --- ---- --- -- ------ ------ -- ------ ----- ------- ------- - -------------------------- ---------
src/content/about.md
--- ------ ----- -- --- - ----- -- - -- - --- --------- ----- -- --- ----- - ---------- -- --------- ------------ ---- -- ----- ---- --- -----------
src/content/posts/first-post.md
--- ------ -- ----- ---- ----- ---------- ----- ------ ------------- --- - -- ----- ---- ------ ------ ---- -- -- ----- ---- -- -- --- ----- --- ------- -- ----- ------- -- -------- --- ----- ---- ----
src/content/posts/second-post.md
--- ------ -- ------ ---- ----- ---------- ----- ---------- --- - -- ------ ---- ------- ----- -- ---- ----- --- ----- -- ---- --- --- -- ----- - ------ ------- ----- ---------------------
结语
通过本文,你已经了解了如何使用 generator-makestatic 快速构建静态网站,并学习了一些基本的概念和技术。希望可以帮助你在开发过程中少走一些弯路,提高效率。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600572c481e8991b448e8dca