How to create HTML version of the page layout created in SharePoint Designer?

Question

When creating a new page layout using Design Manager, it creates 2 files (.aspx and .html). The HTML version is what I edit to add more code snippets. I don't like the layout for the basic Enterprise Wiki from Design Manager so I created a new page layout using SharePoint Designer. How do I create the HTML version so that I could insert code snippets from Design Manager?

The new page layout created from Enterprise Wiki template using Design Manager displays the page title 2x, while the category and rating are displayed below the page content rather than on the right side.

Basically, I'm trying to figure out how to add a web part (to display the pages) on the right pane below the Page Rating / Categories

Answer 1

This is a workaround:

1. Create new page layout using SP Designer (i.e. test1.aspx)
2. Create new page layout using Design Manager (i.e. test2.aspx and text2.html)
3. Modify the text2.html by adding any snippet generated from Design Manager. I usually paste it within the PlaceHolderMain to find it easily from the .aspx version.
4. Save text2.html
5. Open text2.aspx, right-click the newly generated snippet within PlaceHolderMain and choose select tag.
6. Paste the copied snippet to test1.aspx

Most snippet works but I still cant get the Content Query to work properly.