Open Source Comes to Campus/Curriculum/Directory: Difference between revisions

Content added Content deleted
imported>Shauna
No edit summary
imported>Shauna
No edit summary
Line 9: Line 9:
Let's get started!
Let's get started!


== Visiting the project on the web ==
== Visit the project on the web ==


Since this project is a website, we've specially configured the repository so that whenever there is a push to it, it is made visible on the web. Github allows you to do this with repositories that have the following name scheme:
Since this project is a website, we've specially configured the repository so that whenever there is a push to it, it is made visible on the web. Github allows you to do this with repositories that have the following name scheme:
Line 18: Line 18:
You should have already signed up for Github and created a user account. (If not, [https://github.com/join do so now]!) When you make your repository, you will eventually name it {your username}.github.io.
You should have already signed up for Github and created a user account. (If not, [https://github.com/join do so now]!) When you make your repository, you will eventually name it {your username}.github.io.


== Forking a project on Github ==
== Fork a project on Github ==


To "fork" a project means to make a copy of it. You can't edit the original - somebody else owns it. But you can edit your "fork".
To "fork" a project means to make a copy of it. You can't edit the original - somebody else owns it. But you can edit your "fork".
Line 34: Line 34:
* Now it's time to rename the repository. You don't have to do this every time you fork a project, but you'll need to in order to make your site viewable on the web. To edit the repository name, go to "Settings", which is towards the bottom of the toolbar on the righthand side of your page. The top option should be the rename option. Change the repository so it's name follows the format: '''{your username}.github.io'''.
* Now it's time to rename the repository. You don't have to do this every time you fork a project, but you'll need to in order to make your site viewable on the web. To edit the repository name, go to "Settings", which is towards the bottom of the toolbar on the righthand side of your page. The top option should be the rename option. Change the repository so it's name follows the format: '''{your username}.github.io'''.


Your webpage will not show up immediately. It usually takes 10-20 minutes for Github to put new x.github.io pages online.
== Now, clone to the repository to your computer ==

== Now, clone the repository to your computer ==


You have a personal copy, but it's on Github (what git calls "a remote"), and not a local copy you can easily edit. We call the process of making a local copy "cloning".
You have a personal copy, but it's on Github (what git calls "a remote"), and not a local copy you can easily edit. We call the process of making a local copy "cloning".
Line 51: Line 53:


== Make sure you have the project properly set up ==
== Make sure you have the project properly set up ==



* Open index.html in your favorite text editor -- it should look like a regular HTML page
* Open index.html in your favorite text editor -- it should look like a regular HTML page


* Open index.html in your favorite web browser -- it should render basically the same as http://purdue.openhatch.org/
* Open index.html in your favorite web browser -- it should render basically the same as http://fossdirectory.github.io/


* Make a test change in index.html, save, and reload in the browser. Make sure what you see in the the browser reflects that change.
* Make a test change in index.html, save, and reload in the browser. Make sure what you see in the the browser reflects that change.
Line 60: Line 63:
* Undo that change, with your editor, save, and then reload in the browser. Make sure what you see in the browser reflects that change.
* Undo that change, with your editor, save, and then reload in the browser. Make sure what you see in the browser reflects that change.


== Add your username to the directory ==
== Find a task ==


The first thing we're going to do is make a simple change: you're going to add your username to the directory page.
Now, find a bug on the project's issue tracker that you will work on, and claim it by leaving a comment on the issue saying so.


To do this, open up directory.html. Find the list of links to users. If you're familiar with HTML, it should be easy enough for you to find. If you're not familiar with html, the line you're looking for looks like this:
(Before you do that, make sure to refresh the page and check that no one else has claimed it while you were reading and deciding.)
<code><a href="#" class="list-group-item">A person!</a> <!-- Copy this line and add your info. --></code>


You want to add two piece of information. First, replace "A person!" with your github username. Then, between the quote marks after "a href", add a link to your website ({yourname}.github.io).
== Resolve the task ==

How you do this depends on the issue you've chosen. If you run into a problem you can't seem to solve, try asking the student next to you or one of the mentors.

Make sure to open up index.html and check that your solution works.


== Commit and push ==
== Commit and push ==


Once you're finished making changes, you can use the following command to get a list of files you've changed:
Once you've made your change, you can use the following command to get a list of files you've changed:


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


git add index.html
git add directory.html


Once you've added the changes, you can "commit" them with a message specifying what you've changed.
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"
git commit -m "I added myself to the directory!"


Now, publish those changes on Github by typing:
Now, publish those changes on Github by typing:
Line 98: Line 98:
== Create pull request ==
== Create pull request ==


But what good is a directory of one? You'll want to send your change back to the original repository so it can keep track of all the cool new people making profiles. To do this, you'll want to create what's called a "pull request".
Visit your personal fork and click the "Pull requests" button on the right. This will offer you the chance to make a new pull request by clicking on "New pull request". Explain what you did, and make sure to include a comment stating which issues it addresses, so that it automatically closes the issue. (You can see [https://help.github.com/articles/closing-issues-via-commit-messages here] for details on how to do that.)


Visit your personal fork and click the "Pull requests" button on the right. This will offer you the chance to make a new pull request by clicking on "New pull request". Explain what you did, to make it easier for the repository's maintainer.
Now, get feedback from the project's maintainer (the mentor leading your group) and eagerly await your pull request getting merged!

When the changes are accepted back into the original, it is called "merging".


== Once merged, visit your changes on the web ==
== Once merged, visit your changes on the web ==


When your changes are merged into the main project repository, our specially configured repository will update the group website with the merged files.
When your changes are merged into the main project repository, the website will be updated with the merged files.

This is a special trick that we do during the Website editing with git exercise, using Github Pages. It demonstrates that when the merge happens, it can programmatically cause a different event; this is often called ''hooks''.


Sometimes your changes will not show because of caching. To get around this problem, add "/?" to the end of the url.
Sometimes your changes will not show because of caching. To get around this problem, add "/?" to the end of the url.

== Now edit your profile ==

Now you can go back to your local copy and edit your profile. To do this, make changes in index.html. There are html comments next to the sections with text to edit. You should also feel free to make changes to the HTML and CSS, or to add additional images, code, etc as you desire.




== Advanced/Optional Commands ==
== Advanced/Optional Commands ==