Xây dựng một website cực nhanh với Gridsome

Thứ Sáu, 29/05/2020

Tram Ho

Trong bài viết trước, mình đã giới thiệu tới các bạn VuePress, trong bài viết này sẽ tiếp tục là 1 công cụ nữa, tiếp tục là 1 công cụ để xây dựng static web nữa là Gridsome.

Demo blog xây dựng từ Gridsome tại đây.

Về Gridsome

Gridsome cũng được xây dựng với Vue.js và được phát triển nằm trong Jamstack framework, nó được sử dụng để tạo ra website nhanh nhất có thể, đáp ứng được nhu cầu người dùng.

Điểm mạnh của Gridsome là :

Vue.js cho frontend: Nếu bạn đã sử dụng qua Vue thì đây là một framework cực kỳ thân thiện, dễ sử dụng với người dùng, công động phát triển đông đảo.
Việc tạo nội dung trên website cũng khá đơn giản, Gridsome tương thích với rất nhiều CMS tiện dụng, và cũng sử dụng Markdown để viết nội dung.
Local development with hot-reloading: Giống như VuePress, Gridsome cũng có local server, giúp việc phát triển dễ dàng hơn
Routing trên website dựa trên file, điều này tương tự như VuePress
GraphQL data layer: Database của Gridsome sử dụng GraphQL, rất đơn giản để quản lý và truy xuất.
Plugin ecosystem : Số lượng plugin được xây dựng phong phú, dễ dàng sử dụng.

Gridsome hoạt động như nào ?

Gridsome sẽ generate các trang Markdown của bạn thành các trang HTML tĩnh, sau khi được trình duyệt load ra, website của bạn sẽ là một Vue SPA, trải nghiệm người dùng sẽ tốt hơn rất nhiều.

Gridsome sẽ build 1 file html và 1 file json cho mỗi trang. Sau khi trang đầu tiên được load, nó sẽ chỉ sử dụng file json để prefetch và lấy dữ iiệ cho trang tiếp theo, phần script js sẽ được build theo từng page, khiến tốc độ load mỗi lần sẽ giảm đi rất nhiều.

Bắt đầu xây dựng web bằng Gridsome thôi

Cài đặt Gridsome

Trước tiên bạn cần có Node (v8.3+) và mình sử dụng Yarn để cài các thư viện nhé

$ 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 vậy là local server đã được bật, giao diện cũng khá đơn sơ nhỉ ?

Cấu trúc thư mục dự án cũng khá tường minh:

.
├── 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

Giờ mình cùng làm cho nó thêm sinh động 1 chút nhaa

Cài thêm chút thư viện, plugin vô

Để thêm thư viện và plugin bạn bổ sung chúng vào trong file package.json nhé, sau đó lại chạy 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"

}

và cấu hình các plugin đó vào trong file gridsome.config.js

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

}

};

Trong file này mình có cấu hình thêm các plugin để gridsome tự động tìm đến các file Markdown nội dung của web và compile chúng ra html, plugin sitemap để tạo ra file sitemap – giúp việc Google có thể index website của bạn trên internet sau này, plugin Google Analytics để bạn theo dõi được lượng truy cập tới website các thứ,…

Bạn có thể tìm hiểu thêm các config khác từ https://gridsome.org/docs/config .

Tạo layout cho trang

Layout của trang web được đặt trong thư mục src/Layouts/Default.vue , nó là layout mặc định và được sử dụng trong toàn bộ các trang.

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

<div>

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

My Gridsome Website

</g-link>

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

>

</a>

</div>

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

</div>

<slot/>

</div>

</div>

</div>

</footer>

</div>

</template>

export default {

props: {

title: String

},

components: {

}

};

</script>

Chúng ta sẽ có 1 layout như này

Hiển thị nội dung lên trang chủ

Để đưa nội dung lên Gridsome, bạn cần bổ sung các trang Markdown vào trong thư mụcarticle/posts/ . Với header của từng file có template như sau

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

Cách Gridsome tạo ra các url cũng tương tự như VuePress, nó sẽ tự động xử lý các file *.vue bên trong thư mục src/pages/ . Trang chủ của chúng ta sẽ là file src/pages/Index.vue, mình sẽ sửa chúng để lấy các bài viết trong thư mục article và hiển thị danh sách lên trang chủ

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

</div>

</Layout>

</template>

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: 1rem;

}

</style>

Kết quả ta sẽ được giao diện trang chủ như này

Tạm kết

Qua bài viết này, hi vọng các bạn đã có thể dựng cho mình 1 website bằng Gridsome khá là nhanh gọn.
Trong bài viết tới, mình sẽ hướng dẫn các bạn cách deploy các website vừa tạo lên server, auto deploy mỗi khi có thay đổi trong source code từ Github nhé. Hy vọng mọi người đón đọc

Nguồn tham khảo

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

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Xây dựng một website cực nhanh với Gridsome

Về Gridsome

Gridsome hoạt động như nào ?

Bắt đầu xây dựng web bằng Gridsome thôi

Cài đặt Gridsome

Cài thêm chút thư viện, plugin vô

Tạo layout cho trang

Hiển thị nội dung lên trang chủ

Tạm kết

Nguồn tham khảo

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript