Build a super-fast website with Gridsome

Friday, 29/05/2020

Tram Ho

In the previous article, I have introduced to you VuePress , in this article will continue to be one more tool, continue to be another tool to build a static web, Gridsome .

Demo blog built from Gridsome here .

About Gridsome

Gridsome also built with Vue.js and developed within the Jamstack framework , which is used to create websites as quickly as possible, meeting user needs.

The strengths of Gridsome are:

Vue.js for frontend: If you are already using Vue, this is an extremely user-friendly, easy-to-use, user-driven framework.
Creating content on the website is quite simple, Gridsome is compatible with many handy CMS, and also uses Markdown to write content.
Local development with hot-reloading: Like VuePress, Gridsome also has local server, which makes development easier.
Routing on file-based websites is similar to VuePress
GraphQL data layer: Gridsome’s database uses GraphQL, which is very simple to manage and access.
Plugin ecosystem: Number of plugins built rich, easy to use.

How does Gridsome work?

Gridsome will generate your Markdown pages as static HTML pages, after being loaded by the browser, your website will be a Vue SPA , the user experience will be much better.

Gridsome will build 1 html file and 1 json file for each page. After the first page is loaded, it will only use the json file to prefetch and fetch the data for the next page, the js script section will be built on each page, making the loading speed greatly reduced.

Start building web with Gridsome only

Install Gridsome

First you need Node (v8.3 +) and I use Yarn to install libraries

$ yarn global add @gridsome/cli  // cài đặt gridsome-cli

$ gridsome create my-gridsome-site // Để init dự án

❯ Clone https://github.com/gridsome/gridsome-starter-default.git 2.79s
❯ Update project package.json 0s
❯ Install dependencies


$ cd my-gridsome-site

$ yarn develop // Khởi tạo local server
 DONE  Compiled successfully in 106ms                                                                    9:31:07 PM


  Site running at:                                         
  - Local:                 http://localhost:8080/          
  - Network:               http://192.168.1.75:8080/       
                                                           
  Explore GraphQL data at: http://localhost:8080/___explore

$ yarn global add @gridsome/cli // cài đặt gridsome-cli

$ gridsome create my-gridsome-site // Để init dự án

❯ Clone https://github.com/gridsome/gridsome-starter-default.git 2.79s

❯ Update project package.json 0s

❯ Install dependencies

$ cd my-gridsome-site

$ yarn develop // Khởi tạo local server

DONE Compiled successfully in 106ms 9:31:07 PM

Site running at:

- Local: http://localhost:8080/

- Network: http://192.168.1.75:8080/

Explore GraphQL data at: http://localhost:8080/___explore

Tadaa so the local server is turned on, the interface is quite simple, right?

The project directory structure is also fairly explicit:

.
├── package.json
├── gridsome.config.js
├── gridsome.server.js
├── articles/       # Thư mục chứa các trang nội dung
├── static/
└── src/            # Nơi chứa source trên website
    ├── main.js
    ├── index.html
    ├── App.vue
    ├── layouts/
    │   └── Default.vue
    ├── pages/
    │   ├── Index.vue
    │   └── Blog.vue
    └── templates/
        └── BlogPost.vue

├── package.json

├── gridsome.config.js

├── gridsome.server.js

├── articles/ # Thư mục chứa các trang nội dung

├── static/

└── src/ # Nơi chứa source trên website

├── main.js

├── index.html

├── App.vue

├── layouts/

│ └── Default.vue

├── pages/

│ ├── Index.vue

│ └── Blog.vue

└── templates/

└── BlogPost.vue

Now let’s make it a bit more lively

Install a little more libraries and plugins

To add libraries and plugins, add them to the package.json file, then run yarn install

<span class="token punctuation">{</span>
  <span class="token property">"name"</span> <span class="token operator">:</span> <span class="token string">"my-gridsome-website"</span> <span class="token punctuation">,</span>
  <span class="token property">"private"</span> <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span>
  <span class="token property">"scripts"</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">"build"</span> <span class="token operator">:</span> <span class="token string">"gridsome build"</span> <span class="token punctuation">,</span>
    <span class="token property">"develop"</span> <span class="token operator">:</span> <span class="token string">"gridsome develop"</span> <span class="token punctuation">,</span>
    <span class="token property">"explore"</span> <span class="token operator">:</span> <span class="token string">"gridsome explore"</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span>
  <span class="token property">"dependencies"</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">"@gridsome/plugin-google-analytics"</span> <span class="token operator">:</span> <span class="token string">"^0.1.0"</span> <span class="token punctuation">,</span>
    <span class="token property">"@gridsome/plugin-sitemap"</span> <span class="token operator">:</span> <span class="token string">"^0.1.1"</span> <span class="token punctuation">,</span>
    <span class="token property">"babel-runtime"</span> <span class="token operator">:</span> <span class="token string">"^6.26.0"</span> <span class="token punctuation">,</span>
    <span class="token property">"bootstrap"</span> <span class="token operator">:</span> <span class="token string">"^4.3.1"</span> <span class="token punctuation">,</span>
    <span class="token property">"gridsome"</span> <span class="token operator">:</span> <span class="token string">"0.5.7"</span> <span class="token punctuation">,</span>
    <span class="token property">"gridsome-plugin-gtm"</span> <span class="token operator">:</span> <span class="token string">"^0.1.1"</span> <span class="token punctuation">,</span>
    <span class="token property">"jquery"</span> <span class="token operator">:</span> <span class="token string">"^3.4.0"</span> <span class="token punctuation">,</span>
    <span class="token property">"popper.js"</span> <span class="token operator">:</span> <span class="token string">"^1.15.0"</span> <span class="token punctuation">,</span>
    <span class="token property">"vue-instantsearch"</span> <span class="token operator">:</span> <span class="token string">"^2.0.1"</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span>
  <span class="token property">"devDependencies"</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">"@gridsome/remark-prismjs"</span> <span class="token operator">:</span> <span class="token string">"0.0.5"</span> <span class="token punctuation">,</span>
    <span class="token property">"@gridsome/source-filesystem"</span> <span class="token operator">:</span> <span class="token string">"^0.3.0"</span> <span class="token punctuation">,</span>
    <span class="token property">"@gridsome/transformer-remark"</span> <span class="token operator">:</span> <span class="token string">"^0.2.1"</span> <span class="token punctuation">,</span>
    <span class="token property">"webpack-node-externals"</span> <span class="token operator">:</span> <span class="token string">"^1.7.2"</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

{

"name" : "my-gridsome-website" ,

"private" : true ,

"scripts" : {

"build" : "gridsome build" ,

"develop" : "gridsome develop" ,

"explore" : "gridsome explore"

} ,

"dependencies" : {

"@gridsome/plugin-google-analytics" : "^0.1.0" ,

"@gridsome/plugin-sitemap" : "^0.1.1" ,

"babel-runtime" : "^6.26.0" ,

"bootstrap" : "^4.3.1" ,

"gridsome" : "0.5.7" ,

"gridsome-plugin-gtm" : "^0.1.1" ,

"jquery" : "^3.4.0" ,

"popper.js" : "^1.15.0" ,

"vue-instantsearch" : "^2.0.1"

} ,

"devDependencies" : {

"@gridsome/remark-prismjs" : "0.0.5" ,

"@gridsome/source-filesystem" : "^0.3.0" ,

"@gridsome/transformer-remark" : "^0.2.1" ,

"webpack-node-externals" : "^1.7.2"

}

and configure the plugins into gridsome.config.js file

<span class="token comment">// This is where project configuration and plugin options are located.</span>
<span class="token comment">// Learn more: https://gridsome.org/docs/config</span>

<span class="token comment">// Changes here require a server restart.</span>
<span class="token comment">// To restart press CTRL + C in terminal and run `gridsome develop`</span>
<span class="token keyword">const</span> nodeExternals <span class="token operator">=</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'webpack-node-externals'</span> <span class="token punctuation">)</span>

module <span class="token punctuation">.</span> exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  siteName <span class="token punctuation">:</span> <span class="token string">"My Gridsome Website"</span> <span class="token punctuation">,</span>
  siteUrl <span class="token punctuation">:</span> <span class="token string">"https://daothaison.me"</span> <span class="token punctuation">,</span>
  titleTemplate <span class="token punctuation">:</span> <span class="token string">'%s - daothaison.me'</span> <span class="token punctuation">,</span>
  siteDescription <span class="token punctuation">:</span> <span class="token string">"Taaaadaaaaaaa"</span> <span class="token punctuation">,</span>

  <span class="token function">chainWebpack</span> <span class="token punctuation">(</span> config <span class="token punctuation">,</span> <span class="token punctuation">{</span> isServer <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span> isServer <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      config <span class="token punctuation">.</span> <span class="token function">externals</span> <span class="token punctuation">(</span> <span class="token function">nodeExternals</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
        whitelist <span class="token punctuation">:</span> <span class="token punctuation">[</span>
          <span class="token regex">/.css$/</span> <span class="token punctuation">,</span>
          <span class="token regex">/?vue&amp;type=style/</span> <span class="token punctuation">,</span>
          <span class="token regex">/vue-instantsearch/</span> <span class="token punctuation">,</span>
          <span class="token regex">/instantsearch.js/</span> <span class="token punctuation">,</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span>


  plugins <span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      use <span class="token punctuation">:</span> <span class="token string">"@gridsome/source-filesystem"</span> <span class="token punctuation">,</span>
      options <span class="token punctuation">:</span> <span class="token punctuation">{</span>
        path <span class="token punctuation">:</span> <span class="token string">"article/_posts/**/*.md"</span> <span class="token punctuation">,</span>
        typeName <span class="token punctuation">:</span> <span class="token string">"Article"</span> <span class="token punctuation">,</span>
        route <span class="token punctuation">:</span> <span class="token string">"/:slug-:id"</span> <span class="token punctuation">,</span>
        <span class="token comment">// route: "/:slug"</span>
        remark <span class="token punctuation">:</span> <span class="token punctuation">{</span>
          autolinkHeadings <span class="token punctuation">:</span> <span class="token punctuation">{</span>
            content <span class="token punctuation">:</span> <span class="token punctuation">{</span>
              type <span class="token punctuation">:</span> <span class="token string">'text'</span> <span class="token punctuation">,</span>
              value <span class="token punctuation">:</span> <span class="token string">'# '</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span> <span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      use <span class="token punctuation">:</span> <span class="token string">'@gridsome/plugin-sitemap'</span>
    <span class="token punctuation">}</span> <span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      use <span class="token punctuation">:</span> <span class="token string">'@gridsome/plugin-google-analytics'</span> <span class="token punctuation">,</span>
      options <span class="token punctuation">:</span> <span class="token punctuation">{</span>
        id <span class="token punctuation">:</span> <span class="token string">'UA-xxxxx'</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span> <span class="token punctuation">,</span>
  transformers <span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token comment">//Add markdown support to all file-system sources</span>
    remark <span class="token punctuation">:</span> <span class="token punctuation">{</span>
      externalLinksTarget <span class="token punctuation">:</span> <span class="token string">"_blank"</span> <span class="token punctuation">,</span>
      externalLinksRel <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">"nofollow"</span> <span class="token punctuation">,</span> <span class="token string">"noopener"</span> <span class="token punctuation">,</span> <span class="token string">"noreferrer"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span>
      anchorClassName <span class="token punctuation">:</span> <span class="token string">"fe fe-hash mr-1"</span> <span class="token punctuation">,</span>
      plugins <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">"@gridsome/remark-prismjs"</span> <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>

// This is where project configuration and plugin options are located.

// Learn more: https://gridsome.org/docs/config

// Changes here require a server restart.

// To restart press CTRL + C in terminal and run `gridsome develop`

const nodeExternals = require ( 'webpack-node-externals' )

module . exports = {

siteName : "My Gridsome Website" ,

siteUrl : "https://daothaison.me" ,

titleTemplate : '%s - daothaison.me' ,

siteDescription : "Taaaadaaaaaaa" ,

chainWebpack ( config , { isServer } ) {

if ( isServer ) {

config . externals ( nodeExternals ( {

whitelist : [

/.css$/ ,

/?vue&type=style/ ,

/vue-instantsearch/ ,

/instantsearch.js/ ,

]

} ) )

}

} ,

plugins : [

{

use : "@gridsome/source-filesystem" ,

options : {

path : "article/_posts/**/*.md" ,

typeName : "Article" ,

route : "/:slug-:id" ,

// route: "/:slug"

remark : {

autolinkHeadings : {

content : {

type : 'text' ,

value : '# '

}

} ,

{

use : '@gridsome/plugin-sitemap'

} ,

{

use : '@gridsome/plugin-google-analytics' ,

options : {

id : 'UA-xxxxx'

}

] ,

transformers : {

//Add markdown support to all file-system sources

remark : {

externalLinksTarget : "_blank" ,

externalLinksRel : [ "nofollow" , "noopener" , "noreferrer" ] ,

anchorClassName : "fe fe-hash mr-1" ,

plugins : [ "@gridsome/remark-prismjs" ]

}

} ;

In this file, I have configured more gridsome plugins to automatically find Markdown files of web content and compile them into html, sitemap plugin to create sitemap files – helping Google can index your website on the internet later. , the Google Analytics plugin to help you track traffic to websites, …

You can learn more about configs from https://gridsome.org/docs/config .

Create page layout

The layout of the site is located in the src/Layouts/Default.vue , which is the default layout and is used in all pages.

<span class="token comment">// This is the main.js file. Import global CSS and scripts here.</span>
<span class="token comment">// The Client API can be used here. Learn more: gridsome.org/docs/client-api</span>

<span class="token keyword">import</span> DefaultLayout <span class="token keyword">from</span> <span class="token string">'~/layouts/Default.vue'</span>
<span class="token keyword">import</span> <span class="token string">'../node_modules/bootstrap/dist/css/bootstrap.min.css'</span> <span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> Vue <span class="token punctuation">,</span> <span class="token punctuation">{</span> router <span class="token punctuation">,</span> head <span class="token punctuation">,</span> isClient <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// Set default layout as a global component</span>
  Vue <span class="token punctuation">.</span> <span class="token function">component</span> <span class="token punctuation">(</span> <span class="token string">'Layout'</span> <span class="token punctuation">,</span> DefaultLayout <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

// This is the main.js file. Import global CSS and scripts here.

// The Client API can be used here. Learn more: gridsome.org/docs/client-api

import DefaultLayout from '~/layouts/Default.vue'

import '../node_modules/bootstrap/dist/css/bootstrap.min.css' ;

export default function ( Vue , { router , head , isClient } ) {

// Set default layout as a global component

Vue . component ( 'Layout' , DefaultLayout )

}

<span class="token operator">&lt;</span> template <span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span> div <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"flex-fill"</span> <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"header py-4"</span> <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"container"</span> <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"d-flex"</span> <span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span> g <span class="token operator">-</span> link <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"header-brand"</span> to <span class="token operator">=</span> <span class="token string">"/"</span> <span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span> img src <span class="token operator">=</span> <span class="token string">"https://gridsome.org/logos/logo-normal.svg"</span> <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"header-brand-img mr-0 w-25"</span> alt <span class="token operator">=</span> <span class="token string">"logo"</span> <span class="token operator">/</span> <span class="token operator">&gt;</span>
                My Gridsome Website
              <span class="token operator">&lt;</span> <span class="token operator">/</span> g <span class="token operator">-</span> link <span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"d-flex order-lg-2 ml-auto"</span> <span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"nav-item d-none d-md-flex"</span> <span class="token operator">&gt;</span>
                  <span class="token operator">&lt;</span> a
                          href <span class="token operator">=</span> <span class="token string">"https://github.com/daothaison"</span>
                          <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"btn btn-sm btn-outline-primary"</span>
                          target <span class="token operator">=</span> <span class="token string">"_blank"</span>
                  <span class="token operator">&gt;</span> Github Profile <span class="token operator">&lt;</span> <span class="token operator">/</span> a <span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span> a
                      href <span class="token operator">=</span> <span class="token string">"#"</span>
                      <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"header-toggler d-lg-none ml-3 ml-lg-0"</span>
                      data <span class="token operator">-</span> toggle <span class="token operator">=</span> <span class="token string">"collapse"</span>
                      data <span class="token operator">-</span> target <span class="token operator">=</span> <span class="token string">"#headerMenuCollapse"</span>
              <span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span> span <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"header-toggler-icon"</span> <span class="token operator">&gt;</span> <span class="token operator">&lt;</span> <span class="token operator">/</span> span <span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span> <span class="token operator">/</span> a <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> div v <span class="token operator">-</span> <span class="token keyword">if</span> <span class="token operator">=</span> <span class="token string">"title"</span> <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"my-3 my-md-5"</span> <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"container"</span> <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"page-header"</span> <span class="token operator">&gt;</span>
              <span class="token operator">&lt;</span> h1 <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"page-title"</span> <span class="token operator">&gt;</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> title <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">&lt;</span> <span class="token operator">/</span> h1 <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>

        <span class="token operator">&lt;</span> <span class="token operator">!</span> <span class="token operator">--</span> content <span class="token operator">--</span> <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"container"</span> <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> slot <span class="token operator">/</span> <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> <span class="token operator">!</span> <span class="token operator">--</span> end content <span class="token operator">--</span> <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> footer <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"footer"</span> <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"container"</span> <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"row"</span> <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"col-12 col-lg-auto mt-3 mt-lg-0 text-center m-auto"</span> <span class="token operator">&gt;</span>
              Copyright © <span class="token number">2020</span>
            <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> <span class="token operator">/</span> footer <span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
<span class="token operator">&lt;</span> <span class="token operator">/</span> template <span class="token operator">&gt;</span>

<span class="token operator">&lt;</span> script <span class="token operator">&gt;</span>
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    props <span class="token punctuation">:</span> <span class="token punctuation">{</span>
      title <span class="token punctuation">:</span> String
    <span class="token punctuation">}</span> <span class="token punctuation">,</span>
    components <span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token punctuation">;</span>
<span class="token operator">&lt;</span> <span class="token operator">/</span> script <span class="token operator">&gt;</span>

< template >

< div >

< div class = "flex-fill" >

< div class = "header py-4" >

< div class = "container" >

< div class = "d-flex" >

< g - link class = "header-brand" to = "/" >

< img src = "https://gridsome.org/logos/logo-normal.svg" class = "header-brand-img mr-0 w-25" alt = "logo" / >

My Gridsome Website

< / g - link >

< div class = "d-flex order-lg-2 ml-auto" >

< div class = "nav-item d-none d-md-flex" >

< a

href = "https://github.com/daothaison"

class = "btn btn-sm btn-outline-primary"

target = "_blank"

> Github Profile < / a >

< / div >

< a

href = "#"

class = "header-toggler d-lg-none ml-3 ml-lg-0"

data - toggle = "collapse"

data - target = "#headerMenuCollapse"

>

< span class = "header-toggler-icon" > < / span >

< / a >

< / div >

< div v - if = "title" class = "my-3 my-md-5" >

< div class = "page-header" >

< h1 class = "page-title" > { { title } } < / h1 >

< / div >

< ! -- content -- >

< slot / >

< / div >

< ! -- end content -- >

< / div >

< footer class = "footer" >

< div class = "row" >

< div class = "col-12 col-lg-auto mt-3 mt-lg-0 text-center m-auto" >

< / div >

< / footer >

< / div >

< / template >

< script >

export default {

props : {

title : String

} ,

components : {

}

} ;

< / script >

We will have a layout like this

Display content on the homepage

To put content on Gridsome , you need to add Markdown pages to the article/posts/ . With the header of each file has the following template

---
id: unique_id
date: 2019-04-24 14:04:27
title: 'Tiêu đề'
author: sondt
categories: [ xxx ]
image: ../../images/temp/1.jpg
description: xx
---

# Nội dung của bài

---

id: unique_id

date: 2019-04-24 14:04:27

title: 'Tiêu đề'

author: sondt

categories: [ xxx ]

image: ../../images/temp/1.jpg

description: xx

---

# Nội dung của bài

The way Gridsome creates urls is similar to VuePress, which automatically processes *.vue files inside the src/pages/ . Our homepage will be src/pages/Index.vue file src/pages/Index.vue , I will edit them to get articles in article directory and display the list on the homepage.

<span class="token operator">&lt;</span> template <span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span> Layout title <span class="token operator">=</span> <span class="token string">"Trang chủ"</span> <span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"mb-6"</span> <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"row row-cards"</span> <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"col-lg-12 col-md-12"</span> <span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span> ListPostTable <span class="token punctuation">:</span> articles <span class="token operator">=</span> <span class="token string">"$page.articles"</span> <span class="token operator">/</span> <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span> <span class="token operator">/</span> div <span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span> <span class="token operator">/</span> Layout <span class="token operator">&gt;</span>
<span class="token operator">&lt;</span> <span class="token operator">/</span> template <span class="token operator">&gt;</span>

<span class="token operator">&lt;</span> script <span class="token operator">&gt;</span>
<span class="token keyword">import</span> ListPostTable <span class="token keyword">from</span> <span class="token string">"~/components/table/ListPostTable.vue"</span> <span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  metaInfo <span class="token punctuation">:</span> <span class="token punctuation">{</span>
    title <span class="token punctuation">:</span> <span class="token string">'Hello, world!'</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span>
  components <span class="token punctuation">:</span> <span class="token punctuation">{</span>
    ListPostTable
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span> <span class="token operator">/</span> script <span class="token operator">&gt;</span>

<span class="token operator">&lt;</span> page <span class="token operator">-</span> query <span class="token operator">&gt;</span>
  query Article <span class="token punctuation">{</span>
    articles <span class="token punctuation">:</span> <span class="token function">allArticle</span> <span class="token punctuation">(</span> perPage <span class="token punctuation">:</span> <span class="token number">3</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      edges <span class="token punctuation">{</span>
        node <span class="token punctuation">{</span>
          id
          <span class="token function">date</span> <span class="token punctuation">(</span> format <span class="token punctuation">:</span> <span class="token string">"D MMMM, YYYY"</span> <span class="token punctuation">)</span>
          title
          timeToRead
          path
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token operator">&lt;</span> <span class="token operator">/</span> page <span class="token operator">-</span> query <span class="token operator">&gt;</span>

<span class="token operator">&lt;</span> style <span class="token operator">&gt;</span>
<span class="token punctuation">.</span> home <span class="token operator">-</span> links a <span class="token punctuation">{</span>
  margin <span class="token operator">-</span> right <span class="token punctuation">:</span> <span class="token number">1</span> rem <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span> <span class="token operator">/</span> style <span class="token operator">&gt;</span>

< template >

< Layout title = "Trang chủ" >

< div class = "mb-6" >

< div class = "row row-cards" >

< div class = "col-lg-12 col-md-12" >

< ListPostTable : articles = "$page.articles" / >

< / div >

< / Layout >

< / template >

< script >

import ListPostTable from "~/components/table/ListPostTable.vue" ;

export default {

metaInfo : {

title : 'Hello, world!'

} ,

components : {

ListPostTable

}

< / script >

< page - query >

query Article {

articles : allArticle ( perPage : 3 ) {

edges {

node {

date ( format : "D MMMM, YYYY" )

title

timeToRead

path

}

< / page - query >

< style >

. home - links a {

margin - right : 1 rem ;

}

< / style >

The result will be a homepage like this

Conclusion

Through this article, hope you can build yourself a website using Gridsome quite quickly. In the next article, I will show you how to deploy newly created websites to the server, auto deploy whenever there is a change in source code from Github. Hope everyone welcomes reading

Reference source

https://gridsome.org/
Github repository: daothaison / my-gridsome-website

Share the news now

Source : Viblo

Build a super-fast website with Gridsome

About Gridsome

How does Gridsome work?

Start building web with Gridsome only

Install Gridsome

Install a little more libraries and plugins

Create page layout

Display content on the homepage

Conclusion

Reference source

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers