{"id":184,"date":"2025-06-04T18:42:49","date_gmt":"2025-06-04T18:42:49","guid":{"rendered":"https:\/\/kingstatue.com\/?p=184"},"modified":"2025-06-04T18:42:49","modified_gmt":"2025-06-04T18:42:49","slug":"how-to-create-host-a-portfolio-website-on-github-pages-for-freshers","status":"publish","type":"post","link":"https:\/\/www.kingstatue.com\/?p=184","title":{"rendered":"How to Create &amp; Host a Portfolio Website on GitHub Pages (For Freshers)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Creating your <strong>personal portfolio website<\/strong> is one of the best ways to showcase your skills and projects as a fresher. In this guide, you&#8217;ll learn how to:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2705 Generate a 3-page Bootstrap 5 static website<br>\u2705 Add personal content, projects, and skills<br>\u2705 Upload it to <strong>GitHub<\/strong><br>\u2705 Host it for free using <strong>GitHub Pages<\/strong><br>\u2705 Customize it with <strong>colors, fonts, and social media links<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Generate Your Website Code (Using ChatGPT)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Go to <a class=\"\" href=\"https:\/\/chat.openai.com\/\">ChatGPT<\/a> and use the following prompt to generate your portfolio:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Use This Prompt:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>You are a web developer assistant. Generate a 3-page Bootstrap 5-based static portfolio website for a fresher using only HTML (no server code or advanced JS).  \n\nGenerate the following pages:\n1. index.html \u2013 Homepage with a brief intro, Personal background and skills.\n2. about.html \u2013 Personal background and skills.\n3. projects.html \u2013 List of academic or mini-projects.\n\nUse the following data to personalize the pages:\n\n&#91;Name]: John Doe  \n&#91;Education]: BCA  \n&#91;University]: XYZ University  \n&#91;Languages]: Python, JavaScript, C  \n&#91;Web]: HTML, CSS, Bootstrap  \n&#91;Database]: MySQL  \n&#91;Tools]: Git, GitHub, VS Code  \n&#91;Projects]:\n- Student Management System: A PHP-based CRUD app for managing student data.\n- To-Do List App: JavaScript project to track daily tasks.\n- Portfolio Website: This site itself, built using Bootstrap and GitHub Pages.\n\nRequirements:\n- Use Bootstrap 5 CDN.\n- Include responsive navigation with links to Home, About, and Projects.\n- Show basic profile intro on the homepage, summary, education, and skill list and link to projects.html , link to download resume.pdf file\n- About page should include a summary, education, and skill list.\n- Projects page should show cards for each project listed above.\n- Add a footer with \u00a9 &#91;Current Year] &#91;Name].\n\nCustomize colors and fonts using Bootstrap utility classes.  \n\ud83d\udd17 Add LinkedIn\/GitHub links in the navbar or footer.\n\nDo not use any external JS libraries beyond Bootstrap.  \nOutput clean HTML for each page: index.html, about.html, and projects.html.<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Copy and paste the code ChatGPT gives you into three files:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>index.html<\/code><\/li>\n\n\n\n<li><code>about.html<\/code><\/li>\n\n\n\n<li><code>projects.html<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Also, include your <code>resume.pdf<\/code> (your actual resume) in the same folder.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Create a GitHub Repository<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to <a class=\"\" href=\"https:\/\/github.com\">GitHub.com<\/a> and log in.<\/li>\n\n\n\n<li>Click <strong>&#8220;New repository&#8221;<\/strong>.<\/li>\n\n\n\n<li>Name the repo something like <code>my-portfolio<\/code>.<\/li>\n\n\n\n<li>Keep it <strong>public<\/strong> and <strong>do NOT initialize with a README<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Create repository<\/strong>.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Upload Your Website Files<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You should now have 4 files:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>index.html<\/code><\/li>\n\n\n\n<li><code>about.html<\/code><\/li>\n\n\n\n<li><code>projects.html<\/code><\/li>\n\n\n\n<li><code>resume.pdf<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Now:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click <strong>&#8220;Upload files&#8221;<\/strong> on GitHub.<\/li>\n\n\n\n<li>Drag and drop all four files.<\/li>\n\n\n\n<li>Commit the changes with a message like &#8220;Initial portfolio upload&#8221;.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4: Set Up GitHub Pages<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To publish your site live on the internet:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to your repo\u2019s <strong>Settings<\/strong>.<\/li>\n\n\n\n<li>Scroll to the <strong>Pages<\/strong> section (left sidebar).<\/li>\n\n\n\n<li>Under <strong>&#8220;Source&#8221;<\/strong>, choose <code>Deploy from a branch<\/code>.<\/li>\n\n\n\n<li>Then select the <code>main<\/code> branch and click <strong>Save<\/strong>.<\/li>\n\n\n\n<li>After a few seconds, you\u2019ll see a link like:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;your-username.github.io\/portfolio-site\/<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s your <strong>live portfolio website<\/strong>!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 5: Customize Your Website<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here are two easy customizations you should make:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Customize Colors and Fonts with Bootstrap Classes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Bootstrap offers many utility classes like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Text colors: <code>text-primary<\/code>, <code>text-success<\/code>, <code>text-danger<\/code><\/li>\n\n\n\n<li>Background colors: <code>bg-light<\/code>, <code>bg-dark<\/code>, <code>bg-primary<\/code><\/li>\n\n\n\n<li>Font styles: <code>fw-bold<\/code>, <code>fst-italic<\/code>, <code>text-uppercase<\/code><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1 class=\"text-primary fw-bold\">Hi, I'm John Doe&lt;\/h1>\n&lt;p class=\"text-muted fst-italic\">BCA Graduate from XYZ University&lt;\/p><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><em>Use them in headings, footers, and navbars to reflect your personal style.<\/em><\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Add LinkedIn\/GitHub Links in Navbar or Footer<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">In the Navbar:<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;li class=\"nav-item\">\n  &lt;a class=\"nav-link\" href=\"https:\/\/www.linkedin.com\/in\/johndoe\" target=\"_blank\">LinkedIn&lt;\/a>\n&lt;\/li>\n&lt;li class=\"nav-item\">\n  &lt;a class=\"nav-link\" href=\"https:\/\/github.com\/johndoe\" target=\"_blank\">GitHub&lt;\/a>\n&lt;\/li><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>In the Footer:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;footer class=\"bg-dark text-white text-center py-3\">\n  &lt;p>\u00a9 2025 John Doe&lt;\/p>\n  &lt;p>\n    &lt;a href=\"https:\/\/www.linkedin.com\/in\/johndoe\" target=\"_blank\" class=\"text-white me-3\">LinkedIn&lt;\/a>\n    &lt;a href=\"https:\/\/github.com\/johndoe\" target=\"_blank\" class=\"text-white\">GitHub&lt;\/a>\n  &lt;\/p>\n&lt;\/footer><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">You\u2019re Done!<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You&#8217;ve now:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Generated a modern 3-page portfolio<\/li>\n\n\n\n<li>Customized it with Bootstrap styles<\/li>\n\n\n\n<li>Added your GitHub &amp; LinkedIn links<\/li>\n\n\n\n<li>Hosted it for free on GitHub Pages<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udccc <strong>Bookmark<\/strong> your portfolio URL and use it in job applications, resumes, or LinkedIn profiles.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating your personal portfolio website is one of the best ways to showcase your skills and projects as a fresher. In this guide, you&#8217;ll learn how to: \u2705 Generate a&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[50,51,52,66,77],"class_list":["post-184","post","type-post","status-publish","format-standard","hentry","category-git-github","tag-fresher","tag-git","tag-github","tag-portfolio","tag-static-website"],"_links":{"self":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/posts\/184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=184"}],"version-history":[{"count":0,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/posts\/184\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}