Creating a Data Science Portfolio Website with Hostinger: A Step-by-Step Guide

The process of creating a data science portfolio website requires attention to detail and a solid understanding of web development principles. In this guide, we will walk through the steps necessary to create a professional-looking website using Hostinger's file manager.

First, let's start by accessing the Hostinger file manager. Once logged in, navigate to the "public" folder and click on the "Upload Files" button. This will allow us to upload our files to the server. We'll begin by uploading individual files outside of the public folder. After uploading 404.html, index.html, and index.xml, we can confirm that all files are uploaded successfully.

Next, let's navigate to the "kind" column to sort our files by type and folder type. This will make it easier to upload all of the folders at once. Clicking on "Upload Folders" will allow us to categorize our files by type and upload them in bulk. After uploading all of the files, we can refresh the page and confirm that everything is uploaded correctly.

Upon refreshing the website, we notice that the logo is not appearing. This could be due to the fact that the images are not being recognized by the website. Upon investigation, we find that the issue lies with the "public" folder. We need to delete all files except for the default.psp and modify the domain parameter in the "config.yml" file.

To correct this, we'll navigate to the "config.yml" file located outside of the public folder and replace the domain name with our own domain name, channeling.tech. After making this change, we can render the website again by opening a terminal window and typing "render -d" followed by pressing enter. The website will now be updated with the correct domain name.

With the website corrected, let's navigate back to the public folder and upload all of the individual files again, one by one. This time, we'll categorize our files by type and upload them in bulk using the "Upload Folders" button. After uploading all of the files, including folders, we can refresh the page and confirm that everything is uploaded correctly.

Upon refreshing the website, we notice that the images are no longer being recognized. To resolve this issue, we need to correct the domain parameter in the "config.yml" file. Once corrected, we can upload our images again, categorizing them by type and uploading them in bulk using the "Upload Folders" button.

After uploading all of the files and correcting the domain parameter, we can refresh the website and confirm that everything is working correctly. The light theme and dark theme modes are functioning properly, and all links on the website are working as expected.

Finally, let's test out some of the features on our portfolio website. We'll click on a blog post and navigate to its table of contents and full-text article. We can also click on an infographic to view it in detail. The "About" section is also functioning properly, with all links available and accessible.

In conclusion, creating a data science portfolio website using Hostinger's file manager requires attention to detail and a solid understanding of web development principles. By following these steps, you'll be able to create a professional-looking website that showcases your skills and projects. So, if you're looking to create your own data science portfolio website, follow along with this guide and take advantage of the resources mentioned in the video description.

Resources:

* Hostinger Web Hosting Services

* Paper Mod Theme

* Data Science Portfolio Website URL (to be shared in the comments section)

"WEBVTTKind: captionsLanguage: enthe job market is quite fierce to stand out you need a good and strong portfolio website and so when hosting a restaurant to sponsor this video i thought it would be a great opportunity to create a tutorial showing you step by step how to create a portfolio website using the hugo static site generator which will deploy to hostinger hosting services and so without further ado we're starting right now so let's start by signing up for a web hosting account using hostinger so you can go to hostinger.com slash data professor and you could go ahead and click on the get started button so let's take a look at some of the web hosting features so for 2.99 a month you're going to get free ssl which will encrypt your ssl certificate you're going to get a free domain name but this requires that you sign up for a 12 24 or 48 month hosting plan you could get free email up to a hundred domain based email addresses so for example if you have registered for something like super supercoolwebsite.com then you could create a new email to be your name at supercoolwebsite.com and aside from that you'll also get optimized support for wordpress and several other content management system for creating your website and then here are some of the technical specs of the web hosting service so it gives you support for building over a hundred websites and more than and a hundred gigabytes of ssd storage and the great thing is that it provides you with free weekly backups of the data and there's unlimited amount of traffic for your websites and so to register go ahead and click on the select button so let's take a look at some of the plans that are provided here so there's one month 12 months 24 months and also 48 months planned and you'll notice here that for 12 24 and 48 months you're going to pay 299 a month and as mentioned previously you're also going to get a free domain name so make a selection of your choice here and let's scroll down so you're going to see that you're going to save over 432 dollars and then you're gonna pay 143 and 52 cents for four years of hosting services and remember that you could host 100 websites if you like and you could create your account by typing in your email address or you could also sign in using google facebook or github and then you select your own payment plans here and then you'll notice that you get 75 discounts and you can see here that it's asking for a coupon code and if you click on it you could type in data professor click on the add button and then you're going to get an additional 10 off so that will bring your discount to 77 and so you're going to pay 10 less at 133 for four years of web hosting services so this will average less than 299 a month so the coupon code is data professor and i'll provide mention of this in the video description so we want to start by logging in and you could use google account to log in now we can see that the premium shared hosting is currently pending setup and go ahead and click on setup click on start now scroll down click on myself and here we're going to go ahead and click on the portfolio so we're going to create a new website and we're going to say that we're a beginner but have some experience and here we're going to select the platform and you could try out wordpress but later in the video we're going to actually use hugo so if you have already decided to use hugo you could go ahead and click on skip i will start from scratch otherwise you can try out the wordpress system and you can see here that there are several supported content management systems which when you install directly from hostinger it will allow you to create various types of websites using these content management system and so here we're going to go ahead and select the wordpress and then we're going to enter our administrator email and then you want to enter your password and after doing so hit on continue and then it'll allow you to select the template that you would like to try out so before actually using hugo to build the portfolio website we're going to try out the template provided by the wordpress system and in doing so it's actually a great idea to see an example website that has already been pre-configured with all the contents ready to go so that we could see the website layout on our registered domain name so here we're going to select claim a free domain which was provided when signing up for the hostinger web hosting plan you could also buy a new domain or you could also plug in an existing domain so here we're going to click claim a free domain and we're going to make a decision on the domain name to use so apparently shannon.net is not available so let's try out the dot tech domain name so it'll be shannon dot tech and we'll click on the search button and the domain name is available so hit on continue so this will provide us a summary and if we're okay with this then click on the finish setup and then from here on you want to fill in your own personal information and after entering all of your information you want to click on finish registration and proceed further and so it's initializing setup let's see if our preview website is ready all right and so this is the preview website using the template that we have selected from the wordpress system so don't worry if you don't want to use wordpress because we're going to delete it in just a moment but we're just using wordpress here in order to get a glimpse of the actual domain name in action and so it might take some time before the contents of the wordpress will be served to the new domain name canon.tech so this could be anywhere between a few hours to even less than 24 hours so in the meantime you could proceed to building the hugo portfolio website which we're going to cover in the next segment of this tutorial video so here we're just checking out the configurations and settings of the domain and of the web hosting but if you don't want to get your hands dirty into coding the website using hugo static site generator then wordpress is also a great option because it is a no code solution meaning that you could just point and click and you get what you want and you can see here that hostinger provides several tutorial videos on how you could get started in using wordpress and there's actually a whole singer academy as well so you could also feel free to check out these tutorial videos so we can see that the domain is not yet pointing to the web hosting surface because we had already registered the domain name directly from hostinger there's no need to point the domain dns to the web hosting service because that is already been taken care of so we cannot click on the manage button because the domain name is not yet pointing to the web hosting service so that might take a few hours let's check out the file manager and you're going to see here some folders belong to the domains and the wp belongs to the wordpress and the public html here will serve the web pages that belongs to the channel.tech domain name let's see if the actual channel.tech is ready and it's not yet ready so what you could do is after logging in you could click on the manage websites and then you could check out the wordpress installation by clicking on websites and then here we're going to delete it so deleting takes only a few seconds to do so now we're back to the hosting account and here we could see that wordpress is not installed it's a great thing because we had already deleted and under the hosting tab which you could click on from the top panel and then you could scroll down and then you want to find the file manager there's two version the beta version and the more stable version let's go ahead and click on the public html folder which at the moment only has contents for the domain genon.tech because we only have one domain name registered under this account so if we have more than one domain name then you're going to see several subfolders in the domain folder so here's the default.php which will be served by default to the channel.tech domain name and so we could either delete or we could also rename the file so that it won't be served in this tutorial we're going to use the open source static site generator called helgo for creating our portfolio website and the theme that we're going to use is called paper mod and let's have a look and let's take a look at the demo right here example site and the link is provided here so all of the files used to create a demo is provided here and so let's go ahead and click here and so this is an example of the paper mod website that we're going to be using in this tutorial so the great thing about this theme is that it's very clean and minimal on the top left hand corner here you could click on the activation of the light or the large theme here just click on it and it activates or deactivate the light and the dark theme and let's say if we click on an article here it provides the table of contents at the top here which could be minimized and it provides all of the headings in a very clear to see and read and it's very friendly for embedding code snippets into your blogs or articles on the portfolio website so this would be a great way for you to share your blog posts your writings on your portfolio websites as well as showcase examples from your data science projects the models that you have built and explanatory about the importance and the results from your projects which constitutes your portfolio of data science projects so perhaps in a future video i will cover about the topic of how you could select a machine learning project to do or a data science project to do from scratch using your existing domain knowledge which you could work on in order to establish your portfolio of data science projects or machine learning projects that you could use for future employment and so let's head over back to the hugo website and let's click here on the quick start so very first thing is you want to install hugo onto your computer and for mac users you could either use the brew or the port personally i use brew to install hugo into my computer and what i did was here go to the terminal and just type in brew install hugo and hit on enter and then after that it will be installed into your computer so if you don't already have brew you want to install brew first let me show you is it brew.sh it is so you could install brew by copying this line of code here and then pasting it into your terminal and then afterwards after it is installed you could install various packages from within the terminal you could use brew install and then the name of the package that you want to install so it works very much similar to the app get installed from ubuntu so for those of you who are not sure whether you have brew installed on your computer you could just type in brew and if you see something coming out like this then it means that you have brew installed already or if you're unsure whether you already have hugo you just type in hugo and you should see something coming up like this you could also type in hugo version in order to figure out the version number of the hugo on your machine and here i have version 0.97.3 and for those of you who are using windows you could click here see install if you're running windows and it provides you with a lot of information on how you could install hugo using the chocolaty package management so it works very similar to brew and to appgat from ubuntu so you could also check out this website for installing it or even scoop but if you prefer not to install these package managements onto your computer there is another way and the other way is to go to the hugo releases like here so i'll provide you a link directly to this hugo release page and then you could see that there's actually version 0.98 is that has been updated and if you scroll down a bit you're going to see all of the binary versions of this hugo package so if you're on the linux you could use for example this one 64-bit if you're on a debian based distribution of linux if you are on a mac you could use this one mac os 64-bit if you are on a windows depending on whether you have 32-bit windows or 64-bit installed you could use either one of this and then you could just unzip it and then use the hugo.exe or the hugo binary file which is inside the zipped file so let me show you let's click on here and it's going to download i'm downloading the os x 64 bit and we have it here let's go to the downloads folder and then it's hugo 0.98 now s so notice here we have hugo so type in point or period slash hugo and then okay i think it came up with this security thing let me first go to system preference go to security and privacy and you can see here that by default it is being blocked so i want to click on allow and i'll try again and i'll click on open all right and now it works okay and i could type in hugo version and then i can see that it is version 0.98 so i can use hugo directly from this binary file without even installing it onto my computer but note that you need to have this inside the working directory in order for it to work or you could save it into your environment path all right and so let's head over to the paper mod and so let's take a look at how you could install paper mod now that you already have hugo installed on your computer scroll down and then there's an installation wiki here so let's click on it you can see that there are three methods for installing paper mod theme so here it says to do the following hugo new site name of site dash f y ml make sure you have latest version of hugo greater than 0.83 so as we have already seen we already have 0.97 installed on the computer and after we have installed after we have created a new site we can go to step 3. so choose either methods that you would like to do it could either be method one method two or method three so either methods will work so i'd say the simplest way is to just git clone it so let's do that go to terminal so let me see where i am at okay so i'm currently in the downloads folder inside the hugo folder here so what i would do now is i'll copy this or i just click here to copy go to terminal and then just copy paste hit on enter and then we have the themes folder okay and see now we want to use hugo to create a new site so why don't i minimize this a bit make it bigger here close this okay so what i'll do let me increase the size of the fonts here in the terminal bigger okay all right so there's a lot of information here because the folder name is quite long okay so i want to type in hugo or if you're using the hugo binary file you could do dot hugo okay or you could use hugo if it is installed in your computer okay so for those of you who don't have hugo installed and you want to use the binary you could go with dot slash hugo but make sure that the binary file is in your current working directory okay otherwise it won't work okay so from this point forward i'm going to assume that you already have hugo installed on your local computer and that you're just going to use hugo like that with no dot slash in front okay for simplicity all right so let's create the new site hugo right here new site and then let's give it a name perhaps you want to call it w3 or even you know ww let me expand this a bit and then dash f and then yammo yml enter all right and it works now and so it mentions that you need to do a few more steps you need to download the theme which we had already done so choose a theme from gohugo okay because we have already done step one in that we have selected paper mod theme you can add some contents to it and then look at the server okay so we have already downloaded theme let's have a look at the list files here so our themes is in here and we have created a new site here so let's move the themes to the www folder mv themes wwe look again now you see that the themes folder is gone let's go inside the www directory and themes is here let's go into the themes paper mod let's go into paper mod all right so all of the theme files are in there okay so we are in the working directory of the hugo website that we're going to create so before proceeding further let's launch a demo or a preview of the website so you want to type in hugo server dash d dash d is for displaying contents that are in draft mode so if you don't have any contents in draft mode you could just say hugo server and it will work but for those of you who have articles or blogs that are in draft mode it will also be displayed okay so we're gonna type in hugo server dash d enter and now the file is accessible for your view at this particular local host address so let's copy that and go here go to localhost with a port number of 1313. okay so there's no content so you don't see anything here so why don't we do this i have already created some contents and i have already modified the config.yml so we're going to copy paste some of the contents that i have already done so let's go to sandbox and then i already have a www folder in sandbox and so why don't we do this we're going to take a look at the yaml file that was just created and the yaml file that i have customized let's open up the atom which is a text editor or ide you could also use your favorite ide like visual studio code okay so this is the one that i have created and let's see and this is the yamo oh it has the same name that's why let me close this first okay so let me show you the contents okay it's the same folder sorry right here let me close that so let's have a look at the config.yaml file that was created just a few moments ago so you could see that there's barely only three lines of code here and the yaml file that i have is here and the one that i have was actually copy pasted from here let me show you so here in the installation wiki page it provides you an example set of code that you could just copy for your own site okay you could copy all of that here and you could either go here to the top right hand corner and click on copy and then paste the contents into the config.yml and you could also copy some example content which is in markdown language copy it and you want to put it into your content folder here let's see archetypes post md in the archetypes post.md let's have a look at the contents of that post.md so this is like a template for all of the posts the header to use i'll provide you all of the contents of this example site so that you could just use what i have already modified and then you could replace it with your own content which will be a lot quicker for you to get started so this is the config.yaml file that i have already customized which was customized from the one on the wiki page and i did a little extra customization as well which might be useful to you so what you could do here is simply replace all of my names with your own name and here replace my name here with your name replace the description about this website to be about you your name here and then make this content specific to you okay so here i say that i create educational content on data science so you could replace this with what you do and some of the keywords to use i use keywords like blog portfolio data science and you could replace this with other keywords of your choice author here is my name and you could replace it with your name so the default theme here is set to auto and you could change it to dark or light depending on your own preference here we let it be set as default for all of the other parameters like showing the breadcrumb showing the reading time etc so i'll leave that as the default and here we have the text to be my name and then we have the image which is the logo i'll show you this in just a moment so why don't we do that so what i'll do here is i'll just essentially just change the working directory to the one that i have already created and i'll provide you all of the files in a github repo and i provide you that link in the video description okay so let's head over back here let me cancel this demo website and i'll go to my own customized version of the portfolio website so where i am i right now pwd i'll go out i'll go out i think it's in documents sandbox and in the www folder and here let's have a look at the contents if it is my content here yes it is okay so let's type in hugo server dash d and let's go to the localhost again okay so this is the customized version of my portfolio website which you could easily customize okay let me show you side by side here i'll put the code to the right so title this is the website of right so if you want to change your name here i saved it to your name let's see what happens here with it updates it might be in the description of the website let me unchange it oh it's right here so the contents that you'll see here will go here but the one on top here might be the one that goes to the meta description that goes to the search engine so here you could replace this with your own name your name right if your name is john doe then you can say john doe right and it automatically updates to john doe okay so i'll leave it back to my name right if i change contents here it updates automatically and notice that i've used the markdown syntax for making the text bold and notice that i have my portfolio image here and it is in the folder images slash dp dot png so you could replace this with your own portfolio image and notice here that the image title will be data professor so if we hover it all right and so notice here that the buttons that are displayed are blog and projects which is right here the buttons that were showing i could add an s here and save it and this is updated to blogs all right so notice that this is for the profile mode and this is for the home info mode so i just pasted the same content just in case i wanted to change it to the home info mode but currently i'm in the profile mode and scroll down here you'll notice some of the social icons are used here so the first one is the youtube social icon and i put here name colon space youtube and you could put in the url of your youtube and then here we have name medium and then you could and you could put in the url of your medium page same thing for twitter and then full link to your twitter account linkedin full link to your linkedin full link to your linkedin account github and then the link to the github account buy me a coffee and then link to the buy me a coffee page here you could also put in your google analytics code your bing or your yandex code here i just leave it at default i'll leave it at default here menu okay what links do you want to show at the top here so here we have about blog and projects so the weight here will show the ordering of the items on the menu so if you want to show your blog to be the first one then you want to make the weight to be one which will be the first position and let's say that you want to have your projects come in next and then you want to have about to come in third then it becomes like that and then you want to save it and then the ordering will change now you have about at the far right blog and projects will be the first two and you could add additional ones if you like as well like this let's see what do we want to add we have blogs okay let me add s here box let's see what do i want to add how about illustrations i've drawn some illustrations or infographics let's say info graphics and then the name would be info graphics u and then the url could be info graphics and then the weight would be the fourth one or how about we have about to be the fourth one right there you go and so we have blog projects infographics let's make it a capital i there you go so we have blogs projects infographics and let's head over to the folder here so remember that we have the blogs so in the content folder we'll need to have this as blogs with the s and here we have about which corresponds to this folder and let's see projects corresponds to this folder infographics we don't already have a folder so i'll create a folder called infographics and then i'll need to populate the contents in here later on so so let's have a look at about so you have index.md so when you click on the about link here you go to the index.md if you go if you click on the blog link here you go here to a summary page of the blog contents if you click on infographics then i'll have to create a index.md here and if you click on projects here you go to this folder so it will be a summary of projects one two three so why don't i copy the contents of about into the infographics and i'll modify this content let me do it now so that you can see so this was about so i'll just delete the contents here i also create and drawn info graphics and illustrations to summarize the key concepts in data science machine learning and bioinformatics i'll call this infographics and here will be the info graphics i'll leave everything else as default and as i mentioned if you don't want to show it you could have draft to be true like that but here we're just going to leave it as false so whenever i update the contents here i'll see the new content reflected here so i have already saved it and if i click on infographics then i go to this page okay and then i'll later on populate it with the respective infographic images let's click on about let's have a look at the contents there so let me show you the contents of about which is here right so all of them are written in markdown language so you could also paste in emojis you can make text bold and you could add links to it like this so i added all of the social links and all of the researcher links related to my previous career as a professor in bioinformatics click on projects and it will be a summary of the contents in here let me show you it will be here projects one two three so it will show you the preview of projects one two three and notice that the title is here title and the author will be the author which is myself and then the estimated reading time which is based on the amount of contents in here so let's click on one of the projects and essentially the table of content would just be an abstract because we didn't really have any other contents provided here so what if we give it a structure you'll notice that it has this structure if you have one hash symbol it'll be a h1 heading so let me add another h1 heading here let's say full text article save it and this should be reflected reload it okay it's a different article probing the origins so let's see this one right here right so we have here full text article we add another heading if you click here table contents we have abstract and the full text article okay so that might be helpful so that you can just click here and you go to the full text article okay so why don't i do that i'll copy this i'll save it here close it go to project two i'll do the same put it here save it to project 3 paste the heading save it and let's go back let's go back and let's see tours reproducible yeah we have it we have the full text article here and if we click here it'll go to the link of the article so yeah so we've written this review article in 2020. let's close it oh okay i might just close the website let's go back again okay all right so what else should we cover how about here the logo so all of the images that you see here the logo image and the profile image is actually in the static folder here so covers would be for your articles so the cover image for your blog or your projects and if you do have a cover image let me show you first you go to contents you go to blog and in this article what is bioinformatics the cover is here image it will be the relative path to the image in the covers folder which was in here static covers and what is bioinformatics.jpg which is here okay so let me show you blog what is bioinformatics so this is the cover image okay and the out description will be what is bioinformatics and here we have a lot of headings that are provided which was copied from the blog post that i published on medium and if you click on table of contents you're going to see the table of contents shown here okay let's head over back and now let's cover about the logo image is in static and it's in the images folder here we have two files dp.png is the image of here coding.png is the image shown here so i've actually modified this a bit from the one that i've downloaded i think i got it from flatikons.com so i'll post you the link to that in the video description and so let me show you first flat icon.com and then you could search for let's see was it coding yeah you could find yeah i think it's this one yeah i'll see the link to this in the video description as well so it's free for personal and commercial purpose okay so you could you know find other icons that resonates with you and then you could use it on your portfolio website okay and it's specified in your yaml file so what else should we cover i think that's all so this is the basics for how you could create your portfolio website so now you know already where to put your images which is in static images folder and you know where to create your content go to the content folder and then populate the folders here with your contents which is in markdown so this is the content for about this is the contents for each of the blog posts that i have so let me show you again so these headers will be used by hugo framework to put in the title of the page the slug which will be the link to the web page of this article and whether to show the table of contents so we leave it at default and then the rest you could just copy from your github readme.md if you already have one and so all of the contents here will be in markdown which is really convenient to update and write and upon updating it and saving it you'll see the changes reflected in the preview of your websites okay so now that we have already seen how we can create our own and also customize our own portfolio website now let's have a look at how we could deploy it to the web or the internet we're on the cloud so first thing is i'll want to exit this server mode we'll start fresh clear let's look at the contents and we have the public folder which i'll remove right now because we're going to render it again and it will generate the public folder let me have a look so there is no public folder so the fun part comes here you want to render your website you could just type in hugo dash d and as mentioned already dash d is for also deploying your draft versions so if you don't have draft versions you could just type in hugo okay or if you have draft version and you want it to be rendered as well you want to add dash d okay so let's go ahead with just using dash d here hugo dash d hit on enter and then you'll notice a summary table showing all of the rendered websites in hugo so we have here 22 pages five static files three aliases one site map let's have a look and you'll notice that you have the public folder here let's have a look inside the public folder and we have all of the files that we need to upload to our remote website server or our remote web host server so i'll show you that in just a moment all right so let's have a look in the typical view of our folder here so notice that we have already created the public which is the version of the rendered websites and so all of the images goes here all of the cover images goes here the contents blog goes here the about page goes here infographics here projects will go here and each project will have its own name and remember these are the slug slug which will be the respective link like for example you have about okay so i already closed the preview and then you have like about and then you have or how about projects and then you have here slash er pred like that erpred so it will be the relative path to your blog files here okay so in the next segment of the tutorial i'll show you how you could deploy all of these rendered website from hugo onto the web server or the web host and now that we have already rendered the hugo website files let's now proceed to uploading it to the web host so let's have our folder ready it's in the public folder so essentially we're going to copy all of here into the web host server let's now head over to the web host server website and so we're going to host our website on the hostinger web hosting service so let me login and i'll use my google account to log in so we're going to host it on the domain shannon.tech and i'll head over to the hosting panel here click on it i'll now click on the manage part under the domain shannon.tech click on manage scroll down and then you'll see the files heading here so apparently there's two versions the normal version called file manager and the newer version which has beta in parenthesis so let's go ahead and try it out using the typical file manager version and you're going to see several folders here and the folder that we need to focus on is the public underscore html and so let's first go to the web domain sending.tech and you're going to see that it currently has the default.php file here in the public html folder and it's recommending that we should delete the file here and then we can replace it with our website files so let's go ahead and do that let's delete this file and then replace it with the hugo rendered files click into the public html double click on it or you could also click it on the side panel here as well right here and now we have default.php so instead of deleting it i'm going to rename it just in case just in case we have it so i'll rename it and add the dot bak at the end click on rename let's have a look at the website again okay now you're not going to see the website that is rendered normally because we have already renamed the extension from php to become.bak so it's not recognizing it so now i'm going to copy paste or actually i'm going to upload the contents of the hugo rendered files in here let's see can i drag and drop it here let's see if we could do that okay i could drag and drop it can i drag and drop the entire folder i think i can okay so i just dragged and dropped and it's allowing me to review the files that is going to be uploaded and you're gonna see here that there are several folders indicated by the purple color folder icon and then there's the individual files for html xml and txt so i'll go ahead and click on upload and you're going to see that it's uploading one by one so give it some time so grab a cup of coffee or tea while waiting and after you come back it's probably going to be uploaded one file failed to upload that configuration okay index.xml let's see where is that oh probably this one okay so i have to let me try to refresh this click on the side panel okay and so now let's head over back to the hostinger file manager and then upload our file so i'll minimize this a bit and then we're going to upload the files in here so let's start with the files outside let's try dragging it and dropping it and then it allows you to review the file that you want to upload so we're uploading 404.html click on upload okay so let's see index.html so the first few files just want to try out uploading it to make sure that it works normally index.xml okay so i'm uploading the files outside the folder okay so all files outside the folder are uploaded let's click on the kind column here and then it resorts everything by the file type and folder type let's go ahead and upload all of the folders drag and drop click on upload so give it some time okay so it finished quite quickly and all of the files are in here let's click back to the website refresh it okay so the logo is not appearing let's have a look it should be in the images folder double click on it it's actually in here oh okay i think i know why i'll have to modify some file here one moment so let me let me delete everything except for the default.psp i'll click on delete delete and so a point notice that we need to modify one parameter and it's actually quite simple and i have overlooked that so let's do it now let's go up the folder outside the public folder so we want to delete the public folder here and then you want to open up the config.yml file right here yourdomain.com so you want to replace this with the specific domain name of your website where it's going to be located or hosted so because i already have the domain name to be channeling.tech so i'll have to specify that here it's going to be chenin dot tech save it and then we'll have to render it again so i'll fire up the terminal and i'll render it again dash d enter and it's finished exit it go back to the hostinger double click on public let's see the panel here let's try clicking on upload files select files okay we select okay we here if we do it like this we will have to select one by one so let's do it like before let's categorize it by type and let's upload all of the individual files here first and now the folders click on upload so folders are indicated by the purple icon here and the issue before was that when we did not modify the domain parameter it's trying to find yourdomain.com slash the images so there's no such files in that particular domain therefore the solution is to correct that to become chenin.tech and after doing so it should be able to detect the image files hosted on chenin.tech web server which is on the hostinger web hosting services so all of the files are uploaded here and the images are already in here let's have a look to double check double click on it all right so coding.pngmdp.png is right here go back here and let's refresh it all right and now it loads properly so let's try out the light theme and dark theme mode all right it works perfectly let's click on the blog click on the first article let's try to click on the table of contents okay it works click on read blog and all right so the link works perfectly let's go back to the main page click on projects click on the first article click on table of contents click on full text article all right so it's working properly right click open link new tab okay article works perfectly click on infographics alright so as mentioned already i can populate this with the relevant infographic images click on about okay so all of the links inside the website works perfectly and the great thing i like about the paper mod theme is that it's very clean and it does not distract the viewer from any fancy flashing images and so the viewers could choose to read it in light mode or dark mode and there you go a portfolio website that has a minimal appeal to it and if you would like to create your own data science portfolio website just follow along and all of the links to the resources mentioned in this video along with the links to the hostinger web hosting services will be provided in the video description so feel free to drop your data science portfolio website url in the comments section and share your data science portfolio website that you have created thank you for watching until the end of the video if you reach this far please drop a balloon emoji so that i know that you're the real one and while you're at it please like and subscribe and also turn on notifications so that you'll be notified of the next video and as always the best way to learn data science is to do data science and please enjoy the journeythe job market is quite fierce to stand out you need a good and strong portfolio website and so when hosting a restaurant to sponsor this video i thought it would be a great opportunity to create a tutorial showing you step by step how to create a portfolio website using the hugo static site generator which will deploy to hostinger hosting services and so without further ado we're starting right now so let's start by signing up for a web hosting account using hostinger so you can go to hostinger.com slash data professor and you could go ahead and click on the get started button so let's take a look at some of the web hosting features so for 2.99 a month you're going to get free ssl which will encrypt your ssl certificate you're going to get a free domain name but this requires that you sign up for a 12 24 or 48 month hosting plan you could get free email up to a hundred domain based email addresses so for example if you have registered for something like super supercoolwebsite.com then you could create a new email to be your name at supercoolwebsite.com and aside from that you'll also get optimized support for wordpress and several other content management system for creating your website and then here are some of the technical specs of the web hosting service so it gives you support for building over a hundred websites and more than and a hundred gigabytes of ssd storage and the great thing is that it provides you with free weekly backups of the data and there's unlimited amount of traffic for your websites and so to register go ahead and click on the select button so let's take a look at some of the plans that are provided here so there's one month 12 months 24 months and also 48 months planned and you'll notice here that for 12 24 and 48 months you're going to pay 299 a month and as mentioned previously you're also going to get a free domain name so make a selection of your choice here and let's scroll down so you're going to see that you're going to save over 432 dollars and then you're gonna pay 143 and 52 cents for four years of hosting services and remember that you could host 100 websites if you like and you could create your account by typing in your email address or you could also sign in using google facebook or github and then you select your own payment plans here and then you'll notice that you get 75 discounts and you can see here that it's asking for a coupon code and if you click on it you could type in data professor click on the add button and then you're going to get an additional 10 off so that will bring your discount to 77 and so you're going to pay 10 less at 133 for four years of web hosting services so this will average less than 299 a month so the coupon code is data professor and i'll provide mention of this in the video description so we want to start by logging in and you could use google account to log in now we can see that the premium shared hosting is currently pending setup and go ahead and click on setup click on start now scroll down click on myself and here we're going to go ahead and click on the portfolio so we're going to create a new website and we're going to say that we're a beginner but have some experience and here we're going to select the platform and you could try out wordpress but later in the video we're going to actually use hugo so if you have already decided to use hugo you could go ahead and click on skip i will start from scratch otherwise you can try out the wordpress system and you can see here that there are several supported content management systems which when you install directly from hostinger it will allow you to create various types of websites using these content management system and so here we're going to go ahead and select the wordpress and then we're going to enter our administrator email and then you want to enter your password and after doing so hit on continue and then it'll allow you to select the template that you would like to try out so before actually using hugo to build the portfolio website we're going to try out the template provided by the wordpress system and in doing so it's actually a great idea to see an example website that has already been pre-configured with all the contents ready to go so that we could see the website layout on our registered domain name so here we're going to select claim a free domain which was provided when signing up for the hostinger web hosting plan you could also buy a new domain or you could also plug in an existing domain so here we're going to click claim a free domain and we're going to make a decision on the domain name to use so apparently shannon.net is not available so let's try out the dot tech domain name so it'll be shannon dot tech and we'll click on the search button and the domain name is available so hit on continue so this will provide us a summary and if we're okay with this then click on the finish setup and then from here on you want to fill in your own personal information and after entering all of your information you want to click on finish registration and proceed further and so it's initializing setup let's see if our preview website is ready all right and so this is the preview website using the template that we have selected from the wordpress system so don't worry if you don't want to use wordpress because we're going to delete it in just a moment but we're just using wordpress here in order to get a glimpse of the actual domain name in action and so it might take some time before the contents of the wordpress will be served to the new domain name canon.tech so this could be anywhere between a few hours to even less than 24 hours so in the meantime you could proceed to building the hugo portfolio website which we're going to cover in the next segment of this tutorial video so here we're just checking out the configurations and settings of the domain and of the web hosting but if you don't want to get your hands dirty into coding the website using hugo static site generator then wordpress is also a great option because it is a no code solution meaning that you could just point and click and you get what you want and you can see here that hostinger provides several tutorial videos on how you could get started in using wordpress and there's actually a whole singer academy as well so you could also feel free to check out these tutorial videos so we can see that the domain is not yet pointing to the web hosting surface because we had already registered the domain name directly from hostinger there's no need to point the domain dns to the web hosting service because that is already been taken care of so we cannot click on the manage button because the domain name is not yet pointing to the web hosting service so that might take a few hours let's check out the file manager and you're going to see here some folders belong to the domains and the wp belongs to the wordpress and the public html here will serve the web pages that belongs to the channel.tech domain name let's see if the actual channel.tech is ready and it's not yet ready so what you could do is after logging in you could click on the manage websites and then you could check out the wordpress installation by clicking on websites and then here we're going to delete it so deleting takes only a few seconds to do so now we're back to the hosting account and here we could see that wordpress is not installed it's a great thing because we had already deleted and under the hosting tab which you could click on from the top panel and then you could scroll down and then you want to find the file manager there's two version the beta version and the more stable version let's go ahead and click on the public html folder which at the moment only has contents for the domain genon.tech because we only have one domain name registered under this account so if we have more than one domain name then you're going to see several subfolders in the domain folder so here's the default.php which will be served by default to the channel.tech domain name and so we could either delete or we could also rename the file so that it won't be served in this tutorial we're going to use the open source static site generator called helgo for creating our portfolio website and the theme that we're going to use is called paper mod and let's have a look and let's take a look at the demo right here example site and the link is provided here so all of the files used to create a demo is provided here and so let's go ahead and click here and so this is an example of the paper mod website that we're going to be using in this tutorial so the great thing about this theme is that it's very clean and minimal on the top left hand corner here you could click on the activation of the light or the large theme here just click on it and it activates or deactivate the light and the dark theme and let's say if we click on an article here it provides the table of contents at the top here which could be minimized and it provides all of the headings in a very clear to see and read and it's very friendly for embedding code snippets into your blogs or articles on the portfolio website so this would be a great way for you to share your blog posts your writings on your portfolio websites as well as showcase examples from your data science projects the models that you have built and explanatory about the importance and the results from your projects which constitutes your portfolio of data science projects so perhaps in a future video i will cover about the topic of how you could select a machine learning project to do or a data science project to do from scratch using your existing domain knowledge which you could work on in order to establish your portfolio of data science projects or machine learning projects that you could use for future employment and so let's head over back to the hugo website and let's click here on the quick start so very first thing is you want to install hugo onto your computer and for mac users you could either use the brew or the port personally i use brew to install hugo into my computer and what i did was here go to the terminal and just type in brew install hugo and hit on enter and then after that it will be installed into your computer so if you don't already have brew you want to install brew first let me show you is it brew.sh it is so you could install brew by copying this line of code here and then pasting it into your terminal and then afterwards after it is installed you could install various packages from within the terminal you could use brew install and then the name of the package that you want to install so it works very much similar to the app get installed from ubuntu so for those of you who are not sure whether you have brew installed on your computer you could just type in brew and if you see something coming out like this then it means that you have brew installed already or if you're unsure whether you already have hugo you just type in hugo and you should see something coming up like this you could also type in hugo version in order to figure out the version number of the hugo on your machine and here i have version 0.97.3 and for those of you who are using windows you could click here see install if you're running windows and it provides you with a lot of information on how you could install hugo using the chocolaty package management so it works very similar to brew and to appgat from ubuntu so you could also check out this website for installing it or even scoop but if you prefer not to install these package managements onto your computer there is another way and the other way is to go to the hugo releases like here so i'll provide you a link directly to this hugo release page and then you could see that there's actually version 0.98 is that has been updated and if you scroll down a bit you're going to see all of the binary versions of this hugo package so if you're on the linux you could use for example this one 64-bit if you're on a debian based distribution of linux if you are on a mac you could use this one mac os 64-bit if you are on a windows depending on whether you have 32-bit windows or 64-bit installed you could use either one of this and then you could just unzip it and then use the hugo.exe or the hugo binary file which is inside the zipped file so let me show you let's click on here and it's going to download i'm downloading the os x 64 bit and we have it here let's go to the downloads folder and then it's hugo 0.98 now s so notice here we have hugo so type in point or period slash hugo and then okay i think it came up with this security thing let me first go to system preference go to security and privacy and you can see here that by default it is being blocked so i want to click on allow and i'll try again and i'll click on open all right and now it works okay and i could type in hugo version and then i can see that it is version 0.98 so i can use hugo directly from this binary file without even installing it onto my computer but note that you need to have this inside the working directory in order for it to work or you could save it into your environment path all right and so let's head over to the paper mod and so let's take a look at how you could install paper mod now that you already have hugo installed on your computer scroll down and then there's an installation wiki here so let's click on it you can see that there are three methods for installing paper mod theme so here it says to do the following hugo new site name of site dash f y ml make sure you have latest version of hugo greater than 0.83 so as we have already seen we already have 0.97 installed on the computer and after we have installed after we have created a new site we can go to step 3. so choose either methods that you would like to do it could either be method one method two or method three so either methods will work so i'd say the simplest way is to just git clone it so let's do that go to terminal so let me see where i am at okay so i'm currently in the downloads folder inside the hugo folder here so what i would do now is i'll copy this or i just click here to copy go to terminal and then just copy paste hit on enter and then we have the themes folder okay and see now we want to use hugo to create a new site so why don't i minimize this a bit make it bigger here close this okay so what i'll do let me increase the size of the fonts here in the terminal bigger okay all right so there's a lot of information here because the folder name is quite long okay so i want to type in hugo or if you're using the hugo binary file you could do dot hugo okay or you could use hugo if it is installed in your computer okay so for those of you who don't have hugo installed and you want to use the binary you could go with dot slash hugo but make sure that the binary file is in your current working directory okay otherwise it won't work okay so from this point forward i'm going to assume that you already have hugo installed on your local computer and that you're just going to use hugo like that with no dot slash in front okay for simplicity all right so let's create the new site hugo right here new site and then let's give it a name perhaps you want to call it w3 or even you know ww let me expand this a bit and then dash f and then yammo yml enter all right and it works now and so it mentions that you need to do a few more steps you need to download the theme which we had already done so choose a theme from gohugo okay because we have already done step one in that we have selected paper mod theme you can add some contents to it and then look at the server okay so we have already downloaded theme let's have a look at the list files here so our themes is in here and we have created a new site here so let's move the themes to the www folder mv themes wwe look again now you see that the themes folder is gone let's go inside the www directory and themes is here let's go into the themes paper mod let's go into paper mod all right so all of the theme files are in there okay so we are in the working directory of the hugo website that we're going to create so before proceeding further let's launch a demo or a preview of the website so you want to type in hugo server dash d dash d is for displaying contents that are in draft mode so if you don't have any contents in draft mode you could just say hugo server and it will work but for those of you who have articles or blogs that are in draft mode it will also be displayed okay so we're gonna type in hugo server dash d enter and now the file is accessible for your view at this particular local host address so let's copy that and go here go to localhost with a port number of 1313. okay so there's no content so you don't see anything here so why don't we do this i have already created some contents and i have already modified the config.yml so we're going to copy paste some of the contents that i have already done so let's go to sandbox and then i already have a www folder in sandbox and so why don't we do this we're going to take a look at the yaml file that was just created and the yaml file that i have customized let's open up the atom which is a text editor or ide you could also use your favorite ide like visual studio code okay so this is the one that i have created and let's see and this is the yamo oh it has the same name that's why let me close this first okay so let me show you the contents okay it's the same folder sorry right here let me close that so let's have a look at the config.yaml file that was created just a few moments ago so you could see that there's barely only three lines of code here and the yaml file that i have is here and the one that i have was actually copy pasted from here let me show you so here in the installation wiki page it provides you an example set of code that you could just copy for your own site okay you could copy all of that here and you could either go here to the top right hand corner and click on copy and then paste the contents into the config.yml and you could also copy some example content which is in markdown language copy it and you want to put it into your content folder here let's see archetypes post md in the archetypes post.md let's have a look at the contents of that post.md so this is like a template for all of the posts the header to use i'll provide you all of the contents of this example site so that you could just use what i have already modified and then you could replace it with your own content which will be a lot quicker for you to get started so this is the config.yaml file that i have already customized which was customized from the one on the wiki page and i did a little extra customization as well which might be useful to you so what you could do here is simply replace all of my names with your own name and here replace my name here with your name replace the description about this website to be about you your name here and then make this content specific to you okay so here i say that i create educational content on data science so you could replace this with what you do and some of the keywords to use i use keywords like blog portfolio data science and you could replace this with other keywords of your choice author here is my name and you could replace it with your name so the default theme here is set to auto and you could change it to dark or light depending on your own preference here we let it be set as default for all of the other parameters like showing the breadcrumb showing the reading time etc so i'll leave that as the default and here we have the text to be my name and then we have the image which is the logo i'll show you this in just a moment so why don't we do that so what i'll do here is i'll just essentially just change the working directory to the one that i have already created and i'll provide you all of the files in a github repo and i provide you that link in the video description okay so let's head over back here let me cancel this demo website and i'll go to my own customized version of the portfolio website so where i am i right now pwd i'll go out i'll go out i think it's in documents sandbox and in the www folder and here let's have a look at the contents if it is my content here yes it is okay so let's type in hugo server dash d and let's go to the localhost again okay so this is the customized version of my portfolio website which you could easily customize okay let me show you side by side here i'll put the code to the right so title this is the website of right so if you want to change your name here i saved it to your name let's see what happens here with it updates it might be in the description of the website let me unchange it oh it's right here so the contents that you'll see here will go here but the one on top here might be the one that goes to the meta description that goes to the search engine so here you could replace this with your own name your name right if your name is john doe then you can say john doe right and it automatically updates to john doe okay so i'll leave it back to my name right if i change contents here it updates automatically and notice that i've used the markdown syntax for making the text bold and notice that i have my portfolio image here and it is in the folder images slash dp dot png so you could replace this with your own portfolio image and notice here that the image title will be data professor so if we hover it all right and so notice here that the buttons that are displayed are blog and projects which is right here the buttons that were showing i could add an s here and save it and this is updated to blogs all right so notice that this is for the profile mode and this is for the home info mode so i just pasted the same content just in case i wanted to change it to the home info mode but currently i'm in the profile mode and scroll down here you'll notice some of the social icons are used here so the first one is the youtube social icon and i put here name colon space youtube and you could put in the url of your youtube and then here we have name medium and then you could and you could put in the url of your medium page same thing for twitter and then full link to your twitter account linkedin full link to your linkedin full link to your linkedin account github and then the link to the github account buy me a coffee and then link to the buy me a coffee page here you could also put in your google analytics code your bing or your yandex code here i just leave it at default i'll leave it at default here menu okay what links do you want to show at the top here so here we have about blog and projects so the weight here will show the ordering of the items on the menu so if you want to show your blog to be the first one then you want to make the weight to be one which will be the first position and let's say that you want to have your projects come in next and then you want to have about to come in third then it becomes like that and then you want to save it and then the ordering will change now you have about at the far right blog and projects will be the first two and you could add additional ones if you like as well like this let's see what do we want to add we have blogs okay let me add s here box let's see what do i want to add how about illustrations i've drawn some illustrations or infographics let's say info graphics and then the name would be info graphics u and then the url could be info graphics and then the weight would be the fourth one or how about we have about to be the fourth one right there you go and so we have blog projects infographics let's make it a capital i there you go so we have blogs projects infographics and let's head over to the folder here so remember that we have the blogs so in the content folder we'll need to have this as blogs with the s and here we have about which corresponds to this folder and let's see projects corresponds to this folder infographics we don't already have a folder so i'll create a folder called infographics and then i'll need to populate the contents in here later on so so let's have a look at about so you have index.md so when you click on the about link here you go to the index.md if you go if you click on the blog link here you go here to a summary page of the blog contents if you click on infographics then i'll have to create a index.md here and if you click on projects here you go to this folder so it will be a summary of projects one two three so why don't i copy the contents of about into the infographics and i'll modify this content let me do it now so that you can see so this was about so i'll just delete the contents here i also create and drawn info graphics and illustrations to summarize the key concepts in data science machine learning and bioinformatics i'll call this infographics and here will be the info graphics i'll leave everything else as default and as i mentioned if you don't want to show it you could have draft to be true like that but here we're just going to leave it as false so whenever i update the contents here i'll see the new content reflected here so i have already saved it and if i click on infographics then i go to this page okay and then i'll later on populate it with the respective infographic images let's click on about let's have a look at the contents there so let me show you the contents of about which is here right so all of them are written in markdown language so you could also paste in emojis you can make text bold and you could add links to it like this so i added all of the social links and all of the researcher links related to my previous career as a professor in bioinformatics click on projects and it will be a summary of the contents in here let me show you it will be here projects one two three so it will show you the preview of projects one two three and notice that the title is here title and the author will be the author which is myself and then the estimated reading time which is based on the amount of contents in here so let's click on one of the projects and essentially the table of content would just be an abstract because we didn't really have any other contents provided here so what if we give it a structure you'll notice that it has this structure if you have one hash symbol it'll be a h1 heading so let me add another h1 heading here let's say full text article save it and this should be reflected reload it okay it's a different article probing the origins so let's see this one right here right so we have here full text article we add another heading if you click here table contents we have abstract and the full text article okay so that might be helpful so that you can just click here and you go to the full text article okay so why don't i do that i'll copy this i'll save it here close it go to project two i'll do the same put it here save it to project 3 paste the heading save it and let's go back let's go back and let's see tours reproducible yeah we have it we have the full text article here and if we click here it'll go to the link of the article so yeah so we've written this review article in 2020. let's close it oh okay i might just close the website let's go back again okay all right so what else should we cover how about here the logo so all of the images that you see here the logo image and the profile image is actually in the static folder here so covers would be for your articles so the cover image for your blog or your projects and if you do have a cover image let me show you first you go to contents you go to blog and in this article what is bioinformatics the cover is here image it will be the relative path to the image in the covers folder which was in here static covers and what is bioinformatics.jpg which is here okay so let me show you blog what is bioinformatics so this is the cover image okay and the out description will be what is bioinformatics and here we have a lot of headings that are provided which was copied from the blog post that i published on medium and if you click on table of contents you're going to see the table of contents shown here okay let's head over back and now let's cover about the logo image is in static and it's in the images folder here we have two files dp.png is the image of here coding.png is the image shown here so i've actually modified this a bit from the one that i've downloaded i think i got it from flatikons.com so i'll post you the link to that in the video description and so let me show you first flat icon.com and then you could search for let's see was it coding yeah you could find yeah i think it's this one yeah i'll see the link to this in the video description as well so it's free for personal and commercial purpose okay so you could you know find other icons that resonates with you and then you could use it on your portfolio website okay and it's specified in your yaml file so what else should we cover i think that's all so this is the basics for how you could create your portfolio website so now you know already where to put your images which is in static images folder and you know where to create your content go to the content folder and then populate the folders here with your contents which is in markdown so this is the content for about this is the contents for each of the blog posts that i have so let me show you again so these headers will be used by hugo framework to put in the title of the page the slug which will be the link to the web page of this article and whether to show the table of contents so we leave it at default and then the rest you could just copy from your github readme.md if you already have one and so all of the contents here will be in markdown which is really convenient to update and write and upon updating it and saving it you'll see the changes reflected in the preview of your websites okay so now that we have already seen how we can create our own and also customize our own portfolio website now let's have a look at how we could deploy it to the web or the internet we're on the cloud so first thing is i'll want to exit this server mode we'll start fresh clear let's look at the contents and we have the public folder which i'll remove right now because we're going to render it again and it will generate the public folder let me have a look so there is no public folder so the fun part comes here you want to render your website you could just type in hugo dash d and as mentioned already dash d is for also deploying your draft versions so if you don't have draft versions you could just type in hugo okay or if you have draft version and you want it to be rendered as well you want to add dash d okay so let's go ahead with just using dash d here hugo dash d hit on enter and then you'll notice a summary table showing all of the rendered websites in hugo so we have here 22 pages five static files three aliases one site map let's have a look and you'll notice that you have the public folder here let's have a look inside the public folder and we have all of the files that we need to upload to our remote website server or our remote web host server so i'll show you that in just a moment all right so let's have a look in the typical view of our folder here so notice that we have already created the public which is the version of the rendered websites and so all of the images goes here all of the cover images goes here the contents blog goes here the about page goes here infographics here projects will go here and each project will have its own name and remember these are the slug slug which will be the respective link like for example you have about okay so i already closed the preview and then you have like about and then you have or how about projects and then you have here slash er pred like that erpred so it will be the relative path to your blog files here okay so in the next segment of the tutorial i'll show you how you could deploy all of these rendered website from hugo onto the web server or the web host and now that we have already rendered the hugo website files let's now proceed to uploading it to the web host so let's have our folder ready it's in the public folder so essentially we're going to copy all of here into the web host server let's now head over to the web host server website and so we're going to host our website on the hostinger web hosting service so let me login and i'll use my google account to log in so we're going to host it on the domain shannon.tech and i'll head over to the hosting panel here click on it i'll now click on the manage part under the domain shannon.tech click on manage scroll down and then you'll see the files heading here so apparently there's two versions the normal version called file manager and the newer version which has beta in parenthesis so let's go ahead and try it out using the typical file manager version and you're going to see several folders here and the folder that we need to focus on is the public underscore html and so let's first go to the web domain sending.tech and you're going to see that it currently has the default.php file here in the public html folder and it's recommending that we should delete the file here and then we can replace it with our website files so let's go ahead and do that let's delete this file and then replace it with the hugo rendered files click into the public html double click on it or you could also click it on the side panel here as well right here and now we have default.php so instead of deleting it i'm going to rename it just in case just in case we have it so i'll rename it and add the dot bak at the end click on rename let's have a look at the website again okay now you're not going to see the website that is rendered normally because we have already renamed the extension from php to become.bak so it's not recognizing it so now i'm going to copy paste or actually i'm going to upload the contents of the hugo rendered files in here let's see can i drag and drop it here let's see if we could do that okay i could drag and drop it can i drag and drop the entire folder i think i can okay so i just dragged and dropped and it's allowing me to review the files that is going to be uploaded and you're gonna see here that there are several folders indicated by the purple color folder icon and then there's the individual files for html xml and txt so i'll go ahead and click on upload and you're going to see that it's uploading one by one so give it some time so grab a cup of coffee or tea while waiting and after you come back it's probably going to be uploaded one file failed to upload that configuration okay index.xml let's see where is that oh probably this one okay so i have to let me try to refresh this click on the side panel okay and so now let's head over back to the hostinger file manager and then upload our file so i'll minimize this a bit and then we're going to upload the files in here so let's start with the files outside let's try dragging it and dropping it and then it allows you to review the file that you want to upload so we're uploading 404.html click on upload okay so let's see index.html so the first few files just want to try out uploading it to make sure that it works normally index.xml okay so i'm uploading the files outside the folder okay so all files outside the folder are uploaded let's click on the kind column here and then it resorts everything by the file type and folder type let's go ahead and upload all of the folders drag and drop click on upload so give it some time okay so it finished quite quickly and all of the files are in here let's click back to the website refresh it okay so the logo is not appearing let's have a look it should be in the images folder double click on it it's actually in here oh okay i think i know why i'll have to modify some file here one moment so let me let me delete everything except for the default.psp i'll click on delete delete and so a point notice that we need to modify one parameter and it's actually quite simple and i have overlooked that so let's do it now let's go up the folder outside the public folder so we want to delete the public folder here and then you want to open up the config.yml file right here yourdomain.com so you want to replace this with the specific domain name of your website where it's going to be located or hosted so because i already have the domain name to be channeling.tech so i'll have to specify that here it's going to be chenin dot tech save it and then we'll have to render it again so i'll fire up the terminal and i'll render it again dash d enter and it's finished exit it go back to the hostinger double click on public let's see the panel here let's try clicking on upload files select files okay we select okay we here if we do it like this we will have to select one by one so let's do it like before let's categorize it by type and let's upload all of the individual files here first and now the folders click on upload so folders are indicated by the purple icon here and the issue before was that when we did not modify the domain parameter it's trying to find yourdomain.com slash the images so there's no such files in that particular domain therefore the solution is to correct that to become chenin.tech and after doing so it should be able to detect the image files hosted on chenin.tech web server which is on the hostinger web hosting services so all of the files are uploaded here and the images are already in here let's have a look to double check double click on it all right so coding.pngmdp.png is right here go back here and let's refresh it all right and now it loads properly so let's try out the light theme and dark theme mode all right it works perfectly let's click on the blog click on the first article let's try to click on the table of contents okay it works click on read blog and all right so the link works perfectly let's go back to the main page click on projects click on the first article click on table of contents click on full text article all right so it's working properly right click open link new tab okay article works perfectly click on infographics alright so as mentioned already i can populate this with the relevant infographic images click on about okay so all of the links inside the website works perfectly and the great thing i like about the paper mod theme is that it's very clean and it does not distract the viewer from any fancy flashing images and so the viewers could choose to read it in light mode or dark mode and there you go a portfolio website that has a minimal appeal to it and if you would like to create your own data science portfolio website just follow along and all of the links to the resources mentioned in this video along with the links to the hostinger web hosting services will be provided in the video description so feel free to drop your data science portfolio website url in the comments section and share your data science portfolio website that you have created thank you for watching until the end of the video if you reach this far please drop a balloon emoji so that i know that you're the real one and while you're at it please like and subscribe and also turn on notifications so that you'll be notified of the next video and as always the best way to learn data science is to do data science and please enjoy the journey\n"