Before we get started on setting up the Gridsome, let’s have a brief summary of what this framework does. And if you’re thinking of building your static site soon, I highly recommend using a static site generator such as Gridsome, Gatsby, Hugo, etc. But for this tutorial, we will talk about Gridsome.
So what is Gridsome? Gridsome is a powerful static site generator. It helps the developers to create a website easy and fun.
Features of Gridsome
- Fast by default ⚡️
- It’s PWA ready 🚀
- Prefetching 💪
- Code Splitting is done automatically ✂️
How to install
1. Install Gridsome CLI tool
- Using YARN:
yarn global add @gridsome/cli
- Using NPM:
npm install --global @gridsome/cli
2. Create a Gridsome project
gridsome create my-gridsome-siteto create a new project
cd my-gridsome-siteto open folder
gridsome developto start local dev server at
- Happy coding 🎉🙌
3. Next steps
.vuecomponents in the
src/pagesdirectory to create page routes.
gridsome buildto generate static files in a
After the installation a basic Gridsome project would be structured like this:
For more information about Gridsome, you can always check their documentation which is very easy to follow.
Check out this simple To-do App project which is using Gridsome framework. Tutorial on how to build this app will be posted soon. https://maizek-todo-app.netlify.com/
Subscribe to my Newsletter
Get the latest posts delivered right to your inbox