Creating a website the WebDev way

Author:
Thursday, March 30th, 2017

Why learn?

The new age of the internet introduced a multitude of different website builders and managers such as WordPress or Square Space, which allows anyone, without any programming experience what-so-ever, to create websites. While these provide a quick, cheap and easy way for those who just want a simple website done, they’re limited in customisability, tinkerability, and bragging rights.

In this quick guide, I’ll walk you through

  1. Resources for learning how to code a website
  2. Professional frameworks to kick-start you off
  3. Purchasing a domain name
  4. Setting up a Web server to host your website

How much does it cost running a server and website? Well, server costs around $6.53AUD a month, and a domain name costs around $14AUD a year. Those two should be the only costs to worry about.

While this whole process might seem long and difficult, you could learn the skills to become a fully professional web developer in just a couple of afternoons!

Learning how to code a website

The first step towards creating a website the professional way is to first learn how to code a website. The two basic web languages that you need to know to create an entire website are HTML and CSS. HTML and CSS are what’s known as mark-up languages. They tell your internet browser (Firefox, Chrome, Safari etc.) how to display the page. They are super easy to learn and it’ll only take you 2-3 afternoons to learn over at http://codecademy.com/. Codecademy offers an interactive way to learn to code – it uses a hands-on approach where you utilise what you learn as you learn it. Best of all, it’s free! There are paid courses on Codecademy, but you only need the free content. After learning how to code, use a IDE such as Netbeans (get the php version) to code a website, saving all your index.html and other web files into a single folder. We’ll walk through how to put them onto the internet later!

Professional frameworks to kick-start you off

Bootstrap is a web framework made by Twitter that kick-starts you off building a website. They have a lot of pre-built content such as buttons, navbars, and icons for you to use in your website. Just head over to Bootstrap and download it. Unzip everything inside their folders into your web directory (where you are putting all your website files). They also provide a starting template and other documentation on how to effectively use it. They cover most of the basics there so I’ll focus on other things in this tutorial, make sure you read through their tutorials though!

Purchasing a Domain name

A domain is the address people type to access a website. They end in .com, .net, .org etc. They must be purchased from a registrar. There are many different registrars out there, but the one I’ve found to be the cheapest and has the best reputation is Namecheap.com.  Search for a web address that hasn’t been taken yet, and purchase it! We will walk through how to attach it to your server a bit later.

Setting up the web server

After you have learnt to code and create a website, you’d want to put it on the internet so people can actually see it. This requires you to rent a server then set it up. In this section, I’ll walk you through the most cost effective way to do this.

While many beginners opt for a CPanel server (managed server with easy controls and no set-up), the problem that comes with CPanel servers is reputation, cost, and location. CPanel servers are often located overseas in far away locations such as the US, increasing latency, slowing down your website for Australian users. Then you will have to find one with a good reputation, but a good reputation means it’s gonna be expensive.

In this tutorial, we are going for cost effectiveness so we will be going through the slightly more difficult route of setting up our own server. To do this, we are going for a Virtual Private Servers (VPS) servers. The cheapest and most reliable option I’ve found is DigitalOcean.com and the tutorial will be following their setup process, but Vultr.com works just as well. Additionally, if you want a free $10 to use at DigitalOcean, you may use this secret affiliate link: https://m.do.co/c/b760e64ea9f9. Because DigitalOcean doesn’t have a server in Australia, we will be using one of their Singapore servers. The reason we still get a low latency, fast connection to a Singapore server is because Perth, Australia, has a direct fibre optic internet cable to Singapore, so a server in Singapore is just as fast as a server in Sydney!

Creating a Droplet

After creating an account, hit the “Create Droplet” button. You’ll be asked to choose a distribution, size, and location. In this tutorial, we will be setting up a server web panel interface named “Centos Web Panel” so we will be choosing a Centos distribution, version 6.8 32bit. We are picking 32bit because we intend to select a smaller server size, and a 32bit kernal should consume less resources. For location, we’re going to select

Selecting server

Select the Singapore server location for reasons explained earlier, give your droplet a nice name and click “Create” at the very bottom.

Accessing your new server

After the droplet finishes being created, you should receive an email with the access details. To access the server, we are going to use a program called Putty for windows and Terminal for Mac.

Accessing with Mac

Press the CMD button and space at the same time to bring up spotlight (or click on the magnifying glass icon on the top right), type in “terminal” and hit enter. This should bring up the terminal app. Inside the terminal app, type: “ssh root@SERVERIP”, replacing “SERVERIP” with the IP Address listed in the email you received. After hitting enter, it will ask you for your password. When you type out your password (given in the email) it won’t appear on screen, but don’t worry, it’s all being registered. Just hit enter after you typed it all out. After logging in, you will be forced to change your password! (Make sure you type out the current password AGAIN, THEN type the new password)

Accessing with Windows

First, download and install PUTTY from here: http://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html

Once installed, open up putty. In the “Host Name” field put in the IP Address of the server that you received in the email then click “Open”. A Black terminal should pop up and ask for a login id, type “root” and hit enter. It will then ask for a password. When you type out your password (given in the email), it won’t appear on screen, but don’t worry, it’s all being registered, just hit enter after you typed it all out. After logging in, you will be forced to change your password!(Make sure you type out the current password AGAIN, THEN type the new password)

Installing Centos Web Panel

After logging in, we need to install required packages for CWP installation. Type this command:

yum -y install wget

We then need to update the server with this command:

yum -y update

Then reboot with this command:

reboot

After rebooting, type in this set of commands to install CWP:

cd /usr/local/src
wget http://centos-webpanel.com/cwp-latest
sh cwp-latest

(if the second command doesn’t work, replace the url with this: http://dl1.centos-webpanel.com/files/cwp2-latest)

After installing Centos Web Panel, it should pop up with your CWP login details, then prompt you to press ENTER to reboot. Make sure you write down you login details before rebooting!

Configuring CWP

To login to the web panel, go to your browser and in the URL bar type in “SERVERIP:2030”, replacing “SERVERIP” with your server IP. Then login with the same login details as you did with Putty or Terminal. After logging in, on the tabs on the left, click “User Accounts” and then “New Account”. Fill in the detail, including detail the domain name that you bought earlier.

Now that we have an account ready to go in CWP we can attach our purchased domain to the server.

Attaching domain to server

Go back to the DigitalOcean website and login. On the top navigation bar click on the “Networking” tab. Add your purchased domain into the domain field click “Add Domain”. It should then take you to page to add name records. First, create an “A” record with Hostname “@” and directs to your server. This will direct DOMAIN.com to your website.

Adding domain

Then create an a “CNAME” record with hostname “www” as an alias of “@”. This will direct www.DOMAIN.com to your website.

Then a “TXT” record of “v=spf1 +a +mx +ip4:SERVERIP -all” (including quotation marks, replacing SERVERIP with your server IP). This will prevent spammers from using your domain name to send spam. It restricts email permissions so that only your server may send emails.

After doing all that, go back to Namecheap, and login to your account. Go to your Dashboard and then click “Manage” on your new domain. Scroll down to the DNS section, remove any existing DNS and add these custom DNS addresses to it: ns1.digitalocean.com, ns2.digitalocean.com, and ns3.digitalocean.com.

Change DNS

After changing that it may take up to 48 hours to propagate (for changes to take effect), but usually changes are applied within an hour. After this period of time your domain should be fully attached to your server!

Uploading your website files to your server (and having it displayed)

To put your .html, .css, and all other website files to your server for it to be displayed, you need to upload them through an FTP client. Download FileZilla and install it. Once installed, open it up and go to File –> Site Manager.

site manager

Under “Host” put in your server ip. Logon type, put “Normal” and then fill in your login information you used in Putty or Terminal(ie root). Click connect. Once connected, on the right navigator, click the “..” to go up a directory:

Go up a directory

Then look for the “home” folder and double click on that to go into it. Look for the folder with the name of the account you made on CWP and go into that, then go into the “public_html” folder inside. Upload all of your web files into here, everything in here will be displayed when users go to your domain. That’s how you host a website!

 

The Conniveo Blog

Author:
Friday, February 3rd, 2017

When I was designing the Conniveo website, I decided that adding a blog would be a cool idea. The obvious question that follows such an idea is “What content do I put in the blog?”. Writing a blog is time consuming. It would be a huge waste of time if nobody bothers to read it. So if I were to implement a blog, it would have to be very interesting and provide a lot of useful content. I brainstormed a few categories that I will attempt to fill in the creation of my blog.

  1. Tutorials and How-to’s
  2. Problems that I encounter while coding and how to fix them
  3. Interesting ways to implement code
  4. Project development diary

These will be the first things I’ll try to cover over the course of the year, but I’ll add more to the list as I think-up some more new intersting categories.