Hello, hello...
Anyone out there waiting for this post ? Aah.
Starting a fresh from today, "again". Phew, my site is finally up, for those who didn't know, it can be found @ jrajan.in. It was a royal pain in the ass to finally find a way to mask the fact that my site is hosted on one of the free platforms, given the fact that I'm miserly about spending money on an AWS micro-instance.
So currently, my site has jumped from being hosted on Google's App Engine platform, to Bitbucket pages, which sadly doesn't allow you to redirect custom domains before finally settling on the super easy-to-setup Github pages.
By which, let's talk a bit about setting up a simple site for yourself. A few steps that can help you out, not necessarily in the order below. This is how I started it off.
Anyone out there waiting for this post ? Aah.
Starting a fresh from today, "again". Phew, my site is finally up, for those who didn't know, it can be found @ jrajan.in. It was a royal pain in the ass to finally find a way to mask the fact that my site is hosted on one of the free platforms, given the fact that I'm miserly about spending money on an AWS micro-instance.
So currently, my site has jumped from being hosted on Google's App Engine platform, to Bitbucket pages, which sadly doesn't allow you to redirect custom domains before finally settling on the super easy-to-setup Github pages.
By which, let's talk a bit about setting up a simple site for yourself. A few steps that can help you out, not necessarily in the order below. This is how I started it off.
Buy a domain for yourself.
My options were limited to either jojurajan. or jrajan.. I went for jrajan.in since it needs lesser keystrokes. Mine was brought at BigRock, since ".in" domains are sold cheaply. Other options include, but are not limited to, Enom, Name.com or GoDaddy. Since this is going to be your identity on the web, I would suggest buying it for 10 years, since that seems to be the maximum time allowed for one-time domain registration.
Choose a template.
I went for a simple minimalistic Bootstrap template for an SPA(single page application). SPA, in simple terms, means your whole site will be in one page and different sections can be shown or hidden, when required, based on your preferences. I chose my template from HTML5UP, even though with limited variety, which suited my taste. There are many other places where you can get Bootstrap themes, such as Bootstrap Zero, Start Bootstrap or Bootswatch to name a few. Choose one that suits your taste and download the html files to your machine. In case, your tastes change in future, no worries, you can switch to another theme, albeit with small modifications that can be done without breaking much sweat.
Update your info.
Now that you have chosen a theme, it's time to add your information into it. For my development work, I use Sublime Text which is quite a nice editor, with a few plugins which make it super-friendly. Or you could use the default editors which come pre-installed with the OS such as Notepad or Gedit.
Coming back to adding your info, there will be an index.html file in the theme that you just downloaded. First open it in the browser to see what it looks like by default. At this stage, I would suggest you create another copy of the index.html file. This would be our backup copy, in case you modify something and it goes horribly wrong. After that is done, now search for the words you want to replace in the index.html, for e.g. Jane Doe is what HTML5UP themes usually use for the user's name, i.e mine or your name. Replace that with your and save the file. Now click on the Refresh button in the browser to see your updated web page. Remember, you should be updating the original index.html, and not the backup copy. ;)
Once you get a hang of it, I would suggest that you try and add a new section, if you want, for yourself.
Make it live.
This is one phase that you should do real carefully. I had updated my site, as said earlier, in Google App Engine, then in Bitbucket and finally Github pages. So let's start with how we could setup the site using Github pages. For that, first of all you need to sign up for a Github account. The technical details can be found in their documentation, which I would say is quite awesome even for first-timers. After that, you need to create a repository like .github.io in your Github account. You should replace with your Github username account, e.g mine is jojurajan.github.io. A repository, or repo, is like a folder where you can add files, images, documents and many other things. In our case, the repo keeps an internal record of which files were in that folder at a given time, something like a backup feature. We don't need to go that deep for now.
Creating a copy of that repo in your machine is called "cloning a repo", which is real simple if you follow the steps given in the documentation. After the local repo is ready, move all the files that you just modified to that folder. You should copy all the files and folders from the folder in which your index.html file is present. Add a new file 'CNAME', all capital without any extension with your index.html file. Add your domain name to that file, e.g. the file in my repo contains one single line jrajan.in, which is my domain. Now you need to make sure that the "repo", a.k.a folder named .github.io in Github also has these files. For that, you need to use the git push command which is also documented in the Github pages.
Once you see all the folders in your online repo, load your website by going to http://.github.io, e.g mine goes like http://jojurajan.github.io . If all is good, you should be able to see the same page that you saw in the browser after updating your index.html file.
Connect the dots.
Now that your site is up, we need to link your domain to your site. It goes like this, you have an address and your house is also ready. But for the letters to reach your house, the postman must know that for your address, this is the house. We are going to do the same thing now. First of all, you need to add an I.P address for your domain. Since your site is at the github.io pages, you should add their IP address as for your domain too. You need to add an "A Record" in your DNS records which will tell the browser, i.e. postman, that if someone tries to load your site, it should look at that address. The IPs to be added are 192.30.252.153 and 192.30.252.154. You can find more details here. Once that is done, you need to add "CNAME Record" which will point the domain name, i.e jrajan.in, to the github page, i.e jojurajan.github,io. More details can found in this one. Once you set these records correctly, you should be able to see your domain being shown correctly in around 1~2 hours, because that is the minimum time it usually takes pass along the changes. It would be better if you sleep and come back the next day to see whether the domain and pages have been linked properly.
Phew, that is one long post but I think it might be worth for at least someone, if not just me. In case, you have issues or doubts with these please let me know thru the comments.
Corrections and updates are also welcome, since I might have missed a few things in the making.
Disclaimer: The author is a part of an offshore team that works for one of the subsidiaries of Enom.
