Once upon a time, to create a personal blog, you needed a heavy system like WordPress that includes user management, lots of directories and files that you have no idea how to read. Today, with frameworks such as Angular, React and Vue.js, it's simple and easy..
If you were wondering - "Why is he trying to fool us?" Then the truth is you're pretty right ... 😎
In frameworks, you can't really write a blog simply without having to touch the code every time and "get your hands dirty."
Here, "static site generators" came into our aid, such as Gatsby and GridSome.
What the two tools I just mentioned, Gatsby for React and GridSome for Vue.js, give us - is a minimal code shell just for displaying static content that you want to connect to.
The content can be extracted from Markdown or even WordPress files ... In addition, you will receive a Server Side Rendering that will build the HTML files for you from your content. So come on, let's start...
GridSome
Of course I'm assuming that you have Node.js installed on a recent version. If not - stand in the corner or just install quickly before I see! 👻
To create a new project, type the following command at Terminal / CMD / iTerm / Terminus or another weird name:
npx gridsome create my-gridsome-site
Where did npx come from ?! OK, Relax! I'll explain! npx is a command that runs packages globally, without having to install them as ever (npm i -g package) Then we enter into the newly born library and run a development server:
cd my-gridsome-site
npm run develop
The server will run by default at localhost: 8080 assuming your port is not occupied.
Create pages
Any .vue file you create under a page directory will automatically be added as a path to the blog. The idea here is to simplify the routing matter as much as possible. Of course, if you want to do something a little more complex you will need to dig a little in the documentation here: https://gridsome.org/docs/pages
Architecture
I will speak as your tour guide...
From the left side of the image you can see our sources of information - whether it's CMS such as WordPress or other systems called Headless CMS that focus more on passing information using the API and less visibility of the site itself.
Markdown, JSON, CSV and even Mongo's direct APIs and other systems can be found.
GraphQL is chosen as the Query language to link all information systems to your pages which will describe the structure of the transmitted information.. For example: for the home page containing all posts we can write the following code:
<page-query>
query Post ($path: String!) {
post: post (path: $path) {
title
path
date (format: "D/MM/YYYY")
timeToRead
tags {
id
title
path
}
description
content
image (width: 860, blur: 10)
}
}
</page-query>
Note that this is a special block within a vue file that defines the GraphQL query to use information transmitted through the GraphQL query.
The entire index.vue page, will look like this:
<template>
<Layout :show-logo="false">
<!-- Author intro -->
<Author :show-title="true" />
<!-- List posts -->
<div class="posts">
<PostCard v-for="edge in $page.posts.edges" :key="edge.node.id" :post="edge.node"/>
</div>
</Layout>
</template>
<page-query>
{
posts: allPost(filter: { published: { eq: true }}) {
edges {
node {
id
title
path
tags {
id
title
path
}
date (format: "D/MM/YYYY")
timeToRead
description
image (width: 770, height: 380, blur: 10)
...on Post {
id
title
path
}
}
}
}
}
</page-query>
<script>
import Author from '~/components/Author.vue'
import PostCard from '~/components/PostCard.vue'
export default {
components: {
Author,
PostCard
},
metaInfo: {
title: 'GoCode Blog'
}
}
</script>
The result of the query will enter a special variable called $page that we can use in a template or script section.
Another explanation of using GraphQL can be found here:
run this to see all GraphQL queries configured in the project and even execute them:
npm run explore
And you'll get a lovely playground that looks something like this:
For those unfamiliar with GraphQL - it's a great query language from Facebook that is written in a similar way to a JSON object and allows us to define a multi-field and nested retrieval and in a single POST you can describe exactly what we want from the server.
But it's definitely too general a phrase, so you should just start delving into the matter...
Markdown and other vegetables
To start compiling plugins like Markdown file support, configure the gridsome.config.js file as listed here: https://gridsome.org/docs/plugins Or just create a project with a starter ready by adding the starter name to the create command.
For example:
npx gridsome create my-website https://github.com/gridsome/gridsome-starter-markdown-blog.git
Or
npx gridsome create my-website https://github.com/gridsome/gridsome-starter-blog.git
Deploy on Netlify
If we go back to the architecture we saw above - when we run build we will get rendered html pages for each route, so as not to damage our site's SEO (unlike a standard SPA that contains one page with internal path routing).
gridsome build
The above command will build for you a reduced and bundled version that will sit in the dist directory.
You can upload it to any static server like Github Pages or Netlify. To check that everything is OK, you can run Live Server on the files:
npx live-server ./dist
Now the Deployment Stage: One of the most convenient tools today to submit to static sites and with a wonderful free program is Netlify. And look how simple it is:
Before we upload to Netlify, we will add Git support to the project and push the files to GitHub.
Well, back to Netlify - sign up for the site and sign in to your Dashboard. Click on "New site from GIT", connect to Github / Bitbucket / GitLab and select the appropriate repository.
Two small settings remain:
Under Build Command, enter:
gridsome build
And on Publish Directory:
dist
You must have understood the logic already.
Here is a screenshot:
What? This?! Completely? I promise!! 🤗
And what happens if we want to change something?
Save, commit, push and Netlify will detect and rebuild it for you!
You can watch this magic under Production deploys under your Netlify site.
Already over? Yes. Tell me on comments what're your feelings..
But what about Gatsby?
Gatsby.js is really similar to GridSome ... how can that be? Because GridSome is a wonderful replica of Gatsby just for Vue.js.
But if you prefer React just try playing with him too...
Can I look at the code?
Sure! enjoy with this GitHub Repository and have a wonderful blogging time!
Top comments (0)