Convert Responsive Site to 11ty

This isa series of videos that walk through the process of moving your site from the HTML/CSS Responsive site to an 11ty site.

Part 1 Set Up

Creating the Eleventy Repository and setting up GitPod as the editor.

Part 2: Create Markdown Files

Create a Markdown file for each of the HTML files in your site. In this step you just need to create the files and add some front matter data.

Part 3: Base Template, Passthrough files and Content

In this step we set up the base template (base.njk), copy over the passthrough files (CSS, JavaScript and images). Then we move the content from each page into the Markdown files created in step 1.

After the Template and Content is moved over, there are some changes that need to be made. In the video you can look at about 10:40. The changes are:

• Remove all spaces between HTML elements. No blank lines. If you have them then the Markdown won’t render properly.
• All paths need to start with / and remove the .html
  • href=”file.html” changes to href=”/file”
  • src=”images/file.jpg” changes to src=”/images/file.jpg”

To make this process faster and more accurate you can use a global find and replace.

Step 4: Testing

In this video we go through cleaning up some more parts and committing our changed files and syncing to GitHub.