{"id":129,"date":"2026-04-15T12:44:24","date_gmt":"2026-04-15T12:44:24","guid":{"rendered":"https:\/\/www.netlifycms.org\/?p=129"},"modified":"2026-04-15T12:44:24","modified_gmt":"2026-04-15T12:44:24","slug":"jekyll","status":"publish","type":"post","link":"https:\/\/www.netlifycms.org\/docs\/jekyll\/","title":{"rendered":"Jekyll"},"content":{"rendered":"

Introduction<\/h2>\n

This section will help you integrate Netlify CMS<\/strong> with a new or existing Jekyll project.<\/p>\n

Jekyll <\/strong>is a blog-aware static site generator built with Ruby. Github Pages are powered by Jekyll, making it a popular choice for developer blogs and project pages.<\/p>\n

If you’re starting a new project, the fastest route to publishing on a Jekyll website with Netlify CMS<\/strong> is to deploy a template on Netlify.<\/p>\n

Setup<\/h2>\n

This guide will use the blog you get if you follow the really excellent official Jekyll step by step tutorial as a starting point. If you’re new to Jekyll – I recommended you start by following the tutorial so you know your way around your new blog. Otherwise you can clone this repo and checkout the without-cms<\/code> branch.<\/p>\n

\"\"<\/p>\n

Add Netlify CMS<\/h2>\n

Add admin\/index.html<\/h3>\n

Create a file admin\/index.html<\/code> in the root of your repo – it should look like this:<\/p>\n

\n
<!-- admin\/index.html --><\/span>\r\n<!<\/span>DOCTYPE<\/span> html<\/span>><\/span><\/span>\r\n<<\/span>html><\/span><\/span>\r\n  <<\/span>head><\/span><\/span>\r\n    <<\/span>meta charset<\/span>=<\/span>\"<\/span>utf-8\"<\/span><\/span> \/><\/span><\/span>\r\n    <<\/span>meta name<\/span>=<\/span>\"<\/span>viewport\"<\/span><\/span> content<\/span>=<\/span>\"<\/span>width=device-width, initial-scale=1.0\"<\/span><\/span> \/><\/span><\/span>\r\n    <<\/span>title><\/span><\/span>Content Manager<\/<\/span>title><\/span><\/span>\r\n    <!-- Include the identity widget --><\/span>\r\n    <<\/span>script src<\/span>=<\/span>\"<\/span>https:\/\/identity.netlify.com\/v1\/netlify-identity-widget.js\"<\/span><\/span> type<\/span>=<\/span>\"<\/span>text\/javascript\"<\/span><\/span>><\/span><\/span><\/<\/span>script><\/span><\/span>\r\n  <\/<\/span>head><\/span><\/span>\r\n  <<\/span>body><\/span><\/span>\r\n    <!-- Include the script that builds the page and powers Netlify CMS --><\/span>\r\n    <<\/span>script src<\/span>=<\/span>\"<\/span>https:\/\/unpkg.com\/netlify-cms@^2.0.0\/dist\/netlify-cms.js\"<\/span><\/span>><\/span><\/span><\/<\/span>script><\/span><\/span>\r\n  <\/<\/span>body><\/span><\/span>\r\n<\/<\/span>html><\/span><\/span><\/code><\/pre>\n<\/div>\n
Add admin\/config.yml<\/h3>\n
Create a file admin\/config.yml<\/code> in the root of your repo – it should look like this:<\/p>\n
\n
# config.yml<\/span>\r\n\r\nbackend<\/span>:<\/span>\r\n  name<\/span>:<\/span> git-<\/span>gateway\r\n  branch<\/span>:<\/span> main # Branch to update (optional; defaults to master)<\/span>\r\nmedia_folder<\/span>:<\/span> 'assets\/uploads'<\/span>\r\ncollections<\/span>:<\/span>\r\n  -<\/span> name<\/span>:<\/span> 'blog'<\/span>\r\n    label<\/span>:<\/span> 'Blog'<\/span>\r\n    folder<\/span>:<\/span> '_posts\/'<\/span>\r\n    fields<\/span>:<\/span>\r\n      -<\/span> {<\/span> name<\/span>:<\/span> Title }<\/span><\/code><\/pre>\n<\/div>\n
Enable authentication for CMS users<\/h3>\n
Netlify CMS stores content in your online Git repository. Therefore, to make content changes, users need to authenticate with the corresponding Git provider to prove that they have read and write access to that content.<\/p>\n
Follow the directions in the Introduction section to enable Netlify Identity and Git Gateway services<\/a> for the backend, then add the Identity widget<\/a> to render a login portal on the frontend.<\/p>\n
CMS Configuration<\/h2>\n
Blog Collection<\/h3>\n
We’ll start by updating the blog<\/code> collection. Blogging is baked into Jekyll, and the _posts\/<\/code> directory uses some special conventions we’ll need to keep in mind as we configure Netlify CMS. Copy and paste the following into your config.yml<\/code>.<\/p>\n
\n
collections<\/span>:<\/span>\r\n  -<\/span> name<\/span>:<\/span> 'blog'<\/span>\r\n    label<\/span>:<\/span> 'Blog'<\/span>\r\n    folder<\/span>:<\/span> '_posts\/'<\/span>\r\n    create<\/span>:<\/span> true<\/span>\r\n    slug<\/span>:<\/span> '{{year}}-{{month}}-{{day}}-{{slug}}'<\/span>\r\n    editor<\/span>:<\/span>\r\n      preview<\/span>:<\/span> false<\/span>\r\n    fields<\/span>:<\/span>\r\n      -<\/span> {<\/span> label<\/span>:<\/span> 'Layout'<\/span>,<\/span> name<\/span>:<\/span> 'layout'<\/span>,<\/span> widget<\/span>:<\/span> 'hidden'<\/span>,<\/span> default<\/span>:<\/span> 'post'<\/span> }<\/span>\r\n      -<\/span> {<\/span> label<\/span>:<\/span> 'Title'<\/span>,<\/span> name<\/span>:<\/span> 'title'<\/span>,<\/span> widget<\/span>:<\/span> 'string'<\/span> }<\/span>\r\n      -<\/span> {<\/span> label<\/span>:<\/span> 'Publish Date'<\/span>,<\/span> name<\/span>:<\/span> 'date'<\/span>,<\/span> widget<\/span>:<\/span> 'datetime'<\/span> }<\/span>\r\n      -<\/span> {<\/span> label<\/span>:<\/span> 'Body'<\/span>,<\/span> name<\/span>:<\/span> 'body'<\/span>,<\/span> widget<\/span>:<\/span> 'markdown'<\/span> }<\/span><\/code><\/pre>\n<\/div>\n
A few things to note.<\/p>\n