Nyan Profile

About

Nyan Profile is a simple and extensible scaffold for building personal profile website.

Features

• Static Generation with Next.js
• Styling with Tailwind CSS
• Configurable Components
  • Profile
  • Header
    • Theme Switch
  • Sidebar
  • Footer
  • About
  • Google Fonts
  • Google Analytics
  • Project List
  • Article List
• Deploying to GitHub Pages with GitHub Actions

Getting Started

Automatic Setup

Create a new project by running the following command.

npm init @memochou1993/nyan-profile my-profile

Change directory into project.

cd my-profile

Start the development server.

npm run dev

Manual Setup

Clone the project.

git clone git@github.com:memochou1993/nyan-profile.git

Change directory into project.

cd nyan-profile

Initialize a new Git repository.

rm -rf .git
git init
git add .
git commit -m "Initial commit"

Install dependencies.

npm ci

Start the development server.

npm run dev

Showcase

• King Nyan II
• Memo Chou

Configuration

Base URL

{
  "basePath": "/<repository_name>"
}

Theme

{
  "theme": {
    "mode": "<light|dark>",
    "light": {
      "background": "<light_color>"
    },
    "dark": {
      "background": "<dark_color>"
    }
  }
}

Meta

{
  "meta": {
    "author": "<website_author>",
    "title": "<website_title>",
    "description": "<website_description>",
    "image": "<website_image_path>"
  }
}

Components

Profile

{
  "components": {
    "profile": {
      "enabled": true,
      "avatar": "<your_avatar_image_path>",
      "name": "<your_name>",
      "organization": "<your_organization>",
      "location": "<your_location>",
      "email": "<your_email>",
      "url": "<your_website_url>",
      "socialLinks": {
        "github": {
          "id": "<id>"
        },
        "facebook": {
          "id": "<id>"
        },
        "linkedin": {
          "id": "<id>"
        },
        "instagram": {
          "id": "<id>"
        },
        "telegram": {
          "id": "<id>"
        },
        "twitter": {
          "id": "<id>"
        }
      }
    }
  }
}

Header

{
  "components": {
    "header": {
      "enabled": true,
      "components": {
        "themeSwitch": {
          "enabled": true
        }
      }
    }
  }
}

Sidebar

{
  "components": {
    "sidebar": {
      "enabled": true
    }
  }
}

Footer

{
  "components": {
    "footer": {
      "enabled": true
    }
  }
}

About

{
  "components": {
    "about": {
      "enabled": true,
      "title": "About"
    }
  }
}

GoogleFonts

{
  "components": {
    "googleFonts": {
      "enabled": true,
      "family": "<font_family>"
    }
  }
}

GoogleAnalytics

{
  "components": {
    "googleAnalytics": {
      "enabled": true,
      "id": "<ga4_measurement_id>"
    }
  }
}

ProjectList

{
  "components": {
    "projectList": {
      "enabled": true,
      "title": "Projects",
      "limit": 3,
      "items": [
        {
          "name": "<project_name>",
          "link": "<project_link>",
          "image": "<project_image>",
          "tags": [
            "<project_tag>"
          ],
          "button": {
            "text": "<button_text>"
          }
        }
      ]
    }
  }
}

ArticleList

{
  "components": {
    "articleList": {
      "enabled": false,
      "title": "Articles",
      "limit": 10,
      "source": "<rss_xml_path>",
      "entrySpec": {
        "key": "<entry_key>",
        "fields": {
          "title": "<title_key>",
          "link": "<link_key>",
          "published": "<published_date_key>"
        }
      }
    }
  }
}

Deployment

GitHub Pages

Enable GitHub Actions for the repository.

Set basePath field to repository name in nyan.config.json.

{
  "basePath": "/<repository_name>"
}

Commit and push changes to GitHub.

git add .
git commit -m "Update next.config.js"
git push

Docker Compose

Copy .env.example to .env.

APP_PORT=3000

Set basePath field to empty string in nyan.config.json.

{
  "basePath": ""
}

Build and run app.

docker compose up -d

Contributors

License

MIT