-
Notifications
You must be signed in to change notification settings - Fork 35
/
04-publishing-with-github.html
74 lines (74 loc) · 4.75 KB
/
04-publishing-with-github.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="pandoc">
<title>Software Carpentry: Publishing using Github</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="css/swc.css" />
<link rel="alternate" type="application/rss+xml" title="Software Carpentry Blog" href="http://software-carpentry.org/feed.xml"/>
<meta charset="UTF-8" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body class="lesson">
<div class="container card">
<div class="banner">
<a href="http://software-carpentry.org" title="Software Carpentry">
<img alt="Software Carpentry banner" src="img/software-carpentry-banner.png" />
</a>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1 class="title">Publishing using Github</h1>
<h2 class="subtitle">Show us your art!</h2>
<div id="learning-objectives" class="objectives panel panel-warning">
<div class="panel-heading">
<h2><span class="glyphicon glyphicon-certificate"></span>Learning Objectives</h2>
</div>
<div class="panel-body">
<ul>
<li>Hosting your page on Github</li>
</ul>
</div>
</div>
<p>The next thing we want to do is show the world what we've made! There are different ways to go about this. One of the easiest ones is provided by <a href="https://github.com">Github</a>.</p>
<p>You should all have signed up for a Github account. If you haven't, now is the time!</p>
<p>As you might remember, Github uses git, which is a version control software that is used to track changes in text documents. This alone makes it perfect for hosting our code and enables us to travel back in time and undo errors that we might introduce.</p>
<p>Using git you can create so-called repositories in your folders. The folder and its subfolders are then tracked and git tells you immediately if and what has changed in the files that are contained within the repository. You can 'commit' to a change you made and synchronize your local repository with the one that is hosted on Github.</p>
<p>But what's even better is that Github gives us the possibility to turn every repository into a website.</p>
<p>First, let's create our new repository on Github:</p>
<ul>
<li>Sign in to Github (https://github.com)</li>
<li>Create a new repository and call it 'myartwork'</li>
</ul>
<p>Don't worry about the other options for now. Using git in the command line, the Github app for Windows and Mac OS X, or Sourcetree (https://www.sourcetreeapp.com/), clone this repository to get a local copy. Copy the file that contains your artwork into your local repository and call it 'index.html'. The reason for this is that 'index.html' is the default file that is loaded on the server.</p>
<p>Save the file, commit the change, and push the changes to the repository on Github.</p>
<p>Right now, our code is on the web, but we haven't told the Github to publish it yet. To do this, we create a branch called 'gh-pages'. To create this branch, navigate to your repository and click on where it says "branch:master". An input field should appear. Type in 'gh-pages' and press enter. A new branch should have been created and you should be able to find your webpage at: http://username.github.io/myartwork (with your username in place of 'username'). From now on, remember to only commit/push to your gh-pages branch. Otherwise your changes will not show up.</p>
<div id="show-us-your-art-work" class="challenge panel panel-success">
<div class="panel-heading">
<h2><span class="glyphicon glyphicon-pencil"></span>Show us your art work!</h2>
</div>
<div class="panel-body">
<p>Publish your art work and send us a link. It should be http://username.github.io/myartwork</p>
</div>
</div>
</div>
</div>
<div class="footer">
<a class="label swc-blue-bg" href="http://software-carpentry.org">Software Carpentry</a>
<a class="label swc-blue-bg" href="https://github.com/swcarpentry/lesson-template">Source</a>
<a class="label swc-blue-bg" href="mailto:[email protected]">Contact</a>
<a class="label swc-blue-bg" href="LICENSE.html">License</a>
</div>
</div>
<!-- Javascript placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="css/bootstrap/bootstrap-js/bootstrap.js"></script>
</body>
</html>