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
   

   View Slide

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.)
   

   View Slide

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.)
   

   View Slide

4. Personal Website?
   • Tell the world about yourself
   • Show off your work
   • Share your resume (career fair!)
   • Start a blog
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

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
   

   View Slide

9. HTML
   

   View Slide

10. Preview: HTML
    

    View Slide

11. CSS
    

    View Slide

12. Preview: HTML + CSS ????
    

    View Slide

13. HTML (again)
    

    View Slide

14. Preview: HTML + CSS
    

    View Slide

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!
    

    View Slide

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.)
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

19. Setup On GitHub Pages
    3. Initialize a new Git repository in your folder
    4. Add the GitHub clone url as origin
    

    View Slide

20. Setup On GitHub Pages
    5. Add index.html and style.css to the Git repository
    6. Commit
    7. Push to GitHub!
    

    View Slide

21. Setup On GitHub Pages
    

    View Slide

22. Setup On GitHub Pages
    Pro tip: Enforce HTTPS on the
    repository settings
    guides.github.com/features/pages/
    

    View Slide

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.)
    

    View Slide

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
    

    View Slide

25. View Slide

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)
    

    View Slide

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/
    

    View Slide

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.)
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

31. Jekyll Starter
    index.html
    blog post
    configuration file
    

    View Slide

32. Jekyll Starter
    bundle exec jekyll serve
    

    View Slide

33. Jekyll Workflow
    Start Jekyll and make changes
    Commit and Push Your Changes
    

    View Slide

34. Jekyll Workflow
    

    View Slide

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
    

    View Slide