People create blogs and start writing posts frequently in the beginning and stops it gradually to zero. I would say there are 3 types of people who write blogs.
- Who sees the platform as fresh, creates a blog starts writing a post or two then forget
- Who setup a blog, spending more time on tweaking the layout of the site than actually writing
- Who doesn’t create a blog, opt the ready-made one available in the market such as Medium
The people who setup static websites falls in the first two categories.
I feel there should be a medium to write something like a paper, notebook, diary to convert a thought that flash in our mind to a blog post. When the gap increases in converting a thought into writing, probably it will never be written. The medium is the main obstacle that reduces the frequency of blog posts and makes to zero at the end.
I started writing in this blog in a text editor, push it to git. The main obstacle is that, I have to write it only on my personal computer, where git installed. When I don’t have a computer with git installed, the gap increases. I want to get rid of this.
Found Netlify-CMS as the better alternate to write blog posts, preview then publish.
I would wanted to write my experience in setting up Netlify-CMS for this blog.
- This post is mainly for the people who already uses Hexo platform for generating static websites.
- I use Hexo-Theme-Next, which is the most used theme in Hexo platform, the post is 100% compatible for this theme, may be used as base for other Hexo themes as well.
There is an article written in Netlify’s website, that explains how to create a blog using Hexo and deploy with Netlify. Refer this link if you are going to setup a new blog using Hexo or going to use Netlify as CI for building your blog.
Configuring Netlify to build a static site is very easy; which also makes easy to configure Netlify-CMS.
If you depend on other CI like Travis, Circle-CI or GitLab CI to build your sites, you need to use different authentication backends, which I have not tried yet.
The following steps to be enabled for enabling Netlify-CMS.
- Enable Netlify Identity Services
- Enable Git Gateway
- Configure CMS admin panel
- Build Site without Bugs
- Cloudinary as CDN for media
There would be few lines of codes to be added in
<body> sections, in order to enable Identity services.
There are multiple ways to do it, I prefer the easiest way by updating it in the netlify settings. Go to https://app.netlify.com/ select your project name > Site Settings > Build & Deploy > Post processing > Snippet injection > Add Snippet, then add the following codes in Head and Body sections.
The outcome should look like this.
Netlify Identity Services to be enabled for adding users and to enable authentication to them. Go to Settings > Identity > Enable Identity
You may add Github / GitLab / BitBucket / Google as external providers, if you or your users want to login any of these services for writing posts.
Git Gateway connects the site to the git provider’s API. This should be enabled in the Identity > Services section.
There would be small changes required in the site contents, which would help to setup the Front-matter.
Create a folder called admin under the source folder and add the following two files in it.
This file is used for displaying the content management system. Copy the following code and put it in index.html file, without making any changes.
This file is used to configure the Front-matter of the blog posts. There are few modifications needed on the code, based on your requirement.
I have tried explaining each part of the above code, which may helpful.
||Keep it default as
||Update the branch name where the site contents / source code is saved.|
|publish_mode: editorial_workflow||Refer this link for detailed explanation. Editorial Workflow works only for GitHub as of now. Comment or delete this line if you are using other hosts such as GitLab or BitBucket.|
|media_folder||This is where the images are stored in the source of the site. The default folder for hexo is located at
|public_folder||This is where the images are available after building the site. The default folder for hexo is located at
|collections||Collections are explained very well here. You can keep the source code without any changes, which works well for almost all the hexo themes. You may add additional collections based on the requirement.|
Netlify CMS is following different way in creating a draft post and preview it using
editorial_workflow than Hexo is designed for drafting a post. It creates a pull request from the existing repo for each blog post. It builds the site immediately and available for preview in a unique URL. Once the post is made Ready and Published, Netlify-CMS closes the pull request by merging the changes to the branch where the source is saved and deleting the branch made by pull request.
Editorial Workflow i.e., creating a pull request / merging it back is applicable only for Github. GitLab and BitBucket works differently.
You might have used
hexo g or
hexo generate command to build the site. Though, the CMS wouldn’t load. Refer the following portion that fixes a bug.
I had an issue after making all the above configurations and I was unable to access the CMS page by visiting /admin page. Found that, the
source/admin/config.yml is renamed as
public/admin/config.json with some modification after building the site. This can be fixed by adding admin folder contents in the
skip_render option of hexo config.yml file.
This section is optional one.
You can add build commands in the Site settings of Netlify page. However, you may configure additional steps by creating
netlify.toml file in the root of the site folder.
This file would override the settings, that you mention in the netlify setting page.
This section is optional one.
Hosting images in the git repo is a bad idea, as the repo size would gradually increase when new posts are added with new images. Also GitHub started providing free private repositories, you might want the source of your site contents to be hidden from others. So, I would suggest using http://cloudinary.com for hosting the site images.
You need to create a free account from cloudinary and get the required details from the dashboard page. Then configure the
source/admin/config.yml file as like below; refer lines between 7 and 13.
Documentation on configuring netlify with clouodinary is available here, if you wish to tweak further.
- Having a proper CMS setup would help to make the writing easy and spontaneous.
- Need not to depend on the personal computer with git and hexo configured to push the commits or previewing the changes.
- It helps to focus more on writing than tweaking the existing layouts.
- I might need to explore the options to create custom widgets to include Tag Plugins for Hexo and Tag Plugins for Next
- I might need to find a way to tweak the preview of markdown in the CMS portal, which is not in sync with the site.