Awwesome 项目教程
awwesomeEnhanced user interface for Awesome Selfhosted项目地址:https://gitcode.com/gh_mirrors/aw/awwesome
1、项目介绍
Awwesome 是一个增强版的用户界面项目,旨在为 Awesome Selfhosted 提供更好的用户体验。该项目使用 Svelte 和 Tailwind CSS 构建,从 Awesome Selfhosted 抓取项目,并通过 GitHub 的 GraphQL API 获取额外数据。
2、项目快速启动
安装依赖
首先,克隆项目仓库并安装依赖:
git clone https://github.com/mkitzmann/awwesome.git
cd awwesome
npm install
启动开发服务器
启动开发服务器并打开应用:
npm run dev -- --open
生成静态构建
为了优化用户体验,建议静态生成网站而不是服务器渲染:
npm run build
npm run preview
3、应用案例和最佳实践
使用 Docker 部署
Awwesome 可以通过 Docker 和 Docker Compose 部署。以下是一个示例 docker-compose.yml
文件:
version: '3'
services:
ofelia:
image: mcuadros/ofelia:latest
container_name: ofelia
depends_on:
- source
command: daemon --docker
volumes:
- /var/run/docker.sock:/var/run/docker.sock:ro
labels:
ofelia.job-run.awwesome.schedule: "@daily"
ofelia.job-run.awwesome.container: "awwesome"
source:
image: mkitzmann/awwesome
container_name: awwesome
working_dir: /usr/src/app
environment:
TOKEN_GITHUB: ${TOKEN_GITHUB}
command: sh -c "npm run build && rm -r html/* && cp -r dist/* html && exit"
volumes:
- shared_volume:/usr/src/app/html
web:
image: nginx
container_name: nginx
ports:
- "8080:80"
volumes:
- shared_volume:/usr/share/nginx/html:ro
volumes:
shared_volume:
环境变量设置
需要设置 TOKEN_GITHUB
环境变量,以便使用 GitHub 的 GraphQL API。可以在项目的根目录下创建一个 .env
文件:
TOKEN_GITHUB=your_personal_access_token
4、典型生态项目
Awesome Selfhosted
Awwesome 项目的数据来源于 Awesome Selfhosted,这是一个收集和分类自托管软件项目的社区项目。通过 Awwesome,用户可以更方便地浏览和搜索这些项目。
Svelte 和 Tailwind CSS
Awwesome 使用 Svelte 和 Tailwind CSS 构建用户界面,这两个技术栈在现代前端开发中非常流行,提供了高效的开发体验和优秀的性能。
通过以上教程,您可以快速启动并部署 Awwesome 项目,同时了解其背后的技术和生态项目。
awwesomeEnhanced user interface for Awesome Selfhosted项目地址:https://gitcode.com/gh_mirrors/aw/awwesome