這是一張有關標題為 From AI Summaries to Auto-Deploy: Build Single-Page Sites with LLMs & GitHub Actions 的圖片

From AI Summaries to Auto-Deploy: Build Single-Page Sites with LLMs & GitHub Actions

Build a live site from AI summaries: use LLMs with Perplexity and YouTube to generate Tailwind HTML, then auto-deploy to GitHub Pages via GitHub Actions.

We all consume a torrent of information online every day. You might watch a YouTube tutorial on camera settings, look up how a dehumidifier works, compare sous-vide machines, or catch up on the latest iOS features.

The challenge, however, is that this knowledge is fleeting. Most of it is never captured; you watch a 30-minute video, and an hour later, the key takeaways have vanished.

There are established ways to combat this, such as using AI summarization tools or diligent note-taking. We have previously covered how to use ChatGPT to analyze YouTube videos and how Faster Whisper can pull a transcript from virtually any media file. From there, you can feed the text to an LLM—like ChatGPT, Gemini, or Claude—to be summarized and reorganized before saving the polished notes to a tool like Notion.

While this workflow is effective for personal use, it can be taken a step further. Instead of simply archiving your notes, you can instantly turn them into a polished, single-page website to share with the world.

This article details an automated, end-to-end workflow that uses AI to distill online content, generate a complete website, and deploy it via GitHub Actions, empowering anyone to publish their findings without writing a single line of code.

AI-Powered Content Consolidation

AI tools such as ChatGPT and Gemini excel at synthesizing disparate inputs into actionable insights. Supported input types include:

  • Full-text articles and PDFs
  • YouTube video transcripts
  • Live, aggregated web search results

For aggregating search results for research, two leading options are Perplexity and Gemini.

1. Perplexity — Synthesized Analysis

  • Aggregates multiple sources to produce a single synthesized view.
  • Designed for deep research: uncovers insights from multiple perspectives and builds foundational understanding.
  • Provides citations with links to original sources for verification.

2. Gemini (Deep Research) — Automated Reports

  • Performs automated web analysis by browsing and summarizing relevant content.
  • Generates comprehensive, well-structured research reports rapidly (typically within minutes).
  • Handles complex topics that require extensive information gathering.

From Content to Code: Generating a Web Page with AI

With high-quality content prepared, it’s time to build the web page. You don’t need to code it by hand; an LLM can generate the complete HTML for you. The key is to provide a detailed prompt that includes concrete design guidelines and technical requirements.

Here is a powerful prompt structure to get you started:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
Please act as a senior Front-End UI/UX designer and comprehensively polish the following HTML that uses the TailwindCSS framework.

🎨 Visual Design Enhancements
Color palette: Use a blue primary, blended with purple and cyan gradients.
Card design: Apply glassmorphism effects with soft shadows for each section’s card.

✨ Interaction Improvements
Keyword interactivity: Add hover effects, background changes, and subtle animations to keywords.
Entrance animation: Stagger fade-ins by section to enhance visual hierarchy.

📱 Responsive Design Optimizations
Mobile experience: Optimize for small screens to ensure readability and ease of use.

🔧 Technical Improvements
TailwindCSS best practices: Rely on native utility classes to minimize custom CSS.
Performance: Use `transform` and `opacity` for animations to improve rendering performance.

Through iterative conversation with the LLM, you can refine any of these parameters to generate a final index.html file that is not only visually appealing but also highly performant and interactive.

Deploy Static HTML to GitHub Pages

GitHub Pages is a powerful feature for hosting static websites directly from a GitHub repository. We will cover two methods: a straightforward manual upload and a more robust, automated workflow.

Prerequisites

Before you begin, make sure you:

  1. Have a GitHub account.
  2. Have Git installed locally.
  3. Understand basic Git operations such as clone, add, commit, and push.

If you’re new to Git, see:

Manual Deployment to a Public Repository

This straightforward approach is ideal for simple projects where your source files can be made public.

First, create a new public repository on GitHub (e.g., single-page-conclusion).

For this example, assume you have a generated HTML file named Git Common Commands Overview.html. Place this file in your local project folder. Next, use Git to commit and push your file to the dedicated gh-pages branch. GitHub Pages is specifically configured to serve content from this branch for project sites.

Once the push is complete, you can view your live page at:

https://<your-username>.github.io/<your-repo-name>/Git Common Commands Overview.html.

Automated Deployment with GitHub Actions

For projects with private scripts, prompts, or other sensitive source materials, a manual public push is not a secure option. The professional standard is to use a private repository for development and an automated workflow to deploy only the final, public-facing files to a separate public repository.

GitHub Actions provides the automation for this workflow. When you push code to your private repository, it triggers a series of predefined steps that build and publish the final static site to your public repository.

For clarity, this setup uses two repositories:

  • Private repository: single-page-conclusion-deploy Stores all source code, build scripts (.sh), and prompts (.txt). This is your main working area.
  • Public repository: single-page-conclusion Stores only the final static HTML files and has GitHub Pages enabled to serve the live site.

Creating a Personal Access Token (PAT) for Authentication

To grant the private repository’s Actions workflow permission to push to the public repository, you must create a secure credential. The standard method is a Personal Access Token (PAT).

  1. Generate a PAT

    Go to GitHub’s Personal Access Tokens page, click Generate new token, and select Generate new token (classic).

    Generate access token

  2. Set Token Scopes

    Under Select scopes, ensure you select the permissions for repo and workflow. This grants the token the necessary permissions to read and write to your repositories and manage workflows.

    Set scopes; workflow must be selected

  3. Copy the Generated Token

    After generation, copy the token string immediately—it will not be shown again. It is a long string, typically starting with ghp_, for example:

    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

  4. Add the Token as a Repository Secret

    In your private repository (single-page-conclusion-deploy), go to Settings > Secrets and variables > Actions, and click New repository secret. Name it GH_TOKEN and paste the token.

    Add the token to the private repo

    Once configured, this setup allows your workflow to securely access the token via the ${{ secrets.GH_TOKEN }} variable, authorizing it to push to the public repository.

Writing the Workflow Deployment Script

In my project structure, the following files are managed in the private repository:

  1. ./prompt.txt
  2. ./update_rss.sh
  3. ./update.sh
  4. ./gh-pages/*.html

The files in the first three items represent your source materials and build scripts, which should remain private. Only the static HTML files inside the ./gh-pages/ directory are intended for deployment.

To automate the deployment, create a new file at ./.github/workflows/deploy.yml within the root of your private repository. Paste the content below into this file, ensuring you replace <USER>/<PUBLIC_REPO_NAME> with your specific GitHub username and public repository name.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
# .github/workflows/deploy.yml

# name: Set a display name for this workflow in the GitHub Actions UI.
name: Deploy HTML to single-page-conclusion

# on: Define the events that trigger this workflow.
on:
  # push: Trigger when a Git push occurs.
  push:
    # branches: Only trigger when pushing to these branches.
    branches:
      # When the 'main' branch of the private repo receives updates, run this workflow.
      - main

# jobs: A workflow is composed of one or more jobs that run in parallel or in sequence.
jobs:
  deploy:
    # Run on the latest Ubuntu runner.
    runs-on: ubuntu-latest

    # steps: A job is made up of a set of steps that run sequentially.
    steps:
      # Step 1: Check out the private repo
      - name: Checkout private repo
        # uses: Use a prebuilt Action from the GitHub Marketplace.
        # actions/checkout@v3: Official Action to download the repo into the runner.
        uses: actions/checkout@v3
        # with: Provide parameters to the Action.
        with:
          # fetch-depth: 0 pulls the full Git history, useful if history-based operations are needed.
          fetch-depth: 0

      # Step 2: Configure Git author info
      - name: Setup Git
        run: |
          git config --global user.name "github-actions[bot]"
          git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"

      # Step 3: Run script to generate README.md
      - name: Generate README.md
        run: |
          chmod +x update.sh
          ./update.sh

      # Step 4: Clone the public target repo
      - name: Clone public repo (single-page-conclusion)
        run: |
          # Clone the public repo into the local 'public-repo' directory using the token.
          # The token must be set in the private repo's Settings > Secrets.
          git clone --depth 1 https://x-access-token:${{ secrets.GH_TOKEN }}@github.com/<USER>/<PUBLIC_REPO_NAME>.git public-repo
          
          # Enter the freshly cloned 'public-repo' folder.
          cd public-repo
          
          # Ensure we can switch branches regardless of whether remote branches exist.
          # '|| true' prevents the workflow from failing if the branch doesn't exist.
          git fetch origin main || true
          git fetch origin gh-pages || true
          
          # Try to switch to main; if it doesn't exist, create it.
          git checkout main || git checkout -b main

      # Step 5: Sync files to the public repo's main branch (primarily README)
      - name: Sync files to public repo main
        run: |
          cd public-repo
          # Copy the README.md generated at the private repo root into the public repo.
          cp ../README.md .
          
          # Stage README.md
          git add README.md
          # Commit changes; if no changes, avoid failing the job.
          git commit -m "Update README.md" || echo "No changes"
          # Push to the public repo's main branch.
          git push origin main

      # Step 6: Sync site content to the public repo's gh-pages branch (deploy the site)
      - name: Sync files to public repo gh-pages
        run: |
          cd public-repo
          # Switch to gh-pages, the default branch GitHub Pages uses to publish. Create it if needed.
          git checkout gh-pages || git checkout -b gh-pages

          # --- Clean old files ---
          # Ensure the deployment is fresh by removing the previous artifacts.
          # This avoids stale files that no longer exist in the source.
          find . -maxdepth 1 -name '*.html' -delete
          rm -f README.md
          
          # --- Copy new files ---
          # Copy all site files from the private repo's 'gh-pages' folder.
          cp ../gh-pages/*.html .
          cp ../README.md .
          
          # --- Commit and push ---
          # Stage all adds/changes/deletions.
          git add .
          # Commit all changes.
          git commit -m "Update content, RSS feed and posts data" || echo "No changes"
          # Force-push to gh-pages to make the remote match this deployment exactly.
          git push origin gh-pages --force

Once you commit and push this workflow file, your automation is live. From now on, every push to the main branch of your private repository will automatically trigger the workflow, deploying the latest static files. This process is also easily extensible; you could add steps to generate an RSS feed (rss.xml) or perform other pre-deployment tasks.

This approach ensures your source code and proprietary scripts remain secure in a private repository, while the public-facing site contains only clean, production-ready files.

Conclusion

This article has walked you through an end-to-end workflow, from synthesizing content with AI to publishing a complete website automatically. By combining the content-processing power of LLMs with the robust automation of GitHub Actions, you can reduce a complex, multi-step publishing process to a single git push.

The result is a powerful system that keeps your source materials private while deploying a polished, public-facing version of your work.

More than just a technical shortcut, this process transforms the very nature of learning. Compared to simply storing notes in a private folder, transforming your knowledge into polished, standalone web pages solidifies your own understanding and dramatically amplifies its value by making it accessible and impactful for others.

I’m currently publishing consolidated articles at “Wells Single-Page Conclusions.” Feel free to browse.

Here are a few examples where the interactive format helps make complex ideas more digestible and engaging:

  1. Overfitting: Why a Perfect Explanation is Often Useless
  2. (Chinese) 機率悖論的共同核心
  3. (Chinese) AI 溝通術:從提示詞到上下文工程
  4. (Chinese) Netflix 自由與責任文化指南
  5. (Chinese) DJI Osmo 360 vs Insta360 X5

參考文獻

  1. Introducing Perplexity Deep Research
  2. Gemini Deep Research
  3. Creating a GitHub Pages site
  4. GitHub Pages limits
  5. Using custom workflows with GitHub Pages
Theme Stack designed by Jimmy