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.
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:
You will now need to click on the link in Moodle and accept the repository.
You don’t need GitHub.com for the moment but you will need to recall your username and password during the next steps.
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.
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
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.
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.
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
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.
This plugin makes it easy to select colours for the CSS.
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
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
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:
When you download this repository, you will find a variety of files, but the 2 important ones are inside the docs folder:
You can also have a look at the sample scene inside the sampleScene folder
You should now read the help document here, that explains how to generate the HTML files from InDesign.
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.
In Atom it will look similar to this:
index.htmlfile the image will be very large, so you must edit the styles.css file to change the width of the image.
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:
You should now be able to push your updates direct to GitHub and see the results on your web site.
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.
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!
pushthe files to your GitHub repository
docsfolder to deliver the web site
Filed under: HTML and CSS, Multi-Platform Publishing
This page last edited on: 2018-01-19