Digital Publishing Hub
Help for publishers and students of publishing

Using a Git Repository to host your Shakespeare Play Web Site

On this Page

Using a Git Repository to host your Shakespeare Play Web Site

We are using GitHub pages to host a web site for the Shakespeare play. This page explains what we are going to do to get started.

What to do?

If you are reading this within your very own copy of this GitHub repository (because you followed the link from the github classroom), then read on. If you are reading this offline, then please set up the Github account before you do anything else.

Before you do anything with your new GitHub account do this:

  • Go to your account settings and put in your full name
  • Add a picture or avatar of yourself

You will now need to click on the link in Moodle and accept the repository.

Accept the assignment from classroom

  • Go to settings and change the name of your repo (you can use the name of your play, but this may conflict with others, so include your publisher or surname as well example: blades-macbeth)

Change the name of your repo

You don’t need GitHub.com for the moment but you will need to recall your username and password during the next steps.

Your digital tools

We are planning to use a free editor to edit the HTML and CSS for the web site. We prefer to use this method over the wysiwyg software called Dreamweaver. However, it is possible to use Adobe Dreamweaver for this task, and further instructions will be provided.

There are 2 free apps that you need to download and install.

Atom

You will need a text editor that can show and preview HTML. We now want you to download and install Atom. You can find this free open source editor here

Download Atom

This application will be placed inside your downloads folder, so you need to copy to your Applications folder inside your user account on the MAC.

You can also install Atom on your own computer at home.

Finding your Applications folder

Your Applications folder is inside your Home folder; find this by selecting Go from the finder menu. You can copy or move the Atom app from the downloads folder.

If there is no Applications folder inside your home folder then create one. Do try to use the same MAC in the IT suite whenever possible, so that you do not need to install this software again.

Atom will now be available but we now need to move to the next stage.

Configuring Atom

Atom is open source, so this means there are lots of packages that can be added to provide extra functionality.

There are a few packages that will prove useful but here are two that are highly recommended:

Open in Browser

Add this package to Atom

This will provide you with the ability to right-click over the file and select Open in Browser, which will then show you the file in your default web browser.

Atom HTML Preview

This is an alternative to the one above. This package will provide a window to view the HTML just like a browser.

Color Picker

Grab the Color Picker package

This plugin makes it easy to select colours for the CSS.

Atom and GitHub

You can also use Atom to update your GitHub repository that is online, but to prevent having to login each time add the following command.

In the terminal window copy and paste this:

git config --global credential.helper osxkeychain

Github Desktop

You will need this app to make it easy to clone the repository to your computer (use Google drive) so that you can edit offline/

GitHub Desktop is free and comes from here

One you download this app, put inside the Applications folder where you have placed Atom

  • Open the GitHub Desktop APP
  • Sign into your GitHub account that you have previously setup

Once you have done this you can now clone the repository that is in your GitHub account online by selecting the + sign. All being well you should see something similar to this here:

You should see your repository once signed in

  • You will be asked where to put it…. your Google drive is best! Stay in the GitHub desktop app:
  • In the GitHub desktop right-click over the repo name in the left sidebar and select Open in Atom

Open in the repo in Atom for editing

  • You should see something like this:

Atom editor

What’s inside the repository?

When you download this repository, you will find a variety of files, but the 2 important ones are inside the docs folder:

  • index.html - this will become the home page for your play. This page will have the cover image.
  • play.html - this is where the text of the play will be. Linked from the home page above.
  • styles.css - this is where you define the styles for the elements in the play

You can also have a look at the sample scene inside the sampleScene folder

  • Also inside the resources folder you will find various InDesign scripts. These scripts needs to go into your copy of InDesign. The instructions are found in the readme for that folder.

Ok, so what do I do now?

You should now read the help document here, that explains how to generate the HTML files from InDesign.

Here are the basic steps

  • Open InDesign and find your final version of the play (only the play - not the Introduction)
  • Make any corrections that you like (consider the comments from the previous assignment)
  • If you created any new styles you will need to go to the style panel and configure the Export Tags feature, making sure that each style will export with an HTML tag.
  • You can read the help document that I have provided - InDesign to HTML.
  • Follow those instructions to create the interactive table of contents.
  • Export your play InDesign document with settings in the instructions.
  • You will find that you have now got a new file saved wherever your InDesign file was saved. You can drag this file into the docs folder of your working copy of the repo that you have open in Atom. This file should be renamed play.html and will replace the existing placeholder file.

Note: if you included images in your play, you will need more work to get those into the appropriate location.

The Play

In Atom it will look similar to this:

HTML version of the play

  • Open the play.html file that is inside the docs folder (that you have from your repository) with Atom
  • Now edit the style.css file (again inside the docs folder) to style each of the elements in the play
  • Review in a web browser
  • Validate the HTML file here: https://html5.validator.nu
  • Validate the CSS file here: https://jigsaw.w3.org/css-validator/

The home page cover

  • You now need the cover image from the book.
  • You can open the PDF of the cover in Photoshop and crop down to the front of the cover. In other words, remove the back and spine.
  • The cover image needs to be 1400 pixels wide, because we need this later for the eBook.
  • save this image as a JPEG in the images folder within the docs folder in your repository that you downloaded from GitHub.
  • Now edit the index.html file and put the file name of the image where instructed in the markup. Also edit the ALT tag text.
  • When you view this index.html file the image will be very large, so you must edit the styles.css file to change the width of the image.
  • when viewed in a browser, this image will be a link to the play.
  • check that the link functions correctly.

Making the web site work

You can look at the web pages in the web browser by right clicking over the file and selecting Open in Browser. This will only work if you installed the Atom package (see above).

When you are happy with the look of these web pages then you can:

  • Upload these new versions of these files to your GitHub repository
  • You do this by using the Atom Git Tab (Packages > GitHub Toggle Git Tab).
  • click Stage All (top right)
  • write a message in the commit box (what did you change)
  • Click commit
  • Click the Up Arrow
  • Click Push

You should now be able to push your updates direct to GitHub and see the results on your web site.

Push your changes to Github

Back to GitHub

Now we need make the web site live at github.com

Go there in your browser and login with the credentials that you put in before and find the repository that you have previously renamed.

  • Under GitHub Pages choose the docs folder for the source

You are telling GitHub to run the web site from the docs folder

  • Your web page for the play will be live!
  • When you have finished and are ready then post the URL of your site to the Moodle assignment location.

Summary

Ok, so I know this seems complicated. Let me write out a simple list with the steps. Make this into a check list and tick them off as you go!

  • Download Atom and install in your Applications folder
  • Download GitHub Desktop and install in your Applications folder
  • Create an account on Github.com
  • Grab link on Moodle (week 1) for the GitHub repository (note: I can’t publish this on this public site)
  • Accept the Digital Shakespeare repository
  • Run GitHub Desktop and login with your GitHub credentials
  • Clone the Publisha repository that you see in your account
  • Choose a location (use Google Drive please)
  • In GitHub Desktop, find the repository > open in Atom linked
    • You may not need GitHub Desktop again
  • Add 2 packages to atom
  • Read the helper document about getting HTML from InDesign
  • Add the files into the local version of the repository and edit the HTML and CSS etc
  • Check that the site works (home page is the cover image with link to the play)
  • push the files to your GitHub repository
  • Configure your GitHub repository to use the docs folder to deliver the web site
  • Note the web address and finish

Filed under: HTML and CSS, Multi-Platform Publishing

This page last edited on: 2018-01-19