Introducción a Gridsome

Gridsome es un generador de sitios web estáticos con tecnología Vue.js para crear los sitios web lo más rápido posible para cualquier CMS, API o archivos Markdown. Gridsome hace que sea fácil y divertido para los desarrolladores crear sitios web hermosos y rápidos sin necesidad de convertirse en un experto en rendimiento.

¿Por qué Gridsome?

Complementos de fuente de datos - Úselo para cualquier CMS, API o archivos Markdown populares sin cabeza.
Enrutamiento de páginas basado en archivos - Cree y administre rápidamente rutas con archivos.
Gestión de datos centralizada - Extraiga datos en una capa de datos GraphQL local y unificada.
Vue.js para frontend: un framework de front-end ligero y accesible.
Código optimizado automáticamente: obtenga la división de código y la optimización de activos de forma inmediata.
Generación de archivos estáticos - Implemente de forma segura en cualquier CDN o alojamiento web estático.

Aprenda más de cómo Gridsome funciona

<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>

Prerrequisitos

Debe tener conocimientos básicos sobre HTML, CSS, Vue.js y cómo utilizar la Terminal. Saber cómo funcionan los componentes de Vue Single File y GraphQL es una ventaja, pero no es obligatorio. Gridsome es una excelente manera de aprender ambos.

Gridsome requiere Node.js y recomienda Yarn. Cómo configurar

background

1. Instalar la herramienta CLI de Gridsome

Usando yarn: yarn global add @gridsome/cli

Usando npm: npm install --global @gridsome/cli

2. Crear un proyecto Gridsome

gridsome create my-gridsome-site para crear un nuevo proyecto
cd my-gridsome-site para abrir la carpeta
gridsome develop para iniciar el servidor de desarrollo en http://localhost:8080
Feliz codificación 🎉🙌

3. Siguientes pasos

Cree componentes .vue en el directorio /pages para crear rutas de página.
Utilice gridsome build para generar archivos estáticos en una carpeta /dist