Building A Blog With Eleventy And Netlify CMS - Part 3: Managing Blog Content With Netlify CMS

hi guys this is sebastian again from codingtosmartway.com welcome back we are in episode number three of the building block with 11t and netlify cms series and the last two parts we have started to set up the 11t project um have used 11t to run our static site generation process have been adding already some content and have set up this uh block-like example and now in this final part of the series we will see how we can add networkify cms and not only natalify cms but also netlify uh hosting and deployment services in our application um we will use netlify cms which which is basically an open source uh content management system provided by the team from from netlify how we can use that to manage blog post content in combination which running our aesthetic side generation process with 11t and we will use the netlife platform to host our application and to set up a deployment procedure which would allow us to very easily deploy changes to our application and to use nullify cms to add content and which then make sure that the static site generation building process is automatically triggered on the netlife platform and now now a new result is delivered and the content which is available on the hosting platform is up to date so this is what we're going we are completing this example and let's get back to our project and let's get started with uh with part three now okay the very first thing to do is we need to create a github repository on github.com for our project because we would like to bring our project content into this repository and then connect that repository to netlify to make use of netlify services for hosting and for building our project and that is the very first step and you can see it here i have already logged on you need to create an account here it's free you can use github for free just create an account and then you can select option new repository here from the top menu bar and then it takes you to to this page here which is saying create new repository and here you need to do basically just one thing you need to provide a name for that new repository here so let me put in something like 11 11 t have net lift five hundred test something like that so of course it must be a name which is not assigned to any of your repositories yet so the name must be a weibull and that is the case for for this name i have chosen here and then you can directly hit on create repository you can provide the description here which is just optional but then hit creating a create repository and then this repository is created the great thing here is github is providing you with some instructions um of how to now bring your content of the project we have created here into this um this master branch of this repository and that is what i'm going to do uh right now so i'm back here on the command line and as you can see i'm located right inside my project folder and the first thing we need to do here is to initiate a new local git repository first of all and that is being done by using the git command here with option in it now you can see it's created we are there and now i need i have created that that repository here i need to add all the content which is available in my project folder right now to that repository and that is being done by saying git add and i'm just providing a dot here to add everything which is here in that folder a weibo so this is adding simply everything everything which is part of my project um okay so um here we are and now we can move on we need to make a first commit here so the commit can be done by by by using the git command here again using option commit and providing just a commit message here as a short string here so maybe first commit then return and you can see everything is committed then we need to say git branch hyphen m master like so and then we need to add our remote github repository here as uh lc origin and that is being done by saying git remote add origin and then i need to pass in the url of my remote github repository which is basically um which is basically this url here you can find it here and you can find it here as well so you can just copy it from here and then return to the command line pass it in here return and now finally we can make a push from our content which is at the moment located here in our local git repository we can push it to our remote github git repository and that is being done by saying git push hyphen u origin master hitting return and what is now happening everything is uploaded to github to the repository i have specified as my origin here um and that is the first pre-requisite is needed to now connect our github repository to to netlify to then make use of the netlify services okay so let's move over to our netlify and netlify can be found at naplify.com here you can sign in if you have already an account otherwise you need to to sign up first it's free as well uh for the things we do need and then you need to to log into your account so that we can take take up the next steps so when creating a new network account you have the options to directly sign in with your github with your github account using your github credentials i think that's the easiest way because we're using github um anyway for um for for creating our github repository and then in the next step connecting that github repository here to notify so it's the easiest way to just use your github account to to create a netify account here in in the second step and once you are logged in you should see a view which is uh similar to to what you can see here you can see of a list of sites which uh have been created of course if you have just started a new account this list is empty that's that's clear i have already created here two two sides two deployments uh so my list is already filled with those two entries otherwise you should see this option here um even if this list is empty new site from git and that's exactly what we would like to do because we have created our git repository hosted it on github and now we would like to create a new new site here a new nullifier site which we are connecting so just click on that button here and it takes you to the following wizard which consists of yeah basically three steps as you can see here first step is connect to git provider then you need to pick a repository in the second step and in the third step you need to configure uh build options and deployment options and so on so let's let's do the first step first and here we need to use github of course you can use gitlab you can use bitbucket so any of those git repository services you are using um that's okay but for our example here i would like to go on with using github so just click on it it authorizes uh with github automatically in the background and then it presents you here with with a list of your repositories and you can use that search field here to search for uh repositories um for example starting with 11t and here it is 11t half nettle for hyphen test that's a git github repository we have just created and we have just made sure that our project content is pushed into that repository so i can choose it here to to go on and it directly takes me to step 3 here which is about the build and deployment options and presents me with the following form i now have to complete so uh what we need to adapt here is basically the build command here we can say npx 11t like we did it before using the command line uh the publish uh folder is already set to underscore site which is the output folder of 11t we have already advanced options here but we do not need to use that now so that's it branch to deploy this master that's okay as well and now i can hit on deploy site and it should start the deployment process based on the content which is available in the github repository and then for that content automatically triggering the build process the npx 110 command that's now all happening here in the netlify platform in the cloud um and it presents you with that overview here you can see it's saying site deploy in progress and once it is finished you are getting that url here and now you can click on that url and it directly takes you to um result of the 11t side we have created before um and this is a weibull now hosted on netlify built automatically on the basis of what is available in the git hub repository and that's our basic setup here with netlify great so uh with this side up setup in netlify here we need to now to move on to the site settings section which you can reach by clicking on this button here so settings and we need to adapt a few settings here in order to to enable what is needed to prepare for the use of netlify cms together with our project here and the first thing we need to do here is we need to go to the identity tab which is a label right here clicking on the link identity in this left side menu and this identity service netlify is offering needs to be enabled and we do need that in order uh for example to use that content management system later on um and therefore we simply need to enable it here and we can do that by clicking on that button so enable identity and it takes you to the following screen here and now you need to go into the sub section which is called services here and enable something which is called git gateway which is a service of netlify and as you can see here by by using that a service you have a gateway which is connecting your site which is hosted here in network directly to github's api so that you can use uh later on netlify cms which then is able by using this gateway by using that that gateway which is addressing github's api to directly push to github for example if you create new content new blog posts for example in netlify cms this is the gateway which is then used to push that all through so we do enable this here as well by click on clicking on the button enable git gateway that's as simple as that and that is then storing here for example the git hub api access token which is retrieved from github but then enables this gateway to work later on ok this is what we need to adapt here in the site settings section so far we have added another file site have connected to our github repository have configured all the settings we need to enable relevant navify services so that we know in the next step we can move on and actually come to the network cms part of this tutorial and integrate netlify cms as an open source content management system right here in our project and the very first thing to do here is i have returned to the project here in viral studio code as you can see and what we now need to do is here right inside the admin folder which we have already created here i'm creating a new file in that folder here which is named index.html and um this file will contain uh the html code which is needed to actually um display natalify's user netlife cms user interface and the html code which is needed here can be found on netlify cms website which is available here at netlifycms.org and you can click right on the get started link here which takes you directly to the documentation section and then uh click on the link add to your site so that you're accessing here's a description which is giving you guidelines of how to integrate network cms into your specific project into your site and that is exactly what we are going to do here and i'm scrolling a little bit down and what you can see here it advises me to to create files inside an admin folder which we have already done at least the index.html file and then here right here you can find the html code which i just copy and then returning to my code editor and then passing in that code here which is needed to include netlify cms from this source and which is then making it awayable in our project so this is the first step and in the second step we now need to add one more file here inside the admin folder and that file is a configuration file for network cms and therefore it is called config dot or dot yamo it's a yaml file and we are using it to store some configuration settings and we are starting here with a section a configuration section which is just called back end and here within the back end section we need to include two properties two configuration properties first we need to send the name to git hyphen gateway which is uh just saying that we would like to use the git gateway service from natlify within our backend to access github repositories and just remember we enabled the git gateway service just before in the netlify back end and so this is the reason why we can now set it here by using the value git hyphen gateway another property which we need to bring in here in the backend section is called branch and here we need to set the name of the branch of the github repository we would like to push our changes to and as you know this is a master branch and this is a branch which is used to to push changes to to make updates to okay then we are leaving the backend section here and we are starting to add more configuration settings on the top level first of all i'm starting with the property which is called media underscore folder uh which needs to be set to the folder within our project structure which should be used to upload meteor for example images which are uploaded by using netlify cms content editor later on and we have already created such a location in our project structure just remember it's here inside images we have created that uploads folder and we have done another thing here and we have done it here in 11 teas configuration file we have uh create we have added that folder here the images folder where uploads is a subfolder of we have added it as a pass through copy which just means that it is passed through and made a label here in the output folder in the underscore site folder as well and you can see it here it's a weibull and all the content which is available inside of images and inside of the sub folder uploads it's just passed through and placed as a copy right here without any transformation steps it's just the pass through copy and that's now the reason why we need to add exactly that folder here of our output directory as the path as the value here right inside our configuration so i'm setting it to underscore side slash images slash uploads this is it and then we have another um another property here public underscore folder which is set to images slash uploads and this is the path the path extension um under which this location is made available when accessing those things for example by using the browser later on okay that's it that's uh what we need here as a general settings and then we move on to something which is called the collections section um and a collection is or can be can be seen as a data type which should be managed with netlify cms and the data type in particular which is irrelevant for our project here is of course the post data type because posts are the object we would like to manage with netlife cms we would have we would like to have the opportunity to use netlife cms to enter our blog posts we would also like to use it to to update existing blog posts so posts are the data type which is relevant here for network for setting up netlife cms and that's why we need to set up the post the data type right here in the collections section and it all starts with the name property and this is set to posts and this is just the name of the collection or wisely and then we're going on adding label here as another property and the label as the name of the collection which is used to be displayed in the user interface of netlify cms so i'm setting it to posts as well but this time with a capital letter because it's a display name and then i'm bringing in the property folder here this is the folder in which new files for the collection should be stored this is our posts folder here so i can set it simply to the value posts of course in lower cases like so the next thing we need to bring in here is a thing which is called slug and the value which needs to be um assigned here to uh this configuration property slug is basically a template for file names uh which are created for the posts we are we are creating here in the posts folder and the template for those file names is defined as a string and what we can use here in the string is the expression syntax here by using double opening and closing curly braces and they always bring in values coming from variables which are available for example in the post metadata and the slug i'm defining here is made up of the year information then followed by the months information of when the blog post has been created followed by the day and then followed by something which is available in a slug variable and which is a a unique identifier basically which is here attached to the file name as well okay and then finally we need to come to a section actually which is called fields because now we need to describe uh what are the fields which are making up a blog post for the posts collection type here and this is done in this section so we have another section here and now we can define within this field sections uh each field one per line and let's start with the first one which is consisting of properties here first of all we need to define a label for the first field uh and the first field is the layout so then i'm using the name property here which is set to layout as well in lowercase then we need to uh bring in the widget property here for each field and the widget is basically specifying what user interface style should be used for entering the value of this field and here for for the layout that's some kind of special field here this should be hidden because it should not be entered by the user this is something we are predefining here by using the default property as you can see here and we are setting it to layouts slash post dot n j k let me quickly uh have a look so right here in the underscore includes folder we have defined this post dot njk file as a layout here in the layouts folder so everything is correct and here is i can store that value in this hidden layout field so that it is clear which layout template we are using here uh okay so let's continue bring in the next field that's now a field which is not hidden and which is made available for the user in the content editor of nand file cms to be maintained and i will start again defining the label here and this is now the title of the blog post then defining the name which is title and lowercase and setting the ui widget which is used and the widget i would like to use here is named string just using a text input widget which allows us to to enter screen values here okay so next label is a description name is set to description as well and again the widget is set to string once again okay and then the next one label is now date because we are defining the input field for entering a date value uh name no surprises here is date and lowercase a widget this time we have a special widget a ui element a waiver for error entering date information and that widget is called date very simple um and let's set the default value value to just an empty string here so that you have the option to not provide a date at all um okay so next one again starting with the label uh property here this is supposed body field so name is just body as a widget because now we expect that maybe a longer text is entered and the text should contain some styling for example we're using the markdown widget here which allows to do exactly that and leaving is leaving this like that and then the last one is actually the featured image for the blog post so the name here is simply featured image like so and the widget here is image later on we will see how this widget looks like and how you can use this widget to actually upload image files and that's it that's the field definition for our posts collection type we would like to manage with network cms we have stored the configuration which is now complete here in the config dot journal file it's all available here and with that configuration end with the index.html file which is containing the html code which is needed to pull in network cms actually into our project we can now move on so in the next step we need to make sure that we are updating our project content on the netlife hosting platform of course and this gives me the opportunity to just demonstrate the deployment pipeline we have just set up in this tutorial because now what we need to actually do to update uh the deployed and hosted version of our project here with what we have changed here locally we simply need to update the github repository so we need to push our changes here from our local git repository to the remote github repository and that is being done by first of all saying git add again adding everything what has been changed so far and then let's do a git commit and let's use a commit message here edit net life cms like so um you can see our files have been added to the repository um two files here in the admin folder that are the two files we have created to integrate network cms basically and now we need to push that to our remote repository and again we're using git push minus u origin master let's do that and it's pushing now and updating and now we can change to netlify here just go back to the overview here um and you will now see it takes a moment and then you will see that another run of netlify not nettle51t is triggered here you can see it has been already updated it is getting the new content from github from the repository we just pushed to and then initiating here on the network platform a new build of the static assets of the static sides of all the content which is coming from our project and then automatically making it a weibo um by using that url we have already been accessing uh and now let's access it here we can see the app is still running we can go to the post section here this is running as well and now we can also go to admin because that is the place where we have stored or integrated netlify cms now you can see one thing it gives me back an arrow which is indeed a good thing because the error is indicating that there is an error in our configuration file but from the fact that it is showing up an arrow here it's proving that our configuration is a weibull now we of course need to correct that error to get everything working and what you can see here i have missed a comma i've not separated the label and name property here in the description of field so let me quickly go back to the code editor see where it is here it is okay another comma which is missing okay then of course you need to commit and push everything again to github i've already done so now so that we can directly proceed and now you can see when accessing this admin um pass here you can see it takes me to natalify cms to the log in form and that's a great thing now natalify is working our configuration has been accepted and no more errors and we can start from here to use node network cms for managing content so there is one thing you may notice directly you have no option to create a user account right here and that is because one last thing we have missed to set up for managing our user accounts we have enabled the network identity services just remember that and to make use of the network identity services here together with snappify cmls we need to include uh the corresponding network identity widget here right on that that netlify cms start page and to do so let's go back over to the documentation to the add to your site section in the netlify cms documentation and that's uh the documentation where we have pulled out the html code which has been uh placed right in our project to uh embed network cms and if i scroll a little bit further down here let's see where it is okay here in the authentication section right here in add the netlife identity widget description uh here is the line of code the script element we do need to add in our html site uh code as well to make that netlify identity service work together with netlify cms okay let's copy it out here let's go back to the code and here we are inside index.html inside the admin folder i will embed that additional script element right here within the hat section okay having made those changes here of course i need to commit it once again and push it to github so that my deployment and build process on networkify is triggered once again so now what you can see when accessing uh the admin uh url extension of our site here once again the netlife cms login screen looks a little bit different now it gives me the option to click here on log in with network identity and that is indicating that now the netlife identity service is being used to uh to authenticate here and to to manage user accounts for network cms so let's click on that button and see what's happening it takes me to vid to that uh login screen and you can see here you can either log in with an existing user account or you can just sign up and uh of course uh as i'm now trying to access it for the first time i have not created the user account here um and um the fact that there is no user account present can be seen when switching back here to the site settings page here in netlify and accessing the identity section here once again and here in the list it is stating that we have active users we have zero we have a total capacity of one thousand user accounts which can be managed here with a free account but for the moment we have zero active users which are managed here with networks identity service and so there is no user account existing right now so we can now go back here and just create one by entering my name entering an email address which should be associated with that user account so let's put in my email address and then i'm choosing um a password here and then i click on sign up and this is creating no user account and as you can see it's stated here it's sending me a confirmation message message um by email and here i need to first of all wait for this message and then click on on the link which is included in this email message to confirm this user account here so that i can use it having confirmed um the email message having confirmed my account now i can now use my user account here to log in um and therefore of course i need to put in my email address here together with the choosing password and then i'm able to log in and it directly takes me to the netherlife cms user interface and here you can see in this user interface it's very simple to use we have our collection types listed here and we have created one collection type so far and that is the posts collection type and you can see it here and now clicking on that post collection type you can see here a list of available post entries and those two entries here are the entries we have created already before in visual studio code by creating corresponding uh blog post files in the posts folder of our project those two entries have not been created by using network cms but the great thing here is they are listed here and they are available and it gives me the option here to create new posts what we will do in the moment uh so so that is a purpose here we can now use this netlife content management system here to uh create new posts and manage existing ones okay before doing so let's let's quickly uh go back to our site once again to the posts view you can see both posts are listed here you can click on one of the posts here and it directly takes you to the corresponding detail page so this is all working and this is corresponding to what we can see here to post entries and now we are adding a third one actually so clicking on this new post button takes you to the content editor here in on network cms which is now giving you a form which you can use to create new blog posts and the input fields which are presented here in this form are corresponding to what we have defined when creating our post collection type earlier when creating the configuration we have um included all those files the tied those fields the title the description date uh post body featured image and so on when creating the not the file configuration so let's start here my blog post this is my start post let's select a date here and then this this is the post body text and here we can use because we have chosen here to use the markdown widget which you can see here you can switch between using rich text here when using this widget for example i can i can write something in bold text as you can see here by using this rich text features here this control bar which is presented here on top i can switch to the markdown view as well and this enables me to use markdown syntax for example to highlight something in bold and here you can choose what's easier for you to to work with that kind of rich text editor or to use with a markdown editor if you prefer that that's happening here on the left side that's where you enter the new blog post and on the right side you can see a preview which is based on our template already and now let's add an image here as well let's use one of the existing ones here let's uh you can also upload new images here um and then choose selected here and it is presented here as well okay great and now having entered all the information here we can hit on publish now you can also choose to publish it now and directly create another one or publish and duplicate so you can create another one based on the on the input values you have provided here for that post i will choose now publish now because i would only create a third one and that's it so now it is publishing it's saying entry saved and i can go back and now you can see i have the my cert blog post here in the list i can click on it i can edit the uh things which have been entered here and that's all working here nullify cms what is happening in the background uh when i choose to create new blog posts here in netlify cms nullify cms is creating a file out of that as we have done before manually in visual studio code now nullifies cms is doing that and it's pushing those changes those new file to the github repository because nullifier cms is able to do that because we have enabled git gateway in the network services section so network cms can now push to our repository that is then triggering a new build on the netlife platform of our static site generating a new output updating the uh hosting content and that's the reason why we can now access this site here once again and you can see the content is already updated it's presenting me here with the third blog posts i've just created i can go to the details page everything is working and this is the way how you can use nanofile cms as a free open source content management system combining it with a static side generator like netlify putting it all in the cloud running it on mantlify letting the build process happen on the netlife platform and that's super easy and you have a content editor here a content management system a weibull for aesthetic site which is a great thing so you can combine advantages of both having flexible and manageable content and having static side output and that's a very great combination and it's easy to set up as no show i'm sebastian from codingthesmartway.com thanks very much for watching this tutorial series on using 11t as a static site generator and nullifier cms to manage the content uh which is then used in the static site generation process i hope you do like this combination and maybe you are considering to uh also use this combination of tools in one of your next project uh if you do like it just try it out give it a try you will see how easy it is to set everything up and how easy it is to even manage manage content with a content management system in combination with a static site generator i hope you do like it if so please do like my videos on youtube please leave a comment if you like please visit my website at codingthesmartway.com and i hope very much to see you in one of my next videos of course until then have a good time have much fun trying out 11t have much fun trying out uh net life cms see you bye you

Channel: CodingTheSmartWay.com

Views: 2,411

Rating: 4.9428573 out of 5

Keywords: 11ty, Eleventy, Netlify CMS, Static Site Generator, SSG, Blog with Eleventy, Blog with Eleventy and Netlify CMS, Learn Eleventy, Learn Netlify CMS, Eleventy Tutorial, Netlify CMS Tutorial, Learn 11ty, 11ty Blog, Static Site Generator Blog, Nunjucks, JavaScript, JavaScript Content Management System, 11ty Getting Started, Eleventy Getting Started, 11ty Tuturial

Id: sRaBKY_dDGg

Length: 46min 37sec (2797 seconds)

Published: Sat Oct 03 2020