So You Want to Make a Digital Humanities Website

Part Five: Welcome to the Sandbox

This section is under construction.

Part One / Part Two / Part Three / Part Four / Part Five / Part Six

While WordPress gives you a beautiful and responsive website right out of the gate, playing around with Github Pages shows you how websites function at the base level. For the last part of our tutorial we’re going to set up a github repository and create a live website.

What is Github?

  • Git is a version control system.

    • Keep track of revisions and modifications
    • Allow for fall-backs should a revision fail
    • Facilitate collaboration → download current version, modify, submit new revision

  • Github takes Git online

    • Collaborate with others
    • View and “fork” other projects
    • Display the code behind your projects

  • Github Pages

    Github Pages allows you to create your own website through a repository. Simply create a new repository labeled “yourusername.github.io” and github will automatically build a website based on the files you ‘push’ to your repository. Github Pages is also built on Jekyll natively.

Making Edits on Github

  1. Navigate to your file
  2. Click the pen icon to edit
  3. Make your edits
  4. Scroll down to commit changes
  5. Type a brief description of changes
  6. Commit!

Getting Started With Github Pages and Jekyll

  1. Create a github.com account.
  2. Navigate to Jekyll-Now
  3. Fork Jekyll-Now to your User Repository
  4. Go To Settings → Rename Repo to “username.github.io”
  5. Visit https://username.github.io to see your empty site
Basic Elements
  • _config.yml takes care of basic site build information
  • index.html is where your homepage lives
  • about.md is where you about page lives and is written in Markdown
Building Blocks
  • _layouts/ houses page templates
  • _includes/ houses files that Liquid can hook into such as
  • _posts/ houses your blog - style pages
  • _sass/ houses stylesheets written in SASS or SCSS

Writing a Post

  • Naming a Post
  • Front Matter
    • Layout:
    • Title:
    • Date:
  • Markdown
    • Displayed through html
    • Written and read intuitively
    • prose.io

On to Part Six: Resources

Now that you have an idea of where you want to take your site, have a look at a collection of resources to help you on your way in Part Six.