How to create Jekyll blog using Github Pages – Tutorial 4

How to create Jekyll blog using Github Pages – Tutorial 4


Hi guys, this is Sharath again. So far you have
seen me talking about how to host a website on Github and how to use the custom domain
and how to add subdomains to it and everything. So what if you want to host a
blog on Github maybe something like the one I have .
blog.webjeda.com, so it is a website.. it’s actually a blog it has a nice navigation
and it is responsive as well, if you like minimize it you’ll see that it adapts to the screen size. So-so how
to create this on github? You don’t need any Command Line Interface or anything like
that for posting the blog just follow the steps first thing is that you have
to log into your Github repository next thing in a different tab open jekyllthemes
.org. Here you have a lot of Jekyll themes what is Jekyll? Jekyll is as a static
page generator for github so you’ll learn about it a lot when you go through it. I’m
not going to explain it here. So maybe select one of those, selection of the
themes here which you may like or which your blog should look like.. For now I will use something that I have
used already, the one I’ve used is Emerald so let’s go to emerald and see the demo
and then open up demo in a different page. So here.. so this is the one I used and
changed it however i wanted. So here you have a nice navigation bar and
everything looks good so how to get this? So first thing is you can search Emerald
by its name in the search tab here or if they have provided a link
like this project on Github, you can go to that as well. For now I’m going to
search here “emerald” so here is. So the first link says a
minimal and mobile first blog theme for Jekyll. So this is the one. Let’s see what files it has these are the
files the blog is using actually. So here what if you want the same files on your
repository? All you have to do is fork it. So here on the right right hand corner
you see that.. on the top corner actually you see fork button just click on it and
wait for a while what fork will do is it will copy the
whole thing to your repository so if you see the path here it’s redgadget/emerald. So it has copied to your repository and you want a double check
you can go to your respository and you have a new new forked repository called emerald, you can open it up, you don’t have to do any.. you don’t have to do much
changes here if it has a CNAME you just have to remove it. Otherwise everything is fine. So.. what you
have to do is you have to host.. if you want to host as a project you may have to
change it gh-pages and see … gh pages and maybe I will change it to the default branch so here go to the branches change it to gh pages and update “I understand” .. ok so now when you come to
the code it will be in the gh-pages branch all the time and let’s see if it has
hosted. Go to the settings and see where it has hosted it.. ok let’s go to the link ok now.. for now
it is not maybe I had to wait for a while.. i’ll come back in some time to
see if this has changed to my emerald website. So after waiting for a long time like 15-20 minutes. I finally got it, the emerald blog in this
URL. So these are the files which I have in the repository responsible for
that blog. So if you still don’t get the.. get the blog in this URL, you may
have to change something in configuration.yml file. So here you see
the baseurl which is /emerald that means that it is gonna it’s gonna use the URL Github..
“username.github.io/emerald/” so that’s what it’s going to use. So you may
copy some other theme, it may has a different baseurl and it may not
show up and one more thing is.. So in your gh-pages branch you may have a CNAME
file which is making it to resirect to some other website so you may have to delete
that CNAME or just go.. open the CNAME and change.. I mean delete all the contents
in it and then should work. So try it and see what works for you and one more
thing is you can change anything you want to make it more personal so you see
that you have the color green here you can change it to some other color you
can change the logo and everything here so you can make it more personal like i
did it in webjeda. So I’ll quickly show you one thing I can really change so there’s
this green color very so this is the theme color which it is using for the navigation bar typography and even the navigation and even the footer using the
same color so what i can do is i can change that into some other color, maybe so this is where I choose colors from probably want something like.. this is… this looks good something Rebecca
Purple.. okay so you have to go to the repository make sure you’re in gh-pages
branch. So the main color is in base.scss know this because i have done it before
so you may have to search for it . So here I know this is green and i’m going to
change it to the coloe I want that is Rebecca Purple and commit changes. So it may
take a while to show up the changes but let’s see not yet i’ll come back in a while and
see if it has changed ok so now you see that the whole team
color has changed into a Rebecca Purple. So this is how you can edit it and you can
change everything make it more like what i have here the
webjeda blog so this is how you create a blog on Github. So if you find my video was helpful hit
thumbs up and subscribe, I’ll be doing a lot more videos like this. See you soon.
Bye Bye

28 thoughts on “How to create Jekyll blog using Github Pages – Tutorial 4

  1. wonderfull idea , i used fork and made this site https://altao2016.github.io/myphotorama/ i will se now how to upload jekyll themes it s not the same as to fork it , … if i change pictures and something i need to change it in repository or upload it somehow …or put a new page f.ex blog page one new ???

  2. Hey +WebJeda thanks for the video. I have created the blog successfully but I can't see the the same site as you showed in the video – this is the link for my blog https://sagpat.github.io/

  3. when im folowing your step, https://lilikandrian.github.io/emerald, waiting 30mnt, and edit some file with gh-pages.

  4. Could you help me understand when I should be using gh-pages and when I should be using the master branch?

    Also, thank you for this amazing tutorial.

  5. Hey I need major help. So I have created a website using jekyll and gh-pages with github. I currently have everything working. Take a look. https://github.com/jose-reyes-9/school-amp-1 The only problem is when I try to change the url to a custom url. I am not sure what goes on, but it starts giving me build errors. Do i need to change the base url after this??? Please help me anyone. I need to know how to get a custom url on the github repo that I have linked. Feel free to help!!!

  6. Tip: Instead of waiting for 10-15 minutes for the web page to show up, simply change something in _config.yml (like changing the name from emerald to something else) and save it. GitHub would be forced to update it immediately hence the web page will be up immediately after that.

  7. after forking and then selecting the gh-pages and then settings to get the link …..link is not generated why?????

  8. Nice tutorial , I dont follow one thing –

    Are we supposed to use html5 up templates or jekyll to create a website ?
    Sorry if it's a dumb question but I',m not exactly sure how to choose between the two …

  9. Great tutorial..

    But is it is safe to host a blog using GitHub, because everyone can fork your repository, thus get a clone directly…

    Sry if it's a dumb question…
    But I really don't know…

  10. Nice Videos. I have one question related to the domain names. You have already hosted a website webjeda.com and when you added the blog to this site, how did you change the name to blog.webjeda.com? may be you can share the cname file content. That will be helpful. Thanks

  11. I changed main color in base one but still it is not reflecting..why ? here is the link https://github.com/marshallKR7/emerald

  12. Thanks for these tutorials, they have been super clear and useful. My website is still in progress and it is not yet on my official domain, but as soon as I have something presentable I would like to show you because you are really key in this process.

  13. WOW! That's really a very nice series. Good work. But working with gh-pages we need to wait for 10-15 mins so Are we can change the hosting from github to Shopify or other hosting providers? I mean Why you choose github? Will wait for your reply.

  14. I have forked a theme as specified onto the branch gh-pages. It's been a while around 1 hr that the site link still displays 404?

    Could you please let me know?

  15. Thank you for the tutorial. One question: how do you change the Logo in the main page and the title? Thanks

  16. This site can’t be reached
    iamabhisheknanda.com’s server IP address could not be found.
    Search Google for iamabhisheknanda emerald
    ERR_NAME_NOT_RESOLVED

    i am getting this error after wait upto 20 minutes

Leave a Reply

Your email address will not be published. Required fields are marked *