Registering and logging in

To get started, open a web browser and go to the live version of the site at https://<your-site-name>.netlify.app/admin. You will see the Netlify CMS logo and a log-in button, as shown in Figure 5-1.

Click the “Login with Netlify Identity” button. A dialog will appear with two tabs: “Sign up” and “Log in.” Since we configured Netlify Identity to use open registration, we can sign up here for a new user account. Click the “Sign up” tab. Enter your name and email, and select a password, then click “Sign up.”

After clicking the “Sign up” button, you will receive an email from Netlify to confirm your email address. Click the link in this email to complete the sign-up process. Once this is complete, you will be redirected to the main screen of the Netlify CMS Content Manager application. There isn’t much to see here yet, since we haven’t added any blog posts.

On the left side of the screen is the list of collections. So far, we only have one collection, the Blog collection. The name that is displayed here is determined by the value of the label property in the collection configuration. As more collections are added, they will appear in this list.

Once we have created some blog posts, they will be listed in the center region. Currently it says “No Entries” because no posts have been created yet.

In the top right part of the screen is the “Quick add” button. This allows you to start the content creation process from any screen in the application.

Lastly, in the top left are two buttons: “Contents” and “Media.” This is used to switch between the main view and the media asset manager, which we will look at soon.

Creating a new blog post

Now that we’re logged in, let’s create a new blog post. In the center region of the screen, click the “New Blog” button. This will open a new editor where we can add the new blog post, as shown in Figure 5-4.

There are three fields shown in this editor: Title, Publish Date, and Body. These correspond to the three fields we configured in the CMS configuration file for the blog collection.

Let’s add a new post. First, enter a title in the Title field. The widget used for the Title field is string, which renders a single-line text field, as shown in Figure 5-5.

Next, let’s look at the Publish Date field. It has been prefilled with the current date and time. Click the field, and a date and time picker will appear.

For now, we can leave the date and time as is. Lastly, let’s add some content to the blog post. The Body field has a rich text editor. Figure 5-7 shows the different toolbar buttons that are available for formatting the text.

Go ahead and type a blog post in the Body field, using the various toolbar controls to format the text.

If you prefer, you can also edit the raw Markdown source itself. To do this, simply click the toggle switch from “Rich Text” to “Markdown.” The content will transform into Markdown-formatted text.

Publishing the post

Finally, let’s publish this new post. Click the “Publish” button in the top right corner of the screen. This will open a dropdown menu with a few options. From this menu, click “Publish now.”

After a brief delay, the top of the screen will change to indicate that the new post was saved and published. The “Publish” button in the top right has changed to say “Published.”

Let’s return to the main screen of the CMS. To do this, click the back button in the upper left corner of the screen.

Back at the main screen, you will now see the blog post we just added. It should look like Figure 5-12.

How publishing works

You will see one new commit downloaded from GitHub. If you check the src directory, you’ll see a new directory called blog. Inside that directory is a new file. The filename should look something like 2020-06-21-welcome-to-the-coffee-blog.md. This filename is generated from the configuration file. Recall that for the blog collection, we set the slug pattern to {{year}}-{{month}}-{{day}}-{{slug}}.

Adding media

The Netlify CMS application also includes an interface for managing media files. You can upload images and other media here.

To access the media manager, click the “Media” button at the top of the page.

We haven’t added any media yet, so the media manager will be empty, as shown in Figure 5-14.

Let’s upload an image to add to our blog post. Open up your favorite image search engine and find an image of a cup of coffee, then save it to your computer.

Then, in the media manager, click the “Upload” button. Select the image that you downloaded in the file chooser that appears, and it will be added to your media library. This is done by using the Git Gateway to create a new commit in the repository containing the image – media files are also stored in the repository.

After uploading, the media manager will refresh, and you will see the new coffee image, as shown in Figure 5-15.

Adding media to a blog post

Let’s add the image we just uploaded to the blog post we created previously. Click the X to close the media manager, then click the blog post in the list of content.

Inserting the image

Go to the beginning of the body content, then click the plus button on the toolbar. You will see the Add menu pop up, as shown in Figure 5-16.

From the pop-up menu, click “Image.” This will add an image component to the text editor.

From here, click the “Choose an image” button. This will show the media manager. Click on the coffee cup image, and click the green “Choose selected” button in the top right of the dialog. You can also add alternative text and a title (tooltip) for the image.

Summary