vue转静态页面_10 大静态网站生成工具 | Linux 中国

news/2024/5/20 10:48:14/文章来源:https://blog.csdn.net/weixin_39779928/article/details/111275167
35d0dc9d62ca1a141ba5b9bd83d8300d.png导读:在寻找部署静态网页的方法吗?这几个开源的静态网站生成工具可以帮你迅速部署界面优美、功能强大的静态网站,无需掌握复杂的 HTML 和 CSS 技能。本文字数:3396,阅读时长大约:5分钟https://linux.cn/article-12671-1.html作者:Ankush Das译者:Xiaobin.Liu

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

c62ef6c7-6d35-eb11-8da9-e4434bdf6706.svg

静态网站是什么?

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

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

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

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

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

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

c62ef6c7-6d35-eb11-8da9-e4434bdf6706.svg

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

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

c62ef6c7-6d35-eb11-8da9-e4434bdf6706.svg

1、Jekyll

8fecc1174a95d366dc26edc0eb83cc0d.png

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

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

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

◈ Jekyllc62ef6c7-6d35-eb11-8da9-e4434bdf6706.svg

2、Hugo

4cf530e1c784ab410d1a9364e3f82663.png

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

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

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

◈ Hugoc62ef6c7-6d35-eb11-8da9-e4434bdf6706.svg

3、Hexo

b76d171c40d1e804ba3f8d6953fca89b.png

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

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

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

◈ Hexoc62ef6c7-6d35-eb11-8da9-e4434bdf6706.svg

4、Gatsby

daa8082d31af84d5db8c89df7609ffcc.png

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

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

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

◈ Gatsbyc62ef6c7-6d35-eb11-8da9-e4434bdf6706.svg

5、VuePress

1a78e83ee45f383b7415c7415698440c.png

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

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

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

◈ VuePressc62ef6c7-6d35-eb11-8da9-e4434bdf6706.svg

6、Nuxt.js

8c7aeeda4f06d5337ac29eac74359634.png

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

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

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

◈ Nuxt.jsc62ef6c7-6d35-eb11-8da9-e4434bdf6706.svg

7、Docusaurus

95364bcf5f77863de103f249d4a120ed.png

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

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

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

◈ Docusaurusc62ef6c7-6d35-eb11-8da9-e4434bdf6706.svg

8、Eleventy

a635fdd1a482a6a612da7e449b723889.png

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

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

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

◈ Eleventyc62ef6c7-6d35-eb11-8da9-e4434bdf6706.svg

9、Publii

e6cefd68dea9261545ed4b96dc79aaf4.png

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

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

◈ Publiic62ef6c7-6d35-eb11-8da9-e4434bdf6706.svg

10、Primo

eac49b1ec43ca9a83b5b861fd09f6fa6.png

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

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

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

◈ Primoc62ef6c7-6d35-eb11-8da9-e4434bdf6706.svg

结语

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

列表中没有你最喜欢的工具?在下面的评论中告诉我。


via: https://itsfoss.com/open-source-static-site-generators/

作者:Ankush Das 选题:lujun9972 译者:lxbwolf 校对:wxy

本文由 LCTT 原创编译,Linux中国 荣誉推出

e22ef6c7-6d35-eb11-8da9-e4434bdf6706.svg

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_732791.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

判断页面是否有未提交的内容_多域名指向同一网站,301重定向怎么做?为什么要设置404错误页面?...

一、404错误页面404错误:网页不存在或不可访问则URL地址为404;增加用户跳出率,增加搜索引擎蜘蛛丢失率。404错误页面作用:减少用户跳出率,减少搜索引擎蜘蛛丢失率。制作404页面要求:必须有返回网站的链接&a…

判断分辨网站是否伪静态的方法

所有seoer都知道网站的优化最好是静态网页,但是有些时候静态网 hakuci 标签: 伪静态页是无法满足建站需求的,所以伪静态就出现了,而我们浏览其他的网站,看他是不是动态都是看他的网址有没有?之类的符号,而要判断伪静态…

.net core3.0上传文件出现404_论404错误页面对SEO优化的影响

什么是404错误页面:告诉浏览者其所请求的页面不存在或链接错误,同时引导用户使用网站其他页面而不是关闭窗口离开。产生404错误页面原因:1.网页URL生成规则改变。2.网页文件更名或移动位置。3.导入链接拼写错误。注:以上3个为常见…

会员直推奖php程序_网站优化篇:网站程序的选择

在搭建时,我们要选择什么样的程序呢?这个是有讲究的,建议大家使用自己最熟悉的程序,因为不熟悉,我们就要去学习程序的使用,一个程序要几天才能够操作,1天,2天,或又者是7天…

Apache服务部署静态网站

网站服务程序IIS应用于Windows系统中Nginx(特点:系统资源消耗低且并发能力强)Apache可以应用于Linux、Unix、Windows系统中 Apache服务程序部署第1步:把光盘设备中的系统镜像挂载到/media/cdrom目录。第2步:使用Vim文本…

网站安装打包 软件环境检测与安装[二] 下

2019独角兽企业重金招聘Python工程师标准>>> 这一节主要说安装! 1。操作系统 这个应该不用了,没系统也没法运行了! 2。IIS安装 这个是重点,最后面介绍! 3。framework安装 这个也不用了,工具安装…

大型网站技术架构(一)大型网站架构演化

2019独角兽企业重金招聘Python工程师标准>>> 看完了有一本书,就应该有所收获,有所总结,最近把《大型网站技术架构》一书给看完了,给人的印象实在深刻,再加上之前也搞过书本上讲的反向代理和负载均衡以及ses…

热门搜索怎么实现_SEO优化怎么样呢?如何做seo?

SEO优化怎么样呢?如何做seo?网站上线后不是给自己看的,更多的情况下是给用户看的。seo优化的作用在于提升网站关键词自然排名,便于用户搜索,便于提高用户通过相关关键词看到网站的概率。通常所说的搜索引擎优化&#x…

服务器站点建立,Windows Server通过IIS创建站点

Windows Server 2003通过IIS创建站点操作步骤1、首先建立一个目录作为网站目录,用于存放网站程序,以网站目录创建到C:\wwwroot为例,如下图:2、创建站点:打开IIS,右击网站选项,新建一个网站&…

安全频道支持出错(页面)_网站页面、图片服务器、数据库服务器等分析

网站页面、图片服务器、数据库服务器等分析1、HTML静态化 其实大家都知道,效率最高、消耗最小的就是纯静态化的html页面,所以我们尽可能使我们的网站上的页面采 用静态页面来实现,这个最简单的方法其实也是最有效的方法。但是对于大量内容并且…

ubuntu 能解析域名但ping不通_域名无法打开网站的常见原因和解决办法

在网站优化中,最怕就是遇到网站无法打开,常见的就是域名无法打开网站,遇到这个问题,说明网站网站肯定某个环节出了问题。这里就给大家列下常见域名无法打开网站的常见原因和解决办法。第一、网站打开提示域名没有解析或者备案&…

url模糊匹配优化_Excel对引擎优化的模糊查找:轻松的404和网站迁移重定向

近年来,搜索引擎优化的本质已经变得越来越数据驱动了,为人工智能或自然语言处理等创新趋势铺平了道路。这也为聪明的营销人员创造了机会,他们热衷于使用谷歌Sheets或Excel等日常工具来自动完成耗时的任务,比如重定向映射。感谢我的…

高德地图获取圆形区域_强烈推荐,两个找地图素材的网站

大家好呀,我是三石~在PPT的制作中,我们会经常使用一些地图素材。比如这样的~但是呢,自己去网上找的素材都是这样的。这样的地图素材在PPT中不容易编辑。今天和大家分享一下,寻找地图素材的方法。1、高德地图提到高德地图大家都会想…

php网站是视屏自动播放,如何用HTML5在页面中插入可自动播放的视频

大家在浏览网站时有没有注意到网站上有视频,音频等,正在学习HTML和CSS的小伙伴,你知道如何用HTML5在页面中插入视频并自动播放吗?这篇文章就和大家讲讲html5如何插入视频以及HTML插入视频的代码,感兴趣的小伙伴可以参考…

服务器上网站上的数据库密码,云服务器上数据库密码

云服务器上数据库密码 内容精选换一换文档数据库服务支持开启公网访问功能,通过弹性IP进行访问。您也可通过弹性云服务器的内网访问文档数据库。要将已有的MongoDB数据库迁移到文档数据库,需要先使用mongoexport工具对它做转储。再通过弹性云服务器或可访…

html动态添加图片根目录路径不显示_网站SEO优化技巧,静态路径与动态路径

什么是动态路径,静态路径答:路径指的就是网址URL。究竟什么是动态路径,静态路径,他们的区别是什么呢?动态路径一般是指在我们的网站根目录找不到这个文件,数据是保存在数据库的,每次打开页面就会…

Android爬虫Jsoup爬取某招聘网站数据并保存为exceL文件

说明此项目仅用于学习目的,勿做其他用途。 此项目主要用到了android Jsoup和jxl框架 添加项目依赖,主要是jxl和jsoup: dependencies {implementation org.jsoup:jsoup:1.9.2implementation fileTree(dir: libs, include: [*.jar])implementat…

基于dreamweaver软件设计和开发一网站_基于SpringBoot开发一套完整的项目(一)准备工作...

1.1 SpringBoot简介① 为所有Spring 开发提供一个更快更广泛的人门体验。② 零配置。无冗余代码生成和XML 强制配置,遵循“约定大于配置” 。③ 集成了大量常用的第三方库的配置, Spring Boot 应用为这些第三方库提供了几乎可以零配置的开箱即用的能力。…

梅林 php mysql_k3梅林7.7!完美安装onmp!!!K3架设php网站,博客,云盘,数据库!!!...

本帖最后由 chengmeiqq 于 2018-3-19 16:16 编辑k3梅林7.7!完美安装onmp!!!phpMyAdmin-Owncloud-Kodexplo...固件: K3_Melin_11.16_X7.7.trx 刷机我就不说了-------------------------------------- 以下都架设下K3路由器上面梅林…

Php仿手机网站教程,HTML5仿手机微信聊天界面

这篇文章主要为大家详细介绍了HTML5仿手机微信聊天界面的关键代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下给大家带来的是HTML5仿手机微信聊天界面,截图效果如下:源代码如下:XML/HTML Code复制内容到剪贴板H…