Build a super-fast website with Gridsome

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

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

The project directory structure is also fairly explicit:

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

and configure the plugins into gridsome.config.js file

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 .

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.

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

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.

The result will be a homepage like this


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

Share the news now

Source : Viblo