Table of Contents
Creating a portfolio website is a great way to showcase your work and skills. Using static site generators like Eleventy combined with a headless CMS such as Netlify CMS can make this process efficient and manageable. This article guides you through the essential steps to build a stunning portfolio site with these powerful tools.
Why Choose Eleventy and Netlify CMS?
Eleventy is a flexible and simple static site generator that supports multiple templating languages. It produces fast, secure, and easily deployable websites. Netlify CMS provides a user-friendly interface to manage your content without touching code. Together, they create a seamless workflow for developers and content editors alike.
Setting Up Your Project
Start by creating a new directory for your project and initializing it with npm:
mkdir my-portfolio && cd my-portfolio
npm init -y
Install Eleventy:
npm install @11ty/eleventy –save-dev
Configuring Eleventy
Create a .eleventy.js configuration file to define your input and output directories, as well as template formats:
module.exports = {
dir: {
input: “src”,
output: “dist”
}
};
Adding Content Management with Netlify CMS
Set up Netlify CMS by adding a admin folder in your project. Create an index.html file with the following content to load the CMS:
<!– /wp:paragraph –>
Configure your config.yml to define collections and fields for your portfolio items. For example:
collections:
– name: “projects”
label: “Projects”
folder: “src/projects”
create: true
fields:
– { label: “Title”, name: “title”, widget: “string” }
– { label: “Description”, name: “description”, widget: “text” }
– { label: “Image”, name: “image”, widget: “image” }
Building Your Portfolio Pages
Use Eleventy’s templating system to create a layout for your portfolio items. For example, in src/projects/project.njk:
<h2>{{ title }}</h2>
<img src=”{{ image }}” alt=”{{ title }}”>
<p>{{ description }}</p>
Deploying Your Site
Connect your project to a Git repository and deploy it on Netlify. The platform automatically builds and hosts your static site. When you update content via Netlify CMS, your site updates seamlessly.
Conclusion
Using Eleventy with Netlify CMS provides a powerful and flexible way to build and manage a portfolio website. It combines fast static site generation with an easy-to-use content management interface, making it ideal for developers and content creators alike. Start building your portfolio today and showcase your work with confidence!