什么是 estel
estel 是一个基于 JavaScript 的静态网页生成器,可以在 Markdown 文件中编写内容,通过模板和主题进行渲染生成静态网页。它的特点是轻量、易用、快速,适合用于个人博客、文档、演示等场景。
安装 estel
安装前,请确保已安装 Node.js 环境。
在终端中执行以下命令进行全局安装 estel:
npm install -g estel
使用 estel
创建网站
在终端中进入需要生成静态网页的文件夹,执行以下命令创建一个新的 estel 站点:
estel create mysite
此命令将在当前文件夹创建一个名为 mysite 的文件夹,用于存放 estel 网站相关文件。
编写内容
在 mysite 目录下运行以下命令:
estel new post "Hello, Estel!"
此命令将在 mysite 中的 content 目录下创建一个新的 Markdown 文章,文件名为 hello-estel.md,用于编辑文章内容。
增加导航
可编辑 mysite/config.js 文件,增加导航条的链接和名称。
示例:
-- -------------------- ---- ------- -------------- - - ----- - ------ -------- ------------ ---------- ---- ------------------------------------ ------- ------ ----- ---------- ---------------------- --------- -------- -- ---- - - ---- ---- ----- ----- -- - ---- ------------- ----- ----- -- - ---- --------------- ----- ----- -- - ---- --------- ----- ----- -- - ---- ---------- ----- ----- -- -- --
选择主题
可根据个人喜好和需求选择合适的主题,将主题文件夹复制到 mysite/themes 目录下即可。
构建网站
在 mysite 目录下运行以下命令:
estel build
此命令将生成静态网页文件到 mysite/public 目录下。
预览网站
在 mysite/public 目录下运行以下命令:
estel preview
此命令将启动本地服务器,预览已生成的静态网页。
总结
以上是 estel 的使用教程,通过学习 estel 可以快速构建静态网页,并且 estel 提供了丰富的主题供用户选择,可以根据自己的需求进行定制。
示例代码可见 https://github.com/blinkcat/estel-example。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005582681e8991b448d551d