This is my React-based personal resume website, built with TypeScript and the Next.js framework, styled with Tailwind CSS, and populated with data from a single file.

To build this website, you will need to have the latest stable versions of Node and Yarn downloaded and installed on your machine. If you don't already have them, you can get Node here, and Yarn here.

Next, clone or fork the repo and download it to your development machine using the green Code button at the top of the repo page.

Once you have your own copy of this repo forked or cloned, open the folder in your favorite terminal and run yarn install to install dependencies. Following this, run yarn dev to run the project. In your terminal you should be given the url of the running instance (usually http://localhost:3000 unless you have something else running).

All of the data for the site is driven via a file at /src/data/data.tsx. This is where you'll find the existing content, and updating the values here will be reflected on the site. If you have the site running as described above, you should see these changes reflected on save. The data types for all of these items are given in the same folder in the dataDef.ts file. Example images can be found at src/images/ and are imported in the data file.

First, you need to configure Next.js to support static exports. To do this, specifiy the output type as export, set the base path, and disable automatic image optimization since dynamic features don't work with static exports.

1. Add the following to the next.config.js file:

// @ts-check

/**
 * @type {import('next').NextConfig}
 **/
const nextConfig = {
  /**
   * Enable static exports for the App Router.
   *
   * @see https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
   */
  output: 'export',

  /**
   * Disable server-based image optimization. Next.js does not support
   * dynamic features with static exports.
   *
   * @see https://nextjs.org/docs/pages/api-reference/components/image#unoptimized
   */
  images: {
    unoptimized: true,
  },
};

module.exports = nextConfig;

2. Place a .nojekyll file in the /public directory to disable Github Pages from trying to create a Jekyll website.

.
├── src/
├── public/
│   └── .nojekyll
├── next.config.js

Next you need to configure GitHub for automated deployments via GitHub Actions.

The following settings use the new Github Action Workflow to deploy.

1. Go to your repository's Settings tab
2. Click "Pages" in the sidebar
3. Under "Build and Deployment", select "GitHub Actions" as the source:

1. Create a build-and-deploy.yaml file in the /.github/workflows directory

.
├── .github/
│   └── workflows
│       └── build-and-deploy.yaml
├── src/
├── next.config.js

2. Use the contents of this workflow file as a baseline and set up your own version of the pipeline. Or just use the entire file. This will automatically build and deploy the app when you push to the main branch.

Now that everything is configured, you can push your code to GitHub. This will trigger the Github Action workflow and deploy your app to GitHub Pages.

You should see the website deployed to GitHub Pages in a few minutes. 🚀