mirror of
https://github.com/System-End/My-website.git
synced 2026-04-20 00:25:21 +00:00
123 lines
2.7 KiB
Markdown
Executable file
123 lines
2.7 KiB
Markdown
Executable file
# Personal Website
|
|
For deployments/checks before resigning: see archive/unsigned-history branch
|
|
|
|
## Architecture Overview
|
|
|
|
This project implements a modern web application architecture leveraging Cloudflare's edge computing capabilities. The architecture consists of two primary components:
|
|
|
|
1. **React Frontend**: A Single Page Application (SPA) built with React and TypeScript
|
|
2. **Cloudflare Pages**: Static site hosting with global CDN distribution
|
|
|
|
## Getting Started
|
|
|
|
### Prerequisites
|
|
|
|
- Node.js (v16.0.0 or higher)
|
|
- npm (v7.0.0 or higher)
|
|
- Cloudflare account
|
|
- Last.fm account and API key
|
|
- Git
|
|
|
|
### API Keys Setup
|
|
|
|
1. **Last.fm API Key**:
|
|
- Visit [Last.fm API Account Creation](https://www.last.fm/api/account/create)
|
|
- Sign in with your Last.fm account
|
|
- Fill in the application details
|
|
- Save your API key
|
|
- Your username can be found in your profile URL: last.fm/user/YOUR_USERNAME
|
|
|
|
2. **Cloudflare Setup**:
|
|
- Create an account at [Cloudflare](https://dash.cloudflare.com/sign-up)
|
|
- Get your Account ID from the dashboard
|
|
- Create an API token with Pages deployment permissions
|
|
|
|
### Environment Setup
|
|
|
|
1. Clone the repository:
|
|
```bash
|
|
git clone https://github.com/EndofTimee/personal-site
|
|
cd personal-site
|
|
```
|
|
|
|
2. Create a `.env` file in the root directory:
|
|
```env
|
|
VITE_LASTFM_API_KEY=your_lastfm_api_key
|
|
VITE_LASTFM_USERNAME=your_lastfm_username
|
|
CLOUDFLARE_API_TOKEN=your_cloudflare_api_token
|
|
CLOUDFLARE_ACCOUNT_ID=your_cloudflare_account_id
|
|
```
|
|
|
|
3. Install dependencies:
|
|
```bash
|
|
pnpm install
|
|
```
|
|
|
|
## Local Development
|
|
|
|
Start the development server:
|
|
```bash
|
|
pnpm start
|
|
```
|
|
|
|
The application will be available at http://localhost:3000
|
|
|
|
|
|
|
|
## Deployment
|
|
|
|
### Deployment Steps
|
|
|
|
```bash
|
|
npm run build
|
|
npx wrangler pages deploy ./dist
|
|
```
|
|
|
|
### Environment Configuration
|
|
|
|
#### Cloudflare Pages Configuration:
|
|
|
|
1. Build settings:
|
|
- Build command: `npm run build`
|
|
- Build output directory: `dist`
|
|
- Node.js version: 16 (or higher)
|
|
|
|
2. Environment variables:
|
|
- Production branch: `main`
|
|
- Preview branches: `dev/*`
|
|
|
|
## Troubleshooting
|
|
|
|
### Common Issues
|
|
|
|
1. Build Issues:
|
|
```bash
|
|
# Clear dependency cache
|
|
rm -rf node_modules
|
|
npm clean-cache --force
|
|
npm install
|
|
```
|
|
|
|
2. Environment Variables:
|
|
```bash
|
|
# Verify environment variables
|
|
npx wrangler secret list
|
|
```
|
|
|
|
## Additional Resources
|
|
|
|
- [Cloudflare Pages Documentation](https://developers.cloudflare.com/pages/)
|
|
- [Last.fm API Documentation](https://www.last.fm/api)
|
|
- [React Documentation](https://reactjs.org/docs/getting-started.html)
|
|
|
|
## Contributing
|
|
|
|
1. Fork the repository
|
|
2. Create a feature branch
|
|
3. Commit changes
|
|
4. Push to the branch
|
|
5. Open a Pull Request
|
|
|
|
## License
|
|
|
|
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details
|