How to Create a Simple Portfolio Website
If you're new to web development, building a portfolio website is a great way to touch all aspects of web development in a simple project. Even if you don't have a lot of projects yet, getting an online presence by securing a domain and hosting a your own website is the first step in establishing your presence as a developer. In this post, I'll walk you through the essential steps to get your personal portfolio site up and running.
Why Create a Portfolio Website?
Your portfolio website serves as a hub for all your work. As you build more projects, you can update your portfolio and showcase your skills to potential employers or clients. Plus, it gives you hands-on experience in web development, from coding to deploying a website.
Why Not Use a Website Builder?
A website builder is a great option for those who do not want to learn coding at all and do not care to progress in web development. If you need to add a lot of funcitonality fast and cost is not a factor then using a website builder can be beneficial but the cons for using a website builder for me as a full stack developer outweigh the pros.
In this blog post you will accomplish the following tasks.
Using Github Source Control
GitHub is a platform that helps you store and share code. You will need to create an account on GitHub if you do not have one. After creating an account or logging in to the site, create a new repository. This repository will hold the source code and be used to push to our website later.
Downloading and Using an IDE
To start coding your portfolio, you'll need a good Integrated Development Environment (IDE). IDEs make it easier to write, test, and debug your code. Here are a few great options to consider: Visual Studio Code (VS Code): A lightweight yet powerful editor with many extensions for web development. Sublime Text: A fast and easy-to-use editor for beginners. Once installed, create a new HTML file (e.g., index.html) and start writing simple HTML code to structure your website.
Visual Studio CodeSet Up Your Developer Workflow
A simple workflow makes development smoother. you must have the tools downloaded to be able to Here's what you need to do:
1. Create a Project Folder: This will house all your files (HTML, CSS, and images).
2. Live Server: Install the Live Server extension in VS Code, which will automatically reload your web page as you make changes.
3. Use Git for Version Control: Initialize a Git repository in your project folder and start tracking your changes.
This workflow ensures you can efficiently code, test, and manage your portfolio.
Add Your Code to a Private GitHub Repository
Once your portfolio site starts taking shape, it's time to back up your work. Here's how to add your project:
git remote add origin https://github.com/LatentFreedom/myportfoliosite.git git branch -M main git push -u origin main
Link your local folder to this repository using Git. You can do this by running commands like:
GitHubConnect Your GitHub Repository to Cloudflare Pages
Cloudflare Pages is a powerful way to deploy static sites from your GitHub repository. Here's how to set it up: Go to Cloudflare Pages and sign in. Select Create a project and connect your GitHub repository. Choose the branch where your code resides (likely main or master). Cloudflare will automatically deploy your website. This setup ensures that every time you push changes to GitHub, your website gets updated.
Cloudflare PagesPurchasing a Domain Name for the Website
Your portfolio will look much more professional with a custom domain name. Choose a domain provider (like Namecheap or Google Domains) and purchase a domain name that represents you (e.g., yourname.com).
Cloludflare RegistrarConnect Your Domain Name to the Website
Once you've purchased the domain name, you need to point it to your Cloudflare Pages deployment. Here's how: Go to your domain registrar's DNS settings. Add a CNAME record pointing to your Cloudflare Pages site. Wait for the DNS settings to propagate, and your website will be live on your new domain!
Cloudflare Pages Custom Domains DocFinal Thoughts
By following these steps, you'll have your very own portfolio website live on the web. This is a foundational project that gives you experience in web development, version control, and deployment. As you grow, you can continue to improve and showcase your skills through your portfolio.