GitHub Pages Landing Page With DMG Automation

by Admin 46 views
GitHub Pages Landing Page with Automated DMG Releases

Hey guys! Let's dive into creating a killer landing page for your application using GitHub Pages and automating those DMG releases. This guide will walk you through setting up a professional-looking page and streamlining your release process. We're going to cover everything from the initial setup to automating your macOS DMG builds. So, buckle up and let's get started!

Overview

The main goal here is to create a polished GitHub Pages landing page for DroidDock, making it super easy for users to discover and download the app. We'll also automate the DMG distribution using GitHub Actions. This means less manual work for you and a smoother experience for your users. Who doesn't love that?

Objectives

Our objectives are pretty straightforward:

  • Provide a professional landing page: A well-designed page helps users understand what your app does and why they should download it.
  • Automate DMG releases: Automation saves time and reduces the chances of errors.
  • Make it easy to download and install: A seamless download and installation process is crucial for user adoption.

Implementation Plan

Let's break down the implementation into manageable steps.

1. GitHub Pages Landing Page (docs/index.html)

Creating a landing page that grabs attention and provides all the necessary information is key. Here's what we'll do:

  • [ ] Create a single-page site with Tailwind CSS: Tailwind CSS is a fantastic utility-first CSS framework that makes styling a breeze. We'll use it to create a responsive and modern design. Think clean, think professional.

  • [ ] Add a hero section with the app icon and tagline: The hero section is the first thing users see, so it needs to make a strong impression. A catchy tagline and a visually appealing app icon can do wonders.

  • [ ] Include a detailed features section with all 5 screenshots from the /screenshots folder: Show, don't just tell! Screenshots give users a peek into your app's functionality and design. Make sure they're high-quality and showcase the best features.

  • [ ] Add a prominent download button (links to the latest GitHub release): Make it super easy for users to download the app. A clear, visible download button linked to the latest release is essential.

  • [ ] Include installation instructions (with a note about right-click > Open for unsigned apps): Installation can be tricky, especially for unsigned apps. Provide clear instructions, including the workaround for Gatekeeper warnings on macOS. Something like, "If you encounter a warning, right-click the app and select 'Open'."

  • [ ] Add a system requirements and prerequisites section: Let users know what they need to run your app. This prevents frustration and ensures a smooth experience.

  • [ ] Add a footer with the GitHub repo link and MIT license info: Give credit where it's due and make your code accessible. Linking to your GitHub repo and including license information adds transparency and credibility.

2. GitHub Actions Workflow (.github/workflows/release.yml)

Automation is where the magic happens. GitHub Actions allows us to automate the build and release process. Here’s how we'll set it up:

  • [ ] Create a workflow that triggers on git tags (e.g., v0.1.0): We'll set up a workflow that automatically runs when you create a new tag in your Git repository. This tag will represent a new release version.

  • [ ] Configure Tauri build for macOS: Tauri is a fantastic framework for building desktop apps with web technologies. We'll configure it to build for macOS.

  • [ ] Generate a DMG file: A DMG file is the standard way to distribute macOS applications. Our workflow will automatically create this file for each release.

  • [ ] Automatically create a GitHub Release: GitHub Releases provide a way to package and distribute your software. Our workflow will create a new release on GitHub for each tag.

  • [ ] Upload DMG as a release asset: The DMG file will be uploaded as an asset to the GitHub Release, making it easily accessible to users.

  • [ ] Generate release notes from commits: Automatically generate release notes from your commit messages. This saves time and provides users with a clear overview of changes.

  • [ ] Note: Initial builds will be unsigned (code signing can be added later with Apple Developer certificates). For the initial setup, we'll focus on getting the automation in place. Code signing can be added later to remove Gatekeeper warnings.

3. Version Management

Keeping versions consistent across your project is crucial. We'll create a script to handle this:

  • [ ] Create a helper script to bump versions across package.json, tauri.conf.json, and Cargo.toml: This script will ensure that the version numbers in all relevant files are updated consistently.

  • [ ] Script should create a git tag automatically: The script will also create a Git tag, which triggers the GitHub Actions workflow.

  • [ ] Add npm script: npm run release:prepare <version>: This npm script will make it easy to run the version bumping script.

4. Documentation Updates

Good documentation is essential for a successful project. Here’s what we need to update:

  • [ ] Update README.md with a link to the landing page: Make sure your README includes a link to your newly created landing page.

  • [ ] Add release process documentation: Document the steps required to create a new release. This will help you and your team follow the process consistently.

  • [ ] Create a CHANGELOG.md template: A changelog provides a clear history of changes for each release. A template will help maintain consistency.

  • [ ] Document how to add code signing later (optional): If you plan to add code signing in the future, document the steps involved.

Technical Details

Let's get a bit more specific about the tech we're using.

Landing Page Stack:

  • Plain HTML with Tailwind CSS CDN: We're keeping it simple and fast with plain HTML and Tailwind CSS delivered via CDN.

  • Responsive design for mobile/desktop: The landing page will look great on any device.

  • Fast loading, no build step required: We want the page to load quickly without any complex build processes.

CI/CD:

  • GitHub Actions with Tauri action: We're leveraging GitHub Actions and the Tauri action for automated builds.

  • Builds on ubuntu-latest with macOS target: The build will run on Ubuntu for general tasks and target macOS for the DMG creation.

  • Automatic semantic versioning from git tags: We'll use Git tags to manage semantic versioning.

Distribution:

  • DMG hosted on GitHub Releases: The DMG file will be hosted on GitHub Releases, making it easy for users to download.

  • Landing page fetches the latest release via GitHub API: The landing page will dynamically fetch the latest release information using the GitHub API.

  • Unsigned initially (users will see Gatekeeper warning): Initially, the builds will be unsigned, which means users might see a Gatekeeper warning. We'll address code signing later.

Post-Implementation Workflow

Once everything is set up, releasing a new version will be a breeze. Here’s the workflow:

  1. Run: npm run release:prepare v0.1.1: This command will update the version numbers and create a Git tag.
  2. Push tag: git push origin v0.1.1: Pushing the tag to your repository will trigger the GitHub Actions workflow.
  3. GitHub Actions automatically builds and publishes DMG: The workflow will build the DMG file and create a new release on GitHub.
  4. The landing page auto-links to the latest release: The landing page will automatically display the link to the latest release.

Code Signing (Future Enhancement)

To get rid of those Gatekeeper warnings and provide a truly seamless experience, we'll eventually want to add code signing. Here’s what that involves:

  1. Apple Developer Program membership ($99/year): You'll need to enroll in the Apple Developer Program.
  2. Code signing certificate from Apple: You'll need to obtain a code signing certificate from Apple.
  3. Update GitHub Actions with signing secrets: You'll need to securely store your signing credentials in GitHub Actions.
  4. Add notarization step to workflow: Notarization is Apple's process for verifying apps.

For now, users can install via right-click > Open (standard for unsigned Mac apps). It's a minor inconvenience, but it gets the job done.

References

  • Current version: 0.1.0
  • Target: macOS (Apple Silicon + Intel)
  • Build tool: Tauri v1
  • Screenshots available in: /screenshots directory (5 images)

Alright, that's the plan! Let's get this done and make DroidDock shine! Remember, a great landing page and automated releases are key to a successful app. Good luck, and happy coding!