How I Created My Portfolio Website With Free Web Hosting
Friends, I had already told you that in today's time a website is important for everyone. Now it seems like a very old idea to tell people about yourself through paper or documents. I have seen many photographers and graphic designers that they do not get a new job until they give all their details to a client through the website. Not only here, now it is getting demanded everywhere. Keeping this in mind, today I have brought such a platform for you from where you can create your own Portfolio Website or any other website by taking Free Web Hosting.
Before proceeding with this article, let me tell you that I have also created my own Portfolio + CV website, which I have placed on this free hosting. If you want to see it, then you can watch it by clicking on the button given below. I am saying this because after seeing it, you will get the idea of such a website and if you want, you can also make a better website than this.
Rahul Rao Freelance PortfolioFriends, I am not promoting this website, this is just an example to show you. Now without taking much of your time, I come straight to the point that how will you host your website on Free Hosting . The website I have used is Firebase , it is a product of Google itself. In which many features have been given apart from Free Web Hosting . If you want, you can see all the features.
What is Google Firebase? What services does it provide?
Advantages of Firebase Free HostingBeing a product of Google, it can be fully trusted. I am saying this because there are many such free web hosting providers, there is no guarantee when they will be closed. If it is closed, then the water of years' hard work will go back. Let us now know what are the main advantages of Firebase Free Hosting-
- Google's Trust
- Free SSL Service
- Fast loading without wasting time
- 1 GB of storage
- Data transfer up to 10 GB / month
- Benefits of adding a custom domain
- Can add multiple websites to one project
Firebase Free Hosting Some Disadvantages
- On Firebase, you can host any website for free only on its subdomain , although you can also add it by purchasing a custom domain.
- On this you can host only HTML website. It does not support php because here you will not get the feature of database.
How to host website on Firebase?
Hosting a website on Firebase is a bit tricky but not that difficult, you just have to follow our steps very carefully. If you know how to make a little website, then you will do it easily. For this, all the things you will need on your laptop, first keep them in one place.
First of all, check the html package that you have created for your website, whether it is running well on the local or not. If you have not created an html website yet, then you can create it or download any html theme from the net and customize it accordingly.
To run Firebase on your laptop , you will need node.js software, you can download and install it from the website of nodejs.org. After installation, there is no need to open it, it only runs command prompt .
Now let's follow those steps in which all the suggestions for hosting the website have been given-
Step :1First of all, go to your browser and open firebase.google.com website, create an account on it with your gmail id. After the account is created, proceed further by clicking on the Get started button.
Step :2Now you will see the option of Add project with + sign. Create a new project by clicking above, you can name the project whatever you want. Just below this you will get the Project Project ID, here you can set the url of your website. If your favorite URL is available then add it and save it. After that proceed by clicking on the Continue button.
In this step, you will be asked if you want to add Google Analytics, it will already be enabled, just click on the Continue button and proceed.
Here you will be asked which analytics account do you want to connect? You add a new account by clicking on create new account and then click on Create Project button. After loading for a while, your project will be created. After that continue.
India's best web hosting and their best services
What are Storage Devices? Know full detail about it
After all the above process, you will see the Firebase Dashboard of your project. Here you will get to see three icons, which will have iOS , Android and Web icons. You have to click on the web icon as seen in the image below.
Step:6As soon as you click on the web icon a new page will come where you will be asked for some details of the app. I have put the image below for this, keep it as it is in the setting image, you can change the App nickname according to you.
After filling the details proceed further by clicking on Register app button. After this you will get a script. Copy this script.
Before proceeding further, let me tell you that there is no cpanel-like feature for Firebase Hosting . In this the code is uploaded from the local folder on your laptop and that too through cmd.
Now minimize your browser and create a folder on your desktop with the name of your project. Create a file named index.html inside that folder and save the script code found in Step #6 which was copied in your index.html. It is only through the file that firebase is connected to your folder.
Now go to your browser from where you got the code in Step #6. Now click on the Next button. After doing that you will have those few steps. For example, Register app which was done in its Step #6 itself, Add Firebase SDK is to save this script which was done in its Step #7 itself. After this comes Install Firebase CLI, now you have to do this.
In the step of Install Firebase CLI, you must have got a small code, with the help of this code you can install Firebase in your local folder so that communication from local to online can be maintained . To install it, you have to go to the command prompt of your laptop, but to open it, the Windows user will run the run command by typing cmd and its Windows will open.
By cd on cmd you go to your folder which you created on Step #7 Desktop. I have created a folder named techactive on my desktop so I have to type on cmd –
cd C:\Users\RR\Desktop\ techactive as seen in the image below. When you will come to techactive folder then type the code which is given on firebase dashboard and hit enter.
npm install -g firebase-tools as shown in the image below. As soon as you enter, firebase will be installed here. Wait a while
Go to Browser Now your firebase is installed. There press the Next button. Now you will come to its second code and you will get –
Same code you type on cmd, note that you do not have to close any windows until all the process is done. As soon as you enter firebase login, it will ask you to allow, you press Y and hit enter, a new Windows will open where you will have to click on allow access.
Now firebase will ask for login and permission on your browser, you allow it there. Now your cmd is logged in with your firebase account. You will also see the message of login successful.
Now the third code will be found on the firebase account-
With the help of this, a public folder will be created on your local folder where you can keep your code. To do this all you have to do is type firebase init and die enter. As soon as you do this it will ask you are you ready to proceed? You have to die by typing Y.
After this firebase will ask you on cmd which feature of ours do you want. You go to hosting by pressing down arrow key, press spacebar to select and hit enter, now your firebase hosting is set up.
Step :13In this step it will ask whether you have to create a new project or would you like to do it on the one you have created? We have already made everything, there is no need to create a new project. Select Use an existing project with the arrow key and enter. As seen in the image below.
After this you will see whatever project you have created on firebase. You select the one on which you are working like I have selected techactiveblog. After selecting you enter.
Now it will ask you what do you want to use as your public directory? (public) You don't need to type anything here, you just have to die enter.
Now it will ask you Configure as a single-page app (rewrite all urls to /index.html)? (y/N) Enter here by pressing Y.
Now you see your folder which was created on your desktop. Another folder named public would have been created inside it. There will be a file named index.html inside it, you delete it, it is of no use.
Step #14Now you have whatever html files you have like your CV, Portfolio, or any service website template. Copy along with all its supporting files and keep them inside the ..Desktop\techactive\public folder.
Now it's time to upload your file to firebase server, to do this you go back to cmd and type there –
As given on firebase dashboard. The job of this code is to upload your local file to the server. As soon as you enter firebase deploy on cmd, your local file will be uploaded. After uploading for a while, you will get a public URL on cmd itself.
As the Hosting URL is visible in the image above, this is your public URL which you can share with anyone.
If you want, you can also add this website to the Webmaster tool for SEO . There is no difference in SEO of any other link and firebase link, it will work in the same way as if you are ranking a new website.
Where can Firebase Hosting be used?Although it is free, you can use it anywhere and on any project. If still you want to know, then I tell some such places, which you can use well.
- For CV or Resume
- to show portfolio
- landing page for an event
- To show that page with multiple links in one place
- Your profile for Freelancer, etc.
Now friends, you must have understood about free web hosting of firebase . I think you will do it easily, you just have to read and follow all the above steps very carefully. If you skip any step, you may make a mistake. If you read my steps even twice, then you can easily host any website.
If you learn something from this post, then please try to reach it to others as well. I want everyone to know and use this thing in our country. Then what is the delay, share this post and if there is any problem, then the comment below is open, you can ask me there.