aDEViento Web 日历
使用纯Python和Reflex的"aDEViento日历"网页项目
"aDEViento日历"是一个活动,在降临节期间每天抽奖赠送与编程和软件开发相关的礼物(书籍、课程等)。其目的是帮助分享知识并促进社区学习。
访问 https://adviento.dev
在Twitch上进行直播开发
如果你认为这个项目有用,请在仓库中点击"★ Star"支持它。谢谢!
视频教程
- 介绍
- 第1课 - 配置
- 第2课 - 导航栏
- 第3课 - 页眉
- 第4课 - 页脚
- 第5课 - 说明
- 第6课 - 作者
- 第7课 - 合作伙伴
- 第8课 - 日历
- 第9课 - 仓库
- 第10课 - 雪花效果
- 第11课 - 部署
- 总结
社区的**Discord服务器上有一个名为"python"**的频道,你可以在那里提问、分享和帮助。
项目
这是项目的总体结构。
- adeviento_web:主要源代码
- adeviento_web.py:网站索引
- constants.py:网站使用的常量
- styles:样式目录(css、颜色和字体)
- views:视图目录(图形部分)
- components:组件目录(比视图小的图形元素)
- assets:图形资源和JavaScript工具(雪花和倒计时)
- rxconfig.py:项目主要配置(默认)
- requirements.txt:项目运行依赖
- assets:图形资源和JavaScript工具(雪花和倒计时)
- build.sh:生产环境静态网站生成脚本
- [生成] public:部署到生产环境的项目静态打包(HTML、CSS、JS和图像)
本地配置
-
对仓库进行
Fork
。 -
将该仓库克隆到本地机器。
git clone https://github.com/<USERNAME>/adeviento-web.git
-
进入项目目录。
cd adeviento
-
创建虚拟环境。
python3 -m venv venv
-
激活虚拟环境。
source venv/bin/activate
-
安装依赖。
python -m pip install -r requirements.txt
-
初始化Reflex项目。
reflex init
-
在本地运行项目。
reflex run
你可以在浏览器中访问
http://localhost:3000/
来查看项目。
部署
为了部署项目,我们创建了一个build.sh
文件,它负责执行必要的流程来生成带有所有静态资源的public
目录,这些资源是Web服务器所需要的。
整个生产打包过程可以委托给服务器,但仓库始终包含public
目录,这样你就可以在不执行build.sh
脚本的情况下查看网站的静态内容。
source .venv/bin/activate
pip install --upgrade pip
pip install -r requirements.txt
reflex init
reflex export --frontend-only
rm -fr public
unzip frontend.zip -d public
rm -f frontend.zip
deactivate
基本上,它准备环境、安装依赖、初始化项目、创建生产构建,并解压缩。
该项目可以部署在任何支持静态资源的提供商或服务器上。
adviento.dev 部署在Vercel上。
Vercel配置:
- GitHub仓库已与项目关联(以便每次向main分支推送代码时触发新的部署)
- 构建和开发设置:其他
- 根目录:
public
(包含生产环境的静态打包文件) - 自定义域名:adviento.dev
使用的资源
- 编程语言:Python
- 框架:Reflex
- CSS:NES.css
- 字体:Press Start 2P
- 托管:Vercel
Python和Reflex课程
使用纯Python从零开始学习Reflex前端Web开发的免费课程。这些技术用于开发"aDEViento日历"项目。我还有一门面向初学者的Python入门课程。
您可以通过在仓库上点"☆ Star"或提名我为"GitHub Star"来支持我的工作。谢谢!
如果您想加入我们的开发社区,学习App编程,提高您的技能并帮助项目持续发展,可以在以下平台找到我们:
你好,我是Brais Moure。
自由职业全栈iOS和Android工程师
我是一名有13年以上经验的软件工程师。在过去5年里,我一直将App开发工作与在各种社交媒体平台上创作编程和技术相关的教育内容相结合,我的账号是**@mouredev**。