November 16, 2019

How to own a professional website at zero costs! (Part 1)

Two weeks ago I set out to create my own online presence. I wanted to have a place where I could showcase my work, but also offer my services.

Two weeks ago I set out to create my own online presence. I wanted to have a place where I could showcase my work, but also offer my services. I wanted to be able to build a high-performance marketing funnel and have an overview of all my metrics. And most importantly, I didn't want to pay anything for it! Follow this article if you want to achieve the same. (Note: You will still need a credit card to register for some of the services.)

Well, to be fair, in the end, I decided to pay $10/year to have a .page domain, but I will describe below how you can have your own custom domain for free.

Minimal coding is required for everything and I will walk you through each and every step. Please note that I use macOS. If you use Windows, you need to see how you can get a console up and running. It shouldn't take you longer than 1 hour to set everything up 👍

Need help setting things up or don't want to do it on your own? Contact me!

In the first part, I will walk you through the steps of setting up your own server, configuring an elastic IP, obtaining a security certificate, installing WordPress. Stay tuned for the second part, where I will show you how to set-up Events tracking, Live chat, Payment, Email automatization, Goal tracking, and A/B testing!

A website with all these capabilities will cost you at least $20/month (https://wordpress.com/ subscription) and can go up into the hundreds of $$$.

Setting up your own server

We will use Amazon's Web Services (AWS), which is a great platform that gives you all sorts of tools to create. To set-up, we will follow AWS's own tutorials. I will not repost the steps here. Simply follow and do exactly as described on the website.

  1. Sign Up for AWS
    Skip the step for creating an IAM user. We won't need it
  2. Create a Key Pair
    Stop after Step 8 to set permissions of your private key file.
  3. Create a Virtual Private Cloud (VPC)
  4. Create a Security Group
  5. Launch an Instance
    Important! In step 3, we choose Ubuntu Server 18.04 LTS (HVM), SSD Volume Type 64-bit (x86) instead of Amazon Linux 2
  6. Set up an Elastic IP
    Important! Amazon will bill 50cents/month for any unused Elastic IP. Only create one if you have an instance to connect it to. This step is not mandatory, but it is helpful, as an elastic IP will ensure that your IP never changes, even if you restart your server.
  7. Step 2: Connect to Your Instance
    Simply launch Terminal via Spotlight and navigate to where your .pem file (Key Pair) is. In my case this was in Downloads. The command to do so is cd ~/Downloads. Then execute the command to connect to your instance. For this, you will need your servers' Elastic IP Address. Let's assume for the example that it is 100.100.100.100 and your Key Pair is called key.pem:
    ssh -i ~Downloads/key.pem ec2-user@ec2-100-100-100-100.compute-1.amazonaws.com
This is what your screen should look like if you connected successfully,

Next up, putting something on the server!

Registering your domain

Before we can actually put something on the server (i.e. installing WordPress), you will note that you should already know your domain name. Usually, when installing a web-application on your server, you need to provide your domain.

When registering a domain, there are two ways to go about it: you can either choose your desired domain name with a premium Top-Level Domain (.com, .org, .de, .co.uk, etc...) that usually known websites use (for which you will have to pay), or you don't care about it an get a random Top-Level Domain that is available for free (i.e. .tk, .ml, .ga) In my case, I chose to register laurinstahl.page, for which I have to pay $10/year.

Premium Top Level Domain

I suggest purchasing your domain from domains.google.com. Fair prices, easy to use, lots of tutorials and no strings attached. For now, just check your domain availability and purchase it. We will use this domain to finish setting up your page later.

Simply search for your desired name and see if it is still available. Pick the one domain you like and finish the check-out.

Free Top Level Domain

I found the website freenom.com, where you can get a free domain for up to 12 months.  It works exactly like Google Domains.

Simply search for your desired name and see if it is still available. Pick the one domain you like and finish creating your account.

Note down your final domain that you picked and successfully registered. You will need it in the next step.

Note: Even I was skeptical if getting a free domain would actually work. Test it yourself, by accessing laurinstahl.tk.

Installing WordPress

I decided to go with WordPress over any other Content Management System (CMS). When researching, which CMS to go with, I made a list of things that I wanted to achieve and then googled, whether there is existing documentation on the internet on how to do it. I found WordPress to have a huge community with a lot of existing solutions that are ready to go.

To set up, I followed this great tutorial from WebsiteForStudents.com. I literally followed this guide step-by-step. Note that in Step 2: Install MariaDB Database Server, make sure to choose a different password than suggested there. Then note down this password somewhere, you might need it again.

In Step 6: Configure Apache2 HTTP Server you will need your domain from the previous step. In the places where they ask you to enter example.com, you enter your domain.

In STEP 9: CONFIGURE WORDPRESS, you will need to deviate a little bit from your guide. Since we did not configure your domain, yet, you will not be able to access it via the direct URL and you will need to use your server's IP address. This is the IP Address from when you set up your elastic IP. When you enter that IP in your browser, you should see the Apache landing page.

In my example, the server IP is 100.100.100.100. You need to enter your own IP Address. If you do not see this screen, but the connection times out, something most likely went wrong in the previous steps.

To start the Wordpress configuration, you will navigate to /wordpress on your server. If your IP Address is 100.100.100.100, you will open 100.100.100.100/wordpress. Then you simply follow WordPress' installation process and you will land in the admin panel.

Wow! You now have a full WordPress installation ready! Your first instinct will be to start configuring everything, spending time to make it perfect and all that. Hold your horses. The next step is delicate and might not work from the go, which is to set up your domain to point to your server, as well as to set-up your SSL certificate.

The SSL certificate is what shows your visitors that your website can be trusted.

Setting up your domain

I will split this step again into whether you used a Premium Top Level domain or a Free Top Level Domain

Premium Top Level Domain

Login to Google Domains, pick DNS on the left hand-side and scroll down to Custom resource records.

You find this on the left hand-side.
Scroll all the way down on the DNS page

Under Custom resource records, you will have to make two entries just like the one shown here. In the first field, you enter @ and www, respectively. This means that anyone accessing your domain, whether they put www before it, http, https or nothing, they will still be routed to your server. Type stays A. For TTL (Time To Live) I picked 1h, but for now, I would advise you to put 60s. This basically means how long it will take for Google to tell anyone accessing your domain to route them to your server. For IPv4 address, you put again your Elastic IP Address (or server address if you chose not to have an Elastic IP Address).

Free Top Level Domain

Again, using freenom.com, you log into your account, navigate to Services -> My Domains, click Manage Domain for your Domain. Then you go to Manage Freenom DNS.

Select My Domains from the top bar.
Select Manage Domain fro the Domain you registered.
On the net page, go to Manage Freenom DNS.
This is where you add your server records.

On the last page, you will be able to put www as name, A as type and 3600 as TTL. Target is the Elastic IP Address (or your server IP if you chose not to have an Elastic IP).  This set-up means that after 3600 seconds, Freenom will start routing everyone who types your domain into the browser to your server.
Note: Freenom does not support Wild cards. This means the user needs to actually type www in front of your URL to be able to reach your server. If the user does not, it will not work (see screenshot below). The implication is that when you promote your website, you always have to put www in the link.

Once you have set this up, you will still not be able to access your website under your domain. There's one little guy who finishes your final configuration, and that is certbot!

Set up SSL with certbot

SSL stands for Secure Sockets Layer. In this step, we are acquiring an SSL certificate that proofs to anyone visiting your website that it is indeed your website and not someone trying to impersonate it. This is a common requirement for all modern browsers, without which most people won't be able to browse your website at all. To acquire it, simply navigate to this website and follow all the given steps:

  1. SSH into the server: You have already done this before, just repeat the same steps from Setting up your own server - Step 2: Connect to Your Instance (scroll up). The example I gave there was: ssh -i ~Downloads/key.pem ec2-user@ec2-100-100-100-100.compute-1.amazonaws.com
  2. Add Certbot PPA: Just copy and paste the given commands and run them pressing enter on your keyboard.
  3. Install Certbot: Just copy and paste the given command and run them pressing enter on your keyboard.
  4. Choose how you'd like to run Certbot: Here we'll choose the first option of "Either get and install your certificates..." and run sudo certbot --apache.  During the setup, it will ask you, which names you would like to activate HTTPS for. Just hit enter, selecting both. It will also ask you for an email address. Do not omit this step, as they will contact you there, in case your SSL certificate will run out.

You don't need to follow Steps 5 and 6. After this, you should be done! Congratulations. You have set-up your own server with WordPress installed. Now log in to your WordPress admin panel and start configuring your website!

Stuck somewhere or things didn't go as expected? Contact me for help!

Stay tuned for Part 2 of this series, where I go into detail about some tools you can set-up that allows you to improve the performance of your website and make it more professional! I will go into details on how to set-up Payment, Email automatization, Goal tracking, A/B testing and much more.

other posts