You Don't Need a CMS - Use This Instead
ฝัง
- เผยแพร่เมื่อ 17 ม.ค. 2024
- Build a custom blog platform with Astro and Appwrite.
Learn how to create a new Database in Appwrite, create new Post Documents using an Astro HTML form and SSR, get a single blog post, and get a list of blog posts to display on a blog website.
🧰 Resources
Tutorial: spacejelly.dev/posts/how-to-c...
Code: github.com/colbyfayock/my-app...
Demo: my-appwrite-blog.vercel.app/
📺 TH-cam: th-cam.com/users/colbyfayock?sub_c...
🐦 Twitter: / colbyfayock
📹 Twitch: / colbyfayock
✉️ Newsletter: www.colbyfayock.com/newsletter/
🎥 What I Use: www.colbyfayock.com/uses
#colbyfayock #astro #appwrite #blog #webdevelopment - วิทยาศาสตร์และเทคโนโลยี
![[TH] VCT Pacific Stage 2 - Week 3 Day 3 // DFM vs PRX | DRX vs TLN](http://i.ytimg.com/vi/il3Twexat3A/mqdefault.jpg)
![CAMPปลิ้น | EP.77[1/2] ก็ไม่ได้ชอบเอาชนะ แต่เรื่องอะไรต้องแพ้!!](http://i.ytimg.com/vi/JraaBYOd7I0/mqdefault.jpg)
Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news
You explain so good. defentely one of the best teachers out there !
Thanks !
thanks i appreciate that!
Very helpful Tutorial! Thank you!
no problem!!
Astro and Appwrite! What a combo! 🚀
💯🚀
Nice! I'm gonna clone this and add some auth features :) Love Astro!
its so good!
great video. subbed. quick question: since we are loading the posts dynamically from appwrite, astro must be set to SSR correct? We cannot use SSG anymore due to the dynamic nature of loading the articles from the database.
In this case, yeah ssr. BUT! You can use SSG to render the posts you just need to tell astro those paths to render docs.astro.build/en/guides/routing/#static-ssg-mode
@@colbyfayock I see. Gone through the article but still one question lingers. So everytime I post a new article, do I need to build astro blog repo if I want to use SSG? My article data is getting stored in the appwrite db. How can I even do this?
@@eshwargetenv1 yeah unfortunately Astro doesn't have a native solution right now (unless i missed an announcement) that allows you to prevent rebuilding the site with SSG, however doing a quick search, it looks like if you're deploying to Vercel, that they have a mechanism for this in their adapter: docs.astro.build/en/guides/integrations-guide/vercel/#isr
ISR is a pattern introduced in Next.js if you're not familiar, Incremental Static Regeneration
i haven't tried this with Astro yet, but with Next.js it works really well
curious to know your thoughts on open source page builders (something that's easy for a client to edit there "about" or "terms of service" page after a website has been delivered and paid for)
i generally think they're pretty great though a lot of some are somewhat limiting. i think Builder is one of the more truly visual builder solutions, though if only inline content is needed, not content design, those usually work well. i dont personally think id want to use any of them though as i like being in the code and writing in a more focused environment
awesome video!!! I'm never going back to using CMS's now :)
💯!
Great video Colby, how qould this work in a production environment?
thank you! can you elaborate on what you mean? is there something specific you find wouldn't work or scale?
@@colbyfayock sure, If I leave it as a static site in production, every vlog entry would trigger a build action?
@@RicardoGonzalez-or8ln unfortunately, as far as im aware, Astro doesnt have a great mechanism to only re-build the posts that changed when using SSG, so pretty much :(
an alternative solution i think is using SSR and setting up cache policies. if deploying to Vercel, they have ISR available via their integration
What VS Code theme and Icon set are you using in this video? :)
Night Owl! marketplace.visualstudio.com/items?itemName=sdras.night-owl
what icon are you referring to though?
Sorry but it's secure to put this code inside an .astro component? Client-side all can read data. I know that you said "use environment variables" but should we put this code in aws lambda, netlify function ecc?
great question! my use of environment variables isn't necessarily only to protect the values, but allow those values to more easily be referenced more than one place, where environment variables feel the most appropriate to do that, especially considering in a production environment, you may additionally want a Development environment, making those values as variables easy to swap
as far as the values themselves, the Appwrite Web SDK is intended to be used in the client, so its safe. you can't really do anything with the database and collection ID without permissions, where if you have wide open permissions, that would be a concern, but you definitely wouldn't want to do that unless you have a good use case for it
finally as one other point, the code on the New Post page actually runs on the server, so just pointing out in that case, unless im missing something, it wouldn't be available in the client
looks like it just break the base idea, this way require a server (yyou are using your own pc), that mean i need to keep running a server when i want to update a post, i was trying to use static cms with astro but i cant understand how can i do that i think netlify will not take static cms with astro, well for simplicity i think its better to use netlify cms with astro and when i have time do things manually , i wish there should option like tags or category to add myself with cms
unfortunately Astro doesn't yet have a good way of revalidating pages statically without rebuilding the entire site. hoping that something like that comes in the future. Netlify CMS is a bit limiting 🤷♂ but if it fit your project's needs, then its perfect!
Would you prefer this over Astro/Next + Strapi?
i haven't actually ever used strapi, ive only heard wonderful things. ive more recently worked in WordPress for both my sites and any customization has been adding plugins and basically patching over WordPress core rather than building something natively to what i need, so the authoring experience was always half-baked.
whenever have time i'm likely jumping to a new solution, though unsure if it's a solution like this, a traditional CMS, or static MDX files, which i dont love, but might open the door for more custom in-post UIs
my spacejelly.dev site as an example, i have a few different datapoints that i manage in WordPress, including blog posts, courses, books, and store products, so id want a way to continue managing those in an intuitive and reliable way. are there other CMSs that can do that well? not sure. but a solution like this would handle it, as you can make it what you want
@@colbyfayock thanks for sharing your views Colby. I really like how "blog ready" Appwrite is. Thanks for making this video and showing how easy it is to make a blog.
is gating content and password protection possible with this?
totally. and it depends on where you want to gate. you can gate the entire collection or you can use Document Security on a per-document basis. good timing, Appwrite just released a short about it: th-cam.com/video/jdMYzdlw_-k/w-d-xo.html
as far as password protection, you would either use the user's authenticated status or i would think you would need to provide a separate password storage mechanism that you would need to implement on your own, but the user auth route would be simpler and the user would only get access to the documents they have access to
What are the prerequisites to go throug this video ? Thanks!
Really cool tutorial, but I get this error and the slugs seem to be the same:
Invalid query: {"method":"equal","attribute":"slug","values":["test-post"]} this is when clicking on a post to see it's content
hey, not sure about that error... can you show the code you're using to attempt it?
@@colbyfayock no problem, fixed it, it was just bad typing 💀thanks!
I cannot see how slugs were generated. Not even your code
hey! so the way that these are being generated are by a dynamic route. if you look at this file: github.com/colbyfayock/my-appwrite-blog/blob/main/src/pages/posts/%5BpostSlug%5D.astro
the name is [postSlug]. the brackets indicate that its a dynamic route, so if anyone tries to make a request to /posts/anything, it will route the request to that file, where if you look on line 9 at Astro.params, you can see where we're grabbing that postSlug value, so that we can use it to get our dynamic data
An update to the appwrite version has been released. Rewrite the lesson to reflect the latest update. Please !!!
lol
damn man I think blogs have replaced letterboxes
do you mean like the mailbox? haha or is there something else called a letterbox?
@@colbyfayock I mean every house has one