-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
227 lines (220 loc) · 8.78 KB
/
Copy pathindex.html
File metadata and controls
227 lines (220 loc) · 8.78 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>reveal.js</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1>Web Hosting</h1>
<h5>Ben Iofel</h5>
</section>
<section>
Not going to teach HTML/CSS
<aside class="notes">
First I'll talk about hosting, then you will set up your own hosting and register a domain. How many people here already have a website/domain name?
</aside>
</section>
<section>
<h2>Hosting</h2>
</section>
<section>
<p>Local HTML Files</p>
<ul>
<li class="fragment">File stored on your computer</li>
<li class="fragment">Other people can't access it</li>
</ul>
<div class="fragment">
<img src="local.png" />
</div>
<aside class="notes">
When you write some HTML, you can view it in a browser by double-clicking.
Browser just reads the file on your computer.
Other people can't see this file.
The point of hosting is to make your HTML publicly available on the web.
</aside>
</section>
<section>
<h2>Web Servers</h2>
<ul>
<li class="fragment"><code>file://</code> - read from the disk</li>
<li class="fragment"><code>http://</code> - speak HTTP to a server</li>
<li class="fragment">web server - program which speaks HTTP</li>
<li class="fragment">nginx</li>
<li class="fragment">apache</li>
<li class="fragment">
<a href="https://caddyserver.com/">caddy</a>
<ul>
<li><a href="https://letsencrypt.org">letsencrypt</a></li>
</ul>
</li>
</ul>
<aside class="notes">
When a browser sees 'file://', it knows to go to your hard drive and open that file.
When it sees 'http://' or https, it needs to use the HTTP protocol to communicate.
Your browser knows HTTP, so the server it connects to needs to as well.
A web server is a program that speaks HTTP and acts as the server-side.
</aside>
</section>
<section>
<h2>Hosting on your Computer</h2>
<ul>
<li class="fragment">You can run a web server on your computer</li>
<li class="fragment">Public access: static IP & port forwarding</li>
<li class="fragment">Always on</li>
</ul>
<aside class="notes">
You can host files from your computer if you run a web server (such as nginx).
It's not publically accessible by default, unless you have a static IP and set up port forwarding.
Even if you do that, your computer needs to be always on to serve your website.
</aside>
</section>
<section>
<h2>Static hosting</h2>
<ul>
<li class="fragment">Just upload files</li>
<li class="fragment">No maintenance</li>
<li class="fragment">GitHub Pages, Amazon S3, Dropbox</li>
<li class="fragment">No dynamic sites</li>
</ul>
<aside class="notes">
The simplest solution is to use static hosting. You just have to upload files to a service. We'll be using Github Pages. No maintance required, no need to configure a web server. Tradeoff: you can't use dynamic sites written in PHP or Python (you can do a lot with javascript on the client side these days).
</aside>
</section>
<section>
<h2>Hosted Services</h2>
<ul>
<li class="fragment">No maintence</li>
<li class="fragment">wordpress.org</li>
</ul>
<aside class="notes">
The next step up is a hosted service. You can run things like wordpress. You don't have to install software or manage a server but you still get full admin access.
</aside>
</section>
<section>
<h2>Shared Hosting</h2>
<ul>
<li class="fragment">Some maintenance</li>
<li class="fragment">Upload files via FTP</li>
<li class="fragment">Create databases</li>
<li class="fragment">Usually PHP</li>
<li class="fragment">GoDaddy, HostGator</li>
</ul>
<aside class="notes">
Shared hosting is a popular option. You can upload your files, configure your site, and create databases through a web interface.
</aside>
</section>
<section>
<img src="cpanel.png" />
</section>
<section>
<h2>PaaS</h2>
<ul>
<li class="fragment"><a href="https://heroku.com">Heroku</a></li>
<li class="fragment"><a href="https://www.pythonanywhere.com">pythonanywhere.com</a></li>
<li class="fragment">You write code, don't worry about infrastructure</li>
</ul>
<aside class="notes">
One option for dynamic websites is to use PaaS services. It's pretty similar to shared hosting. You generally have better support for different programming languages. They are responsible for installing Python or Java and you can just upload your code.
</aside>
</section>
<section>
<h2>IaaS</h2>
<ul>
<li class="fragment">VPS (shared) or dedicated server</li>
<li class="fragment">You have to do maintenance</li>
<li class="fragment">You have to install a web server, database, etc...</li>
<li class="fragment">Full control</li>
<li class="fragment">Amazon EC2, DigitalOcean, Linode, ...</li>
</ul>
<aside class="notes">
The last option is infrastructure as a service. You get a linux machine that you can ssh into. With a VPS (virtual private server), the hardware is shared with other customers but you still get root access. Or you can get a fully dedicated server.
It's your job to do maintenance, install software you need, but you get full control and the freedom to do whatever you want. If you're familiar with Linux, it's pretty easy. I use this personally.
</aside>
</section>
<section>
<h1>Domains</h1>
<aside class="notes">
That's it for hosting. Any questions?
</aside>
</section>
<section>
<h2>IP Address</h2>
<ul>
<li class="fragment">You can access any server via its IP address</li>
<li class="fragment">http://155.246.21.100 shows stevens.edu</li>
<li class="fragment">Not user friendly</li>
</ul>
<aside class="notes">
Not the most user friendly, so we use domain names.
</aside>
</section>
<section>
<h2>Domain Name</h2>
<ul>
<li class="fragment">google.com, stevens.edu</li>
<li class="fragment">TLDs: .com, .net</li>
<li class="fragment"><a href="https://iwantmyname.com/domains/new-gtld-domain-extensions">New TLDs</a> such as .ninja, .wtf</li>
</ul>
<img src="https://raventools.com/marketing-glossary/wp-content/uploads/2016/02/URL_Parts.png" />
<aside class="notes">
A domain name is a string, in several parts, that can be translated to an IP address. The TLD is the top level domain, such as .com, .net, or some of these new ones.
e.g. poop.bike
</aside>
</section>
<section>
<h2>DNS</h2>
<ul>
<li class="fragment">Translate domain names to IP addresses</li>
<li class="fragment">purple.com → 153.104.63.227</li>
<li class="fragment">We need to get our domain into the DNS system</li>
</ul>
<aside class="notes">
To actually convert a domain name to an IP address, programs use DNS.
</aside>
</section>
<section>
<h2>Domain Registrars</h2>
<ul>
<li class="fragment">Buy domains</li>
<li class="fragment">Takes up to 24 hours to propogate</li>
<li class="fragment">NameCheap, GoDaddy</li>
</ul>
<aside class="notes">
To buy a domain name you have to go to a domain registrar. Once you buy a domain you can change DNS settings to point to your server/hosting.
</aside>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
history: true,
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>