Professional Websites with GitHub Pages

Valentina Staneva

eScience Institute, University of Washington

Plan for today

• Go over what GitHub Pages are
  • git & Github
    • make sure you have made an account on Github.com (don’t need to install git today)
    • Software Carpentry git-novice lesson
  • Jekyll Templates (don’t need to install it today) * Markdown]-based (a text marking language designed for the web) * Static pages can include web-based visualizations (d3.js, vega-lite)
• Build your own webpage from a choice of templates:
  • Personal Website (with a blog)
    • https://github.com/valentina-s/personal-website-template
  • Project Website (for collaborative projects) *https://github.com/valentina-s/project-website-template
  • Course Website (if you are teaching a class)
    • https://github.com/valentina-s/course-website-template

Repository Creation

• decide on a name for the repository (it will determine the webpage url, but you can change it later)
• click on Use this template & enter your repo name & create repo
• enable publishing through the master branch (Settings -> GitHub-Pages)
• add a link on the right for quick access to the webpage (pay attention to how the url is created)

Configuring your website

• Modify your project name in the _config.yml file

Editing your webpage

• Each page is a markdown document
  • Markdown is a text marking language designed for the web
    • Markdown Tutorial
  • You can modify the markdown documents from the website (hit the edit button and commit when finished) * You can also make modifications to the text files locally and upload to the repo
    • Macdown Editor for Mac
    • MarkdownPad for Windows
    • Visual Studio Code
    • Atom editor has a markdown extension
• Images go into assets/img

  • they can be accessed by: <img src="https://valentina-s.github.io/project-website-template/assets/img/eScience.png">

  • feel free to have a different header image relevant to your project

• Blog posts (for the minima theme) go to the _posts folder
  • add a date in the name so they get ordered
• Modifying tabs:
  • sidebar tabs (for project theme):
    • https://github.com/uwescience/project-website-template/blob/master/_includes/sidebar.html
  • header tabs (for personal and course theme)
    • in _config.yml list them under header_pages