Hey guys!
First post here. I'm a little bit unsure of what comes next but thought asking for advice here would do me good!
I'm doing some ground-laying research for an upcoming personal project (a portfolio + tech blog combination for personal branding and online presence). My "plan" is to create a simple design myself and generate a static website around it, and handle a small blogging environment without too much hassle.
So far I've read a lot about SSG and what revolves around it, and I'd like to go with:
- VueJS
- Gridsome as SSG tool
- Git (of course)
- Netlify for deployment, hosting and such, because it honestly looks like a game-changer from what I've read. (also: free plan, yay!)
Knowing all this, I'm trying to figure which Git-based CMS to use for the blogging part (plus portfolio sections content, for easier updates, versionning, and such).
I'm hesitating between Forestry (https://forestry.io/) and Netlify CMS (https://www.netlifycms.org/).
I've read lots of good stuff about both of them, and Netlify CMS seems loosely coupled (if coupled at all) with Netlify, so both options seem reasonable.
I would really appreciate some dev feedbacks on any of these two CMS solutions (pros, cons...) to help me choose!
Apart from that, remarks about the project stack I'm envisioning will be gladly heard, as long as they're polite and constructive!
Thanks in advance, I'm really looking forward to reading from you :)
Top comments (45)
Not sure who is the end user of your CMS. As an editor, Forestry has a better UI than Netlify CMS.
In terms of integration with Netlify, most headless CMS have no issue, so it’s about the features you want from your CMS. I found this review very helpful: bejamas.io/blog/headless-cms/
I’ve recently stumbled into TinaCMS, which just launched (haven’t tried it): tinacms.org/
That TinaCMS looked great until it mentioned being for React sites.
You're right, I haven't made that really clear in the original post: I will be the end user of the CMS! :)
It would be used for tech blogging, mostly (plus portofolio content If I feel like it, but this could also be handled by static files like Markdown so...)
Thank you for the link, this will surely help me choose.
Tina demo looks great, wow! I'll be using VueJS with Gridsome this time, but I'll keep it in mind for a future React project.
Tina looks amazing 🤩
Thx for sharing our post. I'd invite you to check it out once more as we updated it on March 31 (TinaCMS included) :-)
Hi Cécile! I'm currently at the stage of creating the backend for my personal website which by the sound of what you described is very similar! I've spend years and years iterating over the design itself and now it's finally where I want it. Here's some suggestions I can make to try and save you from some pitfalls:
Don't spend too much time perfecting the design before you start building the actual website. Sure, it's great to know what you're going to build so that you don't have to change the codebase half way through. However, be mindful of the fact that the idea will keep evolving for as long as you're creating the website. The earlier you get on with actual development the sooner you will get to work on the more interesting features of the website.
Start with a static JSON (you've mentioned that the stack uses Vue) for the data and mock everything you will supply from the CMS. I haven't used Netlify/Forestry before but one thing that has already saved me a ton of time was not starting with the backend. This is only because being able to tweak JSON before I settle for how every blog post, excerpt and page looks is much easier than changing the underlying infrastructure and adapting it every time I wanted to add or remove some data.
Use some issue tracker to monitor the progress and break down the website to pages for front-end and content. Personally, I've started with some Lorem Ipsum text to fill the content where the blog posts/about etc. will go. Creating the issues on Trello/Gitlab/Github is a great way to see not just what's left to do, but how far you've come (and that's a great motivation!). I use Gitlab and I couldn't be more happy with it.
If you can, consider creating a staging or test environment where you can test how your website looks before publishing the new changes to the live version. Trust me, this can be extremely helpful if you want to evaluate new layout designs on the actual devices. You can protect these by simple password-based authentication using .htaccess files.
Finally, the stack I'm using at the moment still lacks a backend (using that JSON to finalise front-end) but consists of the following:
Thank you for this very thorough bunch of advice!
This will surely save me some time.
For now I'm using "Gettings things GNOME" as a TODO app (haha) but it's only a temporary tool to get started and brainstorm some big-picture stuff before opening an IDE.
An actual issue/task tracker will surely help me once I do start coding.
Do you recommend GitLab instead of GitHub? I've used GitLab in my previous company and really liked it so, that could be a good option for me.
It's true that the design part, both visual and architectural is particularly interesting and piqued my interest (I downloaded Adobe XD to try and make mockups, for example) but I should indeed get to coding sooner than later.
I'll also be discovering VueJs, but I'm already familiar with EmberJS and (old) AngularJS so, I should not be too lost I guess.
I was using Gitlab before GitHub started opening up (was acquired by MS) and there were no features like free unlimited private repositories or free CI/CD which for me was a complete dealbreaker. Right now GitHub is a bit more competitive, but Gitlab, in my opinion, remains more feature-rich and seems to be more of a complete solution. No hacking, no extra plugins, just one platform in a to-the-point manner. If you've used it you already know this; you also know the UI and capabilities, so I'd stick with it ;)
I too used Adobe XD and it's particularly useful for getting early feedback on your design. Maybe try it this way?
Good luck!
Check Figma for mockups and designing. Its quick, stable and has good community resources :-)
I migrated from NetlifyCMS to Forestry for my personal website. I like the UI better, and it was also easier to configure an S3 bucket and CDN for images and other assets. They both work very well, I just like Forestry's UI and UX more.
Nice! One point for Forestry then :)
I switched from netlify cms to forestry.io. I wrote an article about it 👇. It is so easy to setup forestry.io and great to use!
waylonwalker.com/blog/forestry-io/
Could you also use your custom domain with forestry just like Netlify?
Yes, they give you a static html file to host yourself.
forestry.io/docs/editing/remote-ad...
Cool! Thanks!
Thank you! 😊 I will read this attentively.
Hey Cécile,
One nice recent addition to app.forestry.io is the ability to take advantage of your SSG's Hot Module Replacement capability 🔥.
If you use a JS-based SSG like Gatsby, Gridsome, NextJS, NuxtJS, etc. chances are HMR is available by default. It means when you're editing in Forestry, editors get a similar experience to what a developer has locally.
Also, you don't need to save to preview, so no waiting for some builds to finish to get a preview URL, it's just instant.
Here's an instant preview 👀 with Gridsome: loom.com/share/00abce83d8d5419a820...
With TinaCMS as you edit the website directly from the front end, you're always seeing what the end result will look like.
Here's a NextJS demo of the current experience when you edit inline blocks in Tina 🦙:
youtube.com/watch?v=4qGz0cP_DSA
Great Stack🔥!
My Personal Blog is also hosted on Netlify and I highly recommend it. It's built on Gridsome and using NetlifyCMS 🎉 with Code Syntax Highlighter and Google Analytics.
I'm quite happy with it, you're going into the right direction.
Check the repo here, or just ping me on DEV Connect or Twitter for any help..
Don't forget to star the repo 😊⭐
github.com/justaashir/justaashir.com
Hey, thank you mate, I was struggling to set up Netlify CMS with Gridsome since the official plugin is kind of broken and the documentation is incomplete! Just by looking at your repo, I was able to make it work!! Thank you!
Your welcome!
Yes, I had a hard time setting up the netlify cms myself, because it's a jungle out there with no documentation.
I made it work, even scale up by using tags and canonical.
I really prefer Nuxt and it's content module now because of SSR and complete static export but I just don't have time to re-index, redirect and get back on Google ranking.
Thanks, alot for allowing me to help you.
Thank you! Glad to know I'm going in the right direction so far :)
I'll check your repo, I've starred it already.
My site is currently setup with Gridsome and NetlifyCMS. NetlifyCMS isn't linked to netlify as far as I'm aware you can use it with other hosts if you want to I went with that just to try it up and it was very easy to get setup but it is quite basic on what you can do, but for just creating posts and nothing too complicated it will do the job fine. I'd not heard of Forestry before, but reading the docs looks good I might give it a go.
It's good to know that Gridsome and NetlifyCMS work well together, thanks for your feedback!
In your opinion, would the "quite basic" features be enough, content-wise, to populate a (small) tech blog? (code snippets, explanations and stuff like that, nothing too fancy).
Yep it would be fine for that there is a rich text editor if you prefer but I tend to write my posts in markdown. I haven't figured out how to style them quite as I'd like as Gridsome seems to remove default markdown styling but that's likely down to the way I've setup my blog up.
Ok, good to know! Thanks
I recently decided on Forestry.io because of the great free plan, the clear documentation, and the fact that they developed Tina CMS, which (I think justifiably) got a lot of press recently.
Forestry has some cool features for detecting patterns and setting up templates from an existing project, so I thought it was nice that I could confidently start development locally and try their service after-the-fact. Netlify may very well support something similar.
I think the great thing about both tools is that they're necessarily uncoupled from whatever site generator you're using, so there's no risk of platform lock-in. I ended up deciding not to actually use Forestry (or any CMS) when I realized it couldn't leverage some of the Hugo CLI features I was so excited about. I didn't need to change anything; I can remove the Forestry config files, but I don't have to: nothing about Forestry affected the way my site is built or deployed (it just integrates with your git repo).
TL;DR: I wouldn't be surprised if you could try both Forestry and Netlify at the same time, and pick which one you like better.
Trying both of them sounds even better to make an educated decision, good idea. Thanks :D
I redid my personal site last fall with Gridsome and Netlify. For the blog I just used markdown files. I added the Gridsome plugins source-filesystem and gridsome-remark. These allow you to use files on your system as a data source. I also installed remark-shiki for syntax highlighting in markdown code blocks. Andre Madarang has a video on youtube where he shows how he implements it. You can find it here youtube.com/results?search_query=a.... I realize this doesn't exactly answer the question that you had, but it is another option you could use with the stack you are going to go with. You can check out my site at mccarville.dev if you like. Oh, and I absolutely love Netlify for hosting, just make it so easy. Best of luck with whatever solution you choose!
Thank you! It's always nice to be aware of other possible solutions and existing stacks :)
I checked your site, it's nice! I like the colors and the overall clear/simple vibe.
And yes Netlify looks very promising, can't wait to host something with it!
Quick complementary question: where did you buy your .dev domain name? I'd like to buy one too and I saw offers around 12$ per year, which seemed a little to good to be true. Do you have advice or preferred services for buying a host name? Thanks!
Glad you like my site!
I originally used hover to buy my .dev domain(I waited the month for the prices to go down when the domain was first available), but now I use namecheap for all of my domains. I had domains registered in a couple of different places (including namecheap) and earlier this year I moved them all to namecheap when they had a transfer sale. Hope this helps!
I have been working in the HeadlessCMS JAMstack ecosystem for a while now I tried working with Netlify CMS but the UI is still in the early stages and I experienced issues working with it so I switched over to DatoCMS and I am loving it. It is now my current choice for HeadlessCMS. My stack of choice is similar to yours ... Gatsby, DatoCMS, GraphQL, Netlify.