So You Want To Build A Website
A simple guide on how to get a domain name, web hosting, and unlimited emails all for FREE
Disclaimer: If you are not a student, you can still follow this tutorial, however you would instead need to buy a domain from Namecheap.com instead of getting a free one.
Step 1: Create a Github Account
So what is Github?
Github is an awesome company which hosts massive repositories of Open Source code for free.
So why do I need an account?
First off, Github will be the place that you can store your code in the Cloud, so that you can have access to it anywhere you go.
Second, Github also has a really cool setup where you can get your website hosted for free. It even allows you to include a custom domain in a super simple and easy manner.
Now that you have created an account, in the upper right corner of the screen, click the plus button and create a new repository with the name: [your github username].github.io, i.e. hackathoner.github.io. You must name it exactly that or this part won’t work. For now there is no need to add a license but it would be a good idea to create a Readme.
Step 2: Get Your Free Domain From nc.me
What is a domain name?
A domain name, otherwise known as a Domain Name System (DNS) is a readable line of text which makes it simple to access content hosted on a web server. For example, is a server has an IP Address of 126.96.36.199., we can access the data hosted on that website by typing that number into the address bar, but that is very hard to remember. A domain name like: www.anuraag.me would point to that server, so you could access that server from anuraag.me
What is nc.me?
Nc.me is a really awesome initiative taken by the domain name registrar/host Namecheap to empower students by giving them a free domain name. As long as you have a .edu domain name from your college, you can get a free domain name for a year. If you are in high school, you can still get a free domain name by reaching out to Namecheap.
Step 3: Create The Website
Unfortunately, this is not a tutorial on how to create a website, however, if you don’t know how to create a website and want to learn check out this really beginner friendly CodeAcademy course.
Step 4: Add Project to Github
First things first, if you don’t have Git installed, install it from here: http://git-scm.com/book/en/v2/Getting-Started-Installing-Git
Once you have done that, open up terminal (Mac/Linux) or command prompt (Windows). You can find yours by searching through your programs. Once you have opened terminal, you must get to the directory with your website files. To do that figure out the path of your directory (how to for Mac and Windows are linked) and type in cd [path of file]. Look at my example image for more info. The cd command essentially means change directory.
Once you are in the directory of the location of your website files, type the following command: git init . This command initializes a new git repository in your directory.
Next type in the command
git remote add origin https://github.com/[yourusername]/[nameOfRepository].git . That essentially connects you to your git repository hosted by Github.
Now type in git pull origin master . This essentially downloads any files that are already in the repository to your local directory.
Next type the command git add . (make sure you include the period in this command ONLY). This command adds all your files in the local repository to the local Github repo you initialized.
Now type git commit -m “second commit” . This command creates a git commit which essentially is a snapshot of the current work which will be pushed to the repository.
Now do git push origin master . This pushes your committed changes to the main Github repository. In 30 minutes, your website will be up and running at [your username].github.io.
Once last thing you must do is create a new file named CNAME directly from your online github repo. You can do it by clicking the plus icon next to the repository name.
Inside this file, enter your nc.me domain name address. Make sure not include http, https, but make sure you include the www. It should take up to an hour for the changes to go into effect. Now we have setup the free Webhosting and you can access your website at [your username].github.io.
Step 5: Configure Your Domain
This is the second to last step. We now must configure our domain name with Namecheap so that when we type in [your nc.me domain name].me, it goes to the proper website.
First go to your Namecheap Dashboard by going to www.namecheap.com, click the menu bar at the right, and click on the dashboard button in the menu bar. When navigated to the login page, login with the information you received when you created your nc.me domain name.
Now click on the view link button next to the Number of domains in your account text. When you are in the Your Domains Page, click on the domain you created with nc.me. That will direct you to the page for that single domain. From there, click on the all host records button on the left sidebar.
In the host records, for the @ row, in the IP address/url box, type in your nc.me domain name, this time including the http:// . For the Record Type, choose URL Redirect. Next, in the www row’s IP address/url box, type in your [your Github username].github.io website and for the Record Type put CNAME (Alias). When done click save changes.
It should take up to an hour for the changes to go into effect. Now your domain and free webhosting has been totally setup, however stay on this page, we have one more thing we have left to do with Namecheap. If you have any issues with this part, use Namecheap’s Live Chat for help.
Step 6 (Part 1): Get Unlimited Emails (Namecheap side)
Now click on the Email Forwarding Setup link on the sidebar
From here, enter the different email names that you want. Add the important ones like hello, contact, name, and etc. If you’re like me, you should also add some interesting domain names for fun. When finished, save your changes. Now if anyone emails any of emails you created, they will be forwarded to the email that you chose. This is part 1 for the free email.
Step 6 (Part 2): Get Unlimited Emails (Gmail side)
Unfortunately, I don’t really have much experience with Yahoo mail or Outlook this part of my tutorial works with Gmail only.
Login into your gmail and click on the settings icon. From there click on Accounts and imports and scroll down to the “Send Mail As” section. Click on the add another email address you own link
In the popup, enter the domain name you want to send mail as. I entered firstname.lastname@example.org. Once completed click on the next step button.
Now change the SMTP server so it reads smtp.gmail.com and make sure port is set to 587 and its Secured connection using TLS. Next enter your google username, essentially your gmail email without the @gmail.com and enter your gmail password. Once you’ve clicked save changes, you will get an email verification link which you must accept. Once accepted, test to see if you can send the email using the @[your domain name].com. If it works, you have completed the tutorial! You now have a domain name, webhosting, and unlimited domain emails all for free. If you have any questions, send me a quick email to email@example.com!