Netlify CMS

▶ Check out my gear on Kit: kit.co/ChrisStayte
A convenient site not only for the user but the creator is a much more powerful website. Watch as I show you how to add Netlify CMS to your netlify powered website.

[@Stevenchustudio]

05:20 - 1: Go in to your static/ folder, and create a new folder called admin/ 05:50 - 2: In the same admin/ folder, create a second file called config.yml 10:15 - Netlify CMS - walkthrough of templating your model.

[@sanketss84]

this whole hugo netlify and netlify cms series has been super helpful and exactly what i was looking for

[@mvpro2k8]

It is not Netli - FI. It is Netli -FAI

[@CandyMoney1000]

Haha

[@dbibbyma]

Dude, nice! I stumbled on Netlify CMS and wanted to see a quick no-nonsense setup. Your video was it.

[@ChrisStayte]

Glad it was helpful!

[@EntendyVideos]

Thank you for actually showing the collections in config.yml. So many other tutorials don't bother with custom fields.

[@vishnudileesh1243]

Thanks Chris, very helpful video

[@nicolessay1084]

Thanks, this is such a good and concise video, but also makes things easy to understand :)

[@techrm4940]

Nice video ! Keep up the good work from France

[@ralfderijcke]

Clear and simple explained, thanks!

[@vidafuku]

Thanks for the great tutorial! Now Hugo sites can be managed by non-techy clients with the gui.

[@alfredochola5971]

Awesome tutorial. Thanks alot man. Bravo

[@jordanbienvenue4019]

Hello , What about using Multilanguage (French page & english page) through Hugo and netlify... noting that we must have an interface entry for French language and another one for the english.

[@nhexplorers]

Thanks for the great tut. I have a dumb question - will netliftycms work with a react/express/heroku db setup? If so, I'd love to see a tut on that. Thanks again.

[@gottogaimes2868]

Thanks for the vid Chris! I already have a static website hosted by Netlify and pulling from GitHub. I do not want to use a full-on template; but is it possible to use some sort of barebones Hugo (or othe generators) blog template so I can add just one 'Blog" page to my existing site? Thanks in advance...

[@AdamSchelenbergCom]

Thank you a lot. This is really helpful.

[@ChrisStayte]

You're very welcome!

[@pataco80]

Hello, I would like to know how you could configure the netlify-cms backend? I made an installation with Gatsby and his starter template. When I go in the backend, I see only Pages and Blog. I see that you could do much more and I can not find a video tutorial showing how to do it clearly. I see from the beginning of the video all his options and it puzzled me. Thank you. Ricardo P.S. I am French speaking I hope that Google has translated my message.

[@mrbansalpiyush]

Is there a way to integrate webflow to netlify cms?

[@AlexinOslo]

Is it possible to create the scroll down style website with Netlify CMS? The examples I seen were the classic style vs. scroll down. We have a crypto NFT project that requires the modern scroll down style. Any suggestions on what works best on Netlify?

[@yousafnadeem5458]

Hi, I want to add Post Publish Date and Post Update Date in my front matter, how can i make CMS to update the date whenever post gets updated! I hope you get my point. Please reply!

[@kushakjafry1329]

i am having a confusion the files that you add using cms are they transfered to github repo.

[@teamkhaleesi3956]

I don't quite understand. Do I have two index.html files?

[@Viralplace]

If I have different languages? how could I translate my posts in admin area with netlify-cms?

[@TimBradleyFromOz]

Now Netlify CMS also supports Gitlab

[@awokoyadaniel7779]

Hi Chris, I am trying to create this for a page not a blog page. Tried what is on the documentation: i.e the file category. But I am still having issues. Not working

[@blackrugal]

Awesome content!

[@ChrisStayte]

Thanks!

[@kevlarkode]

The admin page is not at all resposive, is there a way to customize it using your own CSS ?

[@ShakeelAhmed-nh5ed]

Hi Sir, i am working on NEXT plus NETLITFY CMS , but i am not able to edit my posts or any collection via PHONE (iphone 6) in a proper way , i think people having large screen might be able to edit in a comfortable manner

[@vinoverde74]

Thanks for this tutorial. Its super helpful. I have one question. In the netlifycms configuration guide they say: When a user logs in with the Netlify Identity widget, they will be directed to the site homepage with an access token. In order to complete the login and get back to the CMS, we’ll need to redirect the user back to the /admin/ path. And they give a script to be pasted before the closing body tag of your site’s main index page. Which is the site's main index page? Any pointers will be much appreciated. Thanks!

[@toanytwo]

first widget script goes to : 1. static/admin/index.html (this is the one created in the beginning of the video. 2. themes/layouts/index.html (this is "partial" or "include" template. Insert two widget to the right spot.)

[@sreeprakashneelakantan5051]

Thanks 🙏

[@aneslucu3475]

how to make other page can upload like your dashboard netlifycms ( young man game, life post, coading,etc) please explain how to do that on netlifycms. thankyou

[@eldyko]

lol Net-liffy. That's funny. Thanks for the video man!

[@everydaycode1535]

I love that music at the end. What’s the name? Pls let me know dude!!!

[@stevenaguilera9202]

Question 1: Hugo (or any other SSG) is needed to be installed on your Netlify host BEFORE adding Netlify CMS (as Netlify CMS only adds a front-end UI), correct ? Question 2: Since I am on a Chromebook, is there anyway I can install Hugo onto Netlify without going into a PC/Mac command line ? I couldn't just download the Hugo files and upload them to my Github account and link it to my Netlify account ?

[@IvanferreroIt]

Steven Aguilera same here: I’m on iPad only

[@abedalrawas2656]

Thanks man

[@MrPogi-lf5gz]

please teach me what custom widget and previews are. I really am not able to understand the docs.

[@arthurprather6720]

[See here --> cms-demo.netlify.com/#/collections/posts/entries/2018-11-14-post-number-20] ... On the right, that's widgets i.e. input fields and etc. On the left that's preview. Hope that helps

[@toanytwo]

Do you need to manually trigger a deploy at Netlify after adding a post through NelifyCMS? Continuous deployment on Netlify seems not working for me.

[@ChrisStayte]

You should not. Do you have draft turned on?

[@toanytwo]

​@@ChrisStayte I don't know why but auto publishing option from Netlify's deployment setting was off. Thanks,

[@kenallen4755]

Getting 404 error. All files are upload and all directories add

[@GKRGY_music]

Great video! short and sweet. Really clear and made me understand Netlify CMS power in few minutes. Kudos. Question, if I may: is it possible to use Netlify CMS for multiple sites and have multiple separated identities? Do I need to host it myself for that (not an issue if necessary)? Example scenario: I want to provide multiple (static gen) websites for friends, hosted on different and separated GitLab repo/pages. Each site should also have its own /admin and different admins (one for each site-friend) beside my "master admin". I hope this is clear, otherwise I can try to elaborate more. Thank you!

[@ChrisStayte]

This is 100% possible. I use Netlify for clients all the time. :)

[@GKRGY_music]

@@ChrisStayte YAS! thank you for the quick and kind reply. I appreciate :)

[@avimehenwal]

Great work man.. I have an 2 year old website and was afraid to use any CMS until I saw your video :) THanks for making things easy. What projects are you working on these days?

[@ChrisStayte]

I am working on react and flutter! Trying to use them to make a similar looking app for devices and browsers!

[@avimehenwal]

@@ChrisStayte Thats excellent. I have recently started using vuejs and learnign to make great webapps using it XD

[@kishanbsh]

I just want to use netlify cms for gui and as identity provider (to govern who can edit my site). My sites generally use firebase for deployment. Is it possible ?

[@ChrisStayte]

I don’t believe so. Unless you are hosting on netlify

[@henrivalencia8910]

is there a way to import the fields? like in 15:34 the fields were repeated several times? is there a way so that we can use reuse these fields. BTW. Thank you for the tutorial.

[@ChrisStayte]

I just copy and paste them. I don't know of a way to automatically set them up!

[@youngidealist]

Nice. Thanks for this. If you take requests, I would appreciate a walk through of making a site with hugo's awake template.

[@ChrisStayte]

I’ll hop on it

[@IvanferreroIt]

Any way to create a Netlify website and install the CMS by pressing just one button, maybe with a template to edit afterwards?

[@ChrisStayte]

I don't believe so. I will look into that!

[@FactsExploreHQ]

Hi, I have a question, can I add Netlify CMS to a site hosted on Heroku. Does it has to be deployed on netlify to use netlify CMS?

[@ChrisStayte]

I believe it does. I am not 100% on that!

[@pexeixv]

Is there a method to have the data stored in one JSON file rather than several MD files? I trying to make something that is NOT a blog, but it is resulting in MD files that contain only front-matter and no actual Markdown. So I think JSON might be a better option.

[@ChrisStayte]

If you create a custom theme you can totally do This. Requires just a bit of thinking and planning.

[@dhanishgajjar]

Do we have to add the Netlify Identity Widget as well?

[@ChrisStayte]

To your html form? Yes

[@DavidJohnson-yi4tv]

hi , your project is the simple react or gatsby ?

[@ChrisStayte]

I am using Hugo! : )

[@chloehuang7514]

Amazing! I created my website just following your tutorial. Keep on going! I have trouble at the final step, and found that should add script src="identity.netlify.com/v1/netlify-identity-widget.js"> into index.html file. Now it works!!

[@esetessy]

Chris Please I need help on my site. I tried using Netlify CMS for my site but the CMS is not displaying the already made pages on the site so I can edit .

[@ChrisStayte]

Did you happen to add their path to your CMS?

[@esetessy]

@@ChrisStayte yes I did Do you mind looking at it for me?

[@drewnormanwebguru]

How did you set up gmail login for Netlify-CMS?

[@ChrisStayte]

You enable this in your netlify settings :)

[@beingabstrac]

How do I add videos to my blog from netlify CMS

[@ChrisStayte]

Where are the videos hosted?

[@samcarpinteyro8482]

I have a trouble Error loading the CMS configuration Config Errors: config should have required property 'media_folder' config should have required property 'media_library' config should match some schema in anyOf Check your config.yml file. but i have.. -archetypes -content -data -layouts -resources\_gen -static ---admin ------config.yml ------indes.html ---images ------uploads -themes and more like: gitmodules, config.toml, license Some have the same? Help me please

[@samcarpinteyro8482]

In my config.yml backend: name: git-gateway branch: master # Branch to update (optional; defaults to master) media_folder: "static/images/uploads" public_folder: "/images/uploads" media_library: name: "uploads" collections: more code here...

[@samcarpinteyro8482]

Nvm....after 3 days is solved... # This line should *not* be indented publish_mode: editorial_workflow # This line should *not* be indented media_folder: "images/uploads" # Media files will be stored in the repo under images/uploads # These lines should *not* be indented media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads # These lines should *not* be indented !!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@lizs2charlie]

Thanks for the video! I did it, but now it generates .md files... How can I display it on an HTML page? and update it every time that I generate a new .md file? I mean how can I see the post? Dumb question, but I'm new on it...

[@ChrisStayte]

The 'MD' files are markdown files. These files are used by your static site generator, I use 'HUGO' to convert from md to html for a static site :)

[@jordihoven2349]

Is it possible to bring your own custom code, then add NetlifyCMS for a blog page? If yes, can you by any chance help me out with a quick chat?

[@ChrisStayte]

Let’s talk, DM me on Instagram

[@ericwilliam1697]

How well do these sites perform SEO wise?

[@aseemlalfakawma5084]

Same as any other sites.

[@TimBradleyFromOz]

They have a natural advantage for load speed and bot indexing because of their static nature. But then they are quite technical with steep learning curves for non-developers, and require dynamic functionally (e.g. this, user comments, contact forms, etc) to be added or outsourced through an API. But as @Aseem suggests, SEO is more or less platform agnostic.

[@eschnasethmaceda2214]

chris stayte i wanna know how to set the login password in the netlifycms

[@ChrisStayte]

You can do that in your admin settings in Netlify!

[@sahilm3301]

can we add a search bar?

[@ChrisStayte]

Yes it’s possible :)

[@Maruf-zt7dz]

Now Netlify CMS supports bitbucket!

[@joeymalope]

What about gitlab?

[@wallacesantos0]

But how do I read the markdown generated in the HTML?

[@ChrisStayte]

What do you mean exactly?

[@wallacesantos0]

@@ChrisStayte I don't know if I got it right, but... the CMS will generate those .md files in the specified format, right? But how do I pick those information and separate in to divs in the correct pages... Is there a easy JS way or library to do so?

[@wallacesantos0]

or is this just for Hugo?

[@ChrisStayte]

It’s just for static site generators

[@lwandilerozani8592]

Add to notes, the future has arrived. They now support GitLab for anyone hosting there.

[@melihkarakaya79]

I only get the email and password inputs in /admin website, google auth does not show up please halp github.com/Thynic/barplatoon-website

[@vedantsuryawanshi900]

"Your GitHub user account does not have access to this repo." this is what i get when i login in

[@ChrisStayte]

Did you add yourself as a user?

Net li f-eye

[@avinashmurmu9070]

Thank u so much chris for explaining it in such an easy manner but I've a problem I'm not able to login and then i tired to send the invitation to my gmail account to see if i can login with that account but was not successful....I am not even getting the sign in with google button .... followed all your steps then also.....plz help 🙏 here is the github link of my project : github.com/avionics18/portfolio