Nyan Profile is a simple and extensible scaffold for building personal profile website.
- 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
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
Clone the project.
git clone [email protected]: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
{
"basePath": "/<repository_name>"
}
{
"theme": {
"mode": "<light|dark>",
"light": {
"background": "<light_color>"
},
"dark": {
"background": "<dark_color>"
}
}
}
{
"meta": {
"author": "<website_author>",
"title": "<website_title>",
"description": "<website_description>",
"image": "<website_image_path>"
}
}
{
"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>"
}
}
}
}
}
{
"components": {
"header": {
"enabled": true,
"components": {
"themeSwitch": {
"enabled": true
}
}
}
}
}
{
"components": {
"sidebar": {
"enabled": true
}
}
}
{
"components": {
"footer": {
"enabled": true
}
}
}
{
"components": {
"about": {
"enabled": true,
"title": "About"
}
}
}
{
"components": {
"googleFonts": {
"enabled": true,
"family": "<font_family>"
}
}
}
{
"components": {
"googleAnalytics": {
"enabled": true,
"id": "<ga4_measurement_id>"
}
}
}
{
"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>"
}
}
]
}
}
}
{
"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>"
}
}
}
}
}
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
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