This is a simple guide to building and hosting your portfolio website: we'll use a Template Wagon template, customize it with VS Code and deploy it on Vercel.
Prior programming knowledge is not required for applicants.
1. Environment Setup
Download VS Code, follow the installation instructions, and open the app after installation.
Download and install WinRAR or any zip extractor.
2. Download a Template
Visit Template Wagon by using this link https://themewagon.com/theme-tag/portfolio-template/.
Browse and find a free portfolio template you like.
Download the Template.
Click on the “Download” button for the template. It will save as a .zip file on your computer.
Unzip the Template and extract its content using WinRAR.
To do this, you have to:
- Locate the .zip file in your "Downloads" folder.
- Right-click on it and select “Extract Here” using WinRAR.
- This will create a folder with all the template files.
- Save it either in your documents or on your desktop.
3. Edit the Template in VS Code
Open the unzipped folder in VS Code. To do this:
- Open VS Code.
- Click on File > Open Folder, navigate to the unzipped template folder, and select it.
- Understand the Files
Most templates will have these key files:
index.html - (the main page of the website).
about.html - (other pages you must edit).
img/ - (contains images used on the website).
Edit the index.html file first.
Edit the Content
Open index.html in VS Code.
Look for sections like 'h1' for titles, 'p' for paragraphs, and 'img' for images.
Change the text, add your name, bio, and any details about you.
Edit Styles (Optional)
Open style.css if you want to tweak colors or fonts.
For example, to change the background color, look for something like background color and edit the value (e.g., background-color: #f5f5f5;).
Save Changes
Press Ctrl + S (Windows) or Cmd + S (Mac) to save your edits.
4. Set Up GitHub
Create a GitHub Account
Go to https://github.com and sign up for a free account.
Once logged in, click on the + in the top right and select “New Repository”.
Give your repository a name like “my-portfolio” and click Create Repository.
5.Push Your Code to GitHub
- Go to your GitHub repo and copy the HTTPS link of the repo.
- Navigate to the folder on your local machine where you want to store your code.
- Click on the file path, type 'cmd', and press Enter.
- In the Command Prompt Window, type git clone 'copied link' and press Enter.
- The repo would be stored in a folder in that location.
- Move your files into the folder.
- Create a branch to push your code to using the above image.
Stage your changes, type your commit message in the bar above the commit button, and click on Commit.
Click on 'Publish Branch.'
Merging With GitHub
- Open your GitHub repo and click on 'Compare and Pull Request'.
- Click on 'Create pull request' on the following page.
- Click on 'Merge Pull Request' on the next page.
5. Host Your Site on Vercel
Visit the Vercel website immediately and then sign up using your GitHub account.
Import Your Repository.
In Vercel, click “New Project”.
Choose your portfolio-site repository on GitHub
Building your site's online presence guarantees global accessibility.
Deploy Your Site
Follow all prompts. Then click Deploy.
Upon deployment, Vercel provides a live link to your portfolio (e.g., https://your-portfolio.vercel.app).
Thank you for reading! I hope you found this post helpful and inspiring. If you have any thoughts, questions, or personal experiences to share, I’d love to hear from you in the comments. Don't forget to subscribe for more updates and insights. Until next time, keep exploring and learning!
Top comments (0)