Getting Started with GitHub Pages

An introduction to building your own personal website with HTML and CSS and pushing to GitHub Pages. Covers:

1) Build your first website with HTML and CSS
2) Deploy your first website to GitHub Pages
3) Add a custom domain to your personal website on GitHub Pages
4) Introduce Jekyll for building deeper, more complex static static websites

Presented at ACM@UC at the University of Cincinnati on February 14th, 2019.

Transcript

1. Getting Started with GitHub Pages Build your personal website - free and easy
2. Today 1. Build your personal website 2. Setup and push to GitHub with Git 3. Add a custom domain name 4. Jekyll for complex websites (layouts, blog, data-driven, etc.)
3. 1. Build your personal website 2. Setup and push to GitHub with Git 3. Add a custom domain name 4. Jekyll for complex websites (layouts, blog, data-driven, etc.)
4. Personal Website? • Tell the world about yourself • Show off your work • Share your resume (career fair!) • Start a blog
8. HTML + CSS (+ JS) • Build webpages with HTML (.html extension) • Style webpages with CSS (.css extension) • Add interactive content with JavaScript (.js extension) • Today, we’ll concentrate on HTML and CSS
9. HTML
10. Preview: HTML
11. CSS
12. Preview: HTML + CSS ????
13. HTML (again)
14. Preview: HTML + CSS
15. Let’s Try It! 1. Create a new folder on your machine 2. Create an index.html file 3. Create a style.css file 4. Link style.css to index.html 5. Preview index.html in the browser!
16. 1. Build your personal website 2. Setup and push to GitHub with Git 3. Add a custom domain name 4. Jekyll for complex websites (layouts, blog, data-driven, etc.)
17. Why GitHub Pages? • Integrated in GitHub • We need a display our index.html and style.css files to the open internet • A place to host static websites • Free! • Use Git commands • Update your website with `git commit` and `git push` • Add a custom domain
18. Setup On GitHub Pages 1. Login to your github.com account 2. Create a new repository and call it yourusername.github.io guides.github.com/features/pages/
19. Setup On GitHub Pages 3. Initialize a new Git repository in your folder 4. Add the GitHub clone url as origin
20. Setup On GitHub Pages 5. Add index.html and style.css to the Git repository 6. Commit 7. Push to GitHub!
21. Setup On GitHub Pages
22. Setup On GitHub Pages Pro tip: Enforce HTTPS on the repository settings guides.github.com/features/pages/
23. 1. Build your personal website 2. Setup and push to GitHub with Git 3. Add a custom domain name 4. Jekyll for complex websites (layouts, blog, data-driven, etc.)
24. Why a Custom Domain? • noahbass.com instead of noahbass.github.io (and it redirects!) • Credible • Memorable • Cool! • But, it’s not free :( • Usually runs around $10/year for a .com domain name • Buy at a registrar such as namecheap.com
26. Setup a Custom Domain 1. Buy the domain 2. Add a CNAME to your Git repo 3. Commit the CNAME file and push to GitHub 4. Modify the domain’s DNS records (point the A records to GitHub)
27. Setup a Custom Domain Add a CNAME file Point DNS A records to GitHub Pages More info for apex domains: https://help.github.com/articles/setting-up-an-apex-domain/ More info for www domains: https://help.github.com/articles/setting-up-a-www-subdomain/
28. 1. Build your personal website 2. Setup and push to GitHub with Git 3. Add a custom domain name 4. Jekyll for complex websites (layouts, blog, data-driven, etc.)
29. Why Jekyll? 1. It’s a static site generator (compiles to just HTML, CSS, and JavaScript) 2. Build complex static websites (Example: github.com/ACMatUC/ acmatuc.github.io) 3. Write in Markdown, compile to HTML 4. Reuse layouts (DRY) 5. Native support on GitHub Pages (GH Pages builds your Jekyll site on push) 6. A RubyGem
30. Jekyll Starter jekyllrb.com/docs/ Install Jekyll and Bundler (RubyGems) and Run Compiles to _site/ Install Ruby: www.ruby-lang.org/en/documentation/installation/
31. Jekyll Starter index.html blog post configuration file
32. Jekyll Starter bundle exec jekyll serve
33. Jekyll Workflow Start Jekyll and make changes Commit and Push Your Changes
34. Jekyll Workflow
35. Resources • guides.github.com/features/pages • help.github.com/categories/github-pages-basics • help.github.com/articles/quick-start-setting-up-a-custom-domain • jekyllrb.com • namecheap.com