Flutter GitHub Pages 部署插件github_pages的使用

Flutter GitHub Pages 部署插件github_pages的使用

github_pages

github_pages 是一个用于将文件发布到 GitHub 的 gh-pages 分支（或任何其他分支）的 Dart 版本。它是一个 NodeJS gh-pages 包的 Dart 转换版。

Getting Started

安装它全局地从命令行进行安装。

$ dart pub global activate github_pages

或者将其添加到您的 pubspec.yaml 文件中作为开发依赖项。

dev_dependencies:
  github_pages: ^2.0.0

Usage

例如，要发布您的 Web 应用程序，您必须生成一个发布构建，然后运行该包所需的目录。

$ flutter build web
$ flutter pub run github_pages -d build/web

调用此脚本将在当前仓库中创建一个临时克隆，如果不存在，则创建一个 gh-pages 分支，复制所有来自基路径的文件，或者仅复制与可选 src 配置匹配的文件，提交所有更改，并推送到远程 origin。

如果已经存在 gh-pages 分支，它将被更新为来自远程的所有提交，然后再添加来自提供的 src 文件的任何提交。

注意：gh-pages 分支中的任何不在 src 文件中的文件都将被删除。请参阅 add 选项以确保不删除现有文件。

Options

默认选项适用于简单情况。下面描述的选项可以让您推送至其他分支、自定义提交消息等。

$ flutter pub run github_pages --help
Usage: github_pages [options]
Options:
-d, --dist          Base directory for all source files
-s, --src           Pattern used to select which files to publish
                    (defaults to "**")
-b, --branch        Name of the branch you are pushing to
                    (defaults to "gh-pages")
-e, --dest          Target directory within the destination branch (relative to the root)
                    (defaults to ".")
-a, --add           Only add, and never remove existing files
-x, --silent        Do not output the repository url
-m, --message       Commit message
                    (defaults to "Updates")
-g, --tag           Add tag to commit
-t, --dotfiles      Include dotfiles
-r, --repo          URL of the repository you are pushing to
-p, --depth         Depth for clone
                    (defaults to "1")
-o, --remote        The name of the remote
                    (defaults to "origin")
-u, --user          The name and email of the user. Format is "Your Name <email@example.com>".
                    (defaults to the git config)
-v, --remove        Remove files that match the given pattern (ignored if used together with --add).
                    (defaults to ".")
-n, --no-push       Commit only (with no push)
-f, --no-history    Push force new commit without parent history
-h, --help          Print usage information

示例代码

import 'package:github_pages/github_pages.dart' as ghpages;

void main() {
  ghpages.publish('build/web', {});
}

更多关于Flutter GitHub Pages 部署插件github_pages的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter GitHub Pages 部署插件github_pages的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用github_pages插件来部署到GitHub Pages的示例代码和步骤。这个示例假定你已经有一个基本的Flutter项目，并且已经在GitHub上创建了一个仓库。

步骤 1: 添加依赖

首先，你需要在pubspec.yaml文件中添加flutter_launcher_icons和github_pages依赖。flutter_launcher_icons用于生成应用图标（可选），而github_pages用于部署。

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.9.2  # 可选，用于生成应用图标
  github_pages: ^0.20.0  # 最新版本可能不同，请检查pub.dev

flutter_icons:
  android: true
  ios: true
  image_path: "assets/icon/icon.png"  # 替换为你的图标路径

步骤 2: 安装依赖

在终端中运行以下命令来安装依赖：

flutter pub get

步骤 3: 生成Web构建文件

运行以下命令来生成Flutter Web的构建文件：

flutter build web

这将在你的项目根目录下创建一个build/web文件夹，其中包含用于部署的Web文件。

步骤 4: 配置gh-pages分支

在GitHub上，你需要配置一个名为gh-pages的分支来托管你的Web内容。如果你还没有这个分支，可以通过以下步骤创建：

  1. 在你的GitHub仓库中，点击“Settings”。
  2. 向下滚动到“Pages”部分。
  3. 在“Source”下拉菜单中，选择gh-pages分支（如果它还不存在，GitHub会提示你创建它）。
  4. 保存设置。

步骤 5: 使用github_pages插件部署

创建一个新的Dart脚本文件，例如deploy_to_github_pages.dart，并在其中添加以下代码：

import 'package:github_pages/github_pages.dart';

Future<void> main() async {
  final String repoOwner = 'your-github-username'; // 替换为你的GitHub用户名
  final String repoName = 'your-repo-name'; // 替换为你的仓库名
  final String branch = 'gh-pages';

  // 构建并部署到GitHub Pages
  await ghPages.create(
    dir: './build/web',  // 构建输出的目录
    branch: branch,
    repoDir: '.',
    repoOwner: repoOwner,
    repoName: repoName,
    token: String.fromEnvironment('GITHUB_TOKEN'),  // 确保在环境变量中设置了GITHUB_TOKEN
  );

  print('Deployment successful!');
}

步骤 6: 设置GitHub Token

为了允许github_pages插件访问你的GitHub仓库，你需要生成一个个人访问令牌（PAT）。请按照以下步骤操作：

  1. 登录到你的GitHub账户。
  2. 点击右上角的头像，选择“Settings”。
  3. 在左侧菜单中选择“Developer settings”。
  4. 点击“Personal access tokens”。
  5. 点击“Generate new token”。
  6. 选择所需的权限（通常repo权限就足够了）。
  7. 点击“Generate token”并复制生成的令牌。

将这个令牌保存为环境变量GITHUB_TOKEN。你可以在操作系统的环境变量设置中完成此操作，或者在运行脚本前在命令行中设置：

export GITHUB_TOKEN='your-github-token'  # macOS/Linux
set GITHUB_TOKEN=your-github-token       # Windows (cmd)

步骤 7: 运行部署脚本

最后，运行你的部署脚本：

dart deploy_to_github_pages.dart

如果一切配置正确，脚本将把build/web目录中的内容部署到你的GitHub Pages上。部署成功后，你可以在GitHub Pages设置中看到部署的状态，并通过提供的URL访问你的Flutter Web应用。

希望这个示例能帮助你成功地将Flutter应用部署到GitHub Pages上！

回到顶部