Portfolio & Hosting your Website on NameCheap.com

I spent sometime looking up ways to create a good stylish portfolio and I ran into some issues that I thought they would be helpful to share with everyone.

Here are the steps to create a unique Portfolio:

1- Look up Templets

• There are many free Templets you can download but I wouldn’t recommend using the same code, just look Templets up to get an idea of what’s your Portfolio would look like.

2- Create Application using your favorite Language

• At my case I used React, simply because it’s my favorite language and because I wanted to have multiple pages.
• You can use a simple one HTML page and add all your code in it.
• You don’t need a backend for Portfolio.

3- Make a Github Repo for your Portfolio .

Joemokhtarali/Portfolio

4- Look for and buy a Domain name

• Google offers the cheapest prices. But transferring domains take 60 days so it would be best to buy if from NameCheap.
• Extension: Not really a big deal, I used .dev
  .dev is a top-level domain name operated by Google. It was introduced March 2019. To increase the security of the domains, which comes to the next issue I got into “.SSL” certificate

5- Hosting your Website & SSL certificate

• SSL certificate will be included as a package in Hosting Websites for about 4$ a year or less, just make sure the Hosting company offers it before you sign up.
• I have made my research for Hosting Websites and I picked NameCheap

6- NameCheap.com Hosting steps

• Cons: I have to say NameCheap documentations are not the best, their Youtube channel isn’t at all helpful and their web panels are confusing, also their speed is doubtful.
• Pros: Price is very cheap about 17$ a year for hosting 1 domain and 35$ for 3 domains, I looked up a promo coupon code that got me 30% off.
• Steps:

a- Once You sign up and buy a package, You will receive an email with very important information that you should save

b- You can either access the files by going to Domain List =>Manage => Control Panel =>File Manager. Which is very confusing or you can download CyberDuck which is a life saver

c- CyberDuck : is a great tool to edit your File Manager

Simply download the app and use your Cpanel username, password and server number from the greeting email of NameCheap

Then access the Public_html file and add your files

d- If you are using React, run npm run build to compile your files before you add it to your website files

7- React Routing problems

• If you built your app using React, You will hit 404 error when you try to redirect from the main page to any other page:

• This is an environmental Routing error that was very confusing
• In Public_html, Create a new file .htaccess

Add this code in it

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

Mokhtar's Portfolio