VitePress 是一个静态站点生成器 (SSG),专为构建快速、以内容为中心的网站而设计。 只要数据可以在构建时确定,您可以使用VitePress构建几乎任何类型的网站,包括博客、个人作品集和营销网站。 官方的Vue.js博客是一个简单的博客,它根据本地内容生成索引页面。 性能与许多传统的SSG不同,VitePress生成的网站实际上是一个单页应用程序 (SPA)。 快速初始加载 对于任何页面的初始访问,将提供静态的预渲染HTML,以实现极快的加载速度和最佳的SEO效果。 这听起来可能效率低下,但是Vue编译器足够智能,能够将静态部分和动态部分分离,从而将水合成本和负载大小都最小化。对于初始页面加载,静态部分会自动从JavaScript负载中删除,并在水合过程中跳过。
Hugo是用Go编写的静态HTML和CSS网站生成器。它针对速度、易用性和可配置性进行了优化。Hugo拿一个包含内容和模板的目录,并将其渲染成一个完整的HTML网站。 Hugo在几分之一秒内呈现了一个中等大小的典型网站。一个好的经验法则是,每段内容在大约1毫秒内呈现。 Hugo旨在适用于任何类型的网站,包括博客、tumbles和文档。
HydePHP 是一个内容优先的静态网站生成器,结合了 Laravel 的强大后端功能和 Markdown 的简单易用性。 它允许开发者通过 Markdown 或 Blade 模板创建静态 HTML 页面,适用于博客、文档站点或简单的静态网站。 HydePHP 的设计理念是 “快速上手,自由定制”,既适合初学者快速创建网站,也为高级用户提供了灵活的定制选项。 构建站点 完成内容创作后,运行以下命令生成静态 HTML 文件,输出到 _site 目录: php hyde build 生成的静态文件可以直接部署到任何支持静态内容的服务器,如 GitHub Pages • 静态网站:快速构建企业官网、个人作品集或其他静态页面。 • 学习 Laravel:通过 HydePHP 的 Blade 模板和 Laravel 生态,开发者可以深入学习 Laravel 框架。
getpelican/pelican[2] Stars: 11.7k License: AGPL-3.0 Pelican 是一个静态网站生成器,使用 Python 编写。 可通过丰富插件生态系统进行扩展 react-static/react-static[3] Stars: 10.3k License: MIT React Static 是一个基于 React 的渐进式静态网站生成器 利用静态网站生成器 Gridsome 结合 JavaScript 和 API 创建出令人惊叹的动态 Web 体验。 metalsmith/metalsmith[5] Stars: 7.8k License: MIT Metalsmith 是一个极其简单且可插拔的静态网站生成器。 Middleman 为独立开发者提供了许多强大的工具,包括静态网站生成器和各种插件。它可以帮助您快速构建出色且高效率的网站,并支持灵活定制样式和布局。
我进入了 Jamstack 和静态站点生成器的世界,当时我使用 Publii 和 Netlify 启动了一个页面。 从那时起,Jamstack 这个术语被 Netlify 推广了一番。 Publii 是一款全能的静态网站创建工具,如果你不想碰任何代码,它是一个不错的选择。但是,稍加努力,你可以使用现代 Web 组件制作更快、更精致的站点,并对整个过程有更多的控制。 但作为静态站点生成器,它有什么优势呢?除了支持多种模板语言外,我注意到很多宣称的优点只有在你已经熟悉其他系统的限制时才有意义。所以我打算深入了解一下,一边了解一边解释。 创建网站 好的,让我们回到我们的网站。提醒一下: 我们希望网站的页面使用一个布局。 但我们只想在 Markdown 中编写内容,而不是深入 HTML。 最终的目录布局是: 这应该足以激发你对撰写自己的网站的热情,或许足以让你望而却步。然而,要获得现代网站的所有精彩组件,你需要深入了解,我将在以后的文章中详细介绍。
对于 Web 开发的入门者而言,开发一个功能全面的静态的网站首页,并不是那么容易实现的需求。然而,实现一个个人网站或企业网站的简单首页,又是十分常见的需求。 如果可以通过编写简单的配置文件,就能实现一个美观使用的静态首页,并能够提供一些自定义的功能,无疑会降低此类需求开发的门槛。 ◎简介 Homer,是 bastienwirtz 在 Github 上开源的静态网站首页生成器,通过简单的 yaml 配置文件就能实现,目前版本为 v21.03.2。 heathcheck 功能 实现快捷键:/ 开始搜索,Escape 停止搜索,Enter 打开首个匹配结果,Alter/Option + Enter 在新标签开启结果 Homer ◎使用 Homer 是一个完全静态的 Homer ◎总结 Homer 使用简单,使用 yaml 格式的配置文件配置,可安装,提供搜索、分组功能,可自定义主题等,使实现一个网站的静态首页变得十分简单,同时提供了美观且功能丰富的实现方案,值得使用
上篇讲了网址导航,这一篇来到网页的最后一课,实现一个静态网站。 第三课: 静态网站 任务拆分: 任务1:网站规划思路(网页内容分类) 任务2:网页布局(上下、左右等) 任务3:样式编写 任务4:网页内容填 最终主页代码:(其它子页代码省略) <! a href='content/5.html' target = "_blank">黄色飞船
Astro 就像一个功能强大的静态网站生成器,但尽管它对 JavaScript 的依赖性较低,但它与 Next.js、Vue 和其他 Web 框架一样强大。 ,它非常擅长生成静态 HTML 页面(当然,这是内容网站的基础)。 他说:“我喜欢他们 [Astro] 从仅仅是静态优先转向真正首先实现那种体验 [然后] 转向服务器的转变。” Scanlon 在 Astro 中使用了 React 集成,以便为他的网站制作一个交互式联系表单。但他的网站的其余部分是纯静态的。 Astro 的优点在于它介于 Eleventy 和 Hugo 等框架的静态网站生成器方法,以及 Next.js、Vue 等的完全 JavaScript 世界之间。
以下是静态生成网站的一些好处: 更快的页面加载时间:静态生成的网站具有更快的页面加载时间,适合网络连接较慢的用户。 改进的SEO(搜索引擎优化):静态网站更容易被搜索引擎爬虫索引,提高了您网站在网络上的可见性。 成本效益:企业可以通过静态生成的网站节省托管和维护成本,因为这些网站不需要服务器端处理。 如何使用Next.js实现静态网站生成 Next.js使得实现静态网站生成变得简单。在本节中,我将向您展示如何使用getStaticProps函数为您的网站生成静态页面。 静态网站生成与服务器端渲染对比 既然你已经了解了静态网站生成和服务器端渲染是什么,那么让我们来看看在使用Next.js时它们在加载时间和代码大小方面的比较。 静态生成的网站通常通过消除在初始渲染过程中不需要的一些代码来减小代码大小。 何时使用静态网站生成和服务器端渲染? 对于主要包含静态信息且需要高流量的网站,使用静态网站生成是合适的选择。
#access_log logs/host.access.log main; location /src { root F:/测试静态网站 index.htm; # } #} } 主要关注http的location节点其配置如下: location /src { root F:/测试静态网站 /; index index.html index.htm; } 这里设置了根路径是 F:/测试静态网站/,并且首页设置了index.html、index.htm 这里需要注意的是如下: location / { root F:/测试静态网站/src/; index index.html index.htm ; } 其实两者的效果是一样的.第一个和第二个指向的绝对路径不一样,但是第一个nginx会做拼接操作,相当于F:/测试静态网站/+src=root.
搭建静态网站可以不用花钱买服务器,静态网站生成器(如 Hugo, VuePress, Hexo 等)+ GitHub Pages 服务 嫌 GitHub 慢可以换成码云 Pages 等,不过 GitHub Pages 可以通过 CNAME 换域名,而且 GitHub 有免费的 GitHub Action 可以实现自动化部署更新网站
搭建Http静态服务器环境 ? 搭建静态网站,首先需要部署环境。下面的步骤,将告诉大家如何在服务器上通过 Nginx 部署 HTTP 静态服务。 外网用户访问服务器的 Web 服务由 Nginx 提供,Nginx 需要配置静态资源的路径信息才能通过 url 正确访问到服务器上的静态资源。 现在我们需要重启 Nginx 让新的配置生效,如: nginx -s reload 重启后,现在我们应该已经可以使用我们的静态服务器了,现在让我们新建一个静态文件,查看服务是否运行正常。 ? 首先让我们在 /data 目录 下创建 www 目录,如: mkdir -p /data/www 创建第一个静态文件 在 /data/www 目录下创建我们的第一个静态文件 index.html 示例代码 到此,一个基于 Nginx 的静态服务器就搭建完成了,现在所有放在 /data/www 目录下的的静态资源都可以直接通过域名访问。 如果无显示,请刷新浏览器页面 完成实验 ?
Jekyll 是一个简单的免费的静态网页生成工具,不需要数据库支持,可以配合第三方服务,可以免费部署在 Github 上,而且可以绑定自己的域名。 简介 Jekyll 是一个简单的博客形态的静态站点生产机器。 它有一个模版目录,其中包含原始文本格式的文档,通过一个转换器(如 Markdown)和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。 Jekyll 也可以运行在 GitHub Page 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。 官方网站:http://jekyllcn.com/ 中文文档:https://www.wenjiangs.com/doc/jekyll-home 依赖 安装 Jekyll 相当简单,但是你得先做好一些准备工作
上面这种方法繁琐且慢,不推荐大家用怎样的方式安装docker。建议使用官网上的安装步骤:https://docs.docker.com/install/linux/docker-ee/ubuntu/
软件环境: CentOS 7.4 参考文档: 腾讯云开发者实验室:https://cloud.tencent.com/developer/labs 搭建Http静态服务器环境 搭建静态网站,首先需要部署环境 下面的步骤,将告诉大家如何在服务器上通过 Nginx 部署 HTTP 静态服务。 外网用户访问服务器的 Web 服务由 Nginx 提供,Nginx 需要配置静态资源的路径信息才能通过 url 正确访问到服务器上的静态资源。 现在我们需要重启 Nginx 让新的配置生效,如: nginx -s reload 重启后,现在我们应该已经可以使用我们的静态服务器了,现在让我们新建一个静态文件,查看服务是否运行正常。 到此,一个基于 Nginx 的静态服务器就搭建完成了,现在所有放在 /data/www 目录下的的静态资源都可以直接通过域名访问。 敲黑板!!!
通过在Python中编写自己的简单、轻量级、无魔法的静态站点生成器,完全控制静态网站/博客生成。对的!重新发明轮子,伙计们! 目录 简介 但是为什么呢? 开始 代码 布局 内容 信用 许可证 支持 简介 这个库包含一个含两个静态博客和几个静态页面的网站例子的源代码。网站通过运行makesite.py生成。 你有没有使用像Jekyll这样流行的静态网站生成器来生成你的博客? 我也有过。 它很简单,很棒。 但是,您是否渴望使用更简单的方式来生成您的博客? 你喜欢Python吗? 也许你也萌生过编写自己的静态网站生成器的想法,但你认为要付出相当大的工作量? 如果你对这些问题的回答“是”,那么这个项目就是为你准备的。 通过makesite.py,你可以完全控制。 对于一个面向互联网的网站,您将静态网站/博客放在某个托管服务和/或Web服务器,如Apache HTTP服务器,Nginx等。
本文将要推荐的静态网站生成器(Static Site Generator, SSG),它做的事情就是把你的文档、内容(通常为 Markdown 文件)生成可发布成网站(html)的工具,这样你就可以专心创作 Gitee 等均支持免费 Page 服务,通过简单的配置 SSG 就可以实现一条命令发布,有一个自己小窝就是这么简单和方便~ 下面就是 HelloGitHub 精心挑选的 GitHub 上流行、优秀的开源静态网站生成器 ,号称”世界上最快的网页生成器“。 / VuePress 在一众生成器之中算是一个”后起之秀“,起初由尤雨溪牵头开发。 它超越了静态网站,更强大。可以从任何地方加载数据。 6.
使用docker测试静态网站 创建目录 mkdir sample cd sample/ touch Dockerfile cd sample/ mkdir nginx cd nginx 文件复制,最终格式
如果你打算长时间使用,可以推荐你使用腾讯云的建站主机进行配置,独享 CPU、内存、带宽、硬盘等资源,拥有独立 IP 和超大空间,预装网站开发所需的应用环境,并且提供域名绑定、部署 SSL 证书等便捷操作
注意 1、github pages 仅支持静态网页 2、仓库里面是.html文件 3、个人主页也可以设置主题 Project Pages 项目站点 访问 https://用户名.github.io Github可以托管各种git库,并提供一个web界面(用户名.github.io/仓库名) 当访问自己GitHub上仓库里的其他项目的静态页面时或者其他人的仓库项目时先 fork 到自己的仓库下 在settings 这时就会出现一个访问静态页面的网址,直接在线访问即可。 ?