-
Notifications
You must be signed in to change notification settings - Fork 0
/
setting-up-a-website-and-separate-blog-repository-hosted-on-github.html
132 lines (126 loc) · 8.24 KB
/
setting-up-a-website-and-separate-blog-repository-hosted-on-github.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Data Piques | Setting up a website and separate blog repository hosted on GitHub</title>
<link rel="shortcut icon" type="image/png" href="/favicon.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/theme/css/screen.css" type="text/css" />
<link rel="stylesheet" href="/theme/css/pygments.css" type="text/css" />
<link rel="stylesheet" href="/theme/css/print.css" type="text/css" media="print" />
<meta name="generator" content="Pelican" />
</head>
<body>
<header>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="/archives.html">Archives</a></li>
<li><a href="http://www.ethanrosenthal.com">Home Page</a></li>
</ul>
</nav>
<div class="header_box">
<h1><a href="">Data Piques</a></h1>
</div>
</header>
<div id="wrapper">
<div id="content"> <h4 class="date">Aug 22, 2014</h4>
<article class="post">
<h2 class="title">
<a href="/setting-up-a-website-and-separate-blog-repository-hosted-on-github.html" rel="bookmark" title="Permanent Link to "Setting up a website and separate blog repository hosted on GitHub"">Setting up a website and separate blog repository hosted on GitHub</a>
</h2>
<p>As the title of the blog suggests, I would like to use this space to write about anything "data"-related that piques my interest. Likely, this will consist of personal and academic projects.</p>
<p>As the title of this post suggests, I would like to explain how I created this blog and my <a href="http://ethanrosenthal.com">website</a>.</p>
<h2>Setting up the website - <a href="http://ethanrosenthal.com">ethanrosenthal.com</a></h2>
<p>During my 5 years at Columbia, I have sporadically messed around with coding html and css in an attempt to make a personal website. Various iterations were hosted on the physics department servers, but, in the interest of long-term hosting, I decided to migrate everything to <a href="https://github.com/">GitHub</a>. This was largely inspired by these blog posts from <a href="http://joshualande.com/jekyll-github-pages-poole/">Joshua Lande</a> and <a href="http://bdewilde.github.io/blog/2014/08/10/on-starting-over-with-jekyll/">Burton DeWilde</a> though implemented a bit differently.</p>
<h4>GitHub Pages</h4>
<p>GitHub has a feature called <a href="https://pages.github.com/">GitHub Pages</a> that provides one free website per account. Setting up your free website is quite easy (and detailed better at the above link):</p>
<ul>
<li>Create a new repository titled <em>username</em>.github.io</li>
<li>Clone the repository to your computer</li>
<li>"Initialize" the repo by creating an <em>index.html</em> file</li>
</ul>
<p>Your new GitHub website is <em>username</em>.github.io. You can now build your website in the repo you created, and GitHub takes care of the rest.</p>
<p>All I had to do was copy all of the files from the physics server into my new repo, and my website was built at <a href="ethanrosenthal.github.io">ethanrosenthal.github.io</a> (because "ethanrosenthal" is my GitHub username).</p>
<h4>Adding a custom domain</h4>
<p>I wanted to use a custom domain instead of ethanrosenthal.github.io, so I bought ethanrosenthal.com through <a href="namecheap.com">namecheap.com</a> for ~$10/year. In order setup the custom domain on namecheap, go to "Your Domains/Products," click the purchased custom domain, and then click "All Host Records." You should now fill in the top three rows as follows:</p>
<table>
<thead>
<tr>
<th><strong>Host Name</strong></th>
<th><strong>IP ADDRESS/URL</strong></th>
<th><strong>RECORD TYPE</strong></th>
<th><strong>TTL</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>@</td>
<td>192.30.252.153</td>
<td>A (Address)</td>
<td>1800</td>
</tr>
<tr>
<td>@</td>
<td>192.30.252.154</td>
<td>A (Address)</td>
<td>1800</td>
</tr>
<tr>
<td>www</td>
<td><em>username</em>.github.io</td>
<td>CNAME (Alias)</td>
<td>1800</td>
</tr>
</tbody>
</table>
<p>Below is a screenshot of my filled in namecheap dashboard:</p>
<p><img alt="namecheap dashboard" src="{{site.url}}/assets/img/2014-08-24-namecheap-dashboard.png" /></p>
<p>In addition to the above modifications that you have to make, you need to include a file in your <em>username</em>.github.io repo titled "CNAME" which contains your custom domain name in it. For example, mine simply says "ethanrosenthal.com". It may take some time for these changes to fully propagate, but, eventually, your custom domain should successfully redirect to the GitHub Pages repo (though still display the custom domain in the url bar).</p>
<h2>Setting up the blog - <a href="http://blog.ethanrosenthal.com">blog.ethanrosenthal.com</a></h2>
<p>In addition to one free personal website, GitHub Pages allows for unlimited "Project" Pages. You can create a Project Page for any repository in your GitHub account. The Project Page is essentially a website associated with your repo. This is how I chose to setup the blog. I created a new repo called "blog" and filled it with all of the files for a full-fledged blog.</p>
<h4>Jekyll and Poole</h4>
<p>Considering it took me many years to create my website, I opted to use a blog template rather than start from scratch. GitHub Pages are powered by <a href="http://jekyllrb.com">Jekyll</a>, a static site generator. Blogging is quite simple - you can write your blog posts in Markdown, and Jekyll pretty much takes care of anything else that you do not feel like customizing. This even includes the layout of everything if you choose to download <a href="http://getpoole.com/">Poole</a>. Simply go to the <a href="https://github.com/poole/poole">Poole GitHub</a>, clone the repo, and then type</p>
<div class="highlight"><pre>jekyll serve
</pre></div>
<p>in your terminal. Jekyll will now build a static website, as specified and laid out by Poole, in the folder _site/. The key difference between your free GitHub website and GitHub Project Pages is that you need to push your website to a separate "gh-pages" branch in order to build the Project Pages website associated with your repository. So, after building your static website on your local machine, you must switch to the gh-pages branch, add/commit your files, and then push to GitHub. The Jekyll-built <em>repo</em> website will now be located at <em>username</em>.github.io/<em>repo</em></p>
<h4>Custom Project Pages domains</h4>
<p>I ran into some issues with my blog Project Page not formatting correctly because of my custom domain. I am still not exactly sure why this was happening, but creating a custom domain for the blog solved the problem. To do this, I added the following under SUB-DOMAIN SETTINGS on the namecheap dashboard</p>
<table>
<thead>
<tr>
<th><strong>Host Name</strong></th>
<th><strong>IP ADDRESS/URL</strong></th>
<th><strong>RECORD TYPE</strong></th>
<th><strong>TTL</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>blog</td>
<td>ethanrosenthal.github.io.</td>
<td>CNAME (Alias)</td>
<td>1800</td>
</tr>
</tbody>
</table>
<p>I also added a CNAME file to the blog repo containing the line "blog.ethanrosenthal.com". Now, the blog is located at <a href="http://blog.ethanrosenthal.com/">blog.ethanrosenthal.com</a>, and everything redirects and formats fine.</p>
<h2>Lastly</h2>
<p>There are a couple other things that I have done, like adding an <a href="{{site.url}}/archive/">Archive</a> section and Google Analytics tracking, but these tasks have been documented in the blog posts that I linked to at the top. Hopefully, I will have some more interesting projects to post soon.</p>
<div class="clear"></div>
<div class="info">
<a href="/setting-up-a-website-and-separate-blog-repository-hosted-on-github.html">posted at 00:00</a>
</div>
</article>
<div class="clear"></div>
<footer>
<p>
<a href="https://github.com/jody-frankowski/blue-penguin">Blue Penguin</a> Theme
·
Powered by <a href="http://getpelican.com">Pelican</a>
</footer>
</div>
<div class="clear"></div>
</div>
</body>
</html>