If you have been following my blog, you may remember the post I had written about the importance of having your own space online. Well, I finally had the opportunity to publish my personal portfolio on my domain, and I want to walk you through the journey.

As a disclaimer this cost me roughly $130 in total, but it was well worth it, as I know have a personal website I can show to employers and showcase other projects on. This was not an incredibly difficult task nor did it take very long, once I had the right resources and instructions. Hopefully this blog will make the experience quick and easy for you so you can focus your energy on building your site and worry less about deploying and hosting it.

Acquiring Your Domain and Hosting Service

The first thing you will want to do is acquire a domain. There are plenty of website to do this through, but for this blog we will talk about GoDaddy.com. I find it is good practice to find a domain name that explains what your website is. If it is a personal portfolio site, your name would be a great domain name. If you are running a business and want to build a website for it, see if that name is available. Unfortunately, since there are so many domains out there, some may already be in use, so be prepared to compromise possibly by adding a symbol such as www.firstname-lastname.com or www.firstinitial_lastname.com. You can of course try to buy a domain from its owner, but that could be a long and expensive process.

Once you have purchased your domain name (they run about $30 for two years after tax on GoDaddy.com), you will want to open a web hosting account. For cPanel hosting, GoDaddy charged around $100 after tax. Fret not, you are don spending money for a while!

Now go back to your account GoDaddy account, and click on My Products. Scroll down towards the bottom of the page and you will see the option for Web Hosting!

Scroll down to see your Web Hosting option and click Manage

On the far right of your screen you will see cPanel login information and your password. Keep these handy somewhere. For now, you are going to want to click on the cPanel Admin button on the right of the screen about your settings and login information.

Click on the black cPanel Admin button

From here, you want to scroll until you find the Files section, and under Files click File Manager with the filing cabinet icon,

Click the first option, File Manager

Editing Your Website

Now the fun begins. To host from your website, all you need to do is simply look for your public_html folder, and start writing code in the index.html file! And congratulations, you are hosting and editing your own website!

Inside the public_html folder

Now as you can see, I have many more files than just the index.html file. That is because from this domain I am currently hosting an application I built using React. In order to host your website as a React site, there a few steps you have to make.

Deploying Your React App

First, when you are comfortable with your React application, run the command $npm run build. This will create a build folder that encompasses the elements of your application and prepares them for deployment. This may take some time, so be patient.

Second, you will want to access this folder on your local machine. Simply access the file your project is in and look for the build folder. Here is an example:

The Build folder has a nested static folder with three folders nested inside of that

You can see that the build folder has a static folder inside of it, and that folder has three folders inside of it. In order to host our React site, we are going to copy all the files from the build folder put them in our public_html folder. If you go back to cPanel in your browser, you will seethe option to upload files in that folder.

Upload under the navbar, outlined here in red

Simply click that Upload button, and drag and drop ONLY the FILES, not the folders, in the build folder, into your public_html folder.

In order to transfer the files within the css, js, and media folders, you can simply create a folder named static inside your cPanel, and then create three folders inside the static folder, named the same as they are in your build folder. Basically, we are copying the structure of the build folder to your cPanel. From there, you upload the css, js, and media files to their respective folders, just as you did in the outer public_html folder. You can refer to my previous image at the beginning of thee Editing Your Website section to get the structure of the folder system if this is unclear.

.htaccess

There is one final and important step to take when deploying a React app to cPanel, especially if you are using BrowserRouter or any other routing system. On your cPanel file manager, go to the top right of the page and click on settings. There will be a box towards the bottom of the window that pops up that says “Show Hidden Files”. Click this checkbox and save the changes. Now the .htaccess file will be visible, as it is set to not visible by default. Click on the .htaccess file and edit it, and enter the following code:

<IfModule mod_rewrite.c>

RewriteEngine On

RewriteBase /

RewriteRule ^index\.html$ — [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteCond %{REQUEST_FILENAME} !-l

RewriteRule . /index.html [L]

</IfModule>

Sometimes when using BrowserRouter, if you navigate away from your webpage, such as clicking on a link to a Medium blog, and try to hit the back arrow in your browser, you will be taken to a 404 Page Not Found error page. By adding this .htaccess file, your prevent this behavior and allow your page’s routes to be available to search server side as well as client side.

You’ve Done It!

If you follow these steps you will successfully launch your first website hosted from your domain, and hopefully much quicker than I did. Be sure to make sure you copy only your files from your build folder, and do not try to move entire folders into your cPanel (certain memberships do not allow full folder transfers). Now go forth and publish your website!

http://aidan-mcbride.com

I ‘m a Web Developer and a Flatiron coding bootcamp alumni. I currently work in the financial tech industry as a Front End Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store