For my own sanity, should I ever attempt this again, here's how I finally got the website, blog and all that stuff working. All the information is there, but it can be a bit hard to figure out what to do if you haven't got a clue what you're doing from the start.
Domain Registration
This was easy, once I got over the fear of spending the money. I just went to GoDaddy and got the captainwhippet.com domain. Dead easy.
Hosting
I already had a GitHub account and after reading up about Git Hub Pages and Jekyll, I reckoned this was probably the easiest way to go. It seemed to be a simple matter to set up a user page and project pages in GitHub and then forward your domain to point at them. So far it has taken quite a bit of trial and error to get this right.
GitHub Repositories
So the details. First the facts about the repositories:
My main website captainwhippet.com is in the repository at
http://github.com/captainwhippet/captainwhippet.github.io
. This is a GitHub user page. I followed the instructions here to set this up.This blog is in the repository at
https://github.com/captainwhippet/blog
. This is a GitHub project page. Again, I followed the instructions here to start the set up.The other pages I have will be (or already are) GitHub project pages.
Site Content
First off, I used the GitHub automatic page generation to generate my main page. The documentation here made this easy. It's a good to get started quickly and the available templates are quite nice.
For the blog, I wanted to use Jekyll for the page generation. This turned out to be a bit involved. See the Jekyll Setup part below for some details.
Jekyll Setup
After a bit of Googling, I found this excellent blog that got me started: Get Started With GitHub Pages (Plus Bonus Jekyll). I followed this about half way, stopping before the 'Update the config file' section. Here are a couple more pages that filled in the rest of the details:
Using Jekyll with Pages - Essential reading to get everything running smoothly. The key command is
bundle exec jekyll serve --watch --baseurl ''
Jekyll GitHub Pages Help - This tells you how to properly use
{{ site.baseurl }}
when you are using a GitHub project page.
Custom Domain Setup
The last bit - custom domain setup. This caused me the biggest headache. After lots of messing about and getting confused, I went back to basics and got the main site and the blog working properly without a custom domain. Then I went step-by-step until I settled on the solution.
The objective: I wanted to be able to use these URLs for my pages instead of the github.io
urls:
Main site:
captainwhippet.com
andwww.captainwhippet.com
Blog:
http://captainwhippet.com/blog
and/orhttp://blog.captainwhippet.com
.Other project pages: similar to the blog setup.
The solution: There's the GitHub help on Setting up a custom domain with GitHub Pages. This has all the information you should need and that's great, but the terminology confused me! Here's what I actually did to get it working.
captainwhippet.com
To get captainwhippet.com
to point to my GitHub user page at captainwhippet.github.io
:
In the GoDaddy Domain Details page for the domain, click on the DNS File Zone tab.
Delete the existing A Record
Click Add Record to create a Zone record. Do this twice, selecting A (Host) and point host
@
to these two IP adresses:- 192.30.252.153
- 192.30.252.154
- The A Record should look like this:
In the GitHub repository at
http://github.com/captainwhippet/captainwhippet.github.io
, edit theCNAME
file to containcaptainwhippet.com
. My file is here.
Now captainwhippet.com points to my main page.
www.captainwhippet.com
To get www.captainwhippet.com
to redirect to captainwhippet.com
:
Back in the GoDaddy Domain Details page for the domain on the DNS File Zone tab.
Click Add Record. This time create a CName (Alias) record
- Host:
www
- Point to:
captainwhippet.github.io
- There should now be a CName (Alias) record that looks like this:
- Host:
Now www.captainwhippet.com takes you to captainwhippet.com.
captainwhippet.com/blog
With captainwhippet.com
and www.captainwhippet.com
set up properly as above, then captainwhippet.com/blog and www.captainwhippet.com/blog should take you to my blog.
blog.captainwhippet.com
This is where things got a bit confusing for me. There are lots of things I tried and none of them seemed to make sense or work.
Failed attempt 1 - GitHub CNAME. Warning: This attempt didn't work
- Create a
CNAME
file in the repository athttps://github.com/captainwhippet/blog
with a single line:blog.captainwhippet.com
Back in the GoDaddy Domain Details page for the domain on the DNS File Zone tab.
Click Add Record. This time create a CName (Alias) record
- Host:
blog
- Point to:
captainwhippet.github.io
- There should now be a CName (Alias) record that looks like this:
- Host:
Now blog.captainwhippet.com should take you to my blog. One problem I had with this solution, which is on the GitHub Help, is that I couldn't see how it could work, so I thought I must be misunderstanding what to do! This solution is also in this StackOverflow question
But the main problem with this is that it's doesn't really work alongside the setup needed to get a GitHub project page working. That is, the url captainwhippet.com/blog
requires {{ site.baseurl }}
to be used, with baseurl
set to blog
. So now the pages are looking for resources under blog.captainwhippet.com/blog
which doesn't work, because they're not there.
For example, the list of posts points to my first post at:
http://blog.captainwhippet.com/blog/2014/05/03/my-first-blog-post.html
But it's actually here:
http://blog.captainwhippet.com/2014/05/03/my-first-blog-post.html
So it fails to find the posts, the css etc and generally does not work.
To be fair the GitHub Help does say "You can normally only configure either a custom subdomain or a custom apex domain for a GitHub Pages site..." So maybe I should have left it there.
Attempt 2 - Domain forwarding. This worked (sort of)
The same GitHub Help continues: "If you would like to use a custom subdomain other than www
together with a custom apex domain, you may be able to accomplish this via domain redirection (sometimes called "domain forwarding"). Note, however, that this will only work for User and Organization Pages—not for Project Pages."
OK, so first time around I didn't really know what that meant, so I tried it anyway just to see what would happen.
First clean up the failed attempt above:
- Delete the CName (Alias) record pointing
blog
tocaptainwhippet.github.io
. - Delete the
CNAME
file inhttps://github.com/captainwhippet/blog
Set up the domain forwarding:
- In the GoDaddy Domain Details page for the domain, click on the Settings tab.
- Find the Forwarding section and click on Manage
- On the window that pops up click on Add subdomain forwarding
- Enter:
- Subdomain:
blog
- Forward to
http://captainwhippet.com/blog
- Forward settings:
Forward only
- Note that
Forward with Masking
would leaveblog.captainwhippet.com
in the title bar. This nearly worked, but there was some funny behaviour with links that I didn't like.
- Note that
- Type:
Permanent
- Subdomain:
Now blog.captainwhippet.com should take you to my blog. It actually goes to http://captainwhippet.com/blog
, which for the moment is fine, so I'm happy!
Apex or Subdomain?
So it looks like, as the GitPages help states, that you can't have both custom Apex and Subdomains. And I think I understand what that means now. Right now I have a custom Apex domain (captainwhippet.com/blog
) and I kind of cheat with the custom subdomain (blog.captainwhippet.com
) by just forwarding to the Apex domain. I'm fine with that, but I wonder - what's best? Maybe that will be the subject of a future blog post.