基于 Vue.js 构建的 Jamstack 框架

Gridsome 让开发人员可以轻松地构建静态生成的网站和应用程序,这些网站和应用程序 天生速度快 🚀

Open-source MIT Licensed. GitHub (v0.7.23)

加载你的数据

CMSs

Any Headless CMS, Contentful, WordPress, Drupal, Sanity.io, etc.

Data

Any APIs, Databases, AirTable, YAML, CSV, JSON, etc.

Markdown

Any Git-based CMS, Forestry, Netlify CMS, Blogs, Documentation.

构建

Powered by
GraphQL

  • HTML
  • Vue.js
  • CSS

便捷的本地开发

使用
Vue.js、 GraphQL 等现代工具以及 Node.js 和 JavaScript 生态系统内所有强大的功能来构建网站。在本地开发时,可以立即对任何代码的更改进行 热加载(hot-reloading)

天生快速

Gridsome 利用 PRPL 模式将超高性能融入到每个页面中。代码拆分、资源优化、图像渐进加载和链接预取功能开箱即用。用 Gridsome 构建的站点在默认配置下就能获得几乎完美的页面速度得分。

支持 PWA

Gridsome 能够生成静态的 PWA。页面加载时仅加载关键的 HTML、CSS 和 JavaScript。然后预取下一页,以便用户即使在脱机状态下也能快速访问其它页面,而无须重新加载页面。

基于 Jamstack 技术构建

web 的未来将是 JavaScript、API 和 Markup(标记语言) - 即 Jamstack。Gridsome 利用强大的静态站点生成技术、JavaScript 和 API 来创建令人惊叹的现代 web 体验。

部署简单、安全

无须服务器、无须数据库、只有文件。将你的整个站点直接部署到 CDN 上,然后无须费心打理。用 Gridsome 构建的网站可以处理少至几千多至百万次的点击而不会出现故障,并且无须高昂的服务器费用。

SEO 友好

Gridsome sites load as static HTML before they hydrate into fully Vue.js-powered SPAs. This makes it possible for search engines to be able to crawl content and give better SEO ranking, and still have all the power of Vue.js.

Connect the modern web

The modern web is decoupled and modular. Gridsome makes it painlessly easy to build Jamstack websites using data from multiple sources such as Content API's, Headless CMSs, and other web services.

Browse Gridsome Plugins

The Modern Web Logos
The Modern Web Background

A better way to build websites & apps

Gridsome makes it simple & fast to build modern websites for any data source.

src/pages/Blog.vue
<template>
  <Layout>
    <h1>My blog</h1>
     <div v-for="{ node } in $page.allPost.edges" :key="node.id">
      <h3>{{ node.title }}</h3>
       <g-link :to="node.path">Read more</g-link>
     </div>
  </Layout>
</template>

<!-- Query from local GraphQL data layer. -->
<page-query>
query {
  allPost {
    edges {
      node {
        id
        title
        path
      }
    }
  }
}
</page-query>

Gridsome Sponsors

Latest from Gridsome blog

Read more

How to integrate Infinite Loading with Gridsome

Infinite loading is an alternative strategy for loading additional nodes/content onto a page without the use of traditional pagination. Infinite loading instead loads the next batch of content when a user scrolls to the bottom of a web page.

Posted 8. October 2019 by Cody BarrCody Barr - 3 min read

Read more

Gridsome v0.7

Version 0.7 is finally here! Enjoy Vue Components in Markdown, new Schema API, File-based dynamic routing, better Template config, Custom App.vue, Shareable Network URL and more!

Posted 17. September 2019 by Hans-Jørgen VedvikHans-Jørgen Vedvik and Tommy VedvikTommy Vedvik - 6 min read

Read more

Gridsome v0.6

Gridsome 0.6 introduces a Pages API that gives you full control of page creation. It also has an API that lets you fetch internal pages into other pages and components. This is perfect for lightboxes or «Click for more» pagination etc. 0.6 also improves build times and has a smaller core JS bundle size!

Posted 10. May 2019 by Hans-Jørgen VedvikHans-Jørgen Vedvik and Tommy VedvikTommy Vedvik - 3 min read

Read more

Gridsome v0.5

We're really excited to release Gridsome 0.5. The biggest update yet. It has many important features that make data handling easier and a lot more flexible. It opens up a whole new world of what you can build with Gridsome. Easily build Taxonomy pages and connections for any data.

Posted 19. February 2019 by Hans-Jørgen VedvikHans-Jørgen Vedvik and Tommy VedvikTommy Vedvik - 2 min read

Read more

Say hello to Gridsome 👶🎉💚

A new static site generator baby is born. It's highly inspired by Gatsby.js (React based) but built on top of Vue.js. We have been working on it for a year and will have a beta ready soon. You can expect this baby to grow up fast!

Posted 10. October 2018 by Tommy VedvikTommy Vedvik - 3 min read

Performance Matters