Build and Deploy a Modern Dev Portfolio in 10 mins

Nano Portfolio is a modern open-source portfolio template that is easy to use and customize, once config can automatically import your Github information. It is built with Vue, Nuxt, TypeScript, TailwindCSS and Github Octokit APIs.

There is the Github Repository and the Demo Website.

This tutorial will guide you through the process of building and deploying a modern portfolio using this open-source template.

Prerequisites

Clone the Template to Local

Firstly, you need to clone the template repository to your local machine. You can do this by running the following command in your terminal:

git clone https://github.com/gaomingzhao666/nano-portfolio.git
cd nano-portfolio

Secondly, install the dependencies that are required to run the project, by running one of the following commands depending on your package manager:

# if you are using pnpm as the package manager - recommend
pnpm install

# if you are using yarn as the package manager
yarn

# if you are using npm as the package manager - NodeJS default package manager
npm install

lastly, run the project locally by running the following command:

# pnpm - recommend
pnpm dev

# yarn
yarn run dev

# npm - node default package manager
npm run dev

Once the project is successfully running, you can open your browser and navigate to http://localhost:xxxx, the xxxx will be display automatically according to the port of the Vite version that project depends on.

And you will see the template looks like the screenshot below:

It means you have successfully cloned the template to your local machine and run it locally.

Customize the Template

Import Github Information

The template needs to work with your Github Personal Access Token to import your Github information. You can following the steps below to setting up your Token:

1. Generate a Fine-grained Personal Access Token by following the steps in Github Docs
2. Copy the token and paste it into the githubInfo.ts file in the /src/server/utils folder
3. Restart the project

If you have done the above steps correctly, you will see your repository information displayed on the home page, and your profile information displayed on the about page.

Customize the Contents

You can customize any static contents of this template by modifying the files in i18n/lang folder. The template supports the i18n (which means internationalization or localization) English, Japanese and Chinese by default. You can change any text in the files according to your needs.

Of course, you can also develop more functionalities or change anything you want by modifying the code in the project even if you just have basic knowledge about web development.

Block the Repositories You Don’t Want to Show

If you have some repositories that you don’t want to show on the home page, you can block them by adding the topics name to the getClearedRepo function in the info.get.ts file in the /server/api/repo folder, which means the repositories that have those topics you added will not be displayed on home page.

For example, if you want to block the repositories that have the config or backup topics, you can modify the function like this:

// repos that have config or backup topics will not be displayed
const getClearedRepo = (repoInfo: any) => {
  return repoInfo.data.filter(
    (data: any) =>
      !(data.topics.includes('config') || data.topics.includes('backup')),
  )
}

Deploy the Project

After you have done all of stuffs you needs, you can deploy the project to the cloud platform, which is the most popular solution especially for frontend developer. The major platform have Vercel, Netlify, Github Pages etc.

The nano-portfolio demo is deployed on Vercel, you can deploy your project to Vercel by referring to the detailed Vercel Docs, we recommend you to use the Vercel for Git solution, which is the easiest way to deploy a project if you have a Github account and already pushed the project to the github repository.

There is some sample steps to deploy the project to Vercel by using Vercel for Git:

1. Login to Vercel by using your Github account
2. Click the Start Deploying button on Vercel Home page
3. Select the repository you want to deploy and click Import button
4. Settings will be automatically set, but you can still configure the settings according to your needs
5. Click the Deploy button
6. Wait for the building to complete, and you will see the deployment URL
7. Open the URL in your browser, everything is done!

If you also want to the comment system work properly, you need to add Mongodb Atlas integration to the project you just deployed successfully by referring to the integration documentation