How to Build a Data Science Portfolio Website with Hugo & Github Pages [feat. Data Professor]
HTML-код
- Опубликовано: 28 май 2020
- In this video, I collaborate with the Data Professor to show you how to build a Portfolio Website using Hugo & Github Pages. This is a more advanced version of the portfolio that I build in a previous video: • How to Make A Data Sci...
Hugo Source Code: github.com/dataprofessor/Ken_...
Compiled version: github.com/dataprofessor/Ken_...
Website: dataprofessor.github.io/Ken_P...
I also recommend checking out the Data Professor's RUclips Channel. He has great tutorials and an awesome virtual internship series: / @dataprofessor
A data science portfolio website can greatly help your career opportunities. It is a clean way to showcase your data science projects, and it also shows that you can clearly communicate your work and findings.
GitHub Pages allows you to host this through their website, while Hugo allows you to create an awesome web framework using only markdown language.
#DataScience #KenJee
⭕ Subscribe: ruclips.net/user/kenjee1?sub...
🎙 Listen to My Podcast: / kensnearestneighborspo...
🕸 Check out My Website - kennethjee.com/
✍️Sign up for My Newsletter - www.kennethjee.com/newsletter
📚 Books and Products I use - www.amazon.com/shop/kenjee (affiliate link)
Partners & Affiliates
🌟 365 Data Science - Courses ( 57% Annual Discount): 365datascience.pxf.io/P0jbBY
🌟 Interview Query - www.interviewquery.com/?ref=k...
MORE DATA SCIENCE CONTENT HERE:
🐤My Twitter - / kenjee_ds
👔 LinkedIn - / kenjee
📈 Kaggle - www.kaggle.com/kenjee
📑 Medium Articles - / kenneth.b.jee
💻 Github - github.com/PlayingNumbers
🏀 My Sports Blog -www.playingnumbers.com
Check These Videos Out Next!
My Leaderboard Project: • I Built the FIRST EVER...
66 Days of Data: • What is the #66DaysOfD...
How I Would Learn Data Science in 2021: • How I Would Learn Data...
My Playlists
Data Science Beginners: • Data Science Beginners
Project From Scratch: • Data Science Project f...
Kaggle Projects: • Kaggle Projects
Again, special thank you to the Data Professor for working with me to produce this video: ruclips.net/channel/UCV8e2g4IWQqK71bbzGDEI4Q.
For the more basic website version, check out this video: ruclips.net/video/1aXk2RViq3c/видео.html
Thanks Ken! It is certainly a great pleasure collaborating with you on this video 😃
sir please do make another video for adding projects and maintaining the site...😍😍
@@DataProfessor sir please do another video about adding more projects and editing the website...
@@ajmalbinnizam Thanks for the suggestion, will definitely discuss this with Ken.
@@DataProfessor thank you for your reply sir.... it willl be helpful, but i already figured it out👍🙂
Awesome Collab. Thanks both. This is much better than the previous tutorial.
Note to self: come back here after I build some projects.
Thanks KenJee!
😀
2 years on and this video is still helping careers. Thank you Ken and Data Professor for the amazing work. 🙌
This was exactly what I was looking for and 32k subs so happy for you, you deserve it man! Keep it up!
Glad to hear! Thanks for the kind words!
The amount of help you are providing is immense! Please keep uploading these type of videos specially. Thank you so much.
Will do my best!
Bro this is awesome! This is the type of content I've been trying to find. Your channel is so informational and practical please keep uploading!
Thanks for the kind words! I will definitely keep uploading every Monday and Friday!
By far the best straight-forward, no nonsense, instructions for getting Pages up and running with Hugo. Thank you!
Excellent! Thank you for watching!!
Congratulations for this partnership, you both are creating awesome content and helping a lot of people
Thank you! We had a great time making the video!
I have no words to thank you guys for this amazing tutorial. Thank you so much!
Happy to help!
Thank you so much Ken Jee and Data professor. Because of this valuable content I was able to create my portfolio website
Not even two minutes in and I already hit the like button. Found my extra project for the weekend!! Thank you both!
Also, like Ken said The Data Professor has awesome videos on virtual internship opportunities that are FREE! Great opportunity especially for college students :)
Great stuff! Thanks for watching Mario! Would love your thoughts after you have finished the project.
Thanks Mario for the kind words and shoutout 😃
Finally a collab between Ken and Data Professor! Great to see the two DS heroes working together to help this community!! Definitely following this tutorial.
Hope you will be collaborating soon as well!
Thanks for the kind words! Yes, agreed with Ken, looking forward to collab with the Import Data 😃
@@KenJee_ds will be happy to!!
@wise guy Thanks for the kind words and for the suggestion. Will definitely explore further areas of collaboration.
Man, that was just amazing! Actually, the web site portfolio was killing some sleep nights and I had no clue on how to do it. Than, I landed on the first video, and now here. Really thanks for that! It was very well explained and hands-on walkthrough. Explendid job! Just subscribed and I'll be sure be following you! Thank you once again! Successs!
Glad to hear the video was helpful Rodrigo! Thanks for watching!
I don't waste my 40 minutes here doing all along what DP's doing. Thanks KenJ and Data Professor.
Glad to hear it wasn't wasted!
Thank you Ken and Data Professor. This tutorial was very helpful.
Thanks for watching!
Thanks for this awesome tutorial ! Just built my own portfolio website following the provided steps.
Awesome!
This was really a great tutorial! Thank you to both of you.
Thanks for watching!
Always with a great content, Thanks man
Thanks for watching!
This Video right here has been a game-changer for me
Really glad to hear this!
Super like :) These demos are so useful and pragmatic.
Thanks! Glad it was useful!
This is what I was looking for to create a portfolio .
Thank you so much would love if you can make another video on portfolio 💯💯
Yesss! Thanks for watching Shruti!
Amazing tutorial!
Thank you very much!!
Glad it helped!
Amazing job! I built my portfolio in just one day, chapeau bas guys.
Awesome!
Thank you so much, this is some amazing and really informative content that will surely help many :)
Happy we could help SHannon!
An amazing tutorial !
Big Thanks :)
Thanks for following along Mohamed!
Fantastic work !!!
Really amazing content 😊
Thanks for watching!
This is awesome! Thank you.
Glad you liked it!
Absolutely amazing! Thank you so much for this. I was easily able to replicate the steps.
Glad you found it helpful! Thanks for watching!
Thank you so much. It worked! :)
Awesome!!
Amazing content!! Thank you very much.
Thanks for watching!
Thankyou so much for this !!!!!
Wow , great work guys.
Thanks for watching Piyush!
Thank you for this.. This is very helpful :)
Glad it was helpful! Thank you for watching!
Ken Jee posts a video on youtube
step1 : Like the video
step2: watch the video
Awesome stuff as always man!
haha, thank you!
wooow, that's gonna be useful, thanks!
Thanks for watching!
words can describe . thanks ken
Glad it was helpful Ravi!
Hello Ken Jee, thank you for your effort to teach people in the data science journey.
I personally give my appreciation to you, because your video is really helpful. Most RUclipsrs make me confused, but your video is very neatly arranged. I think we have the same persona, you are a people that always do everything in a structure and very careful. Therefore, it is comfortable with your video.
If there is any chance, I really want to be your apprentice in the data science journey.
Hi Ari - thank you for the kind words and for watching my video! Unfortunately, between my full time job and making my videos, I don't have time to take on individual apprentices. Still, I am happy to review your projects for my review series, and answer individual questions in the comments section if I can. I hope this will help you on your journey!
LITERALLY what I'm doing, and what I require!!
Really glad to hear! I hope the video was helpful!
Thanks a Lot for this tutorial.
Thanks for watching Rehan!
Ken and Data Professor, thank you very much for this great tutorial! It is really useful for those who make their furst steps in creating portfolio. Just one question, is it possible to add a collapsible section in markdown for a large piece of text? Thank you!
So on 31st May I searched youtube for "Data science portfolio website" and found this awesome video posted just 2 days before! I have made my first portfolio website thanks to you guys!! Thank you!!
One heads up for anyone making their own site in this way:
After uploading files some of the images might not load on the page (when run using Github pages)
This happens because some images that were uploaded have the src = "/images/.."
To get the photos simply edit the index.html file for the pages where the images are missing.
Change the "/images/.." to "dataprofessor.github.io/Ken_Portfolio/images/.." and the images will show
This was something I faced and that's how I fixed it. Hope this helps and hope you all make the website you want!
Thank you for the heads up!
what if my whole css is not rendering in the github pages...Only the html part is getting rendered...
Thankyou so much Sir !!!!
Happy we could help!
This is so cool, thanks for that. One question though, once published if later I add a new project then do I need to generate all the files again and re-upload the whole content of the public folder, or is there a shortcut ?
Awesome vid!
Thanks Jay!
You Saved myife Thank Youuu Sir
Happy we could help!
This was such a brilliant walkthrough. I thought the basic github pages video before was good enough, but this produces quite a professionally finished product, in 45mins and FREE! So happy that you made this.
1 question: once you’ve done an initial commit and the website is up, how do you then do a small update? Do you edit it locally again and upload the whole “public” folder again to the GitHub repo? Or is there some more efficient way?
Data prof may be better for answering this question, but I think you should be able to make changes and push it
@@KenJee_ds Thanks for the reply Ken. You are correct with the push method. alternatively, you can do it manually like Data prof does it in the video (dragging and dropping on GitHub page). It will then just upload the updated files (i.e. a quick incremental upload).
Thank you for the clarity of the tutorial. it is fantastic. I have a question: where can one change the format of the text, for instance, justified, aligned to the right, position of the title over the photo, etc etc...isn´t it a .css file to do that? Thank you very much
When I create a local server with Hugo, I expected it to be running at localhost:1313/ but then it's created at localhost:1313/Portfolio instead. Does anyone know how to prevent it?
Hi Ken. I'm getting a 'binary with name "go" not found' problem. How do I resolve this
hello team, I've followed every step, redid the whole thing multiple times but the ananke theme doesn't seem to render. please help!
A bit confusing and not able to follow for me because my Hugo folder has the files in .html and not .md as in the video. When I manually them as .md, the page crashes. Any advice?
I'm trying to resize the images, for some reason height=" " works but I'm not able to change the width. Any idea why?
Finally, thank you so much @Ken Jee. I was waiting for this. I have been working on making a portfolio website. The skeleton is ready. However I have yet to host it on github. I also have yet to upload my data science projects to github. When I do in about a month or so, would it be okay if you took a look at it and gave suggestions on one of your Monday episodes?
I would love to!
@@KenJee_ds thank you so much. I will send you a follow up email when all of my stuff is ready. Thank you! Much appreciated!
after deployement just the text is coming up in the website, the 'ananke' style is not visible .. can anyone help please?
I know that this video is kinda old but I have a question about how to insert latex (or any math rendering library) into the hugo markdown part of the site. Thanks :)
Anyone had any issues doing this with mac ? I can't figure out if it's because it should be different command with the shell or not. I would appreciate any kind of help
How can we add images side by side in horizontal manner. More specifically I want two images in single in my project.
Hello Ken Jee
I had the same error as you with ./hugo server. To correct it, I did the same thing as you. But I keep getting the same error all the time. What to do?
Hello, i am trying this template but i don't have Recent project in my main page. Do you know why? Thank you very much for all this information
Does anyone know how to resize the images? Like in the about section, I cannot change the image size using style or width properties of the figure tag? Perhaps there is a default set which is overriding it. I looked in the .css files although could not find it.
same problem
sir, after saving my work at atom it does not update it on Hugo, what should I do now ??
Totally awesome! but a question though, to data professor, the pictures served in {{< figure src="/images/**" >}} are not showing up again after restarting the hugo server. Is there a fix anyone? It works the first time before you close the server.
The changes I make in Atom are not getting reflected back in localhost. Can anyone please help? Thank you 😊
Hi thanks very much for sharing the tutorial. For some reason the code for adding an image to a post is not working. My image is in static/images/CA, {{< figure src="/images/CA.png" >}}
Hi Ken Jee and Data Professor, thanks so much for this video. It's so helpful. I was able to add featured images to sections of my portfolio, but when I tried using {{< figure src="/images/resume.jpg" title=resume"" >}} to add pictures of certifications and my resume, the images are not showing up. They only worked initially when I was hosting locally, but now, it doesn't work both locally and after hosting on github. I am temporarily using dropbox links to show them, but I'd appreciate if you could give suggestions on how to make it work. Thank you again!
Hi Ken Jee, great video. I tried this recently, but I am running into a problem. When saving my config.toml file, the local host site is not reloading as it should as explained at 11:40. My guess is that it has to do with the .hugo_build.lock file, but I am not sure.
I was able to follow all the steps, however the Hugo theme didnt apply in my website. Can anyone here help me set up my website properly?
i got an error where module not found after ./hugo server help!!
Please guide how to remove the share button in the website. Like the twitter and facebook icon does not even open.
Hi, I have done all the steps but I only get the website hosted with HTML only, no css or js functionality and frontend. I see that this guide was for 2 years ago, I would appreciate if somebody would enlighten about new changes and how I can take what I have done here and make this website work.
Is it possible to add new things to the website after publishing?
Amazing! Just one thing I want to improve: how can I set the text align to the left instead of the center?
Hi did you work out to align text? Can't seem to get it working in .md files
Does this render Altair visualitions like fastai/fastpages? And what about Jupyter Notebook?
I don't think that this method does.
Error: Error building site: TOCSS: failed to transform "ananke/css/main.css" (text/css). Check your Hugo installation; you need the extended version to build SCSS/SASS.
Anyone faced this error???
Reply if you solved it somehow.
hey ken that was amazing and really helpful. can you please tell me how i can add a download resume option in my portfolio
Can you also give us a walk-through video on how to provide a multi-lingual mode to this Ananke github page, please? There is no solid instruction video on how to make a github page support multi-lingual mode!!
Hi Ken I need help here. When to choose a source, the master branche didn't appear on my choices, only the main appeared. And so my website's link gave 404 error. Is there anywhere I cld have mistaken when the process? I need help here
I used the main (root) and it worked. Took a few minutes after getting the link for the link to start working
Hi , i wanted to ask that when I am opening this website on my mobile phone the images are not showing.
What's the reason behind this.
Any suggestions would be helpful.
Not sure about this myself! If I find something, I will let you know!
I encounter the same problem, I am now running all the stuff again.
How to add/update new project
thank you for really helpful instructions.
though I meet 404 error after publishing it at github.
could there be somekind of policy change?
or I didn't follow instruction properly.
after changing source folder from root to docs, it starts to publish.. but showing unexpected result.
Thanks a lot, Ken!! I have a question for you. Could you please give me a tip on how I can add an HTML file in the post.md - working path and command example? Again, I always appreciate your help.
I may have to rely on the data professor for that one!
shift + right click for quick powershell in the directory :)
💯
please help me, whenever i host the website locally it works perfectly however when i put the files onto github pages its a broken mess. its like half my website and half the default ananke, its literally broken, i don’t know what to do, i don’t understand why all of this is so confusing im just trying to make a goddamn website
I’m having the same problem. Please help us!
Hi, I am trying to follow this tutorial, but now the settings in github no longer say "master branch". I only see the choices "main" and "None"...
The error message I'm getting is that "No /docs folder was found to build GitHub Pages. Check the source setting for this repository."
I keep getting this error after typing " hugo server":
Building sites … Built in 23 ms
Error: Error building site: "C:\Users\user\Desktop\OLD\MYPAGE\exampleSite\content\fr\contact.md:15:1": failed to extract shortcode: template for shortcode "form-contact" not found
I'm getting this too did you ever resolve it?
Is there any way I can show Kaggle on the main page near LinkedIn and RUclips channel. I tried pasting Kaggle URL but it is not showing on the website.
That is a good question, I will ask @dataprofessor some more details there
Great question Vijit! Currently, kaggle is not in the list of supported social media. I think we can hack the template to manually add the Kaggle icon. Let me come back to you with the answers on how to do that.
@@KenJee_ds Will look into this.
@vijit chekkala Okay, I've hacked the themes of ananke and now it supports Kaggle URL. To implement this you will need to replace the config.toml file and the entire "themes" (containing the ananke directory) directory with the ones inside the ZIP file here github.com/dataprofessor/Ken_Portfolio_src/blob/master/hack-themes-to-add-kaggle.zip
Now you can edit the line starting with kaggle = "www.kaggle.com/your-kaggle-username"
is Hugo compatible to display jupyter notebooks with ipywidgets? and dynamic plots like the ones created with bokeh and seaborn?
I'm not sure about that actually. Data professor is probably a better person to ask!
@@KenJee_ds i have asked him ...waiting for his reply
How to use different Hugo theme ?? Like academia etc. I don't want to use anake theme. Awesome content! Subscribed!
Hi Ken! Is it better to learn HTML, CSS and JavaScript to land a machine learning engineering job or is it a waste o time ?
Honestly, those skills would be helpful, but not necessary for the role. MLE's mostly will still be working with python.
Hi, congratulations for your channel! I have problems when I upload my public file in github, it generates the web but without the ananke structure, could you know why?. Thanks!
you have to change the baseURL in the config file
Hey, did you solve the issue? I am having the same problem
What did he do at 5:30? Is there a folder structure image that I can follow, because this guy is confusing
Thanks a lot you two for a great content
How can I put some code in the project writing? For example, in the project 1, what if I want to put some code to present a project as I walk people through it. Something like jupiter notebook or Rmarkdown
Cheers
Jupyter notebook markdown works! People often also take various code snippets and put them in a blog post!
Its showing error page not found
Hi Ken,
Would it be possible to embed a neural nets chatbot into Hugo?
Thanks
It should be, but I would probably check with @dataprofessor
Because this is a static site generator, if you want any dynamic functionality you're going to need to do some extra work.
For example, if you have a nn-based chatbot there may be some ways to deploy it 'locally' (running in the end user's browser as javascript).
More realistically, you'd need to set up a server with an API endpoint that can take input, run a model, yield output (and that in realtime) and then use javascript to dynamically load the response into the page. This should be easiest using AWS/Sagemaker. How you integrate this custom js with your static Hugo site is not too clear to me, but it shouldn't be too crazy.
Please guide me how to add a pdf file in the project please?
Hello, I am very new to Github, powershell, hugo tools.
I just tried following exactly as shown in the video, but at 10:28 in the video, i have edited the config.toml file, i did that using the notepad.
but after saving it and running the ./hugo server command, i am getting the following Error: Error building site: TOCSS:failed to transform "ananke/css/main.css"(text/css). Check your Hugo installations; you need the extended version to build SCSS/SASS
Please can you guide me on how to fix this?
Me too
Can any one help..
Getting an error when doing ./hugo server
failed to extract shortcode: template for shortcode "form-contact" not found
Any help would be appreciated Thanks.
I had the same problem, but solved it
Check you might have changed the folder named "gohugo-theme-ananke-master" into "ananke", but inside the folder "gohugo-theme-ananke-master", there is another "gohugo-theme-ananke-master" folder. Make sure your path is "\exampleSite\themes\ananke\", not like "\exampleSite\themes\ananke\gohugo-theme-ananke-master\"
Hope it will be helpful
@@hoeeeng You saved my life! I've been struggling with this. Thank you so much, I really appreciate it
The master branche of Github pages doesn't appear on sources. what have I done wrong?
same I have this issue too
My mac is not opening hugo.exe file because it says its from an unrecognised source. Can someone help me out here?
Hi Aditya, in the tutorial demonstration it was performed using a Windows OS. You will need to download the binary release for the Mac. Here is the direct link to the Mac version github.com/gohugoio/hugo/releases/download/v0.71.1/hugo_0.71.1_macOS-64bit.tar.gz
Yeah I did that and i followed all the procedures until i got stuck at checking my hugo version on terminal. Everytime i type ./hugo version a pop up shows up saying "hugo cannot be opened because the developer cannot be verified."
@@Aditya-rr6rx By default, Mac OS will prevent running apps that are not developed by Apple. So what you can do is click on "System Preferences" >> "Security & Privacy". In the "Allow apps downloaded from" you will see a message "Hugo" was blocked from opening because it is not from an identified developer." then click on the "Open Anyway" button.
Now go back and run ./hugo again
Did that work?