通过在Python中编写自己的简单、轻量级、无魔法的静态站点生成器,完全控制静态网站/博客生成。对的!重新发明轮子,伙计们! 目录 简介 但是为什么呢? 开始 代码 布局 内容 信用 许可证 支持 简介 这个库包含一个含两个静态博客和几个静态页面的网站例子的源代码。网站通过运行makesite.py生成。 你有没有使用像Jekyll这样流行的静态网站生成器来生成你的博客? 我也有过。 它很简单,很棒。 但是,您是否渴望使用更简单的方式来生成您的博客? 你喜欢Python吗? 也许你也萌生过编写自己的静态网站生成器的想法,但你认为要付出相当大的工作量? 如果你对这些问题的回答“是”,那么这个项目就是为你准备的。 通过makesite.py,你可以完全控制。 静态目录中的所有文件都将复制到此目录中。 稍后将生成静态网站并写入此目录。 然后它创建一个带有一些默认参数的params字典。这个字典被传递给其他功能。
前言 前面我们介绍过很多的站点生成工具,比如 Hexo,Hugo 等等。虽然这些工具已经很简单,但是对于那些对前端技术不了解的同学来说,还是稍微有点复杂。 今天我们就来介绍一款相对来说特简单的站点生成工具。它就是 Pelican。 关于 Pelican Pelican(鹈鹕鸟),是一种大型游禽。 它基于 Python,能够在尽量少的步骤下快速生成静态站点,特别是它完美支持 Markdown,这对站点建设者来说,无疑是大好消息。 我们写完文章后,使用 pelican 工具进行静态站点生成 pelican content 启动站点 生成完站点后,我们使用 pelican --listen 命令来启动站点,进行预览 最后 总体来说 ,Pelican 是一款超级简单,可以快速生成静态站点的工具。
https://vuepress.vuejs.org/ VuePress 是另一个基于 Vue.js 的静态站点生成器,它最初是作为文档生成系统开发的。 根据他们的官方文档,VuePress 包含两个主要部分: 带有基于 Vue.js 主题系统的静态站点生成器。 插件 API,用于添加全局级别的功能,还有一个针对文档优化的默认主题。 https://saber.land/ Saber.js 是另一个静态站点生成器,其具备大量内置功能。 总结 对于静态站点生成器领域来说,React 曾是人们的首选,并且统治了这一市场。但是,Vue.js 与我们上面讨论的这些出色框架有望改变这种情况。 对比基于 Vue.js 的和基于 React 的静态站点生成器,我们可以看到 Nuxt.js、VuePress 和 Gridsome 等框架具有与 Gatsby 和 NextJS 竞争的实力。
1.简介 MkDocs是一个基于Python的静态站点生成器,它可以将Markdown格式的文档转换为漂亮的静态网站。MkDocs提供了一种简单而灵活的方式来创建文档,并支持多种主题和插件。 2. site_name:站点名称 site_url:站点 URL 链接 site_author:站点作者 site_description:站点描述 copyright:版权信息 repo_url:站点仓库 URL nav: 站点导航 theme: 站点主题 markdown_extensions: Markdown扩展 参考配置如下: site_name: Python-YApi site_description 2.5 预览站点 使用mkdocs serve命令预览站点,例如: $ python3 -m mkdocs serve 该命令会启动一个本地服务器,可以在浏览器中访问http://localhost:8000 来查看站点,如下图: 2.6生成站点 使用mkdocs build命令生成静态站点,例如: $ python3 -m mkdocs build 该命令会生成静态站点文件,保存在site目录下。
在本文中,您将看到三种最好的静态站点生成器的比较,它们的优点、缺点以及您应该使用它们的原因。 网站统治着网络,无论是静态的还是动态的。虽然现在很多网站都是动态的,但是静态的仍然很受欢迎。 事实上,静态网站的使用在增加。 在本文中,您将看到三种最好的静态站点生成器的比较,它们的优点、缺点以及您应该使用它们的原因。 静态站点生成器使构建静态站点轻而易举。 Gatsby、Hugo和Jekyll是最受欢迎的静态站点生成器中的三种,它们受欢迎的原因有很多。让我们看看他们能提供什么。 盖茨比(Gatsby) 由节点。盖茨比是这三款中最新的静态网站生成器。 选择静态站点生成器 尝试从这三种静态站点生成器中挑选可能是一项困难的任务。它们本身都是伟大的工具。让我们来看看为什么你可能想要选择一个在其余的原因。 ? 结论 静态站点生成器有助于使静态站点易于构建、修改和扩展。在本文中,您已经看到了三种最好的静态站点生成器。您应该能够更好地决定下一个静态站点项目使用哪种工具。 有什么问题吗?
然后我们有了使用 React 构建的 Next.js(和 Vue.js),它默认使用服务器端渲染,但也允许使用客户端方法进行静态站点生成和 JAMstack。诸如此类。 这是一条旧原则,即您的站点应该适用于所有浏览器,CSS 和 JavaScript 仅用于增强功能。 这最终意味着您的站点应该能够在没有 JavaScript 的情况下工作——但我怀疑这在今天是否是一个合理的期望。 现在,立即吸引我的地方是它似乎是 markdown 优先的。 Nue 文档站点似乎没有搜索功能,因此您需要使用 Google 来深入了解详细信息。 岛屿(Islands) Islands 的目的是作为动态组件位于原本静态的 HTML 中。Nue 允许混合使用服务器和客户端,并且可以使用Web 组件。
VitePress:Vite & Vue 驱动的静态网站生成器 https://github.com/vuejs/vitepress ? 动机 我喜欢VuePress,但是构建在webpack之上,为一个只有几个页面的简单文档站点启动dev服务器所需的时间正变得难以忍受。即使是HMR更新也可能需要几秒钟才能在浏览器中反映出来! 现在,借助vite和Vue 3,现在应该重新考虑“ Vue驱动的静态站点生成器”的真正含义了。 对VuePress的改进 1.使用Vue 3 利用Vue 3改进的模板静态分析来尽可能对静态内容进行分类。 静态内容是作为字符串文字而不是JavaScript呈现函数代码发送的-JS有效负载因此解析起来便宜得多,并且合成也变得更快。
使用Hugo搭建静态站点 hugo下载地址:https://github.com/gohugoio/hugo 模板列表:https://github.com/gohugoio/hugoThemes 开始搭建 ▸ content/ # 网站内容,全部使用markdown格式 ▸ layouts/ # 网站模板文件,决定内容如何呈现 ▸ static/ # 图片、css、js 等静态资源 {{ partial "contact" . }} {{ end }} {{ end }} 3、修改config.toml配置 baseurl = "/" #站点的名称 hugo [flags] hugo [command] hugo [command] [flags] #查看版本 hugo version #版本和环境详细信息 hugo env #创建新站点 #编译生成静态文件 hugo Hugo将编译所有文件并输出到public目录 #编译生成静态文件并启动web服务 hugo server 常用参数 --bind="127.0.0.1"
它有以下这些特点: 一个标签完成初始化 自定义启用/禁用分享站点 更美观的 UI 体验 基于标签data属性轻松实现分享数据的自定义 支持分别对不同站点设置分享内容 同页面个分享组件 支持npm安装 2 导入静态资源 首先克隆 share.js 的代码仓库: 1 $ git clone https://github.com/overtrue/share.js 然后分别将 css、js 和 fonts
为什么静态化 如今的站点绝大多数是数据库驱动,页面由程序实时生成。而不是其的在server上有一个静态html文件存在。 最典型的无限循环就是某些站点上出现的万年历。非常多博客都按时间存档,一些宾馆、肮班查询站点都常常出现万年历形式。 搜索引擎蜘蛛碰到万年历。 假设CMS系统设计不周全,这些url都可能出如今站点上。 更麻烦的是,有时某些參数能够是随意值,server都能正常返回页面,尽管内容全是一样或非常相似的。 所以曾经的搜索引擎对动态url敬而远之,要想站点页面被充分收录。站长须要把动态url转化为静态。 每一个站点的动态url结构不同,server设置也可能不同,代码也就不同。正則表達式的写法比較复杂。千变万化,通常须要程序猿编写。 在写url静态化代码时必须很小心,错了一个字符。
/docs复制命令执行后会自动在文件创建了docs文件夹,里面有一个index.html启动我们刚才初始化的项目(可不执行)(如果你有Nginx不需要利用node启动服务,docsify纯静态资源)docsify 我们通过3000端口就可以访问到我们的站点了。Nginx配置docsifydocsify无需开服务,页面纯静态,Nginx直接指向文件目录就行了,注意 alias 前后都有/哦。
Hugo 是一个基于 Go 语言的静态站点生成器,是当前流行度最高的静态网站生成器之一,其快速构建和部署的优点备受用户青睐。 Jekyll 是一个基于 Ruby 的静态站点生成器,支持多种主题和插件。Jekyll 提供了丰富的文档和社区支持,使用起来也比较简单。Jekyll 也是非常流行的静态网站生成器之一。 Hexo 是一个基于 Node.js 的静态站点生成器,它可以将博客生成为电子书形式的静态站点。Hexo 支持多种主题和插件,同时也提供了友好的命令行工具和文档。Hexo 速度快,使用也非常方便。 Docsify是一个轻量级的JavaScript文档网站生成器,使用Markdown文本文件来生成静态站点。相比于其他静态网站生成器,Docsify的特点是使用简单、易于配置和高度可定制。 Middleman 是一个用 Ruby 编写的静态站点生成器,它可以将 Markdown、ERB 模板和 YAML 配置文件转换为静态 HTML 文件。
前言 前面我们介绍过 Pelican、MkDocs 等流行的静态展点生成器,今天我们再次介绍一个比较冷门的静态站点生成库,它就是 Nikola。 关于 Nikola 呆猫 安装 Nikola pip install nikola Nikola 项目初始化 这里我们基于示例站点模板生成项目。 (( ("/","Home"), ("/robots.txt","Robots") ),"下拉菜单"), ), } 站点 logo 配置 我们可以在 conf.py 中对站点的 logo 进行配置,支持网络图片。 最后 nikola 上手虽然简单,也支持视频、emoji 等段代码,但是整体配置方式和插件生态等稍显不足,适合建造简单的文档站点。
title: 使用docusaurus快速搭建静态博客站点 description: 使用docusaurus快速搭建静态博客站点 slug: use-docusaurus-to-deploy-blog Creator of Walrus's Blog url: https://walrus.net.cn image_url: img/walrus.jpgundefined Docusaurus是一种静态站点生成器 ,其中config.title指的是你的站点名称,config.url是你的站点发布后的地址,其他字段按需要修改。 在发布站点之前,需要先打包,执行如下命令: yarn build 打包完毕后,可以在. /build目录中看到打包之后的静态文件,如下所示: ├── 404.html ├── archive ├── assets ├── atom.xml ├── first-blog-post ├── hello-world
开源的静态站点可以帮助我们快速构建想要的应用,这里推荐10款好用的开源静态站点。 这些静态站点应用还有一个更优雅的名字:JAMStack 静态站点的主题汇总网站:https://jamstackthemes.dev/ JAMStack JAM:是 JavaScript、API 和 Markup 的首字母组合 本质上是一种胖前端,通过调用各种 API 来实现更多的功能 其实也是一种前后端的模式,只不过离得比较开,甚至前后端来自多个不同的厂商 hugo 介绍:用Go写的一个静态网站生成器,号称” 15.8k 官网:http://www.mkdocs.org/ 开源地址:https://github.com/mkdocs/mkdocs gridsome 介绍:一个免费、开源、基于 vue.js 技术栈的静态网站生成器 star数:8.4k 官网:https://gridsome.org/ 开源地址:https://github.com/gridsome/gridsome dumi 介绍:为组件研发而生的静态站点框架
最近,我又开始考虑这个问题,并意识到有一个我没有考虑过的解决方案:我可以继续维护 WordPress 服务器,但将其设置为发布静态镜像,并使用 GitLab Pages(或 GitHub Pages , 这是我提出的解决方案,到目前为止似乎运作良好: 托管 WordPress 站点中的 URL 没有链接到或来自其他任何地方,以减少它被利用的几率。 在此例中,我们将使用 http://private.localconspiracy.com(即使此站点实际上是使用 Pelican 构建的)。 现在,当博客发生变化时,在 15 分钟内将网站镜像到静态版本并推送到仓库,这将在 GitLab Pages 中反映出来。 如果你想在本地运行 WordPress,这个概念可以进一步扩展。 只要你可以在本地运行 wget,就可以使用上面的方法在 GitLab Pages 上托管 WordPress 站点。
基于React的SSG静态站点渲染方案 静态站点生成SSG - Static Site Generation是一种在构建时生成静态HTML等文件资源的方法,其可以完全不需要服务端的运行,通过预先生成静态文件 在我们正式开始聊SSG的基本原理前,我们可以先来看一下通过SSG实现静态站点的特点: 访问速度快: 静态网站只是一组预先生成的HTML、CSS、JavaScript、Image等静态文件,没有运行在服务器上的动态语言程序 那么同样的,通过SSG生成的静态资源站点也有一些局限性: 实时性不强: 由于静态站点需要提前生成,因此就无法像动态网站一样根据实时的请求生成对应的内容,例如当我们发布了新文档之后,就必须要重新进行增量编译甚至是全站全量编译 不支持动态交互: 静态站点通常只是静态资源的集合,因此在一些动态交互的场景下就无法实现,例如用户登录、评论等功能,当然这些功能可以通过客户端渲染时动态支持,那么这种情况就不再是纯粹的静态站点,通常是借助 实际上当前很多开源的静态站点搭建框架例如VitePress、RsPress等等都是采用类似的原理,都是在服务端生成HTML、Js、CSS等等静态文件,然后在客户端由各自的框架重新接管DOM的行为,当然这些框架的集成度很高
在半年前,我分享过使用EOPages功能托管静态网站的教程:EdgeonePages入门实践 —— 低成本网站托管新方案。 ,然后当个静态服务器给用户发送html、css、js、图片视频等一系列静态资源。 自带的CI/CD作用也只是把源代码构建成上述的静态资源。 如果能够正常刷新显示和开发,说明CNB的开发环境配置是没有任何问题的部署配置构建静态资源这里沿用的是nextjs的package.json,其他框架同理,在运行npm run build后,由于前面设置了静态输出 ,第二步将静态资源上传到EO Pages。
VitePress 是一个静态站点生成器 (SSG),专为构建快速、以内容为中心的网站而设计。 快速初始加载 对于任何页面的初始访问,将提供静态的预渲染HTML,以实现极快的加载速度和最佳的SEO效果。 水合过程非常快速:在PageSpeed Insights上,即使在低端移动设备上使用缓慢的网络,典型的VitePress站点也能获得接近完美的性能分数。 在站点内进行后续导航将不再导致完整的页面重新加载。相反,将获取并动态更新进入页面的内容。VitePress还会自动预取视口内链接的页面块。在大多数情况下,加载后的导航将感觉瞬间完成。 这听起来可能效率低下,但是Vue编译器足够智能,能够将静态部分和动态部分分离,从而将水合成本和负载大小都最小化。对于初始页面加载,静态部分会自动从JavaScript负载中删除,并在水合过程中跳过。
在宝塔面板中,你可以通过设置 Nginx 的重写规则来实现站点的伪静态规则。具体步骤如下:打开宝塔面板并进入网站设置:登录宝塔面板。在左侧菜单中选择“网站”,然后点击你要设置伪静态规则的站点。 进入伪静态设置页面:在站点设置页面中,找到“设置”按钮并点击。在弹出的设置窗口中,选择“伪静态”选项卡。添加伪静态规则:在伪静态规则的文本框中输入你的伪静态规则。 通过站点根目录的文件自动设置伪静态规则如果希望通过某个文件自动设置伪静态规则,可以使用 .htaccess 文件(适用于 Apache)或者在 Nginx 配置文件中包含一个外部文件。 这需要你在站点的 Nginx 配置文件中做一些额外的设置:创建包含伪静态规则的文件:在站点的根目录下创建一个文件,例如 rewrite_rules.conf,并在其中添加伪静态规则。if (! 找到并编辑站点的 Nginx 配置文件,通常位于 /www/server/panel/vhost/nginx/your_site.conf。