Gridsome - Static Site Generator for Vue

[@skryonline5825]

You know what I like about Andre? He actually one of the guys that does take his time and actually explains in details all the nitty gritty stuff. I do enjoy his tutorials. Thank you and keep it up!

[@drehimself]

Thanks for watching and for the kind words!

[@cedricol]

That's funny... I like him because he's one of the guys that does NOT go into details, which makes it faster for experienced developers to get up to speed.

[@skryonline5825]

@@cedricol I guess we can explain it by the fact that the perception of speed and time for me and you are different. That's cool

[@randyharsh3046]

11:56 terminal doesnt have id property, how can i solve it?

[@juliano3251]

I can not query allpage - id, slug and type with GraphQL... It seems that here the tutorial is over for me. Any hints?

[@soundninja99]

If anyone else wonders this. Just restart your server (ctrl + c, then gridsome up in your terminal)

[@billyzman666]

Great video but I fear its outdated as I can not build the 'allPage' query as it does not recognize id, slug or type. I also can not run your complete version when I download it and run 'npm install"? Am I doing something wrong?

[@BrunoDeAngelis]

This is amazing, since you can build practically any website with Vue and host it with Netlify, and you can then for example use NetlifyCMS to provide the files for Gridsome to load and display on the site. I've tested this and works like a charm. It's an even better experience than, say, a Wordpress blog with it's UI admin panel, since it's all static files and there are no breaches in security, everything works a ton faster, the development is better. It's so good. Thank you Andre!

[@drehimself]

I haven't tried Netlify CMS yet but it seems like an awesome way to make your static sites editable in a CMS interface. Will check it out and possibly make a video. Thanks for the suggestion 💪

[@rebeka1212100]

@@drehimself yes definitely the CMS approach is advantageous, and clients will enjoy content editing ability

[@tautvydasbujauskas8104]

@@drehimself at the moment I was looking for platform to start my blog. I thought about nuxt, but ir content must be compiled from .md, vuepress is still alpha and there is a lot changes and missing documentation at the moment so its a pain to work right now. After this I am swithcing to Gridsome :) I am also looking to use Netlify CMS as for my CMS system

[@lukmannakib7497]

Great, which one do you prefer and wh among the static site generators?

[@djmtype]

How would you include oAuth2 authorization in order to pull data from the Spotify API for example?

[@cla1814]

Can you make a tutorial to combine Gridsome with Wordpress API? Didn't manage to find video tutorial on youtube for that setup.

[@xhostcom9284]

Here is my Avivo theme Vue Wordpress Bootstrap 4 starter which can be extended and used for pretty much anything, including other backends if needed. github.com/xhostcomweb/vuewp-gridsome-scss-bootstrap-starter.git

[@ijimmoore]

kzbin.info/www/bejne/rKqWaqyfnNeilZo

[@cla1814]

​@@ijimmoore Thanks, even through now more interested into content.nuxtjs.org/ looks very promising.

[@keviincosmos]

Awesome! Any idea on how to make a dropdown video from wordpress ith graphql? I can only figure out how to make a regular menu

[@PRASHANTSINGH-dr6ow]

Hey Andre, can you explain how Gridsome handles External Image Url in a markdown file.... Does it simply renders the image from the External Source?

[@SergiuBurduja-y1l]

I want to learn how to work with gridsome and create complex websites. I watched this video and realized that this is just an overview. Also looked at your playlists but couldn't find any with gridsome. Why doesn't youtube create categories for videos associated with the playlist, and when you watch one video, you can immediately see which category from the playlist it belongs to.

[@DavidElstob73]

Thanks for the tutorial. Easy to follow. How do we query GraphQL on PostEdges for next and previous post?

[@user-mfsc-2024]

how to manage multilingual thru gridsome?

[@drehimself]

Not sure, haven't looked into that yet.

[@drehimself]

They are still working on it. See this thread: github.com/gridsome/gridsome/issues/23

[@hermandinho1]

Please how to setup my terminal like yours?

[@mandunya]

Hey Andre, I'm getting a spawn git ENOENT error when I try to create a new project with Gridsome, any idea what may cause this? Or how I can fix it?

[@mohamedimranechehabi5735]

I have found how to make the _page-query_ and _static-query_ highlighted in VSCode. These are the steps to follow: • Install *Vetur* and *GraphQL* from VSCode's marketplace • Add this to your *settings.json*: "vetur.grammar.customBlocks": { "page-query": "graphql", "static-query": "graphql", "docs": "md", "i18n": "json" } • Run *_Vetur: Generate grammar from `vetur.grammar.customBlocks`_* from your command palette • Restart VSCode and it's done

[@aladdinovich]

waiting for more tutorials about Gridsome, thanks Andre for excellent tutorials as usual. We appreciate your efforts and your passion

[@drehimself]

Thanks for watching! I'll consider doing more Gridsome videos, perhaps on the available plugins.

[@MM-24]

Your terminal looks quite unique - what customizations do you have ?

[@drehimself]

iTerm, ohmyzsh with cloud theme, fira code font. I'll make a "Tools I Use" video when I get a new computer.

[@zachthemaniac]

@@drehimself I love your entire setup. Even the Theme on your VS Code. Its very easy on the eyes. Btw I am trying to find that theme you are using, is it still the Material Theme from your video about using VS Code? I'll be on the lookout for the "Tools I Use" video as I have recently acquired a Macbook Pro. :)

[@cla1814]

For Linux users. Tilix i.imgur.com/6S0ticA.png

[@jasonreynolds6927]

Thanks Andre. I was struggling with a few things re pulling in data and this tutorial really helped!

[@Daviddd10]

Idk if you'll see my question, but I hope you do! How come your gridsome portfolio starter has more features (like dark mode switcher etc) vs the Nuxt one? Is it because it's harder to add these features to the other platforms or is it just because you've been updating the gridsome repo and haven't had time to update the other ones? The reason I ask is because I've been thinking of making a portfolio website and can't decide between Gridsome and NuxtJS. :( Hopefully your answers helps me decide! Thank you for all your videos

[@abrahemalhofe5698]

So what is diffrent between it and nuxt

[@themindstorm9947]

Do you know how to read data locally from a single JSON file? I only have one JSON file with a few values. The documentation is incomplete afor this section gridsome.org/docs/fetching-data/#json

[@drehimself]

Hmmm, good question. Yeah, some of their docs are still incomplete. I haven't tried but I would think you would need the source-filesystem and transformer-json plugins: gridsome.org/plugins/@gridsome/transformer-json. Hope you figure it out!

[@victorsirghii681]

Well, as I saw in a code sample, you don't need any Gridsome plugin for that, just simply use: require someObject from ("~/data/somejson.json") and use it in vue template as {{someObject.someField1}}, {{someObject.someField2}} etc.

[@9mza831]

Can you make video how to add search in Gridsome ?

[@denniszenanywhere]

This was really good. Can you do Gridsome with NUXT or Gridsome with Contentful tutorial? Thanks

[@betts12220]

Excellent. Would be cool to see more Gridsome, perhaps using Contentful and Tailwind.

[@drehimself]

Would definitely like to explore Gridsome some more.

[@hiroyukinumaguchi1984]

Very good content. This is very helpful. I feel the potential of gridsome. Thanks for the always great content!

[@cirok7720]

Many thanks, Andrey for this gem of a tutorial I has just one simple problem though in RedditPost Template where you had img src="$page.redditPost.img i had to bind the source with v-bind:src="$page.redditPost.img" to get the image to show. Other than that everything worked fine. Again many many thanks for taking the time to create and share this with us, and man your tutorials are so easy to follow and understand. There are many teachers out there but only a few can really teach! Great Job Bro!

[@drehimself]

Thanks for watching and for the support!

[@ahmedmahfouz6339]

Thanks Andre but I'm new to vue so what's the purpose of generating pages? Thanks in advance

[@forktrader7870]

Ahmed Mahfouz maybe to deploy somewhere in the internet.

[@drehimself]

If your content is primarily static (like blogs, landing pages, documentation sites), generating and hosting static pages is much easier and cheaper than hosting a web app with a backend language.

[@themindstorm9947]

Pre-generated pages are also better for search engine optimization. Look up SEO

[@dusanmilanovic6398]

Very nice, thanks Andre, nice series. And yes, as you said, why not go deeper into plugins and discovering new options...

[@dusanmilanovic6398]

Anyone else facing the problem of retrieving (querying) the 'img' field?

[@victorsirghii681]

@@dusanmilanovic6398 I used to face once. But then I realized that to get an image from a field you just use Gridsome element and it understands image perfectly fine.

[@nadico5740]

hi Andre, very good tutorial Can you explain about the global variables - $page, $path etc..?

[@nadico5740]

$path doesn't work in query filter...

[@themindstorm9947]

Thanks for the tutorial! I liked how it was simple and to the point!

[@drehimself]

Thanks for watching!

[@maskman4821]

gridsom vs vuepress? which one is better?

[@drehimself]

They are both excellent imo. If I were building docs, VuePress. If blog, gridsome.

[@behindthescenex]

Thank you so much for this andre! Waiting for another gridsome tutorials ;))

[@drehimself]

I'd like to explore more of Gridsome's features in the future!

[@mrrolandlawrence]

@@drehimself when is the next gridsome video coming?

[@egyfirst]

Really Thank you. Great tutorial

[@GameCrawl]

What is meant by not dynamic here kzbin.info/www/bejne/q3eWfGZ_pbeZnqc ?

[@NeverCodeAlone]

Thx for your passion!!

[@marcbouvier4078]

Thank you, it is very useful!

[@drehimself]

Thanks for watching!

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@drehimself]

Thanks for watching!

[@jnevercast]

Check this link out for getting GraphQL grammar inside the tags :) github.com/vuejs/vetur/issues/975#issuecomment-472802430

[@user-mfsc-2024]

any comparsion with vuepress ?

[@drehimself]

I would choose VuePress if I were making a documentation site.

[@almsafa7]

Interesting , Thank you man

[@drehimself]

Thanks for watching!

[@radovansurlak7445]

Thank you Andre :)

[@juliocontreras340]

amazing!

[@chethiyaprasanga]

Great ,hope more tutorial thanks

[@drehimself]

Definitely would like to dive deeper into Gridsome.

[@sebastianspatafore5117]

thanks! I hate gatsby and react.

[@DJalem]

Sebastian Spatafore why is it really that Bad? I just started a Tutorial on Gatsby with WordPress. Is Vue.js better?

[@sebastianspatafore5117]

@@DJalem Well to start, I hate Wordpress (really awful cms fulled by nasty plugins and themes (check CraftCMS that is a real powerful CMS with NO themes!!!); don't get me wrong, gatsby is really great!! my problem is with react, I prefer vue.js than react, so Gridsome catch my attention more.

[@gamercat4878]

can you make tutorial about Bootstrap and GS?