generated from intro-to-data-science-22-workshop/00-template-munzert-kermit
-
Notifications
You must be signed in to change notification settings - Fork 1
/
github-pages-presentation-slides.html
570 lines (387 loc) · 14.6 KB
/
github-pages-presentation-slides.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
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
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
<!DOCTYPE html>
<html lang="" xml:lang="">
<head>
<title>Publishing Websites with GitHub Pages</title>
<meta charset="utf-8" />
<meta name="author" content="Paul Sharratt & Fernando Corral Lozada" />
<script src="libs/header-attrs/header-attrs.js"></script>
<link href="libs/remark-css/default.css" rel="stylesheet" />
<link href="libs/remark-css/metropolis.css" rel="stylesheet" />
<link href="libs/remark-css/metropolis-fonts.css" rel="stylesheet" />
</head>
<body>
<textarea id="source">
class: center, middle, inverse, title-slide
.title[
# Publishing Websites with GitHub Pages
]
.author[
### Paul Sharratt & Fernando Corral Lozada
]
.institute[
### Hertie School
]
.date[
### 21/11/22
]
---
# Agenda:
<br>
##1. [What is GitHub Pages?](#whatispages)##
##2. [Why would you use GitHub Pages?](#whywouldyouuse)##
##3. [How do you setup GitHub Pages?](#howdoyouuse)##
##4. [What's Jekyll and why would you use it?](#whatsjekyll)##
##5. [Summary](#summary)##
##6. [Further Links and Resources](#linksandresources)##
<br>
---
name:whatispages
#What is GitHub Pages?
---
#What is GitHub Pages?
.pull-left[
### It's pretty straightforward...
- GitHub Pages is GitHub's webpages hosting service. With Pages, you can quickly and easily create public webpages from repos hosted and published through GitHub.
- All you need to do is upload your files to a repository, head into Settings to turn on GitHub Pages and its live and hosting your content.
<br>
- The quickest way to get up and running is by using a pre-set theme provided by Jekyll. You can then modify your GitHub Pages' content and style, but more about that later...
]
.pull-right[
<div align="center">
<br>
<img src=./images/pages-logo.jpeg height=500>
</div>
]
---
name: whywouldyouuse
#Why would you use GitHub Pages?
### The Advantages of GitHub Pages
---
# Why would you use GitHub Pages?
### The Advantages of GitHub Pages
.pull-left[
- **Free** - You can host your pages for free and there are no hidden costs.
- **Secure Subdomain** - You get a subdomain (username.github.io) which is provided over HTTPS.<sup>1</sup>
- **Customisible Subdomain** - If you want a more professional and accessible domain, you can create your own domain by adding a CNAME file to the repo or by changing the project's settings.
.footnote[<sup>1</sup> There are [fair usage policies](https://help.github.com/articles/github-terms-of-service/), but it's highly unlikely you'll hit the limits.]
]
--
.pull-right[
- **Showcase Your Code!**
- **Open-source** - Unless you change the settings to go private, your repo is open source, making it easier to showcase your code.
- **Real-time Updates** - When you commit an update, GitHub automatically pushes the update out live.
.footnote[<sup>2</sup> more about HTML/CSS in the practice session]
]
---
#Prerequisites...
.pull-left[
What you need to have before setting up GitHub Pages:
- **Git**
- **GitHub Account**
- **GitHub Desktop**
- **Code** - Ideally, some code you want to showcase using a static webpage.
]
--
.pull-right[
Before we get started, let’s clarify some common terms::
- **HTML** - The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.
- **CSS** - Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML.
]
---
#One Word of Caution...
##**Warning!**
- **GitHub Pages are static** - Pages does not support server-side scripting such as, **PHP, Ruby, or Python**.
- **Beyond the basics, making good-looking Pages can be tricky** - You’ll need to know the basics of Git and Jekyll.
- There are two ways to design your webpages:
1. Using **Jekyll**
2. Using **HTML & CSS**
- The workshop will cover how to use **HTML & CSS** files with GitHub Pages.
---
# How do you setup GitHub Pages?
.pull-left[
<br>
The setup for GitHub Pages is straightforward and we'll cover it in a few simple steps:
**Step 1** - Create a Repo
**Step 2** - Go to `Pages` in the Repo
**Step 3** - Visit your Page
**Step 4** - Edit Your `README` File
**Step 5** - Clone Your Repo to Add `HTML` & `CSS` files
<br>
]
.pull-right[
<div align="center">
<img src="images/gifs/brent.gif" width=800>
</div>
<div align="center">
<em>You, after setting up GitHub Pages for the first time...<em>
</div>
]
---
# How do you setup GitHub Pages?
.pull-left[
**Step 1 - Create a Repo**
- In the upper-right corner of any page, use the drop-down menu, and select **New repository**.
- Alternatively, click on the big green **New** button.
- Give your repo a name. Your repo's name will form part of your webpage's `URL`
- Add a `README.md` file.
- Click **Create Repository**
- *If you already have a repo that you want to create a page for, skip this step.*
]
.pull-right[
<div align="center">
<img src="images/gifs/step-1-create-repo.gif" width=1000>
</div>
]
---
# How do you setup GitHub Pages?
.pull-left[
**Step 2 - Go to Pages in the repo**
- Under your repository name, click `Settings`
- In the `Code and automation` section of the sidebar, click **Pages**.
- Under `Build and deployment`, under `Source`, select **Deploy from a branch**.
- Under `Build and deployment`, under `Branch`, use **None** or Branch drop-down menu and select a publishing
source.
- Then click **Save**
- **Congratulations - you've created a Page.**
]
.pull-right[
<div align="center">
<img src="images/gifs/step-2-go-to-pages.gif" width=800>
</div>
]
---
# How do you setup GitHub Pages?
.pull-left[
**Step 3 - Vist your Page**
- After a moment, your page will be generated and the URL will show up on the `Pages` section.
- The domain name will be `username.github.io`
- Your webpage will have no content, except for the repo name.
- There are a few ways to add content...
]
.pull-right[
<div align="center">
<img src="images/gifs/step-3-visit-your-page.gif" width=800>
</div>
]
---
# How do you setup GitHub Pages?
.pull-left[
**Step 4 - Edit Your `README` File**
- The most basic way to add content to your page is to edit your `README.md` file
- Go to the file in your repo
- Click **Edit**
- Make the changes in the file.
- Commit the changes
- After about ten minutes, they will be displayed on your webpage.
]
.pull-right[
<div align="center">
<br>
<img src="images/gifs/step-4-edits-in-readme.gif" width=800>
</div>
]
---
# How do you setup GitHub Pages?
.pull-left[
**Step 5 - Clone Your Repo to Add `HTML` & `CSS` files**
- For more advanced changes, it's best to clone your repo and make changes locally.
- **Important:** GitHub Pages will automatically incorporate your HTML and CSS files into your webpage.
- Any changes made in the files in your repo will be automatically updated after you commit.
]
.pull-right[
<div align="center">
<br>
<img src="images/gifs/step-5-clone-your-repo.gif" width=800>
</div>
]
---
name:whatsjekyll
#What's Jekyll and how do you use it?
---
#What's Jekyll and how do you use it?
.pull-left[
- [**Jekyll**](https://jekyllrb.com) is a static site generator written in Ruby by Tom Preston-Werner. It is distributed under the open source MIT license.
- Jekyll started a web development trend towards static websites. As of 2017 Jekyll was ranked the most popular static site generator, largely due to its adoption by GitHub.
- Jekyll provides design templates for static webpages. These can be installed by integrating your GitHub Page with Jekyll.
]
.pull-right[
<div align="center">
<br>
<img src="images/jekyll-main.png" width=800>
</div>
]
---
#What's Jekyll and how do you use it?
.pull-left[
- However, Jekyll is difficult to install as it requires Ruby programming language and that's outside of the scope of this presentation.
- Essentially, Jekyll allows you to use design templates for your static Pages. This can save you a lot of time writing HTML and CSS, but for today we'll stick to the basic GitHub Pages setup.
- If you want to learn more, there are links at the end of this presentation.
]
.pull-right[
<div align="center">
<br>
<img src="images/jekyll-main.png" width=800>
</div>
]
---
name: summary
#Summary
---
#Summary
* GitHub Pages is a free hosting service for GitHib repositories.
* Setting up a GitHub Page is super quick and can be done in few simple steps.
* Any changes you make in the repo will be published on the webpage.
* It's best practice to clone your repo, make changes locally, and then push the changes using Git or GitHub Desktop
* **Warning:** The webpages are static.
* You can use **Jekyll** for web design templates to improve the look of your webpage.
---
name:linksandresources
#Further Links and Resources
---
#Further Links and Resources
Want to learn more about GitHub Pages? Check out these resources:
### [GitHub Pages Homepage](https://pages.github.com) (Not static!)
### [GitHub Pages - Documentation](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site)
###[GitHub Pages and Jekyll - Documentation](https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/about-github-pages-and-jekyll)
### [Workshop Repo](https://github.com/intro-to-data-science-22-workshop/21-publishing-sites-with-github-pages-sharratt-lozada/tree/main/Workshop)
---
# <center>Thanks for listening!
---
# <center>Thanks for listening!
<br>
### Now for the practice session...
</textarea>
<style data-target="print-only">@media screen {.remark-slide-container{display:block;}.remark-slide-scaler{box-shadow:none;}}</style>
<script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
<script>var slideshow = remark.create({
"highlightStyle": "github",
"highlightLines": true,
"countIncrementalSlides": false,
"ratio": "16:9",
"hash": true
});
if (window.HTMLWidgets) slideshow.on('afterShowSlide', function (slide) {
window.dispatchEvent(new Event('resize'));
});
(function(d) {
var s = d.createElement("style"), r = d.querySelector(".remark-slide-scaler");
if (!r) return;
s.type = "text/css"; s.innerHTML = "@page {size: " + r.style.width + " " + r.style.height +"; }";
d.head.appendChild(s);
})(document);
(function(d) {
var el = d.getElementsByClassName("remark-slides-area");
if (!el) return;
var slide, slides = slideshow.getSlides(), els = el[0].children;
for (var i = 1; i < slides.length; i++) {
slide = slides[i];
if (slide.properties.continued === "true" || slide.properties.count === "false") {
els[i - 1].className += ' has-continuation';
}
}
var s = d.createElement("style");
s.type = "text/css"; s.innerHTML = "@media print { .has-continuation { display: none; } }";
d.head.appendChild(s);
})(document);
// delete the temporary CSS (for displaying all slides initially) when the user
// starts to view slides
(function() {
var deleted = false;
slideshow.on('beforeShowSlide', function(slide) {
if (deleted) return;
var sheets = document.styleSheets, node;
for (var i = 0; i < sheets.length; i++) {
node = sheets[i].ownerNode;
if (node.dataset["target"] !== "print-only") continue;
node.parentNode.removeChild(node);
}
deleted = true;
});
})();
// add `data-at-shortcutkeys` attribute to <body> to resolve conflicts with JAWS
// screen reader (see PR #262)
(function(d) {
let res = {};
d.querySelectorAll('.remark-help-content table tr').forEach(tr => {
const t = tr.querySelector('td:nth-child(2)').innerText;
tr.querySelectorAll('td:first-child .key').forEach(key => {
const k = key.innerText;
if (/^[a-z]$/.test(k)) res[k] = t; // must be a single letter (key)
});
});
d.body.setAttribute('data-at-shortcutkeys', JSON.stringify(res));
})(document);
(function() {
"use strict"
// Replace <script> tags in slides area to make them executable
var scripts = document.querySelectorAll(
'.remark-slides-area .remark-slide-container script'
);
if (!scripts.length) return;
for (var i = 0; i < scripts.length; i++) {
var s = document.createElement('script');
var code = document.createTextNode(scripts[i].textContent);
s.appendChild(code);
var scriptAttrs = scripts[i].attributes;
for (var j = 0; j < scriptAttrs.length; j++) {
s.setAttribute(scriptAttrs[j].name, scriptAttrs[j].value);
}
scripts[i].parentElement.replaceChild(s, scripts[i]);
}
})();
(function() {
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
if (/^(https?:)?\/\//.test(links[i].getAttribute('href'))) {
links[i].target = '_blank';
}
}
})();
// adds .remark-code-has-line-highlighted class to <pre> parent elements
// of code chunks containing highlighted lines with class .remark-code-line-highlighted
(function(d) {
const hlines = d.querySelectorAll('.remark-code-line-highlighted');
const preParents = [];
const findPreParent = function(line, p = 0) {
if (p > 1) return null; // traverse up no further than grandparent
const el = line.parentElement;
return el.tagName === "PRE" ? el : findPreParent(el, ++p);
};
for (let line of hlines) {
let pre = findPreParent(line);
if (pre && !preParents.includes(pre)) preParents.push(pre);
}
preParents.forEach(p => p.classList.add("remark-code-has-line-highlighted"));
})(document);</script>
<script>
slideshow._releaseMath = function(el) {
var i, text, code, codes = el.getElementsByTagName('code');
for (i = 0; i < codes.length;) {
code = codes[i];
if (code.parentNode.tagName !== 'PRE' && code.childElementCount === 0) {
text = code.textContent;
if (/^\\\((.|\s)+\\\)$/.test(text) || /^\\\[(.|\s)+\\\]$/.test(text) ||
/^\$\$(.|\s)+\$\$$/.test(text) ||
/^\\begin\{([^}]+)\}(.|\s)+\\end\{[^}]+\}$/.test(text)) {
code.outerHTML = code.innerHTML; // remove <code></code>
continue;
}
}
i++;
}
};
slideshow._releaseMath(document);
</script>
<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
(function () {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML';
if (location.protocol !== 'file:' && /^https?:/.test(script.src))
script.src = script.src.replace(/^https?:/, '');
document.getElementsByTagName('head')[0].appendChild(script);
})();
</script>
</body>
</html>