Gridsome Blog in 5 minutes

October 16, 2019

In this article you are going to learn how to set up a Gridsome Blog in less than 5 minutes. You'll get perfect speed scores, blazing fast page loads and no configuration at all. Actually this blog was created using the following instructions:

Setting up locally

  1. npm install --global @gridsome/cli
  2. gridsome create my-blog https://github.com/gridsome/gridsome-starter-blog.git
  3. cd my-blog
  4. gridsome develop
  5. You are done! in your browser go to http://localhost:8080

With this simple setup you get all the benefits from Gridsome right away and you don't have to worry about configuration or implementation details, you just need to focus on what's important in a blog: creating good content.

Creating content in the form of blog posts is also very easy with this setup. The template you used for you Blog comes with Markdown integration for your data, that means no databases, no external connections, no APIs. For each post you create on your website you just need to create a new file in the /content folder with any name you want and use Markdown syntax in it.

So for example to create you first blog post you can create a my-first-post.md file in the /content folder and Gridsome automatically generates that page for you. There is some metadata at the top of the file you can edit to control things like url, title, snippet, etc.

--- title: MY First Post path: /my-first-post date: 2019-10-16 description: Small description of my post goes here published: true tags: ['post','lorem','ipsum'] --- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Now that you have a blog running locally in your machine the next step is making it public to the internet.

Publish to a CDN

  1. Create an account in Github (free)
  2. Commit and push your code to a repository in Github
  3. Create an account in Netlify (free)
  4. Click the button to create a new site in Netlify Setting up Gridsome 1
  5. Connect your Netlify account with your Github account Setting up Gridsome 2
  6. Select the repository you created previously for continuous deployment in Netlify Setting up Gridsome 3
  7. Set the Build command to gridsome build and the Publish directory to dist Setting up Gridsome 4
  8. Click Deploy site and you are live!

Initially you will have a netlify.com domain to preview your site but you can link your own domain so your whole site could eventually be made in Gridsome just like Gauztech. Feel free to contact us with any questions you might have about this and any other post using our contact form.