Installation

Download and install Node.js: http://nodejs.org/#download Using terminal, enter the following command:

sudo npm install -g punch

After the installation, create your folder by typing:

punch setup myFolderName

Go to the myFolderName/default directory and start the server by typing:

punch s

then open your browser and visit: http://localhost:9009

You will now see the Punch tutorial on how to add and edit your webpage. just follow the instruction and you’ll be able to create your first webpage easily

---

Punch Structure (Folders and files)

config.json –> this is where you can configure your punch settings.

templates –> this where you can find the .mustache files by default is has three .mustache files:

_layout.mustache
_header.mustahce
_footer.mustache

you can add more if needed. here are the basic tag to include the .mustache file in one mustache file.

    {{> header }}
    {{> home }}
    {{> footer }}

this is where you can also controll your site appearance and all your assets should be place ex. css folder, images, javascript.

output –> all the output html files, assets,images, javascript resides here you cannot modify these files since it is automatically generated.

contents –> this is where you can add contents/pages to your sites to add just create a folder name with underscore first then the name ex. _about then inside this folder create an intro.markdown file then type or paste your contents inside it. you can also add contents to your site by using the shared.json file open it and add your contents ex.

"navbar": [
        { "label": "HOME", "href": "/" },
        { "label": "ABOUT", "href": "/about" }]

and to include this just open your .mustache file in templates directory and use this ex. code

    <nav>
        <ul>
            {{#navbar}}
                <li><a class="navLinks" href="{{{href}}}"></a></li>
            {{/navbar}}
        </ul>
    </nav>

this will create an navigation links to your site.

---

Problems Encountered(Ubuntu)

If you follow the punch installation guide these are the possible errors you may encounter

Installation –> you will receive an error using this command npm install -g punch The solution, use sudo npm install -g punch

Running punch server –> if you follow the instruction Go to the mysite directory and start the server: cd mysite; punch s the punch server won’t run. The solution, access the default folder where you can find the config.json and run punch s in the terminal

Contents Rendering <– if you paste a big chunck of html codes in your intro.markdown it will be generated by punch as a plain text in the output. The solution, use the tag with three parentheses to get the unescaped output ({{{intro}}} instead of {{intro}}) or try to paste smaller pieces of html codes and refresh your browser each time.

tags: ubuntu punch install, punch s error, punch render problem, ubuntu punch laktek error, punch error solutions, punch displays as plain text