很多朋友对于h5图片开源网站源码分享下载和图片h5制作不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！
大家好，我是Echa。
最近有不少的粉丝私信小编问道：怎么实现静态站点页面？用什么技术实现？有部分懂技术的粉丝也会问SSG和SSR有啥区别，是一样的东西么？SSG有哪些优点和缺点呢？
小编带着这些疑问继续为大家一一讲解，
SSG：StaticSiteGeneration，静态页面生成；SSR：ServerSideRendering，服务端渲染；
什么是SSG（staticsitegenerator）？
SSG是一种基于原始数据和一组模板生成完整静态HTML网站的工具。本质上，SSG会自动完成对单个HTML页面进行编码的任务，并使这些页面提前准备好为用户提供服务。因为这些HTML页面是预先构建的，所以它们可以非常快速地加载到用户的浏览器中。
SSG是内容管理系统(CMS)的替代品——另一种用于管理Web内容、生成网页和实施模板的工具。
SSG优点
加载速度快-由于静态站点生成器是提前创建网页而不是按需创建网页（如使用CMS），因此网页在用户浏览器中的加载速度略快。将HTML发送给客户端，所以几乎会立即看到页面内容。无需获取其他客户端-理想情况下，服务器呈现过程将进行所有必需的调用以获取数据，因此不会从客户端进行任何其他服务调用。非常适合SEO更轻量的后端-静态网站是轻量级的，不需要在服务器端运行那么多代码，而基于CMS的网站不断向服务器端查询内容。定制-开发人员可以创建他们想要的任何模板。它们不受CMS提供的字段的限制，也不受CMS内置模板的限制。
SSG缺点
大型页面可能会很慢-如果路由很多，速度可能会变慢。与某些UI库不兼容-如果你用的某些库使用了window，那你就要想办法来解决了。因为Node中没有window或者document。很少或没有预先构建的模板-定制的缺点是可能需要更长的时间。许多静态站点生成器不附带模板，开发人员首先必须花费大量时间从头开始构建它们。没有用户友好的界面-非开发者用户更难使用静态站点生成器发布内容。没有CMS界面，使用原始的未格式化数据可能会让用户感到害怕。此外，进行网站更新通常需要开发人员支持。
近年来，构建网站的方式发生了很大变化，出现了很多新的构建网站的方式。静态站点生成器(SSG)就是一种构建网站的现代Web开发技术，其正在变得越来越流行！
2023年值得考虑的静态站点生成器大纲
Next.jsHugoGatsbyJekyllNuxtDocusaurusHexoSlateGitBookAstroDocsifyVuePressMkDocsUmiJSEleventy
为了正确审查值得考虑的静态站点生成器，我们将把它们分为以下两类：
提供多种渲染方法（包括静态站点生成）的框架：Gatsby、Next.js、Astro、Nuxt.js和SvelteKit等等。仅提供静态渲染功能的SSG：Eleventy和Hugo。
目前，不分语言的话有超过350个静态站点生成器可以供我们选择：
详细请见：https://jamstack.org/generators/
Next.js
官网网址：https://nextjs.org/
Github：https://github.com/vercel
Next.js不仅是一个静态站点生成器，而且是使用最广泛的开源、基于React的框架之一，用于构建网站和Web应用。它支持服务端渲染(SSR)、静态站点生成(SSG)、增量静态渲染和客户端渲染(CSR)。
Next.js的一大优点是它允许我们决定如何为每个页面使用SSR或SSG。这使其成为需要多种渲染方法的更复杂项目的不错选择。
Next.js由Vercel创建，目前拥有101kGitHubStar。Next.js还具有结构良好且易于浏览的文档，可提供无缝的学习体验。
特性：
基于文件的路由系统默认为SSG，不同于默认为SSR的其他工具通过其自定义图像组件优化图像
图下图：
Hugo
官网网址：https://gohugo.io/
Github：https://github.com/gohugoio/hugo
Hugo是一个用Go编写的静态站点生成器，针对快速构建时间进行了优化。
Hugo提供了内容管理功能，使其成为拥有许多帖子的网站或博客的绝佳选择。首先，它处理存储在/content目录中的markdown文件中的所有内容，使得从单个文件夹发布和管理大量内容变得容易。其次，Hugo内置了对分页的支持，生成目录，并支持将内容分组到类别和标签中，称为分类法。最后，Hugo提供字数统计和阅读分钟数功能。Hugo还将markdown用于元数据、布局模板和i18n配置。
特性：
跨平台支持Windows、macOS、Linux等集成的谷歌分析支持使用markdown来创建内容内置分页支持支持生成目录提供分页功能支持国际化（i18n），开发者可以快速搭建多语言网站一个很棒的主题系统，它提供了300多个主题除了HTML输出，Hugo还支持AMP和JSON等其他格式
如下图：
Gatsby
官网网址：http://gatsbyjs.org/
Github：https://github.com/gatsbyjs/gatsby
Gatsby也是最流行和使用最广泛的框架之一。它是一个基于React.js的开源框架，是创建网站和应用的绝佳选择。除了延迟静态生成(DSG)和服务端呈现(SSR)之外，它还提供了静态站点生成。使用Gatsby的一个好处是它提供了大量的主题、入门模板和插件。
除了其框架功能之外，Gatsby还提供一种名为GatsbyCloud的产品，这是一种用于构建和托管Gatsby网站的云基础设施。GatsbyCloud之于Gatsby就像Vercel之于Next.js。
Gatsby框架拥有一个活跃的开发者社区，并提供了丰富的文档。
特性：
支持基于GraphQL的数据获取拥有庞大的插件生态系统，其中包含适用于不同用例的插件，包括样式、图像、分析和搜索支持与多个CMS集成，包括Prismic提供多个主题和入门模板可以通过Gatsby的云平台访问全球CDN、云功能等通过gatsby-image插件提供开箱即用的图像处理、压缩和优化
如下图：
Jekyll
官网网址：https://jekyllrb.com/
Github：https://github.com/jekyll/jekyll
Jekyll是一个简单的、支持博客的静态站点生成器，非常适合个人、项目或组织站点。把它想象成一个基于文件的CMS，没有所有的复杂性。Jekyll获取您的内容，呈现Markdown和Liquid模板，并吐出一个完整的静态网站，可供Apache、Nginx或其他web服务器使用。Jekyll是GitHubPages背后的引擎，您可以使用它直接从GitHub存储库托管站点。
如下图：
Nuxt
官网网址：https://nuxtjs.org/
Github：https://github.com/nuxt/nuxt.js
Nuxt.js是一个基于Vue的框架，并不是纯粹的静态站点生成器。但是，它可以用作构建SPA的SSR框架或用作SSG。它有一个全静态模式，可以用它来开发静态站点。
Nuxt.js的最新版本默认使用Vite，使其速度更快、性能更高。Nuxt.js在Vue.js开发者中非常流行。
特性：
基于文件的路由全静态模式支持Typescript零配置启动自动导入组件提供超过160个模块
如下图：
Docusaurus
官网网址：https://v2.docusaurus.io/
Github：https://github.com/nuxt/nuxt.js
节省时间，专注于项目文档。只需使用Markdown编写文档和博客文章，Docusaurus就可以发布一组静态html文件。
特性：
让您节省时间、专注于文档编写。您只需采用MDX格式编写文档和博文，Docusaurus就会将它们构建成静态的HTML文件供用户访问。您甚至可以在Markdown中嵌入React组件，这一切都得益于MDX。利用React组件可以为您的项目扩展或自定义页面布局。得益于Docusaurus的插件架构，再设计您自己的网站的同时，仍然能够重用由Docusaurus插件所创建的数据。内置支持本地化翻译功能。可以通过git、Crowdin或任何翻译管理工具来翻译您的文档并能够独立部署。让用户可以查看您的项目的所有版本的文档。文档版本化功能可以帮您保持文档与项目版本的同步。让您的用户能够轻松地查找他们所需要的内容。我们自豪地支持Algolia文档搜索产品。
如下图：
Hexo
官网网址：https://hexo.io/
Github：https://github.com/hexojs/hexo
Hexo是一款基于Nodejs的，快速、简洁且高效的博客框架。具有丰富的插件和主题，具有超快的速度。支持Makedown语法，可以方便快捷的编写博客文档。同时支持node命令，可以一键部署到GitHubPages,Heroku或其他平台。
总之，是个写博客的利器。
如下图：
Slate
官网网址：https://slatedocs.github.io/slate/
Github：https://github.com/slatedocs/slate
Slate可帮助您创建美观，智能，响应式的API文档。
具有以下特性：
干净、直观的设计支持Markdown语法有多种编程语言的代码示例开箱即用的语法高亮功能，支持超过100种语言，无需配置
目前仅支持Linux以及OSX，在Windows上可能可以运行，但官方不支持。
如下图：
GitBook
官网网址：https://www.gitbook.com/
Github：https://github.com/GitbookIO/gitbook
GitBook是一个基于Node.js的命令行工具，可使用Github/Git和Markdown来制作精美的电子书或制作开源软件帮助文档等。
从前我们用笔墨纸砚写书，后来我们在电脑上敲击Word文档，再后来，我们似乎不满足于这样的使用工具，Gitbook为我们提供了新的思路。它不同于备忘录、Word文档这类书写工具，而是能直接在线实现添加目录、排版等功能。除此之外，Gitbook还有一个最大的优点——能多人同时在线编辑。著作完成之后，你可以将图书输出成静态HTML或PDF等格式分享给其他小伙伴。
如下图：
Astro
官网网址：https://astro.build/
Github：https://github.com/withastro/astro
Astro在技术上是一个开源框架，而不是静态站点生成器。这意味着即使Astro支持静态站点生成，它也提供SSR并具有其他功能。例如，它支持与TailwindCSS、React、Vue和Svelte等技术集成，并允许我们在同一应用中混合混合它们。
Astro的Island架构允许我们在静态页面上拥有交互式内容。Astroislands为我们打开了将SSG与动态内容相结合的新方式的大门。一个示例就是将销售活动所需的倒数计时器组件注入到博客页面。
Astro将UI提取到页面上的较小组件中，并用轻量级HTML替换未使用的JavaScript。这使得网站加载速度更快并缩短了可交互时间(TimetoInteractive，TTI)，因为发送到客户端的JavaScript非常少。
尽管Astro是一个相对较新的解决方案，但其令人兴奋的功能已经引起了开发者的广泛关注。Astro提供了多种集成和主题，开发者可以使用它们来丰富应用。
特性：
提供多个主题提供多种集成基于文件的路由为Markdown和MDX提供原生支持支持混合多个框架Island架构允许将交互式内容注入到静态页面
如下图：
Docsify
官网网址：https://docsify.js.org/
Github：https://github.com/docsifyjs/docsify
我们在做完项目的时候经常会写一些项目手册，来记录我们在项目开发过程中的一些开发流程、使用方式以及注意事项，分享给将会使用到这个项目的人，方便大家快速上手，让程序顺利运行。
目前比较好的方式就是写成Markdown格式的技术文档，方便我们发布在github上，同时也可以发布到博客分享平台。除此之外我们还可以借助docsify这个工具，来帮助我们快速的搭建一个小型的文档网站，它可以自动将我们写在Markdown中的标题生成目录，整个页面的配色和布局也十分舒适易读，让整个阅读体验提升了好几个level，有了docsify这个神器，再也不害怕看长长的技术文档了。
docsify是一个动态生成文档网站的工具。不同于GitBook、Hexo的地方是它不会将.md转成.html文件，所有转换工作都是在运行时进行。这将非常实用，如果只是需要快速的搭建一个小型的文档网站，或者不想因为生成的一堆.html文件“污染”commit记录，只需要创建一个index.html就可以开始写文档而且直接部署在GitHubPages。
特性
无需构建，写完文档直接发布容易使用并且轻量(~19kBgzipped)智能的全文搜索提供多套主题丰富的API支持Emoji兼容IE10+支持SSR(example)
如下图：
VuePress
官网网址：https://vuepress.vuejs.org/
Github：https://github.com/vuejs/vuepress
VuePress由两部分组成：第一部分是一个极简静态网站生成器(opensnewwindow)，它包含由Vue驱动的主题系统和插件API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持Vue及其子项目的文档需求。
每一个由VuePress生成的页面都带有预渲染好的HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。
特性(features)
内置markdown扩展，针对技术文档进行了优化能够利用内嵌在markdown文件中的Vue代码以Vue驱动的自定义主题系统PWA支持GoogleAnalytics集成一个默认主题：响应式布局可选的主页简单、开箱即用、基于标题的搜索功能可定制的导航栏和侧边栏自动生成的GitHub链接和页面编辑链接
如下图：
MkDocs
官网网址：http://www.mkdocs.org/
Github：https://github.com/mkdocs/mkdocs
MkDocs是一个快速、简单、华丽的静态网站生成器，适用于构建项目文档。文档源文件以Markdown编写，并使用一个YAML文件来进行配置。MkDocs生成完全静态的HTML网站，你可以将其部署到GitHubpages、AmzzonS3或你自己选择的其它任意地方。
MkDocs有一堆很好看的主题。官方内置了两个主题：mkdocs和readthedocs，也可以从MkDocswiki中选择第三方主题，或者自定义主题。
支持实时预览你的网站:当你编辑Md文件时，内置的开发服务可以帮助你预览显示效果。当文档有改动时，甚至还可以自动载入并刷新你的浏览器。
如下图：
UmiJS
官网网址：https://umijs.org/
Github：https://github.com/umijs/umi
umi，中文可发音为乌米，是一个可插拔的企业级react应用框架。umi以路由为基础的，支持类next.js的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。然后配以完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求，目前内外部加起来已有50+的插件。
umi是蚂蚁金服的底层前端框架，已直接或间接地服务了600+应用，包括java、node、H5无线、离线（Hybrid）应用、纯前端assets应用、CMS应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。
#特性
开箱即用，内置react、react-router等类next.js且功能完备的路由约定，同时支持配置的路由方式完善的插件体系，覆盖从源码到构建产物的每个生命周期高性能，通过插件支持PWA、以路由为单元的codesplitting等支持静态页面导出，适配各种环境，比如中台业务、无线业务、egg、支付宝钱包、云凤蝶等开发启动快，支持一键开启dll等一键兼容到IE9，基于umi-plugin-polyfills完善的TypeScript支持，包括d.ts定义和umitest与dva数据流的深入融合，支持duckdirectory、model的自动加载、codesplitting等等
如下图：
Eleventy
官网网址：https://11ty.dev/
Github：https://github.com/11ty/eleventy
Eleventy，简称11ty，是一个用JavaScript编写的开源静态站点生成器。但是，它不依赖于特定的框架来生成或提供内容。对于熟悉并习惯使用JavaScript和Node.js的开发者来说，这是一个很好的选择。
多年来，Eleventy越来越受欢迎，尤其是当web.dev、ESlint、MDN和Netlify等网站都是用它构建的时候。
Eleventy默认是零配置的，具有灵活的配置选项，并且适用于任何项目的结构。它支持多种模板语言，包括Liquid、Handlebars、Markdown和JavaScript。
特性：
灵活的模板系统支持11种模板语言无需客户端JavaScript快速构建时间JavaScript友好配置灵活
如下图：
最后
一台电脑,一个键盘,尽情挥洒智慧的人生;
几行数字,几个字母,认真编写生活的美好;
一个灵感,一段程序,推动科技进步,促进社会发展。
创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。
关于本次h5图片开源网站源码分享下载和图片h5制作的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。