15 ms·
Gridsome – A Vue.js static site generator
- faizshah 7y agoAwesome! What are the feature differences between this and gatsby?
- woutr_be 7y agoThe main difference seems to be that this is for Vue, while Gatsby uses React. Other than that, It actually looks exactly the same.
- thesureshg 7y agoOne more thing in gridsome, It has a lot of data sources support to make the site static. Literally any source you can think of.
- least 7y agoGatsby has this as well.
- JeroenRansijn 7y agoAirtable instead of AirTable.
- vuong 7y agoI peronally like Vue more than React so just hope Gridsome will gain more widespread use in the near future. Gatsby is great honestly.
- preommr 7y agoThese kinds of static site generators are really nice because they enable better support for smarter interactive components in articles. Things like graphs or interactive demos to showcase something (e.g. user input delay on an article about ui design and responsiveness). Vue is a particularly good choice for these kinds of applications because it's a lot more incremental and comes builtin with things like reactivity so there's no need for an external dependency for state management. Like a complete app is: --- import Vue from "vue/dist/esm.js"; app = new Vue({el: "#app", template:"<div>{{name}}</div", data: ()=>{{name: "john"}}; --- No jsx, no babel transpiler nonsense, no redux/mobx, It's also possible to completely forget about vue and do something like --- let data = app.$data; data.name = "adam"; --- This is so nice because you don't even have to think about the fact that you're using a framework, it's all taken care of for you. No setState(...) nonsense. The tradeoff is that there's magic (which I don't think is bad because in vue's case it's pretty straightforward once you get to learn it) but that's a separate discussion because I don't think that magic matters for very small simple cases like this.
- onion2k 7y agoMDX[1] enables you to embed working JSX (eg React components) directly in your Markdown files. It doesn't need to be a separate file; you can just write the code in to the content file and it'll render an interactive component. One quite useful aspect of this is that you can have example code and a working example next to each other driven by the same content. I'm not sure that's actually a good thing, but it does exist. [1] https://github.com/mdx-js/mdx https://github.com/mdx-js/mdx
- lukevp 7y agoYou can also write react without jsx or using any transpilers if you want, and for small apps there's no need for redux, there's great state management with functional components and hooks. I am not familiar with Vue but I like the setState or the useState hook with the delegate because it makes it clear that data access and change propagation aren't synchronous.
- anderspitman 7y agoDoes Vue use Proxy objects for the reactive state magic? I implemented something similar and that's what I ended up using.
- arcosdev 7y agoNot a big fan of Vue, but to each his own
- xemoka 7y agoI've tried to use Gridsome recently, after the .7 release I think, and it was just kind of painful. Managing the graphql layer just seemed over the top for my needs: static generation from markdown with dynamic vue components. I settled on zola[0] + webpack, but I'm still not super happy. Sometimes the things I'm building I know aren't going to be very large, building a SPA with vue/vue-router and using react-snap[1] seems to be working well... almost seems like cheating. [0]: https://www.getzola.org/ https://www.getzola.org/ [1]: https://github.com/stereobooster/react-snap https://github.com/stereobooster/react-snap
- dmix 7y agoNuxt is more than sufficient as a static site generator. It’s better to use SSR if you have dynamic pages with changing content, which requires a server. But Nuxt has the option to generate the pages statically (using Vue component templates to create static HTML pages). It’s my favourite development in web development in a long time. https://nuxtjs.org/ https://nuxtjs.org/ I’m starting to feel like I want to use JS now for sites instead of just being forced to because of its power on the frontend. I hope the future is top heavy component based SSR with an API style backend which also runs off your web server. With much simpler API requirements it’s easier to use languages like Rust and Haskell since the whole templating, view helpers, routing, layouts, asset management, and rendering stuff is all handled for you by the SSR app. Then you focus the backend on models, logic, authentication, and databases.
- praveenweb 7y agoI would recommend pre-building html markup as much as possible for performance boost and hydrate on the client for dynamic content, instead of going the SSR route. Obviously this may not be applicable for all use cases though. Shameless plug: I just wrote a guide to approach dynamic content on static sites a few days ago. https://blog.hasura.io/approaches-to-add-dynamic-content-statically-generated-sites-jamstack/ https://blog.hasura.io/approaches-to-add-dynamic-content-sta...
- mattacular 7y agoCan you elaborate on your recommendation not to go SSR? Seems there are pretty well understood pros and cons to full SSR vs. static prerendered pages. The "right" choice depends on your app.
- siquick 7y agoAlso a big fan of Nuxt. The way it takes care of potentially tricky tasks like SSR and code splitting is a joy. The only thing I've had difficulties with is getting the Lighthouse speed rating above 50.
- lgl 7y ago
- geowwy 7y agoIf you're looking for a Static Site Generator: consider building your own. You can build your own static site generator in an afternoon. It's super simple to do and you avoid all the complexity of these off-the-shelf static site frameworks. A few examples of my own: * A blog made with makefile, m4, multimarkdown, and scss * A personal website made with shell scripts and php * A business website made with ruby, rake and erb
- commanderj 7y agoI was just about commenting: Yeah, we needed another static site generator! But your approach is the most ridiculous thing I can think of. One site generator per site. Nice dude!
- praveenweb 7y agoThe advantage of doing this is that it gives you the power of using your favourite language to build this and its a fun project as long as its just dealing with markdown. If you are building static sites with content sourced from a database or APIs then these static site generators removes friction involved in setting those up.
- petepete 7y agoOr for something in-between try Nanoc. It's a static site generator but much less prescriptive and more flexible than tools like Jekyll and Hugo.
- rajangdavis 7y agoLove Sinatra for this
- gherkinnn 7y agoI have gone that route in the past, only to find myself in lost amidst config files, documentation, and never ending ideas for more features. Not that that’s impossible, but I lacked the restraint to turn away and do what actually matters: write content.
- 7y ago
- Lerain 7y agoI am using Gridsome in combination with CraftCMS (and CraftQL) for a client project. The moment you understand how to write a content-plugin based on your own needs, everything falls into place and makes it a pretty useful piece of tech. So if you like Vue and are a little jealous towards React-people about GatsbyJS – give it a shot!
- AndreFvchs 7y agoWe are using Vuepress for our blog, docs and tutorials. It's really fast and supports markdown. https://vuepress.vuejs.org/ https://vuepress.vuejs.org/
- rhabarba 7y ago> The future of the web is JavaScript I disagree.
- vlx 7y agoIf you don't need SSR, then Gridsome is a better choice. Girdsome generates complete HTML content (better for SEO) whereas Nuxt generates only a minimal HTML page that always needs to be hydrated first. In a recent project, I needed a blog where each article would contain a button to tweet it. The problem with nuxt was that all generated HTML pages contained just the globally defined meta tags. A workaround was to hook to the build process of `nuxt generate`.
- brianzelip 7y agoAnother option is to include the prerender-spa-plugin, which makes it trivial to turn a vue spa into static files that hydrate into a vue app on the client. The parcel-plugin-prerender is great, https://www.npmjs.com/package/parcel-plugin-prerender https://www.npmjs.com/package/parcel-plugin-prerender.
- brianfryer 7y agoI’ve built and launched nearly a dozen sites using Gridsome + Netlify since 0.5.0. It’s a fantastic tool and is a joy to use.
- fbnlsr 7y agoHave you managed to handle multilingual sites? I've browsed through Gridsome's documentation but couldn't find any info on that.
- ratbum 7y agoThe website for it uses 100% of my CPU. No thanks.
- luord 7y agoIt's described as a framework of Vue... Itself a framework. I'll need to try this, gotta see how deep this goes.
- watt3rpig 7y agoDumb question, but why do you need a static site generator vs just writing an html file?
- iamgopal 7y agoEvery static site generator website has explanation for this.
- watt3rpig 7y agoI went to both Hugo and Jekyll sites. I did not see an explanation. Maybe I will try to build something and then I will understand.
- MildlySerious 7y agoBasically, template compiling. Not having to copy/paste reusable parts around, which is error prone and time consuming. Depending on the tool there's other stuff, like generating sitemaps, optimizing images, CSS treeshaking and other optimizations, all the good stuff that would otherwise happen manually or not at all.
- watt3rpig 7y agoAh thanks for the explanation.
- libria 7y agoSay you write 10 blog articles. In HTML that's 10 files with some trivial cut & paste. In jekyll that's 10 markdown files and 1 HTML template. Equal time sink for both tasks. Now you want to add Disqus comments to your blog. In HTML you edit 10 files. In jekyll that's probably 1 plugin. Same with adjusting theme, fonts, recent posts, generating RSS feed, recent Tweets, ads.
- anderspitman 7y agoBecause HTML doesn't have a way to import another piece of HTML.
- stared 7y agoAny pros/cons vs Vuepress?