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/