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 .

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>

--

--

--

Web Developer | World Traveler | Positive Attitude

Recommended from Medium

WHAT IS MONGOOSE, JWT, CURD OPERATIONS

The Unstated React Service Pattern

LWC Quick Action:

Create React App and SVGs

JavaScript Challenge: Grading Students (HackerRank Challenge)

Run Node App as Linux Service

Why I have chosen Quasar-Framework

You’re Missing Out on Vanilla JS

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

Mokhtar Ali

Web Developer | World Traveler | Positive Attitude

More from Medium

4 Reasons Why Paid Courses are Worth Your Money

The Startup Hiring Guide to Getting Top-Quality Talent

Remote Jobs

Promotion of the company owner’s account (traffic on Lead Magnet and SMM)

Photo tape “before”

Entrepreneurship Skills for Growth-Orientated Businesses.