Creating Your Personal Website

I always wanted to create a personal website that could serve as an online résumé. While I had created small pages locally, and also blogged, I had never created an entire website from scratch. Recently, I decided to jump into it and create a site of my own. I shall put down some quick pointers to help anyone wishing to make one too.

Keep in mind – this guide does not account for complex support such as data storage and user credentials.

Purchase your domain

While there are a number of sites that can give you a domain for free, they often append their own sub-domains to your URL. It’s always better to have a custom domain such as your-name.com. It’s easy to remember and looks good. However, you will have to pay a yearly subscription fee.

I also recommend that you buy privacy protection, which hides your personal details such as address and email ID while registering your domain. The site you are purchasing your domain name from should offer that as an add-on.

One of the popular sites to purchase domains is GoDaddy, where I bought mine as well.

Create your site locally

Web development with HTML, CSS, and JavaScript/jQuery can be done locally on your machine. Here are some handy tips.

  • If you do not want to develop your site from scratch, you can always use readymade templates online and customize them. You can find loads of templates by doing a quick Google search. However, if you wish to create everything yourself, go for it!
  • Use source control so you prevent the loss of your work. This guide leverages free hosting on GitHub, so if you wish to use that, you can choose GitHub for source control over other alternatives like Bitbucket – but keep in mind, your code will be visible to everyone if you do.
  • Use high-resolution images, if you are using any. Your site needs to look good even on high-resolution monitors, such as iMacs.
  • If you are looking for icons, you can find several on sites like Font Awesome.
  • Use Google Chrome to view your site. It has a built-in tool to view the site on different screen sizes, which comes in handy while developing a responsive site.

Host your site

There are loads of ways you can host your site. Sites such as cPanel do it for you, for a price. If you are looking for a free way to do it, GitHub Pages is ideal. The con is that anyone can see your source code, so use it if it’s fine by you.

Hosting on GitHub Pages

The steps you’ll have to follow are outlined below.

  • Create a GitHub account if you don’t have one already. Let’s say your username is username123.
  • Create a public repository on GitHub with the name username123.github.io – your username has to match exactly, otherwise this will not work.
  • Push your website code to the repository from your local machine. Your code will need to be on the master branch (which it is, by default), and you should have an index.html file in the root folder. If you don’t have any code ready yet, you can create a dummy index.html file with dummy text, so you can test your setup is working.
  • Now you can test your setup by going to https://username123.github.io. The contents of index.html should get rendered.
  • By default, your site is accessible on the GitHub URL in the step above. But now you need to configure the custom URL, i.e. the domain you purchased. Go to your repository Settings, to the GitHub Pages section. There is a prompt asking for your custom domain. Enter the custom domain you purchased, such as your-name.com and save it.
    Note – This step creates a new file called CNAME with your domain name saved in it, which it then commits, so you will have to pull these changes locally before making further changes to your website.

Now your GitHub setup is done. Your next step is setup your domain name servers.

DNS setup

There are many ways to setup your DNS. I recommend CloudFlare, which you can use for free.

Create an account and select the Free plan. CloudFlare shows you a video to get started. The important step you’ll have to do is change the DNS servers. Go to the DNS tab and make four entries:

Type

Name

Value

TTL

A

your-name.com

points to 192.30.252.153

Automatic

A

your-name.com

points to 192.30.252.154

Automatic

A

www

points to 192.30.252.153

Automatic

A

www

points to 192.30.252.154

Automatic

These IP addresses are for GitHub Pages.

CloudFlare also assigns you two nameservers, which you can view in the DNS tab. They will be of the form some-name.ns.cloudflare.com. Make note of these and proceed to the final step.

Register your DNS

Go to the site where you purchased your domain (such as GoDaddy). Go to your domain settings. On GoDaddy, you go to ‘Manage Domains’ and then ‘Manage your DNS’. Depending on the site, you might have to hunt a bit to find it.

You will need to go to the nameservers section, change it to custom nameservers, and add two entries with the names given by CloudFlare.

CloudFlare may take a while to refresh after this, but within a day you should see this message on CloudFlare’s homepage:

Status: Active

This website is active on Cloudflare.

Now you’re good to go!

References

  1. GitHub pages guide
  2. Custom domain on GitHub
  3. Free hosting on GitHub
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s