在小编使用过一段时间后，个人认为 blogdown 搭建博客的优势在于，将 Rmarkdown 与 hugo 相结合，再加上 github 和一个可以部署的网站。...使用 Netify 部署网站 这里我使用的Netify：https://app.netlify.com。...部署成功 恭喜你，结束啦！你已经会简单创建自己的网站啦！ ?...打开他的github仓库后呢，复制名称到创建界面时的（Hugo theme）中。 ? 刚才前面说的主题就是这样得到的！...小编有话说 如果你是初学者，对 Rstudio，github，hugo，html 都不是很熟悉的话。庄小编建议你将我前面说的整个流程照搬实现一次先。然后再拓展下，创建其他不同的 hugo 模板。
::: # 进入项目安装依赖包 cd HugoFast yarn # 使用 `yarn serve` 运行项目 yarn serve # 打包到 dist 文件 yarn build 打包后的文件可以放在的任意空间部署...注意要保存好这个密钥，在新的终端打开网站需要用到这个密钥。 (2) 操作 hugo 源码仓库 前往你的 hugo 源码仓库，如下图。...在仓库的 setting/actions，滑到最下面，打开actions 的 pr 权限，不然actions自动部署会失败。...在线管理: https://hugofast.netlify.app/ 第一行：获取的 GitHub Token 第二行：hugo 源码仓库 填写完成后，会自动获取文章目录，选择后点击确认。...进入网站就可以正常使用功能了，如修改文章，发布新文章，其他功能还在开发中。 ---- 未完待续…
API Proxy # 这里有两个选择，Netlify 和 Vercel 目前 Netlify 注册（似乎只针对 +86 区号）需要拍身份证上传，毕竟是个境外平台 本文以 Vercel 演示 antergone...转换成 OpenAI 的 API 格式 zuisong/gemini-openai-proxy 进入 dist 目录，复制 main_cloudflare-workers.mjs 的内容，粘贴到新创建的...API Key 自用设置（防盗链），全局搜索 origin 修改值为你的博客地址（可选） 前端代码 # 本节仅适用于 Hugo 进入博客根目录，进入文件夹 layouts/partials 新建 gemini.html...); postAIResult.innerHTML = '生成摘要时出错，请重试。...用鼠标指针定位文章内容元素和标题元素，记录下类，进入 layouts/_default/single.html 中修改这些地方，加入 id="title" 和 id="posts-content" 就好
首先你得在本地生成静态网页文件。这里推荐用hugo或hexo。 然后把静态网页文件托管到github仓库。这里推荐使用git和gitlab工具。...关于hugo和hexo，github和gitlab，github page和Netlify的差别网上有很多博客，这里就不赘述了。目前我觉得最好的方式是：hugo+github+Netlify。...:1313/ (bind address 127.0.0.1) Press Ctrl+C to stop 如果出现下面的错误： hugo new posts/my-first-post.md Error...五、写作 1、图片管理 在md文档中插入的图片是一个麻烦事。一般来说有三种解决方案。如下所示 放置在static中 可以直接把图片放在static中，不过以后图片一多就麻烦了。...2、更新博客的流程 日后更新博客时就只需要在本地的hugo\content\post文件夹中编辑新的md文件，然后.
同时，这在持续集成部署时也会方便很多，这点你可以在 GitHub 中看出来，如下图。...当你从 Hexo 迁移到 Hugo 时，如果你在 Hexo 中的站点配置文件 _config.yml 的 permalink 中只使用了 :year、:month、:day、:title 变量的话，那么文章的...public 文件夹；与 hexo clean 类似的命令是 hugo --gc --cleanDestinationDir；在 Hugo 中可以直接使用 hugo --minify 压缩 HTML、...JS、CSS 等文件；在 Hugo 中，没有 hexo d 一键部署 public 文件夹到 GitHub 的操作，你需要自己新建脚本，但我建议使用 Git 管理整个站点，然后上传整个站点到 GitHub...如果你的博客部署在 Netlify 上的话。 在 Hugo 中，你甚至可以配置 Git 的改动（commit）时间为文章的修改时间，即 :git。
Cloudflare Pages是Cloudflare新推出的一项静态内容托管平台，类似于Netlify。目前支持从Github仓库中拉取内容。...测试申请 目前Cloudflare Pages处于测试阶段，可以在 pages.cloudflare.com 中申请Cloudflare Pages的试用资格。...Hexo于Cloudflare Pages 类似于Netlify,绑定Github导入项目即可自动构建 应用创建后会自动生成类似*.pages.dev的CNAME链接。...绑定域名后将其指向任意Cloudflare CDN地址均可正常使用 构建失败？...在使用包含&&的连续命令时可能会出现以下错误 /bin/sh: 1: hexo: not found 可通过package.json打包命令 //package.json "scripts": {
继前人 GitHub Pages、Netlify 和后人 Vercel (Zeit) 之后，终于又出现了一个免费用户完全不限带宽的服务。...Pages 文档中目前列出了截至目前 (2021-04-03) 已知的问题，以下是其内容的翻译： 删除拥有自定义域名的项目可能会导致在该域名上依旧可以访问上一次的构建，需要完全移除 DNS 记录以解决问题...目前没有提供自定义的路由跳转，访问不存在的页面时首先会尝试提供 404.html 文件，若该文件不存在，则会 fallback 至 index.html 以支持 SPA 路由 预览 URL 不支持 Access...目前仅支持部署 GitHub，且不支持一次性部署 monorepo 中的多个项目 目前无法更改 GitHub repo 和 Pages 项目的关联，需要删除重建以解决问题 目前分配的 pages.dev...域名无法更改，需要删除重建以解决问题 Hugo 项目构建会默认使用旧版本，需要手动设置 HUGO_VERSION 环境变量进行自定义 构建默认使用 Node.js 10，需要通过 NODE_VERSION
，Hexo，Hugo 等代码自动编译并生成静态网站。...Markus Schork, CTO Hair Digital, Unilever: Netlify使CI/CD、部署和可扩展托管成为一种商品，并帮助企业专注于在Jamstack世界中创造出色的动态消费者体验...：Netlify 检测到要推送到git的更改并触发自动部署。...---- 0x01 Netlify 使用 Step 1.首先使用你的 GitHub 账号登陆 Netlify，登陆后进入空间管理中心，点击New site from git按钮开始部署你的博客： Step...Step 5.从主服务器部署将自动发布, 在稍等一段时间就可以看到你的博客已经部署成功，并且给你分配了一个二级域名 ：https://cranky-leakey-9306bd.netlify.app
、兼容Retina的图表； Chart.js：开源的HTML5图表可视化效果； Chartist.js：另一个开源HTML5图表可视化效果； Crossfilter：JavaScript库，用于在浏览器中探索多元大数据集...一起使用，通过D3.js呈现出来，它比较擅长连接图表/附加的元数据，从而徘徊在D3的事件附近； D3：操作文件的JavaScript库； D3.compose：从可重复使用的图表和组件构成复杂的、数据驱动的可视化...； D3Plus：一组相当强大的可重用的图表，还有D3.js的样式； Echarts：百度企业场景图表； Envisionjs：动态HTML5可视化； FnordMetric：写SQL查询，返回SVG图表...； NVD3：d3.js的图表组件； Peity：渐进式SVG条形图，折线和饼图； Plot.ly：易于使用的Web服务，它允许快速创建从热图到直方图等复杂的图表，使用图表Plotly的在线电子表格上传数据进行创建和设计...； Plotly.js：支持plotly的开源JavaScript图形库； Recline：简单但功能强大的库，纯粹利用JavaScript和HTML构建数据应用； Redash：查询和可视化数据的开源平台
：Google中的大规模机器学习系统； GraphLab Create：Python的机器学习平台，包括ML工具包、数据工程和部署工具的广泛集合； H2O：Hadoop统计性的机器学习和数学运行时间...Port的日志和时戳数据进行可视化； Bokeh：一个功能强大的Python交互式可视化库，它针对要展示的现代web浏览器，旨在为D3.js风格的新奇的图形提供优雅简洁的设计，同时在大规模数据或流数据集中...标签的反应灵敏、兼容Retina的图表； Chart.js：开源的HTML5图表可视化效果； Chartist.js：另一个开源HTML5图表可视化效果； Crossfilter：JavaScript...库； DC.js：维度图表，和Crossfilter一起使用，通过D3.js呈现出来，它比较擅长连接图表/附加的元数据，从而徘徊在D3的事件附近； D3：操作文件的JavaScript库；...条形图，折线和饼图； Plot.ly：易于使用的Web服务，它允许快速创建从热图到直方图等复杂的图表，使用图表Plotly的在线电子表格上传数据进行创建和设计； Plotly.js：支持plotly
1.2 静态站点生成器 介绍静态站点生成器，如Jekyll、Hugo和Gatsby，以及它们的工作原理。...部署到静态托管服务 讲解如何将静态站点部署到托管服务，如Netlify、Vercel和GitHub Pages。...# 示例代码：使用Netlify部署静态站点 netlify deploy --prod 4.2 CDN加速 如何配置CDN（内容分发网络）以提高网站的性能和可用性。 <!...5.2 SEO优化 如何配置静态站点以在搜索引擎中获得更好的排名，包括Sitemap和元数据。 <?...6.2 持续集成 使用持续集成工具，如Travis CI或GitHub Actions，确保每次更改都经过测试和部署。
Netlify 其实是一个自带持续部署的网站，它需要与 Github 提供的持续集成联合使用。...当 Github 指定的项目发生了推送操作时，Netlify 会通过已授权认证的方式从 Github 上拉取代码，并根据预设好的编译、部署命令生成最终的网页。...在实际的使用过程中，笔者根据自己的需求也在 H2O 主题上做出了一定的功能修改，并开源为 jekyll-them-H2O-ac。...语法指南 # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 普通段落文件（直接输入） **加粗** *斜体* `段落内标签，通常在段落中引用命令时使用...，前面标点符号后空一格开始英文单词； 英文与中文标点符号一起时，标点符号在英文或符号之前之后都无须空格； 在代码内容中，# 号与文字之间空一格，# 号与代码同行时距离不宜过长，如相邻几行都有注释对齐为佳
Plotly(plotly.py)建立在Plotly JavaScript库(plotly.js)的基础上，可用于创建基于Web的数据可视化效果，这些可视化效果可以在Jupyter笔记本或Web应用程序中使用...Plotly提供了40多种独特的图表类型，例如散点图，直方图，折线图，条形图，饼图，误差线，箱形图，多轴，迷你图，树状图，3-D图表等。Plotly还提供了等高线图，其中在其他数据可视化库中并不常见。...Ggplot可以使用高级功能创建数据可视化，例如条形图，饼图，直方图，散点图，错误图等。 API。可在单个可视化中添加不同类型的数据可视化组件或层。...数据可视化专家可以使用bokeh为现代Web浏览器创建各种交互式图，该bokeh可用于交互式Web应用程序，HTML文档或JSON对象。Bokeh具有3个级别可用于创建可视化。...Pygal Pygal与Plotly或Bokeh相似，它创建的数据可视化图表可以嵌入到网页中，并可以使用Web浏览器访问，但主要区别在于它以SVG的形式输出图表或可缩放矢量图形。
Plotly Dash 是一个基于 Python 的开源框架，可以帮助你快速而灵活地构建交互式仪表板。本文将介绍使用 Plotly Dash 创建仪表板的步骤和一些技巧，并附上代码实例来演示每个步骤。...使用回调函数利用 Dash 的回调函数，可以实现根据用户的交互动作更新图表或布局。...总结在本文中，我们深入探讨了如何使用 Plotly Dash 创建仪表板的步骤和一些技巧。我们从导入必要的库开始，创建了一个基本的 Dash 应用程序，并设计了仪表板的布局。...我们提供了两种常见的部署方法：使用 Heroku 进行部署和使用 Docker 打包为容器并进行部署。最后，我们强调了在部署过程中需要注意的安全性和稳定性问题。...通过本文的指导，你可以开始使用 Plotly Dash 构建自己的数据仪表板，并将其部署到服务器上，以展示数据和洞察力，并与他人共享。祝你在仪表板设计和部署的过程中取得成功！
最近想着做一个网页版的个人简历，想着要满足一下几个需求： 简洁直观不花里胡哨的 方便修改内容，能根据修改后的内容自动生成网页 这就要求我最好能用静态博客框架来做，如：Hexo、Hugo等。...但是该主题的Hexo版本中存在许多BUG，而且排版松懈、没有照片。 所以趁着春节无处可去，干脆在家做了个Hexo的简历主题——Mtics-Resume。...本主题具有以下特点： 简洁直观 配置简单 可定制性强 响应式布局 在隐藏了footer后，可直接打印成为纸质简历 欢迎各位使用Hexo或者对本主题有兴趣的大佬试用，并向我提出建议或与我一起开发。...项目地址：https://github.com/mtics/hexo-mtics-resume 在线演示：https://mtics.netlify.com/ Ps: 因本项目及演示都放在Github上...，通过Netlify进行部署，所以访问速度可能较慢，敬请谅解。
安装Dash首先，确保你已经安装了Dash和Plotly：pip install dash plotly创建一个简单的Dash应用程序下面是一个简单的Dash应用程序示例，它包含一个简单的布局和一个交互式的图表...根据用户的选择，图表会相应地更新为所选函数的图形。部署Dash应用程序一旦你完成了Dash应用程序的开发，你可能希望将其部署到生产环境中。下面是一些常用的部署选项：1....使用Docker容器你也可以将Dash应用程序打包到Docker容器中，然后部署到任何支持Docker的环境中，如AWS、Google Cloud等。...集成更多组件和功能除了在应用程序中添加图表和交互元素外，你还可以集成更多的组件和功能来增强你的Dash应用程序。以下是一些常用的扩展：1....数据库集成你可以使用Dash来连接数据库，并将数据库中的数据动态显示在你的应用程序中。例如，你可以使用Dash与SQLAlchemy或Pandas等库集成，从数据库中获取数据，并在图表中进行可视化。
，这里的html即开头导入的dash_html_components，它是dash的自带依赖库，用于在Dash应用中定义常见的html元素，就像前面用到的H1对应一级标题，即标签。 ...图5 Dash与plotly既然“师出同门”，自然已经相互打通，我们同样可以非常轻松的在网页中插入数据可视化的内容，这里我们使用到plotly.express，它简化了诸多plotly图表的创建过程，...将创建好的图表对象作为figure参数传入dcc.Graph()中即可： app4.py import dash import dash_html_components as html import...2.3 监听图表交互式选择行为 Dash与plotly的高度耦合，还体现在其可以监听针对plotly图表的悬浮、选择、框选等行为，广泛适用于plotly中的大量常规图表与地图，这一点懂的朋友应该都明白...～ 我们接下来的系列文章就会围绕上述基础概念，以及多页面应用、外部css、js的引入、Dash应用的部署发布等还未提及的重要内容进行详细介绍，以帮助广大使用Python的读者朋友使用最少的前端知识，
因为在展示信息方面这本书是无可争议的国王，而且阅读起来相当有趣。 我一直将书中概述的方法用于在机器人学和机器学习的研究论文中创建功能强大的图表。以下是几段摘录。...Plotly：数据科学、数据分析以及我的职业生涯未来的绘图工具。 在整个过程中，plotly可以为用户提供更多的工具来保持图形的卓越和完整。 0. 准备 image.png 这是将要构建的图表。...Plotly支持在设置分辨率以方便查看的同时进行保存，因此在展示时能够确切地看到想要保存的图表，在尝试时就会理解这一优势。...输出 在滚动鼠标前，请仔细查看这些图。看看哪一个更一致且没有错误。以此来决定使用哪个平台。有些错误是从源头上不可避免的，我认为这一观点是站不住脚的。...需要注意的重要一点是，plotly具有出色的色彩科学——在查看电子版图表时，柔和的色彩对眼睛更友好（总色数r + g + b较低）。
，这里的html即开头导入的dash_html_components，它是dash的自带依赖库，用于在Dash应用中定义常见的html元素，就像前面用到的H1对应一级标题，即标签。...既然“师出同门”，自然已经相互打通，我们同样可以非常轻松的在网页中插入数据可视化的内容，这里我们使用到plotly.express，它简化了诸多plotly图表的创建过程，将创建好的图表对象作为figure...(10)) app.layout = html.Div( [ html.H1('嵌入plotly图表'), dcc.Graph(figure=fig)...2.3 监听图表交互式选择行为 Dash与plotly的高度耦合，还体现在其可以监听针对plotly图表的悬浮、选择、框选等行为，广泛适用于plotly中的大量常规图表与地图，这一点懂的朋友应该都明白，...」等还未提及的重要内容进行详细介绍，以帮助广大使用Python的读者朋友使用最少的前端知识，创建出优秀的web应用，方便日常的工作学习生产生活，敬请期待！
Plotly 是一个功能强大的 Python 可视化库，它可以帮助我们创建交互式的数据可视化图表。本文将介绍如何使用 Plotly 实现交互式数据可视化，包括数据准备、图表创建和交互功能的添加。...在本示例中，我们将使用一个简单的数据集。...创建交互式图表使用 Plotly 来创建交互式图表非常简单。...导出图表一旦你创建了交互式的图表，你可能想要将它导出到文件中以供分享或嵌入到网页中。Plotly 提供了多种导出图表的方法，包括静态图片和交互式 HTML 文件。...总结在这篇文章中，我们学习了如何使用 Plotly 实现交互式数据可视化的步骤。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
