Final Touches & Deploying the Blog | Nuxt.js & Storyblok - Building a Complete Blog
Вставка
- Опубліковано 29 лис 2024
- The Nuxt.js + Storyblok Blog is done, time for some finishing touches so that we can deploy it as a static Nuxt.js blog. You'll see how to publish items on storyblok and fetch both a production as well as draft version of the content.
----------
Learn Nuxt.js with my 5* rated, bestselling course: acad.link/nuxtjs
Want to build the Vue.js basics first? Dive into my 5* rated, bestselling bestselling course on this topic: acad.link/vuejs
Watch the series on Academind: www.academind....
Finished Source Code: github.com/aca...
Want to learn something totally different? Check out all other courses: academind.com/...
----------
• You can follow Max on Twitter (@maxedapps).
• And you should of course also follow @academind_real.
• You can also find us on Facebook.( / academindchannel )
• Or visit our Website (www.academind.com) and subscribe to our newsletter!
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
Thank you - this has been an excellent series, describing how several different pieces all come together. Great!
Just fantastic to read that you enjoyed the series Richard, thanks so much for sharing this!
Fantastic, can't wait to try this for my next static site!
For anyone that might be interested (after finishing a project of mine using it) there is also the Links Api of Storyblok, to get only the links and there are more documentations walkthroughs if you search in the web, some of them are :
1). www.storyblok.com/docs/api/management#topics/pagination
2). www.storyblok.com/faq/how-to-generate-routes-for-nuxt-js-using-storyblok
Hope I am helping someone out :)
Max - Academind, this series tutorial was absolutely wonderful, I had saved it as a list from last year because I knew I was going to go for it and try a Headless CMS at some point. It really helped out! :) It would be great also if you could pass it in the "Nuxt - Vue on steroids" course to have them all together for those who already have the course (great course btw!). Keep it up!!
This might break if you add new content on Storyblok.
You have to generate the static files again. That means to enjoy the dynamism you have to use a service that can run the Node app (like Heroku)
You have to re-generate the files for every update, this is correct. You can do that manually or set up an automated process. The advantages might still outweigh the efforts though.
Thanks for the reply. I was following your teachings in building a CMS for my sister to use. I think I’ll just use Heroku instead
why using "nuxt generate" command if you are using api and dynamic pages? Rightnow Im developng ssr mode proj and looking to host my project. Im quite confuse what is the right way to deploy it. Hope you can guide me on this. Btw thx for the video.
I've found this video ua-cam.com/video/vlUZw1J0kwM/v-deo.html
it shows how to deploy universal nuxt app
@@ibrahim.konsowa thanks for the link. Yeah i already deploy my app using almost same process with the link video.
After running 'npm run generate' I got an 401 error on '/' but following the tutorial I have no '/'. Do I somthing missing?
Still curious on how to properly render rich text format. But this is very good content! Congrats
Wow, this last part was quite tough to grasp in one go! Although extremely helpful. Thanks Max!
Happy to read that it was helpful Andrey!
I'm still waiting for a more detailed Academind Udemy course for NuxtJS and Storyblok. Thanks for a really great tutorials!
I got no such plans right now to be honest, but we released a Nuxt course on Udemy some weeks ago, maybe this is also interesting for you: www.udemy.com/nuxtjs-vuejs-on-steroids/?couponCode=ACAD_M
Academind I'm already enrolled with that course. It's a really great tutorial. Thanks for your effort!
Academind It's so sad :( :( but I'll be waiting on your awesome Udemy courses again. Thanks a lot~!
Nice video, wouldn't it be possible to use querystrings to fetch the blogpost details? This wouldn't be as SEO friendly but then you wouldn't have to re-generate your website after creating new posts or get an additional server to automate this process.
So your url could be something like this : '/blog/post?title=our-first-post' and then fetch the post using javascript.
Yes, this would be possible - you can also build your Nuxt app as a SPA if SEO isn't important for you though. You can then use normal route params, too
If I use (just an example) "query.title" in my asyncData function, everything works in development but if I use the generate command this won't get checked again meaning it will always be empty. Is there a solution to this? (I'm using universal mode)
Is there a way that you can show us how to deploy in spa mode or node app? Thanks!
Hello but like that if you will create a new page or a new post it will not update the blog right? to do that you should run the generate command every time there is a change. How to do that?
Wow, exactly the series and I was looking for, thank you very much! =)
Awesome to read that, thanks a lot for your comment!
thanks man helped a lot .
used it for a bases for final school project
Great to read that the video was helpful, thank you for sharing this!
Hey I know this is a while ago now, but once deployed statically like in your demo, how would you make new blog post? Would you need to npm run generate and FTP them every time?
Waiting for a very cool electron app
Thank u for this awesome video, can u add one more feature like search blog through search form
Great Series! I actually started this project with Vuetify since I did your Vue/Vuetify series. Also did your Udemy Nuxt and currently in your Udemy Vue course. And I think I have like 6 more of your courses there. Awesome Job.
Awesome to read that, thanks a lot for sharing this and for your awesome support here and on Udemy! It honestly makes me happy to receive such a student feedback :)
So if a new blog post is created, since the 'npm run generate' has not been run in order to create the dist/ directory, then the production version will not know of the new blog post, so it won't show it in production. I guess if storyblok supports webhooks, we could make it so that whenever a new post is published, it could trigger an 'npm run generate' on CircleCI/TravisCI/Jenkins that then updates S3/Firestore with the new contents of dist/
Great tutorial Max!
In terms of speed do you find that static hosting from a CDN is overall faster than using SSR (which thereafter is serves pages via SPA)?
Additionally, static sites sounded really good to me, especially since the hosting is so cheap. But when you need dynamic functionality you have to cobble a bunch of services together like SnipCart, Disqus, Wufoo, etc. Would you only use static for simpler brochure/blog type sites? What factors do you consider when deciding on how best to deploy a project?
Thanks!
Once deployed, I assume that you will need to generate the static pages every time a new post is created and then upload again each time you re-generate the pages?
Yes, this is correct
@@academind then it's useless
Thank you so much! I've been following along with the series and it has been very helpful!
Thanks so much for sharing this Bobby, really great to read that you like the series!
can you please do a tutorial video on how to make the hosted site live reload when updating content on storyblok? or point me in the right direction of how to achieve this. thank you :)
I might add some content on this in the future but I can't promise it to be honest. In the end, it'll be all about including that storyblok bridge in the shipped package (i.e. you need a build process which does NOT build for production)
Hi Sir, i'm your fan. Can you please create a tutorial for nuxt + mongodb? I want to see how you will setup and deploy for it. Thanks.
this series is amazing! thank you so much
Thank YOU - great to hear you're liking it!
Great video series… picked up a lot of great tips! I'm new to nuxt overall, so a quick question.. will NUXT update page title tag based on the title set in storyblok?
I think you can update that dynamically with the vue meta in the head property.
What happens when you ad a blog post?
Hi Max, do you have any plan for Next.js course? or any server side course for react?
Not right now to be honest. That might change but for the near future, it's not something I'm planning or working on
I followed along this tutorial and found it's super useful. Thanks for the great course. I'm playing around storyblok but couldn't find a way to re-use a component. Say I define a content type of 'Article', in which the 'user' field, is a re-usable component which itself has more fields such as 'name', 'bio', etc. Could you advise?
You want to create a "nested" component for that and then use "Blocks" type property in the component that should hold the nested component. This is how you can create more complex components
Yep. That would do the work. However, the component is re-usable but the content you added for the sub-component is still not re-usable. Say I got Author 'Scott' but next time I can't use this existing author. I managed to solve this by setting the Author component as 'content' type and added a folder 'Authors' under Content in which I composed some exiting authors. Then in the Article component, I just need to add a filed 'author' which is a link type pointing to the author content.
how to create a new post by using their Api endpoints or delete a blog post i tried it but ended in error please help me
Sir it would be a great help if you could just explain me how can i deploy it with firebase?
Hello! I really enjoy your videos, they helped me a lot. I also finished your VueJS tutorial on Udemy. Will there be a tutorial on how to use Quasar by any chance?
Thanks for your great feedback, I'm glad that you're liking my content! Quasar is something I'm watching but I haven't really worked with it. So a near-term tutorial is unlikely for now
Academind Oh okay, I will just try playing around with it for now. Need to finish learning PWA from your Udemy course too.
Hallo Max,
wirst du ein Video über vue cli 3 machen?
Das steht auf meiner Agenda, ja :)
Sehr cool, da freue ich mich schon drauf :)
i have error 401, what should i do ?
That means there is no access. I would check the AWS bucket permissions. You want PUBLIC with READ access.