本文基于 PAI 搭建博客。...CLI npm install -g gatsby-cli 下载 Gatsby 静态博客 git clone https://gitee.com/aping-dev/gatsby-starter-blog...安装 Gatsby 静态博客的依赖库 耗时几分钟～几小时，据网速而定 cd gatsby-starter-blog/ npm install --unsafe-perm=true --allow-root...--verbose 启动 Gatsby 静态博客 gatsby develop -p 3000 # PAI 中的 nginx 默认代理 3000 端口 也可以将启动命令写入 .pai.yml...pai-instance-document [图片.png] 参考 https://www.gatsbyjs.org/docs/quick-start/ https://github.com/gatsbyjs/gatsby-starter-blog
在这篇文章中，我们将深入探讨 Gatsby 和一些新特性，并创建一个静态博客。让我们开始吧！...现在我们有一个由 Gatsby 所生成的功能完整的博客，其中有真正的内容在 Markdown 里，有一个博客列表，以及在博客中浏览的能力。...、可扩展的 API 和高级的查询功能为构建真正令人难以置信的高性能站点提供了强大的工具集。...Links @dschau/gatsby-blog-starter-kit 展示 Gatsby 所有上述功能的可用的库 @dschau/create-gatsby-blog-post 我创建了一个实用程序和...使用虚拟dom和JavaScript构建完全响应式的UI框架 扩展 Vue 组件 使用Three.js制作酷炫无比的无穷隧道特效 一个治愈JavaScript疲劳的学习计划 全栈工程师技能大全 WEB前端性能优化常见方法
原文发表于：https://avenirzheng.net/blog/2020/deploying-gatsby-to-tencent-cloud/ 前言 我算经历过个人博客最热闹的那个时代，那时大部分个人博客都是用...WordPress 搭建起来，与传统服务端语言 + 数据库的架构相比，近年流行的静态编译博客，如 Hexo、Jekyll、Hugo 显然更容易部署和维护，这里我选择了 Gatsby，并用 wp-gatsby-markdown-exporter...安装 Node.js； 安装 Git； Gatsby 开发环境 Gatsby 的 CLI 工具非常方便，在终端全局安装 gatsby-cli npm install -g gatsby-cli 切换到开发目录...gatsby new ，然后设置项目名称，例如 site ，选择起始模板 starter gatsby new 最后在切换到刚才的 site 目录，gatsby develop cd /code/avenirzheng.net...腾讯云上搭建 Nginx； 腾讯云上搭建 Git； 配置 Nginx 站点 这里为了方便，我们直接用 root 账号为博客设置 Web 目录，在服务器中创建 /www/blog 目录。
1.查数据 注意，这里跟前面不一样了，我用gatsby-node.js这个文件去提供数据，没有什么为什么，规定，照做就好。...创建内容页模板 在src>templates下创建blogPost.js import React from "react" import { graphql,Link } from 'gatsby
/components/header' import { Link,graphql } from 'gatsby' const Layout = ({ data }) => { const {
1.安装 yarn global add gatsby-cli 2.创建gatsby项目 gatsby new blog 3.开发 gatsby develop 注意报错： error UNHANDLED...打开浏览器浏览图片中地址，看到如下效果就成功了： 1556615422628.png 4.构建 gatsby build 5.查看效果 gatsby serve 打开浏览器：浏览图片中地址，看到如下效果
1.查数据 注意，这里跟前面不一样了，我用gatsby-node.js这个文件去提供数据，没有什么为什么，规定，照做就好。...2.创建内容页模板 在src>templates下创建blogPost.js import React from "react" import { graphql,Link } from 'gatsby
/components/header' import { Link,graphql } from 'gatsby' const Layout = ({ data }) => { const { edges
本文由图雀社区认证作者 crimx[1] 写作而成，点击阅读原文查看作者的博客，感谢作者的优质输出，让我们的技术世界变得更加美好为什么选 Gatsby 我的博客最初是用 Github Pages 默认的...Gatsby 项目结构 建议使用 Starter 修改着理解 Gatsby，我用的是 Gatsby + Netlify CMS Starter[11]。...在 /gatsby-node.js 中配置 Gatsby Node APIs，如果项目是基于 starter 的话你很可能会发现里面已经有相应的配置。...编辑 /gatsby-node.js，如果是用了 starter 的话这里很可能已经有其它的代码，已有的不需要动，添加我们需要的即可。...本系列到这里暂告一段落，谢谢你的阅读，希望能对你搭建 Gatsby 博客有所帮助。
大量数据的扫描使用scan API，扫描性能有时候并不能够得到有效保证。 引出问题 HBase作为列式存储，为什么它的scan性能这么低呢，列式存储不是更有利于scan操作么？...Parquet格式也是列式，但它的scan这么优秀，他们的性能差异并不是因为数据组织方式造成的么？...Kudu也是采用的类LSM数据结构，但是却能达到Parquet的扫描速度（Kudu是纯列式的），Kudu的一个列也会形成很多文件，但是好像并没影响它的性能。...可以说如果支持更新操作以及多版本的话，扫描性能就不会太好。...3、Kudu性能并没有达到Parquet的扫描速度，可以说介于HBase和Parquet之间： Kudu比HBase扫描性能好，是因为Kudu是纯列存，扫描不会出现跳跃读的情况，而HBase可能会跳跃seek
现在为博客添加标签，方便查看同标签的其它博客。...安装插件 npm install yarn -g yarn add gatsby-plugin-tags 配置插件 在 gatsby-config.js 的 plugins 中添加： { resolve...}, }, 添加、修改文件 参考 https://github.com/rmcfadzean/gatsby-pantry/tree/master/examples/starter-blog 做了适当的修改...参考 gatsby-plugin-tags. https://www.gatsbyjs.org/packages/gatsby-plugin-tags/?...=tag https://github.com/rmcfadzean/gatsby-pantry/tree/master/examples/starter-blog
我想提高网站的性能：静态 HTML 文件在 99% 的时候都比动态页面更快。...它的目标是提高感知的性能，并使网站看起来更像“原生”应用（从应用商店下载的那种）。...在我看来，将博客变成 JavaScript 单页应用程序会带来不必要的复杂性。 这篇文章并不是要批判 Gatsby 而写的。...Gatsby Starter Low Tech 博客使用 no-javascript 插件和其他一些技术（包括将所有图像转换为灰度），来帮助你创建一个轻量且节能的博客。...只是要注意它的性能成本，以及所有与 JavaScript 相关的潜在可访问性问题。
博客搭建这么久了发现并没有进行过优化，首页虽然打开速度勉强能够接受，但是 github 和 coding 提供的空间有限，是时候优化一下了。基本思路是采用 gulp 进行代码的压缩等。...这样在执行生成命令和部署命令中间加一个 gulp 的命令即可： hexo g gulp hexo d 实测发现貌似博客打开速度是快了那么一丢丢。哈哈，就当是有效的吧。
1、Gatsby’s default starter 1、新建项目 gatsby new learn-gatsby https://github.com/gatsbyjs/gatsby-starter-default...2、启动 cd learn-gatsby gatsby develop 3、访问方式与上面一样 gatsby-starter-default - 官方说明 2、gatsby-starter-blog...gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog gatsby-starter-blog - 官方说明...3、gatsby-starter-hello-world gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world.../gatsbyjs/gatsby-starter-blog-theme gatsby-starter-blog-theme - 官方说明 5、gatsby-starter-theme-workspace
为了给大家一个直观点的认识，我使用Gatsby搭建了一个简单的个人博客网站，网站的源代码可以在我的github仓库找到。 博客网站包含以下的功能： 博客列表页面：展示我发表的所有博客。...接着我们可以看一下Gatsby打包会生成哪些文件： 由上图可以看出，Gatsby会为每一个pages文件夹底下的文件生成一个对应的html文件，以及为每一个blogs文件夹底下的博客生成一个静态的HTML...高性能 为什么JAMStack是高性能的呢？这是因为JAMStack的应用将网站的静态部分和动态部分区分开来了，那些不会频繁发生变化的内容会被提前生成，从而无需使用额外的计算资源来进行服务端渲染。...将动态内容和静态内容区分开来还有另外一个好处，就是我们后端接口的职责更加明确了，API接口的数量会变得更少，性能也会变得更好。...在不了解JAMStack之前，如果我想我的网站被搜索引擎收录要么就是刀耕火种地硬写HTML和原生JS，这种方案明显开发效率十分低下。
在Linux下，如果你使用 java.security 包中的方法（比如SecureKeyFactory.generateSecret()），会发现它出奇的慢，...
Hexo -- 灵活性欠缺 没有使用hexo开源的博客系列的原因在于，hexo是一个专注于博客的产品，它的灵活性非常欠缺，而我对微言码道的构思中，远不止博客一个内容，还包括电子书，myddd开源项目，视频及音频多种形式...DocSearch是algolia推出的一个非常有价值的服务，主要是为开源博客或技术博客提供文档搜索支持，你只需要向它进行申请就好了。...调整与美化了对Markdown的显示 博客都是基于Markdown编写的，因此这次调整与美化了对Mardown的渲染与显示样式。整体上来说比以前更简洁与雅致了。...从Gatsby V2升级最新V4稳定版 2021年元旦期间做这个网站时，当初Gatsby还是V2版本，现在Gatsby已经更新到了V4版本，添加了许多新的功能，优化了网站构建速度等。...我的myddd starter的UI也是基于Material UI的。 Material UI最近升级到了MUI，一个重新品牌命名的全新版本。
比赛文章在这： https://cloud.tencent.com/developer/article/1928122 当前现状 性能的好坏永远只是阶段性的，非永久的，随着一个项目的迭代，性能也会随之产生变化...优化方案 main.js 压缩后 281B 首屏 JQ 会用到，可以引用公共CDN的路径，这样的好处是首次访问的用户有概率可以命中该版本的 JQ ，从而走本地缓存，同时也可以降低我的服务器带宽压力 鉴于博客的群体访问采用的浏览器版本不低...PHP 版本升级 7.3.6 升级到 7.4.27 从结果上来看，提升不大，如果是 5 => 7 ，那是一个质变，小版本的升级暂时看不出太多的性能问题，期待 8 版本的镜像后续能带来的性能变化。...还有一种优化思路就是利用语言、框架、依赖、服务器、http1.1 ->2 等周边，通过版本提升来试图提高性能，或者替换性能更优服务来降低首屏耗时。...但这不是说不要做前端的性能优化，而是要权衡性价比，而不是忽略本身的问题。
安装插件 npm install --save gatsby-transformer-remark gatsby-remark-highlight-code @deckdeckgo/highlight-code...配置插件 在 gatsby-config.js 中添加： // In your gatsby-config.js plugins: [ { resolve: `gatsby-transformer-remark...`, options: { plugins: [ { resolve: `gatsby-remark-highlight-code`...}, ], }, }, ] 运行时加载插件 对于 gatsby-starter-blog，在 src/templates/blog-post.js 的 BlogPostTemplate...效果：https://aping-dev.com/gatsby-highlight-code/ [image.png] 参考 gatsby-remark-highlight-code
也能弄出很不错的系统，就象本文所提的内容，对linq有成见的人，可能会说："linq真烂，这么不智能，很傻很天真"；而真正用linq的人，也许会说："原来如此，以后我们应该用正确的写法，以避免因疏忽导致的性能问题
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
