GitHub Pages
What Are And How to use gh-pages
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kentcdodds/images/548722/labtocat.png)
Kent C. Dodds
@kentcdodds
Marvel Random
Building a sweet library with the Marvel API
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kentcdodds/images/552191/spiderman.png)
Write the Library
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kentcdodds/images/552182/lil_ironman_by_faiien-d5ebi3w.png)
Add A Build
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kentcdodds/images/552186/hulk.png)
Make a Demo
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kentcdodds/images/552188/thor.png)
Enter gh-pages
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kentcdodds/images/552235/octoclark-kentocat.jpg)
What are GH-Pages
"Websites for you and your projects. Hosted directly from your GitHub repository. Just edit, push, and your changes are live." - pages.github.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kentcdodds/images/552205/gh-pages.jpg)
Jekyll
"Jekyll is a blog-aware, static site generator in Ruby" - https://github.com/jekyll/jekyll
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kentcdodds/images/552199/octojekyll.png)
How To Use gh-pages
- Users / Organizations: It's all about the repo name
- Projects: It's all about the gh-pages branch
User/Org PageS
1. Create a repo called <username>.github.io
2. Push code master branch
3. Boom! Static files hosted!
http://<username>.github.io
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kentcdodds/images/552223/users-orgs.jpg)
Project Pages
1. Create a repo called <whatever>
2. Push code to gh-pages branch
3. Boom! Static files hosted!
http://<username>.github.io/<whatever>
Create gh-pages Branch
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kentcdodds/images/552268/forktocat.jpg)
Add GH-Pages to Build
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kentcdodds/images/552232/supercat.jpg)
Custom Domains
1. Create a file (in the repo root) called "CNAME"
2. Add one line that's your domain
3. Setup your DNS to forward properly
That's it!
Working With Backends
1. Firebase
2. Custom
![](https://s3.amazonaws.com/media-p.slid.es/uploads/kentcdodds/images/552241/electrocat.png)
That's it!
Questions?
Thanks.
Kent C. Dodds
@kentcdodds
gh-pages
By Kent C. Dodds
gh-pages
What are and how to use github pages
- 7,734