Open Source Comes to Campus/Logistics/Publicity Website

From OpenHatch wiki

Typically each event gets its own publicity website. For example, see Wellesley's or Princeton's (you can see a fuller range of designs here). For instructions on creating a similar website, read on.

Making the site

To start, you want to make a new organization. This organization should have the name oh-$yourname. For instance, if your school is Hogwarts, you'd make an organization named oh-hogwarts.

The template website lives at the Github repository OH-campus template. You want to make a copy of this site which you can customize. To do so, you want to "fork" the repository. Click the "Fork" button in the top-right corner of the page. You'll be given the option to fork to multiple places - select the organization you just made.

Once the animation concludes, you should be in a new repository in your organizational account (ie at url github.com/oh-hogwarts/oh-campus-template/ rather than github.com/openhatch/oh-campus-template/). You should also see a "forked from..." remark in the top-left.

You now want to rename the site. The naming scheme we'd like you to use is "oh-hogwarts.github.io". This is a naming convention we need to use in order to host the site on github. To rename the repository, go to the righthand sidebar and scroll down to settings, near the bottom. Once you click that, renaming should be the first option you're given.

While you're there, take a look at the option "collaborators" on the lefthand sidebar. It may be useful to add OpenHatch organizers @shaunagm and @paulproteus, as well as any other student organizers who might need access to the site, in case it needs to be updated quickly when you're not available.

Once you've created the repository, send the url to OpenHatch organizers and we'll do our thing. (You can safely ignore that page, but we linked it in case you're interested.) You should also add the OpenHatch organizers to the organization so that they can change the repository as needed. To do this, follow these instructions. For item #5, the team 'Owners' is fine. The github accounts to add are shaunagm and paulproteus.

Customizing the site

You can now go ahead and customize the site. You'll want to make a local copy on your computer, also known as "cloning". To do this:

  • On the right side, look for the clone URL
  • Copy that to the clipboard
  • Open a terminal and type: "git clone " (including the space, but not including the quotation marks)
  • Use your terminal to "paste" the URL in. (Make sure it starts with https unless you have SSH keys set up).
  • Press enter to do the "git clone" operation.

Now you can open your local copy of index.html and style.css in your favorite editor and make changes as you would normally. You can see the changes as you make them by opening index.html in your web browser.

Changes you'll want to make include:

  • Do a search for $SCHOOL in the source file and replace with your school's name.
  • Do a search for $DATE in the source file and replace with the date of the event.
  • Do a search for $LOCATION in the source file and replace with the location of the event.
  • Do a search for $HOST in the source file and replace with the host organization/people.
  • Add links to student and mentor sign up forms.
  • Do a search for $ADD SPONSORS/HOSTS HERE and add logos of sponsors/hosts (the OpenHatch logo is already there).
  • Change map to point to the location of your event (we can help you with this):
    • Visit Google Maps and find your event location. You can right-click on the building the event is being held in and click on "what is here" to exact geographical coordinates.
    • Click on the "Link" chain icon and read the URL. From the URL you change the JavaScript in index.html as follows:
Link URL "key=value" pair Corresponding JavaScript line to edit
ll=xx.xxxxxx,yy.yyyyyy
   center: new google.maps.LatLng(xx.xxxxxx,yy.yyyyyy),
z=zz
   zoom: zz,
q=xx.xxxxxx,yy.yyyyyy
   var locations = [
       ['Change this to your Building Name', xx.xxxxxx, yy.yyyyyy]
   ];
  • Finally feel free to play with the aesthetics of the site by changing colors, fonts, etc.

Publishing the site

Once you're done making changes you'll want to send them back to your Github repository. To do this, take the following steps:

You can use the following command to get a list of files you've changed:

   git status

You can commit your changes by typing "git add" followed by the files you've changed, for instance:

   git add index.html

Once you've added the changes, you can "commit" them with a message specifying what you've changed.

   git commit -m "Explanation of my changes"

Now, publish those changes on Github by typing:

   git push

You will be prompted for your username and password. (If you find constantly entering your username and password annoying, there's an alternate method we can show you called SSH.)

(Alternatively, you may be prompted to set your name and email address. This means you missed a step in setting up git. No worries, you can set them now.)

You can now visit Github and make sure your repository contains those changes.

If you haven't yet, make sure to tell the OpenHatch organizers what the repository name is. Once you've done that, you should be able to visit $schoolname.openhatch.org (for example, "hogwarts.openhatch.org") and see the site live.


Updating the site

To update the site, you can continue to make changes on your computer and follow the steps in the previous section (status, add, commit, push) to send them to the live site.