forked from CWDG/cwdg.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdev_ruby_setup.html
More file actions
261 lines (206 loc) · 15.3 KB
/
Copy pathdev_ruby_setup.html
File metadata and controls
261 lines (206 loc) · 15.3 KB
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<!DOCTYPE html>
<html>
<head>
<title><CWDG/> Web Ninjas Unite</title>
<link href='favicon.ico' rel='icon' type='image/x-icon'>
<link href='css/screen.css' media='screen, projection' rel='stylesheet' type='text/css'>
<link href='css/print.css' media='print' rel='stylesheet' type='text/css'>
<!--[if lt IE 8]>
<link href="css/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body class='bp'>
<div id='header'>
<ul class='relevant-links'>
<li class='last'>
<a class='button' href='http://groups.google.com/group/cwdgosu' target='blank'>Mailing List Archives</a>
<li>
<a class='button' href='http://www.twitter.com/cwdgosu' target='blank'>Twitter</a>
</li>
<li>
<a class='button' href='http://www.facebook.com/groups/cwdgosu/' target='blank'>Facebook</a>
</li>
<li>
<a class='button' href='https://github.com/CWDG' target='blank'>GitHub</a>
</li>
<li>
<a class='button' href='irc.html' target='blank'>Chat on IRC</a>
</li>
<li class='first'>
<a class='button' href='http://go.osu.edu/cwdglist' target='blank'>Join the Mailing List</a>
</li>
</li>
</ul>
<a class='banner' href='/'>
<h1>
<span class='tag'><</span>
Collegiate Web Developers Group
<span class='slash'>/</span>
<span class='tag'>></span>
</h1>
</a>
</div>
<div id='container'>
<div id='content'>
<div class='section goal'>
<h2>Your Mission</h2>
<div class='content'>
<p>This guide will show you how to setup your computer to follow along with all the CWDG sessions. Everything we use here will be used again countless times during the course of your web development career.</p>
<p>The goal for tonight is to run a simple web server and publish the code to the internet.</p>
</div>
</div>
<div class='section rvm'>
<h2>1. Setup the Ruby Version Manager</h2>
<div class='content'>
<p>First we will install RVM. This is a program which does some basic path manipulation to ensure you are using the correct version of ruby.</p>
<p>It is recommended that you simply follow the <a href='https://rvm.io/rvm/install/'>Installation Instructions</a> on the <a href='https://rvm.io/'>main RVM website</a>. The project is quite well documented in both <em>how</em> to use RVM and also <em>why</em>.</p>
<p><strong>Apple Users</strong> take note! Make sure you look into the <a href='https://rvm.io/os/osx/'>Special Instructions</a> for your computers.</p>
<p>If you are a audio/video person, you can check out the <a href='http://screencasts.org/episodes/how-to-use-rvm'>RVM Screencast</a>, but your milage may vary.</p>
<p>I also recommend you run <code>rvm requirements</code> and make sure all the required libraries are installed correctly. This will prevent problems down the road and add a few optional, but wonderful features to ruby.</p>
<p>Once RVM is installed, I recommend you close all your terminal windows. Reopening your terminal, you can check to make sure that rvm is working.</p>
<blockquote>
<p><code>rvm list</code></p>
</blockquote>
<p>If the command works, you may see something similar to</p>
<blockquote>
<pre><code>rvm rubies

=* ruby-1.9.3-p194 [ i686 ]

# => - current
# =* - current && default
# * - default</code></pre>
</blockquote>
<p>You may not have any “rubies installed”. I recommend that you then run:</p>
<blockquote>
<p><code>rvm install ruby-1.9.3</code></p>
</blockquote>
<p>While this is doing it’s thing (it will take a while), you can move onto steps 2 through 4.</p>
</div>
</div>
<div class='section git'>
<h2>2. Install Git</h2>
<div class='content'>
<p>We also want to make sure we can save our work permanently. We will use the version control system <a href='http://git-scm.com/' title='Git Source Control Manager'>Git</a>.</p>
<p><strong>Linux Users</strong>: Your favorite package manager will have a package for git. You have my word as the anonymous narrator of this guide.</p>
<blockquote>
<p>For example, <em>Ubuntu Users</em> will use the command <code>sudo apt-get install git</code>.</p>
</blockquote>
<p><strong>Apple Users</strong>: You have a couple of options. If you are using Homebrew, use <code>brew install git</code>. If you have no idea what Homebrew is, you can simply <a href='http://git-scm.com/download/mac'>Download Git</a> from their <a href='http://git-scm.com/' title='Git Source Control Manager'>website</a>.</p>
<p>If you get lost, Github provides <a href='https://help.github.com/articles/set-up-git'>detailed instructions</a> that are much better than mine.</p>
</div>
</div>
<div class='section github'>
<h2>3. Signup for a Github Account</h2>
<div class='content'>
<p>We want somewhere to put our code. As we are learning, we will be making our code <a href='https://en.wikipedia.org/wiki/Open-source_software'>open source</a>. This is fantastic because we can learn from each other.</p>
<p>We can also use <a href='https://github.com/'>Github</a> for <em>free</em>!</p>
<p>Go <a href='https://github.com/signup/free'>Sign Up</a> now.</p>
<p>Github has <a href='https://help.github.com/'>fantastic documentation</a> detailing how to use Git and take advantage of their services. You can explore this yourself now. We will also begin covering git in more detail later this semester. Very useful tool to know how to use. <em>+1 Marketable Skill</em>.</p>
</div>
</div>
<div class='section ssh-keys'>
<h2>4. Setup SSH Keys</h2>
<div class='content'>
<p>In order to use git from your terminal, you will need to setup some authentication keys. Github uses SSH keys to authenticate users attempting to push code to a repository (save code).</p>
<p>They have a <a href='https://help.github.com/articles/generating-ssh-keys'>awesome guide</a> for this. It is even tailored to your favorite operating system!</p>
<p>When generating your keyfiles, any options in <span>brackets</span> are default options. I recommend you leave the filename of the keys to be their default (id_rsa).</p>
<p>You know you’ve got it <em>working correctly</em> if you are able to run the command</p>
<blockquote>
<p><code>ssh -T git@github.com</code></p>
</blockquote>
<p>and see the output</p>
<blockquote>
<p><code>Hi *USERNAME*! You've successfully authenticated, but GitHub does not
 provide shell access.</code></p>
</blockquote>
<p>When you get this working, you know you’re doing great.</p>
</div>
</div>
<div class='section sinatra'>
<h2>5. Install Sinatra</h2>
<div class='content'>
<p>Now that you have RVM with ruby-1.9.3 installed, we can start using ruby. You are going to run the command</p>
<blockquote>
<pre><code>gem install sinatra</code></pre>
</blockquote>
<p>This will install the <a href='http://sinatrarb.com/'>Sinatra Web Framework</a>. It will be our tool of choice for the next few weeks as we explore web development.</p>
</div>
</div>
<div class='section sinatra'>
<h2>6. Create Your First Website</h2>
<div class='content'>
<p>Now we get to <strong><em>CREATE</em></strong>! Create your first website!</p>
<p>The plan: We are going to create a project directory, a server file, a documentation file. We’ll then see our creation run in our browser. Finally we’ll push the results to Github.</p>
<p>Open your terminal and open a <a href='#text-editors'>text editor</a>. Run:</p>
<blockquote>
<pre><code>mkdir -p ~/cwdg_projects/hello_sinatra
cd ~/cwdg_projects/hello_sinatra</code></pre>
</blockquote>
<p>Copy the following text into your text editor and save the file as <code>hi.rb</code>:</p>
<blockquote>
<pre><code>require 'sinatra'

get '/hi' do
 "Hello World!"
end</code></pre>
</blockquote>
<p>This is going to create a page that just says “Hello World”.</p>
<p>Now you will start the server by running:</p>
<blockquote>
<pre><code>ruby hi.rb</code></pre>
</blockquote>
<p>It should output something similar to <code>Listening on 0.0.0.0:4567</code>.</p>
<p>You can look at this page by pointing your browser at <a href='http://localhost:4567'>http://localhost:4567</a>. You should get an error page from Sinatra (“Sinatra doesn’t know this ditty”).</p>
<p>Now go to <a href='http://localhost:4567/hi'>http://localhost:4567/hi</a>. You should see “Hello World!” in your browser.</p>
<p><strong><em>VICTORY!</em></strong></p>
</div>
</div>
<div class='section push'>
<h2>7. Push to Github</h2>
<div class='content'>
<p>Now we need to save this success for posterity. <a href='https://github.com/new'>Create a New Repo on Github</a>. Name it <code>hello_sinatra</code> or whatever you like. Check “public” and hit “create repository”. Now we’ll follow the directions on the next page.</p>
<p>With your text editor, save a file called README.md in this directory with the text:</p>
<blockquote>
<pre><code>A basic Sinatra app.</code></pre>
</blockquote>
<p>In your terminal, run:</p>
<blockquote>
<pre><code>git init
git add hi.rb
git add README.md
git commit -m "Basic Sinatra App"
git remote add origin git@github.com:YOUR_USERNAME/hello_sinatra.git
git push -u origin master</code></pre>
</blockquote>
<p>Make sure you used your own Github username. <em>YOUR_USERNAME</em> is a placeholder. Replace it with whatever your real username is. You can check the <a href='https://github.com/saterus/hello_sinatra'>example I created</a> if you like.</p>
<p>Check the Github page again. You should see your code saved to Github now!</p>
<p><strong><em>MISSION ACCOMPLISHED!</em></strong></p>
<p>Everything is setup. Next week we will build on the work you did here. You can read up on <a href='http://www.ruby-lang.org/en/'>Ruby</a>, <a href='http://git-scm.com/book/en/Getting-Started'>Git</a>, <a href='https://help.github.com/'>Github</a>, <a href='http://www.sinatrarb.com/'>Sinatra</a>, or <a href='https://en.wikipedia.org/wiki/Web_development'>Web Development</a> in the meantime.</p>
</div>
</div>
<div class='section faq'>
<h2>FAQ</h2>
<div class='content'>
<ul>
<li>
<p><strong>What do you mean by “run this command”?</strong> - In your terminal application, type or paste the code snippet and hit enter.</p>
</li>
<li>
<p><strong>I’m typing my password, but nothing shows up.</strong> - Don’t worry! It is still working, it is just hiding your password from anyone who might be standing behind you. When you are finished, just hit enter.</p>
</li>
<li>
<p><strong>Zlib isn’t installed?</strong> - We noticed that some people using Ubuntu had issues installing Sinatra because of a missing dependency. Follow <a href='https://rvm.io/packages/zlib/'>these instructions</a> in order to get your gem installs to work.</p>
</li>
<li>
<p><strong>I was installing XYZ, it says it failed. What should I do?</strong> - Try thinking of your problem in its general terms, then typing them into Google. If you have a specific error message, try that. <a href='http://stackoverflow.com/'>Stack Overflow</a> is a pretty good resource for common problems.</p>
</li>
<li>
<p><strong>Which text editor should I use?</strong> - It doesn’t really matter. If someone tells you to use Emacs or Vim, they mean well, but are likely just going to confuse you. You might want to try <a href='http://projects.gnome.org/gedit/'>Gedit</a> or <a href='http://www.sublimetext.com/2'>Sublime Text 2</a>.</p>
</li>
<li>
<p><strong>I’m stuck.</strong> - Step 1: <em>Don’t Give Up!</em> - You probably ran into a problem someone else is having. Please feel free to send an email out with a detailed description of your problem. Someone will likely be able to help. You should include what operating system you are using, and which steps have been completed successfully.</p>
</li>
<li>
<p><strong>I found an error/typo/omission in this guide.</strong> - Please email <a href='mailto:cwdgosu@gmail.com'>cwdgosu@gmail.com</a> with your keen observation. If you feel really adventurous, you can <a href='https://github.com/CWDG/cwdg.github.com'>submit a pull request with a fix or improvement</a>.</p>
</li>
</ul>
</div>
</div>
<div class='section why'>
<h2>But why are we installing XYZ program?</h2>
<div class='content'>
<p>There are many options for how to create web applications. We have chosen a few technologies to use so everyone is using similar software. We think the benefits of this will become apparent as people begin creating their own projects. Our club members will become experts in these tools capable of actually helping each other.</p>
<p>If you have questions about specific technology choices, please feel free to email the mailing list or <a href='mailto:cwdgosu@gmail.com'>cwdgosu@gmail.com</a>.</p>
</div>
</div>
</div>
</div>
<div id='footer'>
<p>Email <a href='mailto:cwdgosu@gmail.com'>cwdgosu@gmail.com</a> for more information.</p>
</div>
</body>
</html>