In this two-part series, I'm going to cover How I created my blog using NuxtJS and NetlifyCMS.
Creating a blog with CMS like WordPress is quite an unwieldy task. I am not saying WordPress is garbage, it's a great tool for creating websites as 37% of websites in the world are using it. But I want something with fair performance, security, and price. So this stack is the best option for me. Read this blog for detailed reasons.
To set up a blog with NetlifyCMS all you need is a Netlify and a GitHub (or GitLab or Bitbucket) account.
Create a NuxtJS app using create-nuxt-app
npx create-nuxt-app <app-name>
cd <app-name>
npm run dev
In static
directory add a new directory named admin
and add an HTML file named index.html
with the following content -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Content Manager</title>
<!-- Include the script that enables Netlify Identity on this page. -->
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
<!-- Include the script that builds the page and powers Netlify CMS -->
<script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>
Add another file named config.yml
which contains all the configuration about your model and collections.
backend:
name: git-gateway
branch: master
media_folder: static/img
public_folder: /img
collections:
- name: "blog"
label: "Blog"
format: "json"
folder: "assets/content/blog"
create: true
slug: "{{slug}}"
editor:
preview: true
fields:
- { label: "Title", name: "title", widget: "string" }
- { label: "Publish Date", name: "date", widget: "datetime" }
- {
label: "Featured Image",
name: "thumbnail",
widget: "image",
required: true,
}
- { label: "Body", name: "body", widget: "markdown" }
Push the code to GitHub. Now create a new website on Netlify using your GitHub so that whenever you push to the repository Netlify will automatically fetch the new content from the repo and build the latest version of your website, this is called Continuous Deployment.
To access the CMS you need to enable authentication in your netlify website. Go to your netlify dashboard and select the website you have created.
Now go to https://<your-website>.netlify.app/admin
you'll be prompted to log in. Create your account and set the registration option to invite-only (as in step 2). Log in with your credentials and create a new blog post and publish it.
Now do a git pull
to fetch the latest posts from the repository. You can find the blogs in the assets/content/blog
directory of your project.
In the next part, we'll see how to integrate the content in NuxtJS to show on the website.
Here is the second part of this blog.
I have also created a repository to get you started with the NuxtJS blog.