After making some blogs, I searched for Boinx and Bryan’s blogs to see if Google already indexed their site by typing in the browser site:http://urlOfTheSite since I’m thinking their site is already running since Dec. 2013 it should be indexed by now, but Google bots doesn’t able to pick thier site. so I linked their sites to my Octopress site and submitted my site to Google Index via Google Webmaster tools https://www.google.com/webmasters/ afterward I have to download the html verification file and uploaded it to my site server and click the verify button. after an hour I checked again my site and my friend’s site and now its already indexed by Google, hoping it will gain some rankings after some time for a chance to be read by other viewers.

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

How to create Jekyll Static Webpage

First we have to install the jekyll gem by typing in the terminal gem install jekyll then we have to create a new folder which the jekyll will generate all the needed files and folder by typing in the terminal jekyll new my-folder-name then you can access the folder by typing cd my-folder-name then ls to see all the generated files and folders

_includes –> this is where you will put your reusable html file (parts of your html codes)

_layouts –> this is where you can find the default.html which will be called by the index.html (can be found at the root folder.)

_post –> this where you can find all of your created blogs

_site –> this is where you can find the generated html file which are rendered by the browser , all the contents inside here should be generated by the jekyll. To add a page inside site folder we should create an html page in the root folder manually, so if we want to create contact.html it should be placed in the root folder of my-folder-name then open the contact.html and before the html code block we should put ‑‑‑ layout: contact ‑‑‑

then on the terminal type jekyll build —watch this will now create contact.html in the site folder and any changes will automatically update the site folder and to add folder in site folder same rules applies the folder should be placed at the root folder, lets say we want to create css folder it should be place in the root folder since the jekyll is running it should create the css folder in the site folder if not you can type in the terminal jekyll build

INCLUDING REUSABLE HTML CODES

All the includes file should be placed in the _includes to be accessible and to include this file we can add inside our html file the code {%include “name of the file” param=“value” %} ex. {% include footer.html param=“value” %}

To run the webpage locally just type jekyll serve or jekyll serve —watch then browse to http://localhost:4000

example of the webpage I built using jekyll http://jayetan.github.io/business-sample/

Adding this page content was not really easy for me probably because I really don’t read the documentation, I was relying on experimentationand testing, I thought pushing new contents was same as in github using git add. git commit and git push Octopress is different you have to use rake generate and rake deploy to update your contents. Sometime this week I’ll be adding more pages for my blogs about what I have learned from this wonderfull company from the day I start training, I couldn’t really remember when is the day I started but its before Feb. 26 so I could say that I’ve training for one month now and so far it really helps me to learn the things I need to learn.