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

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

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

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

<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!

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