Standalone guide

How to Create a Personal Website without Coding

Learn how to create a personal website from scratch using GitHub Copilot, including setting up a repository, generating content, and deploying your site.

Personal WebsitePortfolioGitHub CopilotNo Code

1. Pre-requisites

2. Create a Repository

  • What is a Repository? - A Repository is a storage location for your website's files and code. It allows you to manage, update, and deploy your website efficiently. You can use platforms like GitHub, GitLab, or Bitbucket to create and host your site repository.
    • Steps to create a GitHub repository
    1. Go to your GitHub account and click on the New Repository button.
    2. Give your repository a name (e.g., personal-website) and an optional description.
    3. Choose the repository's visibility (public or private) and click on Create Repository.
    4. Once the repository is created, you can clone it to your local machine using Git or directly upload your website files through the GitHub web interface.

3. Generate Website Content with GitHub Copilot

  • GitHub Copilot is an AI-powered code completion tool that can help you generate code and content for your website. It can assist you in creating HTML, CSS, and JavaScript code to build your personal website without needing to write everything from scratch.
    • Steps to generate website content with GitHub Copilot
    1. Open Visual Studio Code and navigate to your GitHub repository.
    2. Type this prompt in Copilot Chat in plan mode: You are my senior frontend developer, UI/UX designer, and web architect. Help me build a complete modern static personal portfolio website using only: - HTML5 - CSS3 - JavaScript - Bootstrap 5 The website should be: - Professional - Minimal - Visually attractive - Fast-loading - Fully responsive - Beginner-friendly - Production-ready I want the website to include: 1. Sticky Responsive Navbar - Brand/logo - Smooth scrolling navigation - Mobile hamburger menu - Active section highlighting - Dark/light mode toggle 2. Hero Section - My profile image - My name and professional title - Short introduction/about - Download CV button - Contact Me button - Modern responsive layout - Attractive background and animations 3. About Me Section - Biography - Education - Career goals - Professional summary - Personal interests 4. Skills Section - Frontend skills - Backend skills - Database skills - Tools and technologies - Cloud/devops tools - Skill cards, progress bars, or badges - Hover effects and animations 5. Projects Section - Responsive project cards - Project image - Title - Description - Technologies used - GitHub repository link - Live demo link - Modern hover animations 6. Resume/CV Section - Downloadable CV button - Experience timeline - Education timeline 7. Contact Section - Email address - LinkedIn - GitHub - Twitter/X - Contact form UI - Social icons 8. Footer - Copyright text - Social media links - Back-to-top button Technical requirements: - Use Bootstrap 5 grid system and components - Use Bootstrap Icons or Font Awesome - Semantic HTML5 structure - Mobile-first responsive design - CSS variables for theme colors - Dark/light mode with localStorage support - Smooth scrolling and animations - Clean typography and spacing - SEO-friendly structure - Accessibility best practices - Optimized performance - Reusable CSS classes - Well-commented code Project structure must be: /portfolio-website index.html /css style.css /js script.js /images /resume Development instructions: 1. First plan the complete website architecture 2. Suggest modern color palettes and typography 3. Create the folder structure 4. Build one section at a time 5. Explain each step before generating code 6. Generate complete code for each section 7. Keep code modular and clean 8. Use professional UI/UX practices 9. Add comments to explain important code 10. After completing all sections, review and refactor the entire project Important: - Do NOT generate everything at once - Work section-by-section - Ensure responsiveness after each section - Keep the design modern like professional developer portfolio websites - Use realistic placeholder content where necessary - Make the website deployment-ready for GitHub Pages
    3. Iterate through the suggestions provided by GitHub Copilot, review the generated code, and make adjustments as needed to create a polished and professional personal website.

4. What's next?

  • After generating the content for your personal website, you can proceed to deploy it online. Refer to the guide on How to Host a Website for Free for detailed steps on deploying your site using Cloudflare Pages.
  • Once your website is live, you can share it with potential employers, clients, and your network to showcase your skills and projects.