/
index.html
113 lines (90 loc) · 5.99 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
<!DOCTYPE html>
<html>
<head>
<style>
code {color:#454545;
}
a:link { text-decoration:none;
color:#63c199;
}
a:visited { color:#63c199;}
a:hover{font-weight:bold;}
a:active {color:#d842b6;}
body{
max-width:35em;
margin: 5em auto 10em auto;
}
</style>
<title>Surge vs GitHub Pages</title>
</head>
<body>
<h1><a href="https://pages.github.com/" target="_blank">GitHub Pages</a> vs <a href="https://surge.sh/" target="_blank">Surge</a> for Launching Static Sites</h1>
<h2 class="heading">Comparing the two:</h2>
<p>I recently joined the team that builds Surge as a practicum student and was tasked with comparing the first-run workflow of launching a static web application through Surge vs GitHub Pages. I'm relatively new to web development and this was my first time downloading and installing Node.js. I had previously dabbled with PHP on the backend and JavaScript on the front-end.</p>
<p>My launches have always been through FTP by going through the cPanel of my hosting provider so launching through the terminal was a new approach for me. To give some context, my experience with the terminal has been collaborating with classmates at school, pulling and pushing from our group projects based on GitHub.</p>
<p>In doing this comparison I created a list that could act as a tutorial based on the GitHub Pages and Surge documentation, respectively. I found that <a href="https://surge.sh/" target="_blank">Surge</a> has separated itself by simplifying the process as a dedicated CDN through the terminal.</p>
<h3 class="heading heading-small">Steps for GitHub Pages:</h3>
<ol>
<li>First off open up your browser</li>
<li>Go to github.com</li>
<li>Create an account</li>
<li>Once you have an account, log in on github.com</li>
<li>Then you will need to <a href="http://git-scm.com/downloads" target="_blank">install</a> the latest version of Git</li>
<li>After installing, open up your Terminal</li>
<li>Run the command: <code>git config --global user.name "YOUR NAME"</code></li>
<li>Run the command: <code>git config --global user.email "YOUR EMAIL ADDRESS"</code></li>
<li>You will then need to <a href="https://help.github.com/articles/set-up-git/#next-steps-authenticating-with-github-from-git" target="_blank">authenticate</a> with Github from Git</li>
<li>To authenticate, you need to generate SSH keys for each computer you will be using</li>
<li>First check for existing SSH keys--Run the command: <code>ls -al ~/.ssh</code></li>
<li>Generate a new SSH key--Run the command: <code>ssh-keygen -t rsa -C "your_email@example.com"</code></li>
<li>Enter a file to save the key (default settings are recommended) [press enter]</li>
<li>You'll then be asked to enter a passphrase</li>
<li>Re-enter passphrase</li>
<li>You'll then be given the ID to your SSH key</li>
<li>Ensure SSH agent is enabled--Run the command: <code>$ eval "$(ssh-agent -s)"</code></li>
<li>Add your generated SSH key to the ssh-agent--Run the command: <code>ssh-add ~/.ssh/id_rsa</code></li>
<li>Copy the SSH key to your clipboard for adding to your account--Run the command: <code> pbcopy < ~/.ssh/id_rsa.pub</code></li>
<li>Open up your browser</li>
<li>Go to github.com</li>
<li>Login to your account</li>
<li>In the top right corner of any page click the user settings token/icon</li>
<li>In the user settings sidebar click SSH keys</li>
<li>Click Add SSH key</li>
<li>In the Title field add a descriptive label for the new key. e.g. "Personal Macbook Air"</li>
<li>Paste your key into the "Key" field</li>
<li>Click Add Key</li>
<li>Confirm the action by entering your GitHub password</li>
<li>Open your terminal to test the connection</li>
<li>Run the command: <code>ssh -T git@github.com</code></li>
<li>You may be prompted with a warning--verify the RSA key fingerprint in the warning message and type yes</li>
<li>If the username in the following greeting message matches your username then you've successfully set up your SSH key</li>
<li>Open your web browser</li>
<li>Go to github.com</li>
<li>Create a new repository</li>
<li>Open up your Terminal</li>
<li><code>cd path/to/myproject</code></li>
<li><code>git init</code></li>
<li><code>git add .</code></li>
<li><code>git commit -m "my first commit"</code></li>
<li><code>git remote add origin git@github.com:me/my-project.git</code></li>
<li><code>git checkout -b gh-pages</code></li>
<li><code>git push origin gh-pages</code></li>
</ol>
<h3>Steps for Surge:</h3>
<ol>
<li>Open web browser</li>
<li>Download and Install <a href="https://nodejs.org/" target="_blank">node.js</a></li>
<li>Open up your Terminal</li>
<li>Install surge by running: <code>npm install --global surge</code></li>
<li>launch project by running: <code>surge path/to/myproject myproject.surge.sh</code></li>
</ol>
<br>
<h3>Conclusion:</h3>
<p>I found that after reading the docs the implementation was relatively straight forward for Surge after downloading and installing node.js. The commands require a file path to your project and a domain name for an initial launch. Whether that is a subdomain of surge.sh or linking to your custom domain through a CNAME file. Surge prompts you for an e-mail and password to protect you from other users launching to that domain.</p>
<p> GitHub Pages requires a lot more work for a new user to setup the connection between Git and GitHub including authenticating through an SSH key and setting up GitHub Pages branches. This would be a deterrent for some novice web developers who are using a CDN to launch their first project.</p>
<p>Surge still works with Git and will ignore your .git directory by default. It also allows you to ignore any other files if you specify them in the '.surgeignore' file. Those files won't touch Surge's servers. Overall, having a simple terminal based launch in 3 steps is what gives Surge the edge for launching static sites for free. I would recommend giving both a try to see which system you prefer. I personally had a much better experience launching on Surge.</p>
<br>
<br>
Jeff FitzGerald <a href="https://twitter.com/j33ff_">@j33ff_</a>
</body>
</html>