0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

推荐十大开源的静态网站生成工具,无须掌握HTML和CSS技能

如意 来源:Linux中国 作者:Xiaobin.Liu 译 2020-10-10 11:21 次阅读

在寻找部署静态网页的方法吗?这几个开源的静态网站生成工具可以帮你迅速部署界面优美、功能强大的静态网站,无需掌握复杂的 HTML 和 CSS 技能。

静态网站是什么?

技术上来讲,静态网站是指网页不是由服务器动态生成的。HTML、CSS 和 JavaScript 文件就静静地躺在服务器的某个路径下,它们的内容与终端用户接收到的版本是一样的。原始的源码文件已经提前编译好了,源码在每次请求后都不会变化。

Linux.CN 是一个依赖多个数据库的动态网站,当有浏览器的请求时,网页就会生成并提供服务。大部分网站是动态的,你与这些网站互动时,大量的内容会经常改变。

静态网站有一些好处,比如加载时间更短,请求的服务器资源更少、更安全(值得商榷)。

传统上,静态网站更适合于创建只有少量网页、内容变化不频繁的小网站。

然而,随着静态网站生成工具出现后,静态网站的适用范围越来越大。你还可以使用这些工具搭建博客网站。

我整理了几个开源的静态网站生成工具,这些工具可以帮你搭建界面优美的网站。

最好的开源静态网站生成工具

请注意,静态网站不会提供很复杂的功能。如果你需要复杂的功能,那么你可以参考适用于动态网站的 最佳开源 CMS 列表。

1. Jekyll

Jekyll 是用 Ruby 写的最受欢迎的开源静态生成工具之一。实际上,Jekyll 是 GitHub 页面 的引擎,它可以让你免费用 GitHub 托管网站。

你可以很轻松地跨平台配置 Jekyll,包括 Ubuntu。它利用 Markdown 、 Liquid (模板语言)、HTML 和 CSS 来生成静态的网页文件。如果你要搭建一个没有广告或推广自己工具或服务的产品页的博客网站,它是个不错的选择。

它还支持从常见的 CMS( 内容管理系统(Content management system))如 Ghost、WordPress、Drupal 7 迁移你的博客。你可以管理永久链接、类别、页面、文章,还可以自定义布局,这些功能都很强大。因此,即使你已经有了一个网站,如果你想转成静态网站,Jekyll 会是一个完美的解决方案。你可以参考 官方文档 或 GitHub 页面 了解更多内容。

2. Hugo

Hugo 是另一个很受欢迎的用于搭建静态网站的开源框架。它是用 Go 语言 写的。

它运行速度快、使用简单、可靠性高。如果你需要,它也可以提供更高级的主题。它还提供了一些有用的快捷方式来帮助你轻松完成任务。无论是组合展示网站还是博客网站,Hogo 都有能力管理大量的内容类型。

如果你想使用 Hugo,你可以参照它的 官方文档 或它的 GitHub 页面 来安装以及了解更多相关的使用方法。如果需要的话,你还可以将 Hugo 部署在 GitHub 页面或任何 CDN 上。

3. Hexo

Hexo 是一个有趣的开源框架,基于 Node.js 。像其他的工具一样,你可以用它搭建相当快速的网站,不仅如此,它还提供了丰富的主题和插件。

它还根据用户的每个需求提供了强大的 API 来扩展功能。如果你已经有一个网站,你可以用它的 迁移 扩展轻松完成迁移工作。

你可以参照 官方文档 或 GitHub 页面 来使用 Hexo。

4. Gatsby

Gatsby 是一个越来越流行的开源网站生成框架。它使用 React.js 来生成快速、界面优美的网站。

几年前在一个实验性的项目中,我曾经非常想尝试一下这个工具,它提供的成千上万的新插件和主题的能力让我印象深刻。与其他静态网站生成工具不同的是,你可以使用 Gatsby 生成一个网站,并在不损失任何功能的情况下获得静态网站的好处。

它提供了与很多流行的服务的整合功能。当然,你可以不使用它的复杂的功能,或将其与你选择的流行 CMS 配合使用,这也会很有趣。你可以查看他们的 官方文档 或它的 GitHub 页面 了解更多内容。

5. VuePress

VuePress 是由 Vue.js 支持的静态网站生成工具,而 Vue.js 是一个开源的渐进式 JavaScript 框架。

如果你了解 HTML、CSS 和 JavaScript,那么你可以无压力地使用 VuePress。你应该可以找到几个有用的插件和主题来为你的网站建设开个头。此外,看起来 Vue.js 的更新一直很活跃,很多开发者都在关注 Vue.js,这是一件好事。

你可以参照他们的 官方文档 和 GitHub 页面 了解更多。

6. Nuxt.js

Nuxt.js 使用了 Vue.js 和 Node.js,但它致力于模块化,并且有能力依赖服务端而非客户端。不仅如此,它的目标是为开发者提供直观的体验,并提供描述性错误,以及详细的文档等。

正如它声称的那样,在你用来搭建静态网站的所有工具中,Nuxt.js 可以做到功能和灵活性两全其美。他们还提供了一个 Nuxt 线上沙盒 ,让你不费吹灰之力就能直接测试它。

你可以查看它的 GitHub 页面 和 官方网站 了解更多。

7. Docusaurus

Docusaurus 是一个有趣的开源静态网站生成工具,为搭建文档类网站量身定制。它还是 Facebook 开源计划 的一个项目。

Docusaurus 是用 React 构建的。你可以使用所有的基本功能,像文档版本管理、文档搜索和翻译大多是预先配置的。如果你想为你的产品或服务搭建一个文档网站,那么可以试试 Docusaurus。

你可以从它的 GitHub 页面 和它的 官网 获取更多信息

8. Eleventy

Eleventy 自称是 Jekyll 的替代品,旨在以更简单的方法来制作更快的静态网站。

它似乎很容易上手,而且它还提供了适当的文档来帮助你。如果你想找一个简单的静态网站生成工具,Eleventy 似乎会是一个有趣的选择。

你可以参照它的 GitHub 页面 和 官网 来了解更多的细节。

9. Publii

Publii 是一个令人印象深刻的开源 CMS,它能使生成一个静态网站变得很容易。它是用 Electron 和 Vue.js 构建的。如果有需要,你也可以把你的文章从 WorkPress 网站迁移过来。此外,它还提供了与 GitHub 页面、Netlify 及其它类似服务的一键同步功能。

如果你利用 Publii 生成一个静态网站,你还可以得到一个所见即所得的编辑器。你可以从 官网 下载它,或者从它的 GitHub 页面 了解更多信息。

10. Primo

一个有趣的开源静态网站生成工具,目前开发工作仍很活跃。虽然与其他的静态生成工具相比,它还不是一个成熟的解决方案,有些功能还不完善,但它是一个独特的项目。

Primo 旨在使用可视化的构建器帮你构建和搭建网站,这样你就可以轻松编辑和部署到任意主机上。

你可以参照 官网 或查看它的 GitHub 页面 了解更多信息。

结语

还有很多文章中没有列出的网站生成工具。然而,我试图提到最好的静态生成器,为您提供最快的加载时间,最好的安全性和令人印象深刻的灵活性。
责编AJX

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 开发工具
    +关注

    关注

    0

    文章

    207

    浏览量

    22220
  • 网站
    +关注

    关注

    1

    文章

    256

    浏览量

    23120
  • CSS
    CSS
    +关注

    关注

    0

    文章

    109

    浏览量

    14338
收藏 人收藏

    评论

    相关推荐

    谁成就了智能家居“十大”品牌

    网站到是做得漂亮,上边一个萝卜一个坑的把“十大”品牌给一一定好,下边就用微小的文字交替代此行为不代表本网站观点,这叫用自己的嘴引用别人的话,别人是谁不知道,就是“有人这样说过”。 事已至此,若是对“谁
    发表于 10-06 11:10

    成都WEB技术培训及WEB前端开发培训

    使用PS切图,使用Axure与Mockups设计原型图和交互设计图4 Web前端技术基础 掌握HTMLCSS基础技术5 网站后台技术 掌握
    发表于 10-26 15:05

    Java程序员必逛的十大学习网站

    Java程序员每周必逛的十大学习网站
    发表于 06-17 11:09

    聊聊合格电气自动化工程师必备十大技能

    很多年轻的朋友在四处求教如何才能成为一个合格的电气自动化工程师,本文以图文形式和大家聊聊合格电气自动化工程师必备十大技能。1、电路电路对于普通电气工程师来说真的很难!既然我们工控属于应用型,都是直接那产品来用,掌握基本原理,至于
    发表于 09-08 08:15

    静态网页设计教程,下载

    静态网页设计教程 1.了解静态网页的特征及存取原理; 2. 了解HTML中各种标记的用法; 3.  掌握静态网页设计的基本
    发表于 04-28 16:37 0次下载

    十大电子行业网站及调查比较

    就我收集的十大电子行业网站列出来供大家分享。
    发表于 07-04 16:53 5836次阅读
    <b class='flag-5'>十大</b>电子行业<b class='flag-5'>网站</b>及调查比较

    HTML5+CSS3在触屏网站上的实践

      纯HTML5+CSS3方案:语义化更好,性能更优   混合方案:兼容性好,部分特效实现较复杂
    发表于 09-14 10:42 11次下载
    <b class='flag-5'>HTML5+CSS</b>3在触屏<b class='flag-5'>网站</b>上的实践

    基于响应式Web设计的HTML5和CSS3实际案例

    本文主要讲述基于响应式Web设计的HTML5和CSS3实际案例,软件开发工程师可以多学习其中的长处。
    发表于 09-14 11:42 6次下载

    几款实用的HTML5/CSS3应用

    1、HTML5像素文字爆炸重组动画特效 HTML5可以把文字效果做得非常酷,就像之前分享的HTML5/CSS3发光文字和HTML5/
    发表于 09-26 17:04 2次下载
    几款实用的<b class='flag-5'>HTML</b>5/<b class='flag-5'>CSS</b>3应用

    网页设计语言教程(HTML_CSS

    本书是网页设计语言系列教材之《HTML/CSS教程》。 本教材通过大量典型实例介绍了HTML的基本知识,如何建立超级链接,如何插入图形,如何建立框架、表单的使用,以及CSS语法定义及嵌
    发表于 11-24 10:25 0次下载
    网页设计语言教程(<b class='flag-5'>HTML_CSS</b>)

    学习HTMLCSS的5大理由

    人们学习HTMLCSS最常见的原因是开始从事web开发。但并不是只有web开发人员才要学习HTMLCSS的核心技术。作为一个网络用户,你需要你
    发表于 04-12 17:24 4357次阅读

    一名合格的HTML5开发工程师需要掌握哪些知识

    HTML5开发不同于网页设计,是网页设计的深化,更关注于网站如何交互和浏览。web前端开发人员使用的技术CSSHTML、JavaScript,根据设计师设计的雏形来编写代码。布局,框
    的头像 发表于 04-17 16:29 3868次阅读

    CSS555 EEPROM编程器开源分享

    电子发烧友网站提供《CSS555 EEPROM编程器开源分享.zip》资料免费下载
    发表于 11-02 09:27 0次下载
    <b class='flag-5'>CSS</b>555 EEPROM编程器<b class='flag-5'>开源</b>分享

    常用HTMLCSS那你知道ASP.NET吗?

    简单来说,ASP.NET 是一个使用 HTMLCSS、JavaScript 和服务器脚本创建网页和网站的开发框架。 众所周知,目前PHP和ASP.NET是最主流的使用最多的Web网站
    的头像 发表于 03-29 11:12 929次阅读

    VitePress 1.0正式发布:基于Vite与Vue构建的静态网站生成

    VitePress允许用户通过Markdown编辑内容,应用特定的主题并生成易于部署的静态HTML页面。值得注意的是,VitePress不仅仅适用于文档制作领域,还能用于博客、档案及营销型网站
    的头像 发表于 03-22 14:49 840次阅读