Creating a Highly Customizable Personal Site with Netlify CMS and Eleventy

How it Works

Folder Structure

“_data” serves as the “database” that houses all our settings and page content. Each json in this folder can be accessed by our Nunjucks templating engine directly.

Netlify CMS

To give an idea of how things work with Netlify, we can take a look at the admin/config.yml file. Lets look at the “sections” collection which houses are configurable content on our pages.

- name: "sections"label: "Sections"folder: "_data/sections"format: "json"create: trueslug: "{{slug}}"identifier_field: sectionGroupNamefields:...
- label: "Projects"  name: "recentprojects"  widget: "object"  fields:  - label: "Card"    name: "cardlist"    widget: "list"    fields:    - { label: "Title", name: "title", widget: "string" }    - { label: "Image", name: "imagelink", widget: "string" }    - { label: "Link", name: "link", widget: "string" }    - { label: "Description", name: "description", widget: "string" }    - label: "Tag"      name: "taglist"      widget: "list"      fields:      - { label: "Tag Text", name: "tagtext", widget: "string" }      - { label: "Tag Class", name: "tagclass", widget: "string" }
{% for card in activeComponent.cardlist %}
...
{% endfor %}

Deploying

Create an account on https://www.netlify.com/ and create a new site where you link it to your github repository (I recommend having a private repository since you are storing personal site info in the repository itself).

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kacey Cleveland

Kacey Cleveland

Software Developer by day, Side project enthusiast and gamer by night