🚚Deployment Guide
Follow the steps listed on this page to deploy your version of DIY Portfolio.
Last updated
Follow the steps listed on this page to deploy your version of DIY Portfolio.
Last updated
Fork the DIY Portfolio Repository: Go to the GitHub page for the DIY Portfolio repository at https://github.com/ManishReddyN/diy-portfolio. Click the "Fork" button in the top right corner to create a fork of the repository under your GitHub account.
Create a Vercel Account: If you don't have a Vercel account, sign up for one at Vercel.
Connect Your GitHub Account to Vercel:
Log in to your Vercel account.
In the Vercel dashboard, click on the "Add New…" button to create a new project.
Choose "Import Git Repository" and select your forked version of DIY Portfolio repository from the list.
Connect your GitHub account to Vercel if prompted.
Configure Project Settings:
Vercel will automatically detect that your project is a Next.js application.
Configure the build settings if necessary. The default build command for Next.js is usually npm run build
, and the output directory is ./out
.
Setup Environment Variables:
Follow the steps in Creating env variables page and add 3 env variables with keys as NOTION_API_KEY, NOTION_DB_ID, NOTION_USER_ID. Replace the values with your values.
Deploy Your Project:
Click on the "Deploy" button to start the deployment process.
Vercel will build and deploy your DIY Portfolio application.
Access Your Deployed Site:
Once the deployment is complete, Vercel will provide you with a URL for your deployed site (e.g., https://diy-portfolio.vercel.app
).
Visit this URL in your web browser to see your live DIY Portfolio.
Optional: Configure Domain and Settings:
If you have a custom domain, you can configure it in the Vercel settings.
Explore Vercel settings for additional configuration options based on your project's requirements.
Clone your repository locally or go to your GitHub repository page to edit the data.json
file - follow steps in Configuring 'data.json' page to do the necessary changes to the file.
Test your changes locally by installing the requirements using nmp ci
command and then using npm run dev
command from the command line of your local repository folder. (Requires latest LTS version of Node.js to be installed locally)
Commit and push your changes to reflect in the GitHub repository. The changes will be picked up by Vercel and your site will be redeployed with your details.
Navigate to Your Forked Repository:
Go to your forked repository on GitHub (e.g., https://github.com/your-username/diy-portfolio).
Click on the "Sync Fork" Button:
On your repository page, look for the "Sync" or "Sync fork" button.
Click on this button to synchronize your fork with the latest changes from the original repository.
The "Sync" action combines the steps of fetching upstream changes and creating a pull request into a single button for convenience.
Review Changes:
GitHub will automatically fetch changes from the original repository and display them in the "Syncing" section.
Review the changes to ensure they are what you want to update in your fork.
Confirm Sync:
After reviewing the changes, confirm the synchronization or merging process.
Make the required changes according to changelog locally and push for a new deployment.