Welcome to the second part of the Astro LinkTree clone tutorial. In this part of the series, we are going to upgrade our LinkTree clone to use Netlify CMS to create, edit and delete links.
Table of Contents
- How This Works
- Installing Astro Netlify Integrations
- Configuring The Astro Config
- Creating The Links Folder
- Dynamically Creating Link Cards
- Netlify CMS
- Deploying Changes To Netlify
- Netlify Identity Integration
You can clone the finished project on GitHub. Make sure to checkout the part-2 branch!
How This Works
Netlify CMS isn’t exactly designed for what we are going to build with it. Netlify CMS is mostly used on blogs (which we cover in a later tutorial series). We can, however, leverage its functionality for our cause.
Netlify CMS creates markdown files in our Astro project. These markdown files are usually used to write the content of your blog posts. We can, however, create markdown files with only frontmatter code.
This frontmatter code will contain the Link Title, Link Description, and the Link URL. Utilizing the
Astro.glob() object, we are able to pull these values into our
index.astro file and use them to create dynamic Links.
It sounds a bit complicated, but it really isn’t, as you will see shortly.
Installing Astro Netlify Integrations
If you have followed the last part of the series, you should already have your LinkTree clone deployed on Netlify.
Now we are going to install the Astro Netlify CMS integration:
npm i astro-netlify-cmsCode language: Bash (bash)
Agree to each prompt by pressing enter. This will automatically take care of our configuration.
Configuring The Astro Config
To be able to use Netlify CMS, we need to add some code to the
astro.config.mjs file. Here, we need to define so-called collections as well as the backend.
I highly recommend watching the video, where I will explain all of this in greater detail.
astro.config.mjs file and make sure to use the code below:
If you want to know what all of these values do, check out the official Netlify CMS documentation.
The important part here is the
branch. As you can see, I set the value to part-2, which is the branch I am currently working on.
If you are working with your own repository, this branch should be set to either main or master, depending on which one you are using in your repository. So make sure to adjust this value accordingly!
Creating The Links Folder
All of the links we create using Netlify will be markdown files (.md). We want to make sure to store them in a separate folder.
Create the folder
src/pages/links for this purpose.
Dynamically Creating Link Cards
Now that we have everything set up, we need to modify the
index.astro file. So far, we have created the link cards by manually typing in
From now on, we are going to do this by using Netlify CMS. Open the
index.astro file and delete everything between the
<LinksLayout> layout and add the following code:
Make sure that you also add the line
Since we can’t run our application with an empty
src/pages/links folder, we are going to create a temporary link manually. (If the map function can’t find anything to map, it will throw an error preventing our app from starting).
Create the file
src/pages/links/link-1.md with the following content:
Now run the dev server:
npm run devCode language: Bash (bash)
If you open http://localhost:8888/, you should see the link showing up:
Now that we have everything set up, it’s time to create some links using Netlify CMS. Open the admin panel at http://localhost:8888/admin
You should be logged in automatically. After deploying the final version of the app, you can access the same admin panel by using your respective Netlify URL with the admin route. For example https://mynetlifyurl.netlify.app/admin
You will be able to log in using GitHub integration, which we will set up in a second.
Once you are logged into the admin panel, things are very easy and straightforward. You can see the Temp Link we have just created, and if you click on it, you can edit or delete it.
But before we delete the temporary link, we are going to create a new link first. Click on New Links to create a new link:
After you have entered all of the details, click on Publish → Publish Now.
Note: Sometimes Netlify CMS offers you to recover a backup of some entries; I don’t know why this happens. Just click on Cancel if it does.
Let’s repeat this process and create another link. Now, either directly delete the
src/pages/links/link-1.md file inside of VS Code, or delete it via the Netlify admin panel by clicking on it and clicking on Delete entry on top.
For Netlify CMS, it does not matter if you delete links directly inside of your
links folder or via the CMS. Just make sure there is at least always 1 link present in the folder!
After doing this, we should be left with our two links:
If we now open up our application at http://localhost:8888/, we should see both of these links showing up:
Deploying Changes To Netlify
Once you are done with all of this, you can deploy the final project to Netlify either by pushing the changes to GitHub, or by using Netlify CLI:
netlify deploy --build --prodCode language: Bash (bash)
Netlify Identity Integration
To be able to log in to our admin panel on our live site, we need to set up Netlify Identity first.
Open your site on Netlify and navigate to Site Settings -> Identity -> External Providers. Click on Enable Identity:
Next, scroll down and find Git Gateway. Click on Enable Git Gateway:
Now navigate to the URL of your site followed by
/identity – for example: https://app.netlify.com/sites/YourSite/identity
Here, click on Invite users and invite yourself to Netlify CMS. After clicking on the invite link in your email and setting a password, you are now able to log in with your email address on password by using the
/admin route on your live Netlify site.
This should give you a good idea of what is possible by using Astro and Netlify. Even though Netlify CMS is made for blogs mainly, you can still leverage its functionality for other things.
Now, I am by no means a designer, so feel free to modify this app however you wish. (If you do, please tag me on Twitter and share it with me!)
I highly encourage you to give the Netlify CMS documentation a read so that you understand all of the different options you have for modifying your application further.