{"id":31663997,"url":"https://github.com/joseespain/blog-cloudflare-deno_deploy","last_synced_at":"2026-05-04T09:32:19.335Z","repository":{"id":316982832,"uuid":"1065518884","full_name":"JoseEspain/blog-cloudflare-deno_deploy","owner":"JoseEspain","description":"🌐 Create a bilingual tech blog with Astro, Hono, and Preact, easily deployable on Cloudflare and Deno, featuring interactive tools and a modern UI.","archived":false,"fork":false,"pushed_at":"2025-10-05T09:17:52.000Z","size":1883,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-05T11:31:49.711Z","etag":null,"topics":["astro","blog","cloudflare","cloudflare-pages","deno","deno-deploy","docx-export","dual-platform-deploy","latex-docx","markdown-docx"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JoseEspain.png","metadata":{"files":{"readme":"README-en.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-27T22:15:22.000Z","updated_at":"2025-10-05T09:17:55.000Z","dependencies_parsed_at":"2025-09-28T03:11:08.953Z","dependency_job_id":"e41bd6e6-3dac-4f5c-a170-006dd61d078a","html_url":"https://github.com/JoseEspain/blog-cloudflare-deno_deploy","commit_stats":null,"previous_names":["joseespain/blog-cloudflare-deno_deploy"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/JoseEspain/blog-cloudflare-deno_deploy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoseEspain%2Fblog-cloudflare-deno_deploy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoseEspain%2Fblog-cloudflare-deno_deploy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoseEspain%2Fblog-cloudflare-deno_deploy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoseEspain%2Fblog-cloudflare-deno_deploy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JoseEspain","download_url":"https://codeload.github.com/JoseEspain/blog-cloudflare-deno_deploy/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoseEspain%2Fblog-cloudflare-deno_deploy/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278846328,"owners_count":26056090,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astro","blog","cloudflare","cloudflare-pages","deno","deno-deploy","docx-export","dual-platform-deploy","latex-docx","markdown-docx"],"created_at":"2025-10-07T20:53:05.869Z","updated_at":"2025-10-07T20:53:11.146Z","avatar_url":"https://github.com/JoseEspain.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Blog-cloudflare-deno_deploy\n\nEnglish | [中文](README.md)\n\nA modern technical blog project built with Astro, Hono, and Preact, featuring **bilingual support (Chinese/English)** and **dual-platform deployment** (Cloudflare \u0026 Deno Deploy).\n\n---\n\n### ✨ Key Features\n\n- **🌐 Internationalization**: Complete bilingual support (Chinese/English) based on Astro's built-in i18n functionality\n- **🚀 Dual Platform Deployment**: Support for both Cloudflare Pages \u0026 Workers and Deno Deploy\n- **📝 Content Management**: Markdown/MDX article format with interactive components and mathematical formulas\n- **🧮 Engineering Calculation Tools**: \n  - Pipe jacking earth pressure calculator (compliant with T/CECS 1113-2022 standards)\n  - Export calculation reports with editable mathematical formulas in DOCX format\n  - Reusable form component system for developing new calculation tools\n- **🤖 AI Chat**: Streaming chat interface integrated with OpenAI-compatible APIs\n- **🎨 Modern Experience**: \n  - Dark/light mode toggle\n  - Responsive design\n  - Full-text search functionality\n  - Smooth UI animations\n\n### 🛠️ Tech Stack\n\n- **Frontend Framework**: \n  - [Astro](https://astro.build/) - Static site generator with built-in internationalization\n  - [Preact](https://preactjs.com/) - Lightweight React alternative for interactive components\n  - [Preact Signals](https://preactjs.com/guide/v10/signals/) - Reactive state management\n- **Styling System**: [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework\n- **Backend API**: [Hono](https://hono.dev/) - Lightweight edge computing web framework\n- **Content Processing**:\n  - [Unified](https://unifiedjs.com/) - Markdown/MDX processing pipeline\n  - [KaTeX](https://katex.org/) - Mathematical formula rendering\n  - [Remark](https://remark.js.org/) \u0026 [Rehype](https://rehype.js.org/) - Content transformation plugins\n- **Document Generation**: [docx.js](https://docx.js.org/) - DOCX file generation\n- **Deployment Platforms**:\n  - [Cloudflare Pages \u0026 Workers](https://pages.cloudflare.com/)\n  - [Deno Deploy](https://deno.com/deploy)\n- **Development Environment**: [Node.js](https://nodejs.org/) (build) \u0026 [Deno](https://deno.land/) (API server)\n\n### 🏗️ Project Architecture\n\nThis project adopts a modern architecture of \"**frontend static generation + backend multi-platform adaptation**\". The frontend uses Astro to build pure static files, while the backend API (Hono) core logic is platform-agnostic, deployed to Cloudflare or Deno Deploy through different \"adapter\" files, achieving one codebase for dual-platform deployment.\n\n- **Local Development (`npm run dev`)**:\n  \n  1. `concurrently` starts two services simultaneously.\n  2. Browser loads frontend pages from Astro dev server (`localhost:4321`).\n  3. `AIChat` component makes `fetch` requests to Deno API server via absolute path (`http://localhost:8787/chat`).\n\n- **Production Environment (Cloudflare)**:\n  \n  1. Users visit `yoursite.pages.dev`.\n  2. Cloudflare Pages returns pages from its static resource service.\n  3. `AIChat` component makes `fetch` requests to relative path `/chat`.\n  4. Cloudflare Pages routes this request to integrated functions deployed in `functions/chat.ts`.\n\n- **Production Environment (Deno Deploy)**:\n  \n  1. Users visit `yoursite.deno.dev`.\n  2. Hono server running in `api/deno.ts` receives all requests.\n  3. For page requests (`GET`), returns corresponding static files from `dist` directory.\n  4. For API requests (`POST /chat`), executes Hono's API logic.\n\n### 🚀 Local Development\n\n1. **Clone Repository**\n   \n   ```bash\n   git clone https://github.com/zero456/Blog-cloudflare-deno_deploy\n   cd Blog-cloudflare-deno_deploy\n   ```\n\n2. **Install Dependencies**\n   \n   ```bash\n   npm install\n   ```\n\n3. **Configure Environment Variables**\n   \n   - Create a `.env` file in the project root directory.\n   \n   - Copy the following content and fill in your API keys, endpoints, and model names.\n     \n     ```env\n     # API Key\n     API_KEY=\"your-api-key\"\n     \n     # API endpoint base URL (e.g., https://api.openai.com/v1)\n     API_BASE_URL=\"your-api-base-url\"\n     \n     # AI model name to use (e.g., gpt-4o-mini)\n     AI_MODEL_NAME=\"your-model-name\"\n     ```\n\n4. **Start Development Server**\n   \n   ```bash\n   npm run dev\n   ```\n   \n   This command starts two services simultaneously:\n   \n   - Astro frontend service (usually at `http://localhost:4321`)\n   - Deno API backend service (at `http://localhost:8787`)\n   \n   Open your browser and visit the Astro address to start development and debugging.\n\n### Deployment\n\nThis project supports two deployment methods.\n\n#### 1. Deploying via Cloudflare Pages Dashboard\n\nThis is the current and recommended deployment method. You can set up the project directly on the Cloudflare Pages platform without needing a CI/CD configuration file.\n\n1. Connect to your Git repository: In your Cloudflare Pages dashboard, select \"Connect to Git,\" then authorize and choose this project's GitHub repository.\n2. Configure build settings:\n   * **Framework preset**: Select `Astro`. Cloudflare will automatically pre-populate most of the build settings.\n   * **Build command**: `npm run build`\n   * **Build output directory**: `dist`\n   * **Root directory**: Leave this field empty.\n3. Configure environment variables: In your project settings, add the necessary environment variables as plain text.\n   * **API_KEY**: Your API key.\n   * **API_BASE_URL**: The base URL for your API endpoint.\n   * **AI_MODEL_NAME**: The name of the AI model to use.\n   * **ADAPTER_TYPE**: cloudflare\n4. **Save and Deploy**: Cloudflare will automatically pull code, build, and complete deployment. Subsequent commits pushed to the `main` branch will automatically trigger new deployments.\n\n#### 2. Deploy via Deno Deploy Platform\n\nYou can also deploy directly through the Deno Deploy platform without configuring GitHub Actions.\n\n1. **Connect GitHub Repository**: In the [Deno Deploy](https://deno.com/deploy) dashboard, create a new project and connect to this GitHub repository.\n2. **Configure Project Settings**:\n   * **Framework preset**: Select `Astro`\n   * **Install Step**: Enter `npm install`\n   * **Build Step**: Enter `npm run build`\n   * **Root directory**: Enter `dist`\n   * **Entry File**: Select `api/deno.ts`\n   * **Production Branch**: Select `main`\n3. **Configure Environment Variables**: Add necessary environment variables in project settings:\n   * `API_KEY`: Your API key.\n   * `API_BASE_URL`: API endpoint base URL.\n   * `AI_MODEL_NAME`: AI model name to use.\n4. **Deploy**: Deno Deploy will automatically build and deploy the project. Subsequent commits pushed to the `main` branch will automatically trigger new deployments.\n\n### 🌐 Internationalization Support\n\nThis project supports complete bilingual functionality in Chinese and English:\n\n#### URL Structure\n- **Chinese Version**: `https://yoursite.com/` (default, no language prefix)\n- **English Version**: `https://yoursite.com/en/`\n\n#### Language Switching\n- Language toggle dropdown menu in the top-right corner of the navigation bar\n- Automatically maintains current page context during language switching\n- Supports SEO-friendly independent URLs\n\n### 📝 Content Management\n\n#### Adding Chinese Articles\nCreate `.md` or `.mdx` files in the `src/content/blog/` directory:\n\n```markdown\n---\ntitle: Article Title\npublished_at: 2024-01-01\nblurb: Article description\ntags: [\"Tag1\", \"Tag2\"]\nisPinned: false  # Optional, whether to pin\nlayoutMode: 'document'  # Optional: 'document' | 'app' | 'homepage'\n---\n\n# Article Content\n\nThis is the Markdown content of the article...\n```\n\n#### Adding English Articles\nEnglish articles need to add `-en` suffix to the filename:\n\n```markdown\n\u003c!-- Filename: src/content/blog/article-name-en.mdx --\u003e\n---\ntitle: Article Title\npublished_at: 2024-01-01\nblurb: Article description\ntags: [\"Tag1\", \"Tag2\"]\nisPinned: false\nlayoutMode: 'document'\n---\n\n# Article Content\n\nEnglish article content here...\n```\n\n#### Article Types\n- **Regular Articles** (`layoutMode: 'document'`): Standard blog article layout\n- **Application Pages** (`layoutMode: 'app'`): Full-screen application layout, suitable for AI-chat\n- **Homepage Layout** (`layoutMode: 'homepage'`): Special homepage layout\n\n#### Interactive Components sample\nYou can directly use React/Preact components in MDX articles:\n\n[Calculates Earth Pressure on Jacking Pipe with Web preview and Docx export](src/content/blog/pipe-pressure-en.mdx)\n\n[AI Chat](src/content/blog/ai-chat-en.mdx)\n\n[KaTeX Renderer \u0026 convert](src/content/blog/mathml-en.mdx)\n\n### 📜 Main NPM Scripts\n\n- `npm run dev`: Start complete local development environment (start both frontend and backend simultaneously)\n- `npm run dev:astro`: Start Astro frontend development server only\n- `npm run dev:api`: Start Deno backend API server only\n- `npm run build`: Build static website files for production\n- `npm run preview`: Preview built static website locally\n- `npm run test`: Run test suite\n\n### 🔧 Project Structure\n\n```\nsrc/\n├── components/          # React/Preact components\n│   ├── form/           # Reusable form components\n│   ├── AIChat.tsx      # AI chat component\n│   ├── BlogList.tsx    # Blog list component\n│   └── ...\n├── content/            # Content management\n│   └── blog/          # Blog articles\n├── i18n/              # Internationalization\n│   ├── ui.ts          # Translation files\n│   └── utils.ts       # Internationalization utility functions\n├── layouts/           # Page layouts\n├── pages/             # Page routing\n│   ├── en/            # English pages\n│   └── ...\n└── utils/             # Utility functions\n```\n\n### 🎨 Design System\n\n- **Responsive Design**: Mobile-first, adapts to various screen sizes\n- **Dark Mode**: Complete dark theme support\n- **Animation Effects**: Smooth transition animations and interactive feedback\n- **Accessibility**: WCAG-compliant accessible design\n\n### 📊 Performance Optimization\n\n- **Static Generation**: Astro static site generation for extremely fast loading speeds\n- **Code Splitting**: Component-level code splitting and lazy loading\n- **Edge Computing**: Leverage edge networks of Cloudflare and Deno Deploy\n- **Caching Strategy**: Intelligent static resource caching and CDN distribution\n\n### 🤝 Contributing Guide\n\nWe welcome code contributions, issue reports, and improvement suggestions!\n\n#### Development Process\n1. Fork this repository\n2. Create feature branch: `git checkout -b feature/amazing-feature`\n3. Commit changes: `git commit -m 'Add amazing feature'`\n4. Push branch: `git push origin feature/amazing-feature`\n5. Submit Pull Request\n\n#### Code Standards\n- Use TypeScript for type-safe development\n- Follow ESLint and Prettier configurations\n- Components and functions need appropriate comments\n- Commit messages in English with clear formatting\n\n#### Adding New Features\n- **New Calculation Tools**: Refer to the template structure of `PipePressureCalculator.tsx`\n- **New Components**: Place in `src/components/` directory\n- **Internationalization**: Add corresponding translations in `src/i18n/ui.ts`\n- **Documentation**: Update README and related documentation\n\n### 📄 License\n\nThis project is licensed under the MIT License. See [LICENSE](LICENSE) file for details.\n\n### 🙏 Acknowledgments\n\n- [Astro](https://astro.build/) - Modern static site generator\n- [Hono](https://hono.dev/) - Lightweight web framework\n- [Preact](https://preactjs.com/) - High-performance React alternative\n- [Deno](https://deno.land/) - Modern JavaScript/TypeScript runtime\n- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework\n- [KaTeX](https://katex.org/) - Fast mathematical formula rendering\n- [docx.js](https://docx.js.org/) - Powerful DOCX document generation library\n- [Cloudflare](https://cloudflare.com/) \u0026 [Deno Deploy](https://deno.com/deploy) - Excellent deployment platforms\n\n---\n\n*\"The Next Syntax for Civil Engineering\" - where traditional engineering meets modern innovation, capturing gleanings and glimmers of insight along the way.*\n\n### 📞 Contact\n\nIf you have questions or suggestions, feel free to contact us through:\n\n- Submit [GitHub Issue](https://github.com/zero456/blog-cloudflare-deno_deploy/issues)\n- Start [GitHub Discussion](https://github.com/zero456/blog-cloudflare-deno_deploy/discussions)\n\n---\n\n**Happy Coding! 🚀**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoseespain%2Fblog-cloudflare-deno_deploy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoseespain%2Fblog-cloudflare-deno_deploy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoseespain%2Fblog-cloudflare-deno_deploy/lists"}