forked from srisi/github_pages_tutorial
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathediting.html
93 lines (76 loc) · 5.94 KB
/
editing.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
<!DOCTYPE html>
<html lang="en">
<!--The head contains metadata about our page and it's the place where we can load css files (for -->
<!--styling) and javascript files.-->
<head>
<meta name="author" content="Stephan Risi">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Load JQuery and Bootstrap. They are javascript library that handle the layouting for us.-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- The nav bar remains the same for every page, so by defining it in only one file, we only
need to edit it in one place when we make changes to it. -->
<script> $(function(){$("#header").load("header.html");});</script>
<!-- Import the css file, which defines how our website looks -->
<link href="css/main.css" rel="stylesheet">
<!--Set the title for the page-->
<title>Editing the Website</title>
</head>
<!--We define the elements that we actually want to display in the body element-->
<body>
<!--This element is a placeholder for the header with the navbar, which we load above-->
<div id="header"></div>
<div class="column">
<h1>Editing the Website</h1>
<p>Having a website is fun. Changing it even more so.</p>
<p>There are many ways of modifying our website. We will focus just on the simplest ones here.</p>
<p>This is supposed to be your personal website or a project website, not a tutorial. So
let’s change things around.</p>
<p>To get started, go to the github page for your repository. It will be at
<code>github.com/<username>/<username>.github.io</code> <br>Once you’re there, it should say
<code><username> / <username>.github.io</code> at the top.</p>
<p>Then click on index.html. (Note: The list of files that you see in your repository probably
differ from the screenshot below. I’m taking screenshots as I am adding new files to this tutorial.)</p>
<p><img src="images/tutorials/editing_click_index.png" alt="Repo image. Select index.html"></p>
<p>This shows you the code used to generate the landing page for your website. It is called
index.html by default.</p>
<p>All the lines that start with <code><!--</code> and ends with <code>--></code> are
comments that I have added to explain what’s going on.
<img src="images/tutorials/editing_index_overview.png" alt="Overview of index.html"></p>
<p>Really, most of this is scaffolding. You can see the actual content of the website when you scroll down:</p>
<p><img src="images/tutorials/editing_index_content.png" alt="Actual content of index.html"></p>
<p>If we want to make changes to our website, we can simply click the edit button in the
top-right corner.
<img src="images/tutorials/editing_edit_button.png" alt="editing button"></p>
<p>There’s no stopping us now!</p>
<p>Let’s change the main heading of the website to “Hello World!” in the long tradition of
<a href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program">hello world programs</a> .</p>
<p>To do this, scroll down until you see <code><h1>Welcome to the Github Pages Tutorial</h1></code></p>
<p>Replace this line with
<code><h1>Hello World!</h1></code></p>
<p><img src="images/tutorials/editing_hello_world.png" alt="insert Hello World!"></p>
<p>Next, let's store this change.</p>
<p>Before Github became the place to host websites, git (the technical tool) and Github
(the website) were used to host code. More specifically, they allow programmers to
save incremental changes and reset their code to safe points. If you have heard about
“version control,” that’s what this means.</p>
<p>To keep track of the changes, Github expects you to write a short summary of the changes
that you make at the bottom of the page.</p>
<p>For this project, always directly commit your changes to the master branch. Git gives
you the option of creating multiple independent branches of your project which, is probably
not what you want to get involved in (c.f. the ever relevant
<a href="https://xkcd.com/1597/">Randall Munroe</a>).</p>
<p>When you’re happy with your changes and description, click “Commit changes.”
<img src="images/tutorials/editing_commit_changes.png" alt="insert Hello World!"></p>
<p>Now go to your website at, <code><username>.github.io</code><br>
Note: You may have to wait a minute or two for the change to show up on your website. You can also try
to force a "hard reload," which ignores files in your browser's cache by pressing Ctrl+R or Command+R.</p>
<p><img src="images/tutorials/editing_updated_website.png" alt="Updated website"></p>
<p>Alright! You have just made the first change to your website.</p>
<p>The <a href="html_basics.html">next section</a> will teach you all of the basics of html
that you need to know to display your first blog post.</p>
</div>
</body>