-
Notifications
You must be signed in to change notification settings - Fork 18
/
index.html
137 lines (124 loc) · 5.38 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Make This In An Hour</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 class="text-center">Make This In An Hour</h1>
<p>One of my friends has been saying for a couple months that he would make his
website over spring break. Now it's the end of spring break and he hasn't
started. His birthday is tomorrow, and I've decided to be an <s>asshole</s>
good friend and give the gift of accountability by writing down step-by-step
instructions to make it as simple as possible.</p>
<p>It really only takes an hour to make a website. I know because I timed
myself doing the following and the whole process took me just under an hour
to make this website. (I even did the registering a new domain and
creating a new GitHub account for a good measure!) You can view the code
for this website on <a
href="https://github.com/smilli/makethisinanhour">GitHub</a>.</p>
<hr/>
<h2>Website Instructions</h2>
<ol>
<li>Make a <a href="https://github.com/join">GitHub account</a> and
download <a href="http://git-scm.com/downloads">Git</a> if you haven't
already.</li>
<li>Create a directory to hold your website and cd into it. <code>mkdir my-site && cd
my-site</code>. All future commands will assume you are within this
directory.</li>
<li>Make <a href="https://github.com/new">a new GitHub repository</a> for your site titled
yourusername.github.io. For example, my GitHub account is smilli, so my
repository is named smilli.github.io.</li>
<li>While in the directory for your website run <code>git init</code> and
<code>git remote add origin
https://github.com/username/username.github.io.git</code> with username
replaced by your username.</li>
<li>Make a file called <code>index.html</code> in your website's folder with the HTML
for your main page. Don't spend long on this; it can be as simple as the following:</li>
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>YOUR SITE TITLE</title>
<!-- Add some style to your site, see http://getbootstrap.com for details -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<h1>YOUR SITE TITLE</h1>
<p>Your text blahblahbhalbha</p>
<p>Another paragraph! Maybe more text!</p>
</body>
</html>
</pre>
<li>Enter whatever text or HTML you want in the file. You can view the
changes you're making locally by running <code>python3 -m http.server
8000</code> if you're using Python 3 or <code>python -m
SimpleHTTPServer 8000</code> for Python 2. Then navigate to
http://localhost:8000 in your browser. You should see your website! (You can quit the command with Control-C)</li>
<li>Now run the following commands:
<pre>
git add .
git commit -m "Initial commit"
git push -u origin master
</pre>
</li>
<li>Go to https://yourusername.github.io/. You should now see your site!
Congratulations, you put something online.
</li>
</ol>
<hr/>
<h2>Adding your Custom Domain</h2>
<ol>
<li>Go to <a href="http://namecheap.com">namecheap.com</a> and register a
domain if you don't have one yet.</li>
<li>Create a file called <code>CNAME</code>
in all caps in your website directory. Then add a single line
that says <code>yourdomainname.com</code> (no
<code>http</code> or <code>www</code>) to the file. For example the CNAME file for
this website looks like this:
<pre>
makethisinanhour.com
</pre>
View details on <a
href="https://help.github.com/articles/adding-a-cname-file-to-your-repository/">CNAME
configuration</a> here.</li>
<li>Like before, push your changes to Github.
<pre>
git add .
git commit -m "Add CNAME"
git push
</pre>
</li>
<li>While logged into Namecheap, click
on the domain you want under <a
href="https://manage.www.namecheap.com/myaccount/domain-list.asp?from=memberhome">the
list of your domains</a>. The list of domains should look like this:
<a href="/img/yourdomains.png"><img src="/img/yourdomains.png"
class="img-responsive"/></a>
<p>After clicking on your domain, you should see a link that says "All Host
Records" on the left sidebar underneath "Host Management". Click this.
Now you should see the default records that Namecheap adds for your
site.</p>
<a href="/img/oldrecords.png"><img src="/img/oldrecords.png"
class="img-responsive"/></a>
<p>Modify your records to look like this (with username replaced by your
username of course):</p>
<a href="/img/records.png"><img src="/img/records.png"
class="img-responsive"/></a>
</li>
<li>
After the DNS changes propagate, you will be able to see
your website on your domain! Congrats :)
</li>
</ol>
<hr/>
<h4 class="text-center">Did you like this tutorial? Follow me on <a
href="http://twitter.com/smithamilli">Twitter</a>.</shameless plug></h4>
</div>
</body>
</html>