How to write your first post on Jekyll
Tags: tutorial, git, opensource, webdev
Published: 2020-11-03 03:44:55

Hola amigos!

![Writing post on Jekyll](https://miro.medium.com/max/820/0*N8RG95bKJnnF-wpL.png)

Hope you learnt something new in my previous post- [How to deploy your Jekyll Website on Github pages](https://dev.to/vkassingh/how-to-deploy-your-jekyll-website-on-github-pages-3gl).

This post is also a HOWTO Tutorial in which I will help you to write your first post on your Jekyll static site on Github.

__➜ We learnt how to install Jekyll with the help of ruby installer using Git.__
__➜ We learnt how to deploy your Jekyll site on GitHub pages using Git.__
__➜ This time we will learn how to deploy your first post/project on the Jekyll site using git.__ 

NOTE: Now before writing posts on Jekyll, you must know about the files and folder present in the Jekyll blog folder that is actually stored on your system.

__➜ _post - This folder will contain all our posts.__
__➜ _site - This folder will contain the final/finished version of our blog.__
__➜ Index.html -It is the home page of our website.__
__➜ Gemfile - This file will store all the dependencies for our blog.__


NOTE: Each page on Jekyll site contains FRONT MATTER. 
__FRONT MATTER contains the information like when the page was created, its title, author etc.__ So it basically gives info about our page.

__Lets write our first post!__
 For this you need:
⚡ Github account
⚡ Jekyll blog -If you want to create your demo Jekyll blog/ static site. Then refer to my [previous post] (https://dev.to/vkassingh/how-to-deploy-your-jekyll-website-on-github-pages-3gl).
⚡ Git installed on your system.

➜ So hope you have created your Jekyll blog with the help of my [previous tutorial](https://dev.to/vkassingh/how-to-deploy-your-jekyll-website-on-github-pages-3gl).

➜ Now switch to the folder where you want to do your complete work. So I will be switching to my __Documents__ folder._

__cd Documents__

➜ Then again,  switch to the blog folder- vikasblog
__cd vikasblog__

➜ Open the vikasblog folder using your text editor.

➜ Create a new file within __-post__ folder.

➜ Properly edit the Front matter. Add the content you want in your post.
![Front matter](https://dev-to-uploads.s3.amazonaws.com/i/7hyg9u4fm455ruzpixfy.jpeg)

➜ Save this folder as __.markdown__ extension
   Example: __newpost.markdown__

➜ Now open Git and switch to the blog folder 
__cd Documents__
__cd vikasblog__
__cd _post__

➜ Switch to the GitHub pages branch
__git checkout gh-pages__

➜ Stage the changes.
__git add .__

➜ Commit the changes
__git commit -m "first-commit"__

NOTE: Meanwhile you can check the status of the current repository.
__git status__

with __git log__, you can check the entire history of the current repo.

➜ Finally, push the changes.
git push origin [branch-name]
__git push origin gh-pages__

➜ Now use this command to see your new post on your localhost 4000
__jekyll serve__

➜ Now go to this address to see your first Jekyll post.
Link: (https://localhost:4000/)

__Now you can see your Jekyll blog on localhost: 4000. Congrats, we did it together. If you get stuck on any point, ask in the comments sections.__

Connect with me on
Instagram
https://www.instagram.com/p/CFqrvobFlsL/?igshid=j3lhn2qi3og0

Twitter
https://mobile.twitter.com/_SinghVikas_