How to sync files and folders with Github repository – Tutorial 1.2

ArticlesBlog

Written by:


hi guys this is Sharath again, so in my
previous tutorials I showed you how to create a website and how to host a
simple website on github pages so it was so simple that it just had one file so
if you want to see it in my repository test it just have one final called
index.html and I’ve a CNAME to redirect it that’s all so what if you have more
files maybe CSS files JavaScript files or image folders so how to upload them
but obviously you don’t have a direct upload option in github but you can do
it using an application called Github Desktop. So I will leave the link in the
description so you have to go to the link and download it for your desktop or
Mac and install it so once you have installed it you should get something
like the one I have here a blank application and what you should do is
you have to go to the options and you actually have to log in with your
credentials so add an account and give your username and password the one you
used for github. Okay so now what you can do is you can create a repository using
the plus symbol here you have create options selected and if I want I can
shown the ones I already have so you have seen that I have test, redgadget, emerald and contact so those are the ones I have in this repository so
these are the ones so they are the ones showing up here if I want I can clone
them to my local computer or if I want to create a new one I can name something
maybe I want to create a new one and have all the files inside it and host it
on the website. So let’s name it my first website so call it anything doesn’t
matter so whatever changes you make inside this folder
be reflected in the repository so let’s create it so it is created so what I do
is I’ll see where it is created, I have to open it in the Explorer so it has
created in this folder actually it’s in users/myname/document/github/MyFirstWebsite/ and it has already some files they are .gitignore I guess so you don’t
have to worry about them you can add any number of files here and sync it with
your repository so once you are done let’s add a simple file just to show how
it works you know text redgadget and just a test
ok so save it shows it so we just have one text file and let’s close this so
here if you come to the changes tab here on the top you see that it shows you
what change you just did you added a text file and you just entered “just a
test” so you have to enter some summary maybe you added the text file don’t
really have to do this and commit so once you commit you have to publish it
here usually this icon will be sync become same once you publish it okay
maybe it’s asking for a description of anyway give a repository let’s just give
it as new report so let’s see what happens so it is syncing now okay so let’s go
back to the repository and see if that has changed here so if you see here I
have a new MyFirstWebsite repository and if I open it I should have the test file
redgadget.txt and there it is just a test okay so we successfully
synced a text file what if we have folders will they sync too? Yes they will
and what I will be doing is I’m going to sync a full website which has folders
and images and everything to this repository and see if that is going to
reflect as a website and make sure that you do go to gh-pages branch for now it
doesn’t have any gh-pages branch we can create it even through the application
if you would like to so click on this branch kind of thing here icon and
create a new branch gh-pages so it will be created so once we have gh-pages
branch here we can commit any changes to that branch so now let’s have a full
website files maybe a html5 files where can I get that what I prefer is html5up.net so I will leave the link in the description and they have a number
of websites here and you can download any of them whichever you like what I
like is the first one called hyperspace and I have opened the live demo here so
this is how it looks like fairly simple it has a nice scrolling effect and it
has everything I wanted to so I’ll just download it and see what
files it’s gonna is going to have okay now that the download is complete I’m
gonna open it up so it has some folders called images assets it has some files
what I’m going to do is extract them all to some folder here download folder so now I’m going to copy all the
extracted files I’m going to paste it in the you know folder that we synced so this is the folder it just has redgadget.txt so I’m going to copy them all okay
now that the changes are made it will reflect the changes you can see that you
have added so many things there are so many files inside it is showing
everything so make sure you are in gh-pages branch and hit commit okay so
now it is committed just publish syncing it might take a while because you have
so many files so the blue bar here shows the progress so once I’m done syncing
the files I’m going to go back to my repository to check if they have come up.
Okay so I should have all the files that I just synced let’s refresh. Okay it’s
not showing it yet. Let’s see if this has synced okay it’s taking time to sync okay oh I’m in the last branch
okay go change to gh-pages, I’m sorry okay now it has. So what I will do is I’ll see
if this has been hosted as a website let’s see and there you, go you have your
own website which you just synced you just created it is hosted in this URL if
you want to change it to some other custom domain name or custom URL you can
refer to my tutorial 2 or 3 maybe I will leave the link in the description
so you can watch that to change it and you can change these things whatever the
name and everything it has images and everything and make it your own website
so I hope you liked the video please hit thumbs up and subscribe I’ll be doing a
lot more of these, bye bye

26 Replies to “How to sync files and folders with Github repository – Tutorial 1.2”

  1. Kola Bhargav says:

    Can we host a WordPress Website using GITHUB…???

  2. No Coronation says:

    Excellent tutorial! Thank you!

  3. Deepak Yadav says:

    You are simply AWESOMEEEE…. Thanks a Ton…. Keep sharing your knowledge, which helps more to build a wonderful career… Cheers…

  4. Naveed Haque says:

    I followed these steps for the Spectral theme, for some reason it isn't working. Any idea why?

  5. Steven Waggoner says:

    I followed your tutorial, but the css did not link with the html. What can I do to fix this? It has worked perfectly before I tried to upload it here.

  6. Sandy says:

    How is Github different from Dropbox. Is it just a file storage repository ?

  7. Rhonda Lee says:

    Hi, I did everything but my site doesn't show up as a link in the settings tab. Can you please help?

  8. Alexander J.Bubalo says:

    hi , thank you for explaining these small things but interesting, i would like to ask to upload a wordpress in a github the same as you were doing – how to do it …

  9. Amber Hasan says:

    Your tutorials helped me FINALLY make a website. I tried for so long and I was so tired. You're the ONLY REASON I COULD DO THIS. THANK YOU SOOOOOOO MUCH.

  10. salvador lateef says:

    hello , github desktop is not installing on my laptop, its a windows 10 laptop, how do i solve this problem?

  11. S P says:

    tnx for help bud.

  12. mers 89 says:

    Great precise, short video. Thanks

  13. Puk Ka says:

    Hello,

    You created gh.pages as another branch? Why?
    Can we not keep using master? Or is this for back up?

    Thanks in advance
    Nice Tuts

  14. Amr Nabil says:

    https://mounirawy.github.io/mobmenu/

  15. Fist Last says:

    github desktop doesn't recognize the css file I made for my website. It's there in my repository folder but the css doesn't seem to be working on the website. Can somebody help? I figured it was a problem with the naming of the css file so I tried css.css styles.css index.css … and nothing seems to work

  16. Mohammed Innat says:

    You're awesome man. Thanks thousands times 🙂

  17. Deepak G says:

    Great lectures..

  18. Hr2393 _Official says:

    Thanks for the tutorial I just have one question that anyone can help me with. I'm trying to upload an HTML file but don't know where to put it when I upload other files such as the HTML themes they show up when I commit and check my website. I've done everything right. The file I'm trying to upload is of a 3D model and saved as an HTML file anyway to upload it and show on my site?

  19. Alexander Brogna says:

    why dont my fucking folders ever show up? why is github such a bad application?

  20. Rahul More says:

    can i do this without that github app??

  21. RUSKY GAMING OFFICIAL says:

    Hello sir. can I ask something.
    what if I want to link my site on github? how would I do it?

  22. faraz khan says:

    File are being added through app but when ever i click on site it appear with the name of reository am including an html file .. but its not being displayed..:( tough luck.. i have to submit the assignment

  23. Yash Mishra says:

    helped alot…thnx..!!

  24. Learn German says:

    Danke – sie sind super

  25. ALEX BISSONG says:

    Hello Web Jada, you are really doing a great job keep up bro. please, I have some issues with setting up my GitHub repository. I am taking a course in web development with Coursera. When the course was put online Github had GH-pages but as of now no more. I have tried but with no success

  26. roaringrook creations says:

    there is no sync button on github app ples help

Leave a Reply

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