For when you want to make everything you learn on Free Code Camp visible to the big bad world !
NOTE: This is a complete, all-in-one version of this series, hence its length.
Let’s break the task into 5 smaller pieces:
- Create a server ← You are here !
4. Setup a domain name (for example www.myDomain.com).
5. Getting files on the server.
Why ?
For me, the decision to set up my own web server boiled down to three reasons:
1. Price:
- As you will see, paying for a VPS (virtual private server), costs a fraction of a managed, hosted offering.
- Control:
- Setting up your own server allows you to control all facets of the server and how it operates, right down to the command line level.
- Learning:
- If you are reading this article it means you are most likely interested in learning more about web development. Servers are an integral part this technology, therefore, setting up and running your own web server will provide you with invaluable skills.
How ?
- You will be using a service called DigitalOcean to host our server. DigitalOcean offer very competitive pricing for everything from basic servers to high-memory computing engines.
- Their $5 a month droplet (droplet = server in DigitalOcean parlance) will be more than sufficient for our needs. It comes with 512mb RAM and 20Gb SSD storage.
- You can get a $10 (two months for free) using this link here.
Once you’ve made an account on DO (DigitalOcean)using the link above, go to your dashboard, click on the green Create Droplet button.
- On the next page, select the following options as I have in the images. You will be using the most up-to-date, stable version of Ubuntu server as our operating system.
- Lets ignore the Block Storage option (I’ll be doing an article on this later) for now.
- Select a Region which is closest, geographically, to you:
- No need to select any Additional options at this time.
- Now, the next step regarding SSH provides an extra layer of authentication security for your server. I do advise setting this up, however, I believe it is outside the scope of this introduction article and deserves its own dedicated post so I’ll cover this at a later date. For now, leave these options unchecked.
- Go ahead and select how many servers you need, 1 is fine for us today. Then, name your server for example‘ myFirstServer ’ or whatever other name you wish_._
- After you click on Create , it will take DO less than a minute to build your server out for you — amazing !
- Soon after, you will receive an email with the credentials for your new server.
.. and that is that. Well done! You’ve just created a new Virtual Private Server or Droplet on the DigitalOcean platform — clap yourself on the back.
Next up, you will set up your new server here , by logging in remotely, setting up users and completing some basic security steps !
Set up a new Ubuntu server for the first time.
This is part 2 in “How to set up your own cloud based web server”
2. Setup the server ← You are here !
4. Setup a domain name (for example www.myDomain.com).
5. Getting files on the server.
So, now that you have created your server or droplet on DigitalOcean — lets go ahead and go through some basic setup steps in preparation for launching our website for the first time !
After you created our droplet in step 1 above, you would have received some credentials via email which would have included details such as our droplet’s name, IP address and password.
In order to connect to your server you will need to use SSH — a protocol which enables you to remotely log in to the command line of your new server.
MacOS devices (which I use)each come with a built-in application called Terminal which provides native SSH capability, you’ll find in your applications directory.> Windows users , unfortunately, don’t have such a luxury. So there are a couple of options, one of the most popular being PUTTY — an SSH and TELNET client for Windows. You can read more about getting PUTTY set up he_re_ .> The rest of the screenshots will be from my Mac, but the steps are identical, once you get logged into your server if you are using PUTTY.
Ok, lets start issuing some commands (I have left my server IP visible as I will be destroying it after writing this, but I advise you not to share it online for security purposes):
- To connect to your server:
ssh root@yourServersIP
You will see something similar to, type ‘ yes ’:
After typing ‘ yes ’ — you should paste in your password, this will not appear on the screen, so don’t worry — just paste (CMD + V) and hit return.
You will then be logged in to your server and see the following:
Paste, again, your password, hit return and you will be prompted to enter a new password and confirm it:
Great, you are now logged in, lets get cracking !
- The current user, root , has unrestricted privileges to do whatever they wish on our system. You want to restrict this potential for disaster by creating a new user.
In our command line, lets type:
adduser newUser
You can add this new user to the group of users who have admin privileges — sudo . Users in this group may execute restricted tasks after entering their admin password.
usermod -aG sudo newUser
- Don’t close the current connection just yet — instead open a new tab in your command line and try to login with:
ssh newUser@yourServerIP
If you can log in, great! — if not, please go back over step 2 above.
After completing the above steps, you will now be able to log on as your new user, instead of root.
Now, this would be a good time to beef up our security and add SSH key pairs on both our local machine and server, I am going to cover this in a future post on server security, which will also include other topics such as disabling root login, setting up firewalls etc. — so as to keep this post concise.
… so, awesome — you’ve no successfully logged in remotely to your server, set up a new user.
Next up, you are going to run through how to install the LAMP stack, the technology which will serve our webpages to our site visitors !
How to install the LAMP stack on a new server.
This is part 3 in “How to set up your own cloud based web server”
3. Install the LAMP stack ← You are here !
4. Setup a domain name (for example www.myDomain.com).
5. Getting files on the server.
OK, so far you are making great progress. You have created a server and completed some basic setup tasks.
Now, how is the server going to know what to do with our code files- HTML, CSS, JavaScript etc once you upload them ? I mean, at the moment, you have a bare-bones Ubuntu Linux server, it could be used for anything (almost), it isn’t set up to server up the webpages you have so lovingly developed !
To make this magic you are going to use an open source software stack (group of technologies which work together) called LAMP, which stands for:
- L inux: the operating system .
- A pache: the web server software .
- M ySQL: the databse .
- P HP: to serve dynamic content.
This will not be an in-depth lesson on each of the above topics, but more on how to get them working together in order to serve our website.
Lets get started:
- Apache:
Once you have logged in to our server you can start issuing some commands, first lets update our server, and then install Apache:
sudo apt-get update
sudo apt-get install apache2
You will see something similar to:
Enter yes, hit return, and Apache will install.
You can at this stage actually verify if Apache has been installed correctly by visiting the IP address of your server, you should see:
A quick way to display your public IP is:
curl ipinfo.io/ip
2. MySQL:
Lets get started:
sudo apt-get install mysql-server
You will see:
You can reply with yes, then hit return. Soon after the packages have been pulled in you will be asked for a MySQL admin password. Enter a password, then confirm:
MySQL will continue through the installer.
Once, it has completed, you will need to create a database directory as follows:
sudo mysql_install_db
NOTE: on versions 5.7.6 and above, there is no need for this command. If you get an error similar to:
[WARNING] mysql_install_db is deprecated. Please consider switching to mysqld --initialize
[ERROR] The data directory needs to be specified.
Then you can run:
mysqld --initialize
3. PHP
In Ubuntu 16.04, PHP is installed by default. However, if it is not/has been removed/has been deleted, you may install it via:
sudo apt-get install php5 libapache2-mod-php5 php5-mcrypt
Now, you just need to edit one file to ensure that our web server, Apache in this case (NginX is another you will discuss in a future post), will look for .php files by default.
To edit files inside a linux server, there are a couple of options, namely VI/VIM which is a great choice for the more experienced as it take a while to master, or even become productive in ! Today, you shall use Nano, it is beginner friendly and suits our needs just fine out of the box.
So, you are going to edit a file called dir.conf :
sudo nano /etc/apache2/mods-enabled/dir.conf
The file contents will look like:
This is dir.conf opened in the Nano text-editor. What you need to do is to edit the second line so that index.php is first in the list, and reads as follows:
<IfModule mod_dir.c>
DirectoryIndex index.php index.html index.cgi index.pl index.xhtml index.htm
</IfModule>
To save a file in Nano, press CTRL + X , then at the bottom of the editor you will be asked to confirm the save, type Y :
Then you will be asked to confirm/edit the file name, hit return:
Great, you’ve just edited a file in a server, with the command line and Nano — bad ass!
Now, all that is left to do is to restart the Apache service to make all our changes take effect:
sudo service apache2 restart
… and that is that ! Great progress! You know have the LAMP stack installed and setup, ready to serve web pages.
Next up, you going to briefly look at how to go about connecting your newly purchased domain to your droplet via DigitalOcean’s DNS section so that your visitors can access your site without the IP address !
Setup a domain name for a new website or server.
This is part 4 in “How to set up your own cloud based web server”
4. Setup a domain name (for example www.myDomain.com)) ← You are here !
5. Getting files on the server.
At this point you are nearly finished this series. So far, you have learned how to create a server , setup the server and install the LAMP stack .
You now have a website that responds to our public IP for the server.
However, what you need to do is connect a domain name, for example, www.myDomain.com to our server via DNS settings on DigitalOcean’s dashboard.
Lets get stuck in …
- Purchase a domain:
I won’t spend too long on this step as the process is fairly straight forward when using any of the big name providers. I like to use GoDaddy.comsimply because they are cheap and it straight forward to edit the DNS setting which you will need to do for the next step.
Once you have purchased your domain, log into your GoDaddy account go to the section “Manage my domains”.
2. Change DNS nameservers:
Currently, our domain is being managed by GoDaddy’s name servers.
DNS name servers simply work like this (at a high level):
- You enter a URL in your browser →
- The URL gets routed to the name server responsible for said URL →
- The name server looks up its own tables to see “… hey, who owns this URL/domain” →
- It then directs your browser to the relevant server IP attached to that domain.
So, with that in mind, lets change the name servers to DigitalOcean’s as this is where our server is located:
Now, select the dropdown menu beside your listed domain:
Go to ‘ Set Nameservers ’ :
Click to edit the name servers and set them as:
- ns1.digitalocean.com
- ns2.digitalocean.com
- ns3.digitalocean.com
Make sure to save.
3. Setup domain on DigitalOcean:
At this point you will head over to your DO dashboard and go to the networking section:
Enter in your new domain name and click ‘ Add domain ’ .
Next you will enter the relevant records for your domain.
The most important for now being A records. These type of records allows us to point the IP of our server at our domain, and because DO is looking after our DNS name serving, our server will be what is returned to the user.
In the HOSTNAME section, enter ‘ @ ’ . This means that whatever is entered before your domain, for example:
http://myDomain.com
… will be directed to your site.
In the WILL DIRECT TO section, select your droplet from the list. You may leave TTL at its default value , hit ‘ Create Record ’.
In order to set a wildcard for any subdomain entered before your domain, for example:
- blue.mydomain.com
- red.mydomain.com
- you get the idea …
… you need to set a CNAME record as follows:
That is all you need for now — if you do need to add mail DNS records, for example Gmail — you can select MX and DigitalOcean actually has an automatic importer that you can use to set these:
Once you are done, they records can take up to 24 hours to take effect, but in reality I have always only had to wait a few minutes.
You can test that you did everything correctly by firing up our terminal, on our local machine, and pinging our domain:
ping mydomain.com
or a sub-domain:
ping blue.mydomain.com
… you should get something back like:
… not to mention, you should also be able to enter the the domain into your browser — awesome work !
Next up, let’s figure out how to get the files transferred from our local machine and up onto our server so you can display our website in all its glory !
How to deploy a website to a web server.
This is part 5 in “How to set up your own cloud based web server”
4 .Setup a domain name (for example www.myDomain.com).
5. Getting files on the server ← You are here !
Wow, you are on the home stretch now. At this point you have the knowledge to be able to create a server , setup the server, install the LAMP stack and setup a domain name .
The last piece of the puzzle is how you do you actually get them onto our web server. You could use an SFTP utility on our command line, but there is an easier, more beginner-friendly method.
You are going to use FileZilla which is a tool that basically uses the SFTProtocol to securely send files from your local machine over the internet and up into your server.
- Download and install FileZilla:
It can be downloaded from here. You should download the client package:
Once installed, open FileZilla and follow the following steps to connect your server:
2. Connect to your server:
- File > Site manager (CMD + S) .
- Click new site from the options on the bottom left .
- Fill out all sections in the General tab with the authentication details for your server:
NOTE: Ensure you select SFTP for Protocol .
- Click connect and you will see your site load in the right pane of FileZilla. The left pane shows your working, local directory on your local machine.
- In the Remote site text-area, you will want to navigate to
/var/www
- Here you will find the HTML directory/folder
3. Upload website files:
- Now at this point it is time to get those beautiful files full of code up onto your web server.
- If you don’t have a working website built, you can go here:
davedodea/startbootstrap-creative
… to my GitHub page where I have left a sample website for you to use.
- If you know what to do with Git and GitHub, then pull down the repository into a directory on your local machine.
- Most likely you wont have much Git experience, that’s cool too, just go ahead and from the link above, find the green button saying ‘ Clone / Download ’ and select ‘ Download ZIP ’.
- Unzip the downloaded folder.
- Then, inside FileZilla once again, in the left pane, navigate into that folder as below:
- You should see your local files on the left, remote server on the right .
- Now simply highlight the files/folders on the left and drag them over (or right-click and select upload) to the right side. It will take a moment or two, depending on the size of the upload.
Once the upload is complete, thats it, you’ve done it! You now have a fully functioning website uploaded to your own web server hosted in the cloud.
Awesome job !
If you browse to www.yourdomain.com you will see this (or whichever site you uploaded):
So, to recap, these are the steps you went through in this series “How to set up your own cloud based web server”:
4 .Setup a domain name (for example www.myDomain.com).
5. Getting files on the server ← You are here !
I really hope you enjoyed this series and I look forward to future posts about topics that I mentioned throughout such as secure key authentication, further enhancements and server monitoring.
If you have any questions or additions to make, please let me know in the comments below or get in touch on Twitter.
~ Dave.
Top comments (0)