Gridsome case

Create a project

gridsome create blog-with-gridsome

yarn dev
Copy the code

Launch project:

Using open source templates on Github, it is best to fork them to your own account to prevent the template file from being deleted or otherwise modified by the author.

Handling the Home Page Template

The installation depends on NPM I bootstrap@fortawesome /fontawesome-free according to package.json in the template
Write the remaining style files to the project SRC /assets/ CSS /index.css

@import url("Https://fonts.googleapis.com/css?family=Lora:400, 700400 italic, 700 italic");
@import url("Https://fonts.googleapis.com/css?family=Open+Sans:300italic, 400 italic, 600 italic, 700 italic, italic, 800, 400300600700800 ")

// Copy the CSS styles from the template here
// ...
Copy the code

Import the above style files from main.js in the project

import 'bootstrap/dist/css/bootstrap.min.css'
import '@fortawesome/fontawesome-free/css/all.min.css'

import './assets/css/index.css'
Copy the code

Work with other page templates

In the template, the header navigation and the tail of each page are essentially the same and can be placed in the default layout component, while the content in the middle can be placed in separate components.

layouts

The Default file is default. vue, which can be modified in main.js

// Default.vue
<template>
    <header></header>
    <slot />
    <footer></footer>
</template>
// Other.vue files
<template>
    <Layout>
    <! -- Body content -->
  </Layout>
</template>
Copy the code

Copy the contents of the Post, About, and Contact pages into the project. Once the template is complete, we will use gridsome to build a purely static blog site.

Use local MD files to manage article content

Data can be put anywhere in gridsome, either locally or in the background

Import via plug-in, using @gridsome/source-filesystem

yarn add @gridsome/source-filesystem
Copy the code

Configure it in the plugins and then convert it using @gridsome/transformer-remark

yarn add @gridsome/transformer-remark
Copy the code

module.exports = {
  siteName: 'Gridsome'.plugins: [{use: '@gridsome/source-filesystem'.options: {
        typeName: 'BlogPost'.path: './content/blog/**/*.md'}}}]Copy the code

You can add md files under the Content /blog directory

content
--blog
    --article1.mg
    --article2.md
Copy the code

After the restart, open http://localhost:8080/___explore to query the newly converted MD file data

Strapi basic use

In addition to managing blog content through local MD files, you can also manage it through the website background

Grisome itself does not provide background functions, so strAPI is recommended to implement requirements

Address: strapi. IO

Is a content management background, you can customize the management structure

The basic use

Installation:

npx create-strapi-app blog-project --quickstart
Copy the code

Once started, you need to register an account

Use plug-ins, content type generators

Add new fields and content, then use strAPI’s interface data

Use GraphQL to view the data

The installation

cd blog-project
npm run strapi install graphql
Copy the code

Graphql open http://localhost:1337/graphql to view the data

Prefetch Strapi data into a Gridsome application

To integrate strAPI into gridsome, you need to use a plug-in for @Gridsome/source-strAPI

Then add the following code to the plugins in the gridsome.config.js configuration file:

{
  use: '@gridsome/source-strapi'.options: {
    apiURL: 'http://localhost:1337'.queryLimit: 1000.contentTypes: ['post'].// loginData: {
    // identifier: '',
    // password: ''
    // }
}
Copy the code

Go to http://localhost:8080/___explore to see the graphQL data

If a string is added in the background, it will not be found in Gridsome. To resolve the problem, restart the Gridsome service.

Article list paging

Gridsome provides the @Paginate API for paging. You can customize the number of pages and items per page.

<page-query>
query ($page: Int) {
  posts: allStrapiPost (perPage: 2.page: $page) @paginate {
    edges {
      node {
        id
        title
        content
        tags {
          id
          title
        }
      }
    }
  }
}
</page-query>
Copy the code

The Gridsome also provides the paging component Pager, which needs to be registered and used as a normal component, as well as adding a query statement to the page-query:

<pager :info="$page.posts.pageInfo"></pager>
Copy the code

query ($page: Int) {
    posts: allStrapiPost (perPage: 1.page: $page) @paginate { pageInfo { totalPages currentPage } ... }}Copy the code

Deploy Strapi

The Gridsome project, the blog application itself, can deploy any web service that supports static files, while the StrAPI application needs to be deployed in a Node.js environment. Since the Gridsome project needs to request StrAPI’s services to get pre-rendered data at startup, the StrAPI application is deployed first.

By default, STRAPI uses SQLite to store data. You can also use other databases such as mysql mongodb. There are corresponding configuration items on the official website.

To use mysql, you must first have mysql on the server, and then modify the strAPI project configuration file config\database.js. Modify the configuration file as follows:

module.exports = ({ env }) = > ({
  defaultConnection: 'default'.connections: {
      default: {
          connector: 'bookshelf'.settings: {
              client: 'mysql'.host: env('DATABASE_HOST'.'localhost'),
              port: env.int('DATABASE_PORT'.3306),
              database: env('DATABASE_NAME'.'blog'),
              username: env('DATABASE_USERNAME'.'root'),
              password: env('DATABASE_PASSWORD'.' '),},options: {},},},});Copy the code

Mysql and Strapi are on the same server. If they are on different servers, the address of other servers should be written here. Secondly, there should be a database named blog, otherwise the corresponding database cannot be found during deployment.

The deployment process is also very simple, directly clone the source code on the cloud server, and then run NPM install NPM run build and other commands, directly package good, but this method has a disadvantage, is the current use of NPM start after the connection is broken, the service will hang. So the PM2 (NPM I -g pm2) daemon is used to execute the NPM command.

npm i -g pm2
pm2 start npm --run start --name blog-backend
Copy the code

Connect local services to remote Strapi

Configure the environment variables, development mode, production mode, and gridsome.config.js to change the apiURL to the remote/local address for deployment

The.env.devlopment runs in development mode. Env.production runs in production mode

apiURL: process.env.GRIDSOME_API_URL,
Copy the code

Mix the GRIDSOME_API_URL in main.js so that it can be used globally. Vue file image resources, etc.

export default function (Vue, { router, head, isClient }) {
  // Set default layout as a global component
  Vue.mixin({
    data() {
        return {
        GRIDSOME_API_URL: process.env.GRIDSOME_API_URL
      }
    }
  })
  Vue.component('Layout', DefaultLayout)
}
Copy the code

Deploy the Gridsome application

Develop. Preview. Ship. For the best frontend teams — Vercel

Every time the Strapi backend data is updated, we need to redeploy Vercel again, which is troublesome. So automate!

Create a project

Handling the Home Page Template

Work with other page templates

Use local MD files to manage article content

Strapi basic use

Deploy Strapi

Connect local services to remote Strapi

Deploy the Gridsome application

Related Posts

ES6 let and VAR differences

Reporter IntersectionObserver API

Close to the ceiling of the TS type of gymnastics, read you can play TS