Introduction to Gridsome
- April 8, 2019
- Tiempo de lectura . 2 min
- Autor: Yuniel Acosta
Gridsome is a Vue.js-powered, modern site generator for building the fastest possible websites for any Headless CMS, APIs or Markdown-files. Gridsome makes it easy and fun for developers to create fast, beautiful websites without needing to become a performance expert.
Why Gridsome?
- Local development with hot-reloading - See code changes in real-time.
- Data source plugins - Use it for any popular Headless CMSs, APIs or Markdown-files.
- File-based page routing - Quickly create and manage routes with files.
- Centralized data management - Pull data into a local, unified GraphQL data layer.
- Vue.js for frontend - A lightweight and approachable front-end framework.
- Auto-optimized code - Get code-splitting and asset optimization out-of-the-box.
- Static files generation - Deploy securely to any CDN or static web host.
Learn more about how Gridsome works
<template>
<Layout>
<div class="container-inner mx-auto my-16">
<h1 class="text-4xl font-bold leading-tight">{{ $page.post.title }}</h1>
<div class="text-xl text-gray-600 mb-8">{{ $page.post.date }}</div>
<div class="markdown-body" v-html="$page.post.content" />
</div>
</Layout>
</template>
Prerequisites
You should have basic knowledge about HTML, CSS, Vue.js and how to use the Terminal. Knowing how Vue Single File components & GraphQL works is a plus, but not required. Gridsome is a great way to learn both.
Gridsome requires Node.js and recommends Yarn. How to setup
1. Install Gridsome CLI tool
Using yarn:
yarn global add @gridsome/cli
Using npm:
npm install --global @gridsome/cli
2. Create a Gridsome project
gridsome create my-gridsome-site
to create a new projectcd my-gridsome-site
to open foldergridsome develop
to start local dev server athttp://localhost:8080
- Happy coding 🎉🙌
3. Next steps
- Create
.vue
components in the/pages
directory to create page routes. - Use
gridsome build
to generate static files in a/dist
folder