Creating a Highly Customizable Personal Site with Netlify CMS and Eleventy

How it Works

Folder Structure

Netlify CMS

- 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

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

JavaScript Refactoring — Classes and Objects

Sporum: A Ruby on Rails, React project

Top React Hooks — Swipes and States

JavaScript: How Industries Are Using JavaScript To Solve Their Challenges

JavaScript Best Practices for Writing More Robust Code — Arrays and Iteration

Object-Oriented JavaScript — Modules

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

More from Medium

How To Hire ReactJS Developers For Enterprise App Development

React JS for Beginners :)

State of React uncontrolled forms in 2022

The full form of this demo

Roadmap To Become a Web-Developer!