Presenters: Jonathan Lai, Software Developer and Wilson Wang, Assistant Director of Data Science & Cloud Architecture

Slides of the session

Central Questions

• What are the first steps I should be aware of when starting a website through GitHub?
• What are some common hosting options I can use?
• What are some examples of sites made by others at Stanford?

Background

GitHub websites can be a great way to quickly and easily publish technical content, such as projects from your git repository, as well as non-technical content, such as learning journeys, resumes, or portfolios. With a data-based portfolio, you can help non-experts understand the work you’re doing, demonstrate your skills, and showcase your knowledge. By reaching a wider audience, you can enhance your digital presence for school and the workplace.

Key Takeaways

Main Points:

• Beginners can use GitHub and Jekyll to easily create a new website from a template
  • You can then edit the template to make your custom site with images, pages, and more
• For experienced users, there is always more to explore with GitHub
  • For advanced site building, you can try out Hugo, Gatsby, pelican, or Zola
  • Copy user-made content such as other templates and themes

Examples by Stanford Affiliates:

A variety of Stanford groups use GitHub websites, including labs, courses, and instructors. Students can also use it to display their portfolios and enhance their digital presence. Below are some examples of website content by the Stanford community.

• Projects
  • Stanford Open Policing Project (on GitHub)
  • Autism Glass Project (on GitHub)
• Classes
  • Nick Haber EDUC 463 (GitHub)
• Profiles
  • Stanford Literary Lab (GitHub)
  • Sanjay Lall (GitHub)
• Portfolios
  • Priscilla Zhao (GitHub)
  • Kenneth Fernandez (WordPress)
  • Sarah Brennan (Weebly)
  • Kaitlyn Olah (Wix)

Getting Started:

• Website Hosting Guide
• GitHub
• Stanford offers two free platforms for students
  • Stanford Sites is only for active Stanford members and maintained by the university
    • A self-service tool for university work through Drupal
    • [mysite].people.stanford.edu
  • Stanford Domains can be transferred after graduation and is maintained by a third party
    • A self-service web tool for various media like portfolio and wikis.
    • [mysite].su.domains
• Google Sites
  • sites.google.com/stanford.edu/[mysite]

Instructions

To get started, you can follow the steps outlined below. These will instruct you to copy a template made by GSE IT’s Jonathan Lai. He used Jekyll, a static site generator, to create this template. You can look at the workshop presentation for more definitions and how to edit  your site beyond the template.

1. Login to your GitHub account.
   • For students, you can apply for the GitHub Pro Account through Student Verification. This will give you unlimited public and private repositories, GitHub copilot integration, free server space, one free custom domain, and more.
     
2. Go to https://github.com/gsedevops/gsedevops.github.io
   
3. Click on the Green button “Use this template” and select “Create new repository”
   
   
4. Fill in the repository name using your GitHub username as  username.github.io
   
5. Click “Create Repository” and wait for a green checkmark.
   
   • You may have to wait up to 30 seconds to see a green checkmark. If you don’t see one, try refreshing the page.
     
6. You can navigate to https://username.github.io in a new tab to see your new site!

Managing Your Jekyll Site:

• Markdown File
  • Each page will have a file with the ending “.markdown” or “.md”
  • This file is used to add content to a page (text, images, and URLs)
• _config.yml
  • This file is used for editing site configurations (theme, layout, or sidebar)
• _navigation.yml
  • This file is used for editing site navigation (toolbar links, navigation display)
  • Located within the _data/ folder
• More terminology and editing features can be found in the workshop presentation