DEV Community

DaNeil C
DaNeil C

Posted on • Updated on

Github Pages??

Did you know that GitHub has this thing called "GitHub Pages"? I had heard about it in passing before but recently heard about it again from my coding bootcamp as a resources to post a website. I like this idea. I am already using GitHub as a source to hold code in general so why not a website about the code I am working on, right?

Alt Text

Getting Started

So, getting started was a bit confusing for me because I had not worked on GitHub in a while.
Alt Text
Clearly my GitHub green boxes are lacking but that is about to change.

It is really as simple as creating a repository with your username and "github.io" like "username.github.io". I didn't do anything specific outside of this. I didn't even create a README originally just to see how it worked, but added one later.

Once the page is setup you just clone it to your computer with the standard

git clone https://github.com/username/username.github.io

and then create an index page. I did mine in the terminal via these two commands :

cd username.github.io
echo "Hello World" > index.html

Once the page is in your folder via the next 3 commands:

git add --all
git commit -m "Initial commit"
git push -u origin master

I Had issues here....

For me this didn't quite go as smoothly on my computer side of things... I ended up going I ended up needing to do a few more commands on my computer.
I had to remotely add the origin via

git remote add origin git@github.com:caffiendkitten/caffiendkitten.github.io.git

and that worked enough for me. I was then able to open it up in my VSCode and start coding.

Alt Text

And here is
Alt Text
Now it's time to start working on things and uploading information.

NOTE:: The time between pushing code and the site updating is a bit laggy so be patient with it.


Happy Hacking

References

  1. https://pages.github.com/
Please Note that I am still learning. If something that I have stated is incorrect please let me know. I would love to learn more about what I may not understand fully.

Top comments (6)

Collapse
 
austinspaeth profile image
Austin Spaeth

I knew about Github pages, but never knew you could have a page at the root level. Thanks for sharing!

Collapse
 
caffiendkitten profile image
DaNeil C

Apparently so. I'm still playing with it to see what I can get it to do. It looks like it can be a full hosting space as long as the files are there on your github

Collapse
 
austinspaeth profile image
Austin Spaeth

Yeah, as long as it's a front-end application, then it will work great. I use it a lot to demo my applications to people. The biggest downfall I've found is not being able to use routing due to the inability for it to fallback to the index.html for 404 errors. Good luck with your explorations!

Thread Thread
 
danmba profile image
Dan

I use react-router with hash routing and it works fine. Your url will look like β€œmy.github.io/repo-name/#/my/route” and everything after the β€œ#” is your route.

Thread Thread
 
caffiendkitten profile image
DaNeil C

Thanks for this tip! I was hoping to use react-router.

Collapse
 
zenulabidin profile image
Ali Sherief

It's really great for people who can't get a hosting provider for whatever reason.