GitHub is a web-based hosting service for software development projects that use Git for version control.

FemtoCleaner.jl: The Code Behind Femtocleaner


FemtoCleaner cleans your julia projects by upgrading deprecated syntax, removing version compatibility workarounds and anything else that has a unique upgrade path. FemtoCleaner is designed to be as style-preserving as possible. It does not perform code formatting. The logic behind recognizing and rewriting deprecated constructs can be found in the Deprecations.jl package, which makes use of CSTParser.jl under the hood.

serious femtocleaning

User Manual

To set up FemtoCleaner on your repository, go to and click "Configure" to select the repositories you wish to add.

Invoking FemtoCleaner

There are currently three triggers that cause FemtoCleaner to run over your repository:

  1. FemtoCleaner is installed on your repository for the first time
  2. You change your repositories REQUIRE file to drop support for old versions of julia
  3. Manually, by opening an issue with the title Run femtocleaner on the desired repository.

In all cases, femtocleaner, will clone your repository, upgrade any deprecations it can and then open a pull request with the changes (in case 3, it will convert the existing issue into a PR instead).

Interacting with the PR

FemtoCleaner can automatically perform certain common commands in response to user request in a PR review. These commands are invoked by creating a "Changes Requested" review. FemtoCleaner will attempt to interpret each comment in such a review as a request to perform an automated function. The following commands are currently supported.

  • delete this entirely - FemtoCleaner address the review by deleting the entire expression starting on the referenced line.
  • align arguments - Assuming the preceding line contains a multi-line function signature, reformat the argument list, aligning each line to the opening parenthesis.
  • bad bot - To be used when you deem the action taken by the bot to be incorrect. At present this will automatically open an issue on this repository.

If there are other such actions you would find useful, feel free to file an issue or (even better) submit a PR.

Privacy and Security

FemtoCleaner receives the content of many GitHub hooks. These contain certain publicly available details about the repository and the user who initiated the event. AttoBot will also make several subsequent queries via the public GitHub api to the repository in question. The contents of these may be retained in server logs.

In order to perform its function, FemtoCleaner requires read/write access to your repository and its issues and pull requests. While FemtoCleaner runs in a sandboxed environment and access to the underlying hardware is controlled and restricted, you should be aware that you are extending these rights. If you are intending to install FemtoCleaner on an organizational account, please ensure you are authorized to extend these permissions to FemtoCleaner.

For the foregoing reasons, you should not install FemtoCleaner on a private repository. Doing so may result in disclosure of contents of the private repository.

Please note that the license applies to both the source code and your use of the publicly hosted version thereof. In particular:


Running FemtoCleaner locally

It is possible to run FemtoCleaner locally (to fix, for example, deprecations in a private repository).

Install FemtoCleaner (currently working on Julia v0.6.x only) using


A repository of Julia code can be cleaned using

FemtoCleaner.cleanrepo(path::String; show_diff = true, delete_local = true)

This clones the repo located at path, which can be a file system path or a URL, to a temporary directory and fix the deprecations. If show_diff is true, the diff from applying the deprecations is showed. If delete_local is true the cleaned repo, is deleted when the function is finished.

Developer Manual

You are encouraged to contribute changes to this repository. This software is used by many people. Even minor changes in usability can make a big difference. If you want to add additional interactions to the bot itself, this repository is the right place. If you want to contribute additional deprecation rewrites, please do so at

Deployment of the publicly hosted copy

The publicly hosted copy of FemtoCleaner is automatically deployed from the master branch of this repository whenever a new commit to said branch is made.

Setting up a development copy of femtocleaner

It is possible to set up a copy of femtocleaner to test changes to the codebase before attempting to deploy them on the main version. To do so, you will need a publicly routable server, with a copy of julia and this repository (and its dependencies). You will then need to set up your own GitHub app at Make sure to enter your server in the "Webhook URL" portion of the form. By default, the app will listen on port 10000+app_id, where app_id is the ID GitHub assigns your app upon completion of the registration process. Once you have set up your GitHub app, you will need to download the private key and save it as privkey.pem in Pkg.dir("FemtoCleaner"). Additionally, you should create a file named app_id, containing the ID assigned to your app by GitHub (it will be visible on the confirmation page once you have set up your app with GitHub). Then, you may launch FemtoCleaner by running julia -e 'using FemtoCleaner; FemtoCleaner.run_server()'. It is recommended that you set up a separate repository for testing your staging copy that is not covered by the publicly hosted version, to avoid conflicting updates. GitHub provides a powerful interface to see the messages delivered to your app in the "Advanced" tab of your app's settings. In particular, for interactive development, you may use the Revise package to reload FemtoCleaner source code before every request (simply execute using Revise on a separate line in the REPL before running FemtoCleaner). By editing the files on the server and using GitHub's "Redeliver" option to replay events of interest, a quick edit-debug cycle can be achieved.

Download Details:

Author: JuliaComputing
Source Code: 
License: View license

#julia #clean #github 

FemtoCleaner.jl: The Code Behind Femtocleaner

A React Application That Allows to Search Users and See Their Profiles

Frontend Assigment: Github searcher


The goal of this assignment is to have the candidate to work with some of the tools that we use every-day on Areshta. It is designed to check your coding and problem-solving skills. Keep it simple and follow the requirements.

Assigment Description

For this assigment, you should consume the public Github REST API in order to present the github data of a given user.

The web app must have two pages/routes:

Search page: the user types a Github username in a form. Once the form is submitted, the data is fetched and presented in the UI. You can come up showing whatever you want, though it is required to show the user profile metadata (example: avatar picture, name, email, bio, etc.) and his repositories metadata info (example: name, description, URL, etc.)

History page: the page must show all previous terms searched by the user, sorted by timestamp. The most recent ones must be on the top. The user must be able to click in the history item and search again using the searched term.

Take into consideration that this web application must be scalable: more requirements will be added on top, and other teams/developers will work on that in the future.

Share your solution via URL to your git repository or send us a zip file with the source.


In your assigment, you are required to use:

  • React & Hooks
  • CSS (CSS modules, or plain CSS/SASS/LESS)
  • Typescript


During the assessment, we will look into the following points:

  • Whether you use React/Hooks, HTML and CSS properly
  • Code performance
  • Writing testable code
  • Code organization (modularity, dependencies between modules, naming, etc)
  • SOLID principles
  • Error handling
  • Mobile friendly
  • Assignment interpretation/completion


  • You don't need to spend time creating a dev/build environment. You can use create-react-app (and other alike tools) for that
  • Third-party libraries are allowed, although is highly recommended to provide a vanilla solution since our main focus is to assess your skills with HTML, Javascript and CSS. Try to rely as much as possible in the Browser/Node native API.
  • As a company, we believe that communication is the key to success. So if something is not clear to you, or if you have doubts on what you can use, reach the devs

That's it!

Happy coding!


# See for more about ignoring files.

# dependencies

# testing

# production

# misc


Author: omid-poorali
Source code:

#react #typescript #github 

A React Application That Allows to Search Users and See Their Profiles
Nat  Grady

Nat Grady


Remotes: install R Packages From GitHub, GitLab, Bitbucket, Git


Install R Packages from remote or local repositories, including GitHub, GitLab, Bitbucket, and Bioconductor

Download and install R packages stored in GitHub, GitLab, Bitbucket, Bioconductor, or plain subversion or git repositories. This package is a lightweight replacement of the install_* functions in devtools. Indeed most of the code was copied over from devtools.


  • Installers:
    • Install packages with their dependencies.
    • Install from GitHub, GitLab, Bitbucket.
    • Install from git and subversion repositories.
    • Install from local files or URLs.
    • Install the dependencies of a local package tree.
    • Install specific package versions from CRAN.
  • Supports Bioconductor packages.
  • Supports the Remotes field in DESCRIPTION. See more in the dependencies vignette.
  • Supports the Additional_repositories field in DESCRIPTION.
  • Can install itself from GitHub (see below).
  • Does not depend on other R packages.
  • Does not contain compiled code, so no compiler is needed.
  • Does not need any external software (for most of the functionality at least).


Install the released version of remotes from CRAN:



Note that most of the examples here use GitHub. See below for other supported repository types.

To install the latest version of a package in the default branch from GitHub, you can use the user/repo form. Note that user can also be an organization:


If the R package is inside a subdirectory of the root directory, then give this subdirectory as well:

# build = FALSE because of some specificities of XGBoost package
install_github("dmlc/xgboost/R-package", build = FALSE)

To install a certain branch or commit or tag, append it to the repo name, after an @:


To install the latest release, append @*release to the repo name:


To install a pull request, append # and the id (an integer number) of the pull request to the repo name:



Dependencies are automatically installed from CRAN. By default, outdated dependencies are automatically upgraded. In interactive sessions you can select a subset of the dependencies to upgrade.

Dependencies on GitHub

It is also possible to install dependencies from GitHub or other supported repositories. For this you need to add a Remotes field to the DESCRIPTION file. Its format is:

Remotes: [remote::]repo_spec, [remote::]repo_spec, ...

where repo_spec is any repository specification the corresponding install_() function can handle. If remote:: is missing, github:: is assumed. Other possible values: gitlab::,bitbucket::, git::, local::, svn::, url::, version::, cran::, bioc::.

See more about the Remotes field in this vignette.

Additional repositories

remotes supports the Additional_repositories field in DESCRIPTION. This is a way to specify dependencies from non-CRAN package repositories. See the Writing R extensions manual for details.

Bioconductor packages

Bioconductor packages are automatically detected and their dependencies are installed from Bioconductor.

Currently supported remote types

  • GitHub repositories via install_github.
  • Bitbucket repositories via install_bitbucket.
  • Generic git repositories via install_git. They need either a system git installation, or the git2r R package.
  • Local directories or package archive files via install_local.
  • Remote package archive files via install_url.
  • Packages in subversion repositories via install_svn. They need a system subversion installation.
  • Specific package versions from CRAN or other CRAN-like repositories via install_version. This includes outdated and archived packages as well.
  • All dependencies of a package in a local directory via install_deps.

Download methods

  • For R older than 3.2, the curl package is required as remotes falls back to curl::curl_download in that case
  • For R newer than 3.3, default download.file() method is used. (method = "auto")
  • For in between versions,
    • method = "wininet" is used on windows OS
    • method = "libcurl" is used on other OS, if available.

See help("download.file") for informations on these methods and for setting proxies if needed.

Standalone mode

remotes will use the curl, git2r and pkgbuild packages if they are installed to provide faster implementations for some aspects of the install process. However if you are using remotes to install or update these packages (or their reverse dependencies) using them during installation may fail (particularly on Windows).

If you set the environment variable R_REMOTES_STANDALONE="true" (e.g. in R Sys.setenv(R_REMOTES_STANDALONE="true")) you can force remotes to operate in standalone mode and use only its internal R implementations. This will allow successful installation of these packages.


remotes uses the following standard R options, see ?options for their details:

download.file.method for the default download method. See ?download.file.

pkgType for the package type (source or binary, see manual) to install, download or look up dependencies for.

repos for the locations of the user's standard CRAN(-like) repositories.

It also uses some remotes specific options:

BioC_git for the URL of the default Bioconductor git mirror.

BioC_mirror for the URL of the Bioconductor mirror.

unzip for the path of the external unzip program.

Environment variables

The BITBUCKET_USER and BITBUCKET_PASSWORD environment variables are used for the default Bitbucket user name and password, in install_bitbucket()

The GITHUB_PAT environment variable is used as the default GitHub personal access token for all GitHub API queries.

The R_BIOC_MIRROR environment variable can be used to specify an alternative Bioconductor mirror. (The BioC_mirror option takes precedence over this.)

The R_BIOC_VERSION environment variable can be used to force a Bioconductor version.

The R_REMOTES_UPGRADE environment variable can be used to set a default preferred value for the upgrade = argument accepted by the various install_*() functions. For example, you can set R_REMOTES_UPGRADE="always" to upgrade dependent packages without asking the user.

Setting R_REMOTES_STANDALONE="true" forces remotes to work in standalone mode and avoid loading its optional dependencies (curl, git2 and pkgbuild currently. See "Standalone mode" above.

Setting R_REMOTES_NO_ERRORS_FROM_WARNINGS="false" will cause warning messages during calls to install.packages() to become errors. Often warning messages are caused by dependencies failing to install.

Download Details:

Author: r-lib
Source Code: 
License: Unknown, MIT licenses found

#r #git #github #url 

Remotes: install R Packages From GitHub, GitLab, Bitbucket, Git
Nat  Grady

Nat Grady


Usethis: Set Up Commonly Used Components


usethis is a workflow package: it automates repetitive tasks that arise during project setup and development, both for R packages and non-package projects.


Install the released version of usethis from CRAN:


Or install the development version from GitHub with:

# install.packages("devtools")


Most use_*() functions operate on the active project: literally, a directory on your computer. If you’ve just used usethis to create a new package or project, that will be the active project. Otherwise, usethis verifies that current working directory is or is below a valid project directory and that becomes the active project. Use proj_get() or proj_sitrep() to manually query the project and read more in the docs.

A few usethis functions have no strong connections to projects and will expect you to provide a path.

usethis is quite chatty, explaining what it’s doing and assigning you tasks. indicates something usethis has done for you. indicates that you’ll need to do some work yourself.

Below is a quick look at how usethis can help to set up a package. But remember, many usethis functions are also applicable to analytical projects that are not packages.


# Create a new package -------------------------------------------------
path <- file.path(tempdir(), "mypkg")
#> ✔ Creating '/tmp/Rtmp4VMzwK/mypkg/'
#> ✔ Setting active project to '/private/tmp/Rtmp4VMzwK/mypkg'
#> ✔ Creating 'R/'
#> ✔ Writing 'DESCRIPTION'
#> Package: mypkg
#> Title: What the Package Does (One Line, Title Case)
#> Version:
#> Authors@R (parsed):
#>     * First Last <> [aut, cre] (YOUR-ORCID-ID)
#> Description: What the package does (one paragraph).
#> License: `use_mit_license()`, `use_gpl3_license()` or friends to pick a
#>     license
#> Encoding: UTF-8
#> Roxygen: list(markdown = TRUE)
#> RoxygenNote: 7.2.0
#> ✔ Writing 'NAMESPACE'
#> ✔ Setting active project to '<no active project>'
# only needed since this session isn't interactive
#> ✔ Setting active project to '/private/tmp/Rtmp4VMzwK/mypkg'
#> ✔ Changing working directory to '/tmp/Rtmp4VMzwK/mypkg/'

# Modify the description ----------------------------------------------
use_mit_license("My Name")
#> ✔ Setting License field in DESCRIPTION to 'MIT + file LICENSE'
#> ✔ Writing 'LICENSE'
#> ✔ Writing ''
#> ✔ Adding '^LICENSE\\.md$' to '.Rbuildignore'

use_package("ggplot2", "Suggests")
#> ✔ Adding 'ggplot2' to Suggests field in DESCRIPTION
#> • Use `requireNamespace("ggplot2", quietly = TRUE)` to test if package is installed
#> • Then directly refer to functions with `ggplot2::fun()`

# Set up other files -------------------------------------------------
#> ✔ Writing ''
#> • Update '' to include installation instructions.

#> ✔ Writing ''

#> ✔ Adding 'testthat' to Suggests field in DESCRIPTION
#> ✔ Setting Config/testthat/edition field in DESCRIPTION to '3'
#> ✔ Creating 'tests/testthat/'
#> ✔ Writing 'tests/testthat.R'
#> ✔ Writing 'tests/testthat/test-my-test.R'
#> • Edit 'tests/testthat/test-my-test.R'

x <- 1
y <- 2
use_data(x, y)
#> ✔ Adding 'R' to Depends field in DESCRIPTION
#> ✔ Creating 'data/'
#> ✔ Setting LazyData to 'true' in 'DESCRIPTION'
#> ✔ Saving 'x', 'y' to 'data/x.rda', 'data/y.rda'
#> • Document your data (see '')

# Use git ------------------------------------------------------------
#> ✔ Initialising Git repo
#> ✔ Adding '.Rproj.user', '.Rhistory', '.Rdata', '.httr-oauth', '.DS_Store' to '.gitignore'

Code of Conduct

Please note that the usethis project is released with a Contributor Code of Conduct. By contributing to this project, you agree to abide by its terms.

Download Details:

Author: r-lib
Source Code: 
License: Unknown, MIT licenses found

#r #github #setup 

Usethis: Set Up Commonly Used Components
坂本  篤司

坂本 篤司


React アプリを GitHub ページにデプロイする

GitHub Pagesを使用して静的 Web サイトをデプロイするシンプルさは、React アプリケーションに簡単に移行できるプロセスです。わずか数ステップで、React アプリを GitHub Pages で無料でホストしたり、ビルドして独自のカスタム ドメインやサブドメインにデプロイしたりすることが簡単にできます。

この記事では、React アプリを GitHub Pages にデプロイする方法を探ります。また、静的 Web サイト用に GitHub ページでカスタム ドメインを作成する方法も示します。


GitHub ページとは?

GitHub Pages は、HTML、JavaScript、および CSS ファイルをリポジトリに追加し、ホストされた静的 Web サイトを作成できるようにする GitHub のサービスです。

Web サイトは、GitHub のgithub.ioドメイン (例: または独自のカスタム ドメインでホストできます。React アプリは、同様の方法で GitHub ページでホストできます。

React アプリケーションを GitHub Pages にデプロイする方法

React アプリケーションを GitHub Pages にデプロイするには、次の手順に従います。

  1. React アプリケーションをセットアップする
  2. プロジェクトの GitHub リポジトリを作成する
  3. React アプリを GitHub リポジトリにプッシュする

React アプリケーションのセットアップ

新しい React アプリケーションを作成することから始めましょう。このチュートリアルでは、 を使用しcreate-react-appますが、好みに応じてプロジェクトを設定できます。

コンピューターでターミナルを開き、目的のディレクトリに移動します。このチュートリアルでは、次のようにデスクトップ ディレクトリにプロジェクトをセットアップします。

cd desktop 

以下を使用して React アプリケーションを作成しますcreate-react-app

npx create-react-app "your-project-name"

ほんの数分でcreate-react-app、新しい React アプリケーションのセットアップが完了します!

それでは、次のように、新しく作成された React アプリ プロジェクト ディレクトリに移動しましょう。

cd "your-project-name"

このチュートリアルは、React アプリケーションを GitHub Pages にデプロイする方法のデモンストレーションに限定されているため、追加の変更を加えずに現在のセットアップをそのままにしておきます。

GitHub リポジトリの作成

次のステップは、プロジェクトのファイルとリビジョンを保存するための GitHub リポジトリを作成することです。

GitHub アカウントで、右上の+アイコンをクリックし、プロンプトに従って新しいリポジトリをセットアップします。





React アプリを GitHub リポジトリにプッシュする

GitHub リモート リポジトリが設定されたので、次のステップはプロジェクトで Git を初期化して、変更を追跡し、ローカル開発環境とリモート リポジトリとの同期を維持できるようにすることです。


次のコマンドで Git を初期化します。

git init

コードを GitHub リポジトリにプッシュする

次に、コードをコミットして、GitHub のブランチにプッシュします。これを行うには、新しいリポジトリを作成したときに受け取ったコードをコピーして貼り付けるだけです (上記のリポジトリのスクリーンショットを参照)。

git commit -m "first commit"
git branch -M main
git remote add origin
git push -u origin main

GitHub Pages 依存関係パッケージの追加

次に、gh-pagesプロジェクトにパッケージをインストールします。このパッケージにより、ビルド ファイルをgh-pagesGitHub のブランチに公開し、そこでホストすることができます。

gh-pagesnpm 経由で dev 依存関係としてインストールします。

npm install gh-pages --save-dev

デプロイ スクリプトの追加

package.jsonそれでは、 GitHub リポジトリが React アプリがデプロイされる場所を指すようにファイルを構成しましょう。

predeployまた、deployスクリプトをpackage.jsonファイルに追加する必要があります。スクリプトは、predeployReact アプリケーションをバンドルするために使用されます。deployスクリプトは、バンドルされたファイルを展開します。




"predeploy" : "npm run build",
"deploy" : "gh-pages-d build",




変更をコミットし、コードの更新を GitHub リポジトリにプッシュする

それでは、変更をコミットして、コードをリモート リポジトリにプッシュしましょう。次のようにします。

git add .
git commit -m "setup gh-pages"
git push

以下を実行するだけで、React アプリケーションをデプロイできますnpm run deploy。これにより、React アプリケーションのバンドル バージョンが作成されgh-pages、GitHub のリモート リポジトリのブランチにプッシュされます。

デプロイされた React アプリケーションを表示するには、[設定] タブに移動し、[ページ] メニューをクリックします。デプロイされた React アプリケーションへのリンクが表示されます。


カスタム ドメインの追加

React アプリを GitHub のドメインに無料でデプロイできますが、Github Pages はカスタム サブドメインの Apex ドメインもサポートしています。サブドメインの各タイプがどのように見えるかを示す例を次に示します。

サポートされているカスタム ドメイン
カスタム サブドメイン

今、に移動すると、最近公開された Web サイトが表示されます。ただし、代わりにカスタム サブドメインまたは Apex ドメインを使用することもできます。


GitHub カスタム サブドメインへのデプロイ

  1. 選択したドメイン サービス プロバイダーからドメイン名を購入します (例: NamecheapまたはGoDaddy ) 。
  2. カスタム ドメインを GitHub ページに接続します。これを行うには、 [設定] タブの [ページ] メニューをクリックします。次に、[カスタム ドメイン]フィールドまで下にスクロールし、新しく購入したドメイン名を入力します。これにより、リポジトリのルートにファイルを含むコミットが自動的に作成されますCNAME
    ページ メニュー タブ
  3. CNAMEドメイン サービス プロバイダーのレコードが、デプロイされた Web サイトの GitHub URL を指していることを確認します (この例の場合、。これを行うには、ドメイン サービス プロバイダーのDNS 管理ページに移動し、 GitHub ユーザー名の場所CNAMEを指すレコードを追加します。username.github.iousername

GitHub Apex ドメインへのデプロイ

Apex ドメインにデプロイするには、カスタム サブドメインにデプロイするための最初の 2 つの手順に従いますが、3 番目の手順を以下に置き換えます。

  1. 次のように、ドメイン サービス プロバイダのDNS 管理ページに移動し、Apex ドメインを GitHub Pages IP アドレスにポイントするALIASレコードまたはレコードを追加します。ANAME


GitHub Pages は簡単に使い始めることができ、無料で使用できるため、あらゆるスキル レベルの開発者にとって非常に魅力的なオプションとなっています。

この記事では、GitHub Pages を使用して React アプリを静的 Web サイトに変換する方法を示しました。React アプリを GitHub のドメインとカスタム サブドメインにデプロイする方法を示しました。コードを世界中と簡単に共有する方法を探している場合は、GitHub Pages が最適なオプションです。


#react #github 

React アプリを GitHub ページにデプロイする
曾 俊

曾 俊


将 React 应用程序部署到 GitHub 页面

使用GitHub Pages部署静态网站的简单性是一个可以轻松转移到 React 应用程序的过程。只需几个步骤,就可以轻松地在 GitHub Pages 上免费托管 React 应用程序,或者构建它以部署在您自己的自定义域或子域上。

在本文中,我们将探讨如何在 GitHub Pages 上部署 React 应用程序。我们还将演示如何在 GitHub Pages 上为我们的静态网站创建自定义域。


什么是 GitHub 页面?

GitHub Pages 是 GitHub 的一项服务,可让您将 HTML、JavaScript 和 CSS 文件添加到存储库并创建托管静态网站。

该网站可以托管在 GitHub 的github.io域(例如或您自己的自定义域上。React 应用程序可以以类似的方式托管在 GitHub Pages 上。

如何将 React 应用程序部署到 GitHub Pages

要将 React 应用程序部署到 GitHub Pages,请执行以下步骤:

  1. 设置你的 React 应用程序
  2. 为您的项目创建一个 GitHub 存储库
  3. 将您的 React 应用程序推送到您的 GitHub 存储库

设置 React 应用程序

让我们从创建一个新的 React 应用程序开始。对于本教程,我们将使用create-react-app,但您可以根据自己的喜好设置项目。


cd desktop 

使用以下命令创建一个 React 应用程序create-react-app

npx create-react-app "your-project-name"

只需几分钟,create-react-app就可以完成一个新的 React 应用程序的设置!

现在,让我们导航到新创建的 React 应用项目目录,如下所示:

cd "your-project-name"

本教程仅限于演示如何将 React 应用程序部署到 GitHub Pages,因此我们将保留当前设置,而不进行任何其他更改。

创建 GitHub 存储库

下一步是创建一个 GitHub 存储库来存储我们项目的文件和修订。

在您的 GitHub 帐户中,单击右上角的+图标,然后按照提示设置新存储库。





将 React 应用推送到 GitHub 存储库

既然 GitHub 远程仓库已经设置好了,下一步就是在项目中初始化 Git,这样我们就可以跟踪更改并让我们的本地开发环境与远程仓库保持同步。


使用以下命令初始化 Git:

git init

将代码推送到 GitHub 存储库

现在,我们将提交我们的代码并将其推送到我们在 GitHub 上的分支。为此,只需复制并粘贴创建新存储库时收到的代码(请参阅上面的存储库屏幕截图)。

git commit -m "first commit"
git branch -M main
git remote add origin
git push -u origin main

添加 GitHub Pages 依赖包

接下来,我们将gh-pages在我们的项目中安装该包。该包允许我们将构建文件发布到gh-pagesGitHub 上的一个分支,然后可以在其中托管它们。

gh-pages通过 npm 作为开发依赖项安装:

npm install gh-pages --save-dev


现在,让我们配置package.json文件,以便我们可以将 GitHub 存储库指向将部署 React 应用程序的位置。

我们还需要在文件中添加predeploydeploy脚本package.json。该predeploy脚本用于捆绑 React 应用程序;该deploy脚本部署捆绑的文件。




"predeploy" : "npm run build",
"deploy" : "gh-pages-d build",




提交更改并将代码更新推送到 GitHub 存储库


git add .
git commit -m "setup gh-pages"
git push

我们可以通过简单地运行来部署我们的 React 应用程序:npm run deploy. 这将创建我们的 React 应用程序的捆绑版本,并将其推送到gh-pages我们在 GitHub 上的远程存储库中的一个分支。

要查看我们部署的 React 应用程序,请导航到Settings选项卡并单击Pages菜单。您应该会看到已部署的 React 应用程序的链接。



我们可以免费将我们的 React 应用部署到 GitHub 的域中,但是 Github Pages 也支持自定义子域 Apex 域。以下示例显示了每种类型的子域的外观:


现在,如果我们导航到,我们将看到我们最近发布的网站。但是,我们也可以使用自定义子域或 Apex 域。


部署到 GitHub 自定义子域

  1. 从您选择的域名服务提供商处购买域名(例如NamecheapGoDaddy
  2. 将自定义域连接到 GitHub Pages。为此,请单击“设置”选项卡上的“页面”菜单。接下来,向下滚动到自定义域字段并输入新购买的域名。这将自动在存储库的根目录中创建一个包含文件的提交CNAME
  3. 确保CNAME您的域服务提供商上的记录指向已部署网站的 GitHub URL(在本示例中为。为此,请导航到域服务提供商的DNS 管理CNAME页面并添加一条记录,指出您的 GitHub 用户名username.github.io在哪里username

部署到 GitHub Apex 域

要部署到 Apex 域,请按照前两个步骤部署到自定义子域,但将以下内容替换为第三步:

  1. 导航到域服务提供商的DNS 管理ALIAS页面,并添加一条记录或ANAME将您的 Apex 域指向您的 GitHub Pages IP 地址的记录,如下所示:


GitHub Pages 易于上手且免费使用,对于所有技能水平的开发人员来说都是一个非常有吸引力的选择。

在本文中,我们演示了如何使用 GitHub Pages 将 React 应用程序转换为静态网站。我们展示了如何将 React 应用程序部署到 GitHub 的域以及自定义子域。如果您正在寻找一种与全世界共享代码的简单方法,GitHub Pages 是一个不错的选择。

来源:https ://

#react #github 

将 React 应用程序部署到 GitHub 页面

Implantando Aplicativos React No GitHub Pages

A simplicidade de implantar um site estático com o GitHub Pages é um processo que pode ser facilmente transferido para aplicativos React. Com apenas algumas etapas, é fácil hospedar um aplicativo React no GitHub Pages gratuitamente ou criá-lo para implantar em seu próprio domínio ou subdomínio personalizado.

Neste artigo, exploraremos como implantar aplicativos React no GitHub Pages. Também demonstraremos como criar um domínio personalizado no GitHub Pages para nosso site estático.

Vamos começar!

O que é o GitHub Pages?

O GitHub Pages é um serviço do GitHub que permite adicionar arquivos HTML, JavaScript e CSS a um repositório e criar um site estático hospedado.

O site pode ser hospedado no github.iodomínio do GitHub (por exemplo, ou em seu próprio domínio personalizado. Um aplicativo React pode ser hospedado no GitHub Pages de maneira semelhante.

Como implantar um aplicativo React no GitHub Pages

Para implantar seu aplicativo React no GitHub Pages, siga estas etapas:

  1. Configure seu aplicativo React
  2. Crie um repositório GitHub para seu projeto
  3. Envie seu aplicativo React para seu repositório GitHub

Configurando o aplicativo React

Vamos começar criando um novo aplicativo React . Para este tutorial, estaremos usando, create-react-appmas você pode configurar o projeto como preferir.

Abra o terminal no seu computador e navegue até o seu diretório preferido. Para este tutorial, configuraremos o projeto no diretório da área de trabalho, assim:

cd desktop 

Crie um aplicativo React usando create-react-app:

npx create-react-app "your-project-name"

Em apenas alguns minutos, create-react-appterá terminado de configurar um novo aplicativo React!

Agora, vamos navegar para o diretório do projeto do aplicativo React recém-criado, assim:

cd "your-project-name"

Este tutorial se limita a demonstrar como implantar um aplicativo React no GitHub Pages, portanto, deixaremos a configuração atual como está sem fazer alterações adicionais.

Criando um repositório GitHub

O próximo passo é criar um repositório GitHub para armazenar os arquivos e revisões do nosso projeto.

Na sua conta do GitHub, clique no ícone + no canto superior direito e siga as instruções para configurar um novo repositório.

Ícone de adição

Depois que seu repositório for criado com sucesso, você deverá ver uma página parecida com esta:

Página de configuração rápida

Incrível! Vamos para o próximo passo.

Empurrando o aplicativo React para o repositório GitHub

Agora que o repositório remoto do GitHub está configurado, a próxima etapa é inicializar o Git no projeto para que possamos acompanhar as alterações e manter nosso ambiente de desenvolvimento local sincronizado com o repositório remoto.

Acompanhamento e sincronização de alterações

Inicialize o Git com o seguinte comando:

git init

Empurrando o código para o repositório GitHub

Agora, vamos confirmar nosso código e enviá-lo para nossa ramificação no GitHub. Para fazer isso, basta copiar e colar o código recebido quando você criou um novo repositório (veja a captura de tela do repositório acima).

git commit -m "first commit"
git branch -M main
git remote add origin
git push -u origin main

Adicionando o pacote de dependência do GitHub Pages

Em seguida, instalaremos o gh-pagespacote em nosso projeto. O pacote nos permite publicar arquivos de compilação em uma gh-pagesramificação no GitHub, onde eles podem ser hospedados.

Instale gh-pagescomo uma dependência de desenvolvimento via npm:

npm install gh-pages --save-dev

Adicionando os scripts de implantação

Agora, vamos configurar o package.jsonarquivo para que possamos apontar nosso repositório GitHub para o local onde nosso aplicativo React será implantado.

Também precisaremos adicionar predeploye deployscripts ao package.jsonarquivo. O predeployscript é usado para agrupar o aplicativo React; o deployscript implanta o arquivo empacotado.

No package.jsonarquivo, adicione uma homepagepropriedade que segue esta estrutura:http://{github-username}{repo-name}

Agora, vamos adicionar os scripts.

No package.jsonarquivo, role para baixo até a scriptspropriedade e adicione os seguintes comandos:

"predeploy" : "npm run build",
"deploy" : "gh-pages-d build",

Aqui está uma referência visual:


É isso! Terminamos de configurar o package.jsonarquivo.

Confirmando alterações e enviando atualizações de código para o repositório GitHub

Agora, vamos confirmar nossas alterações e enviar o código para nosso repositório remoto, assim:

git add .
git commit -m "setup gh-pages"
git push

Podemos implantar nosso aplicativo React simplesmente executando: npm run deploy. Isso criará uma versão em pacote do nosso aplicativo React e o enviará para uma gh-pagesramificação em nosso repositório remoto no GitHub.

Para visualizar nosso aplicativo React implantado, navegue até a guia Configurações e clique no menu Páginas . Você deve ver um link para o aplicativo React implantado.

Menu de páginas

Adicionando um domínio personalizado

Podemos implantar nosso aplicativo React no domínio do GitHub gratuitamente, mas o Github Pages também suporta domínios Apex de subdomínios personalizados. Aqui estão alguns exemplos que mostram a aparência de cada tipo de subdomínio:

Domínio personalizado compatívelExemplo
Domínio do

No momento, se navegarmos para veremos nosso site publicado recentemente. Mas também podemos usar um subdomínio personalizado ou um domínio Apex.

Aqui estão os passos para configurá-los:

Como implantar em um subdomínio personalizado do GitHub

  1. Compre um nome de domínio de um provedor de serviços de domínio de sua escolha (por exemplo, Namecheap ou GoDaddy )
  2. Conecte o domínio personalizado ao GitHub Pages. Para fazer isso, clique no menu Páginas na guia Configurações . Em seguida, role para baixo até o campo Domínio personalizado e insira o nome de domínio recém-adquirido. Isso criará automaticamente um commit com um CNAMEarquivo na raiz do seu repositório
    Guia do Menu Páginas
  3. Verifique se o CNAMEregistro em seu provedor de serviços de domínio aponta para a URL do GitHub do site implantado (no caso deste exemplo, Para fazer isso, navegue até a página de gerenciamento de DNS do provedor de serviços de domínio e adicione um CNAMEregistro que aponte para username.github.ioonde usernameestá seu nome de usuário do GitHub

Como implantar em um domínio do GitHub Apex

Para implantar em um domínio do Apex, siga as duas primeiras etapas para implantar em um subdomínio personalizado, mas substitua a terceira etapa abaixo:

  1. Navegue até a página de gerenciamento de DNS do provedor de serviços de domínio e adicione um ALIASregistro ou ANAMEregistro que aponte seu domínio do Apex para seus endereços IP do GitHub Pages, conforme mostrado:


O GitHub Pages é fácil de começar e de uso gratuito, tornando-o uma opção muito atraente para desenvolvedores de todos os níveis de habilidade.

Neste artigo, demonstramos como usar o GitHub Pages para converter um aplicativo React em um site estático. Mostramos como implantar o aplicativo React no domínio do GitHub, bem como em um subdomínio personalizado. Se você está procurando uma maneira fácil de compartilhar seu código com o mundo, o GitHub Pages é uma ótima opção.


#react #github 

Implantando Aplicativos React No GitHub Pages
Thierry  Perret

Thierry Perret


Déploiement Des Applications React Sur Les Pages GitHub

La simplicité de déploiement d'un site Web statique avec GitHub Pages est un processus qui peut être facilement transféré aux applications React. En quelques étapes seulement, il est facile d'héberger gratuitement une application React sur les pages GitHub ou de la créer pour la déployer sur votre propre domaine ou sous-domaine personnalisé.

Dans cet article, nous allons explorer comment déployer des applications React sur les pages GitHub. Nous montrerons également comment créer un domaine personnalisé sur les pages GitHub pour notre site Web statique.


Qu'est-ce qu'une page GitHub ?

GitHub Pages est un service de GitHub qui vous permet d'ajouter des fichiers HTML, JavaScript et CSS à un référentiel et de créer un site Web statique hébergé.

Le site Web peut être hébergé sur le domaine de GitHub exemple, ou sur votre propre domaine personnalisé. Une application React peut être hébergée sur les pages GitHub de la même manière.

Comment déployer une application React sur les pages GitHub

Pour déployer votre application React sur les pages GitHub, suivez ces étapes :

  1. Configurez votre application React
  2. Créez un dépôt GitHub pour votre projet
  3. Poussez votre application React vers votre référentiel GitHub

Paramétrage de l'application React

Commençons par créer une nouvelle application React . Pour ce didacticiel, nous utiliserons create-react-appmais vous pouvez configurer le projet comme vous le souhaitez.

Ouvrez le terminal sur votre ordinateur et accédez à votre répertoire préféré. Pour ce tutoriel, nous allons configurer le projet dans le répertoire du bureau, comme ceci :

cd desktop 

Créez une application React en utilisant create-react-app:

npx create-react-app "your-project-name"

En quelques minutes, create-react-appvous aurez fini de configurer une nouvelle application React !

Maintenant, naviguons dans le répertoire du projet d'application React nouvellement créé, comme ceci :

cd "your-project-name"

Ce didacticiel se limite à montrer comment déployer une application React sur les pages GitHub. Nous laisserons donc la configuration actuelle telle quelle sans apporter de modifications supplémentaires.

Création d'un référentiel GitHub

L'étape suivante consiste à créer un référentiel GitHub pour stocker les fichiers et les révisions de notre projet.

Dans votre compte GitHub, cliquez sur l' icône + en haut à droite et suivez les invites pour configurer un nouveau référentiel.

Icône Plus

Une fois votre référentiel créé avec succès, vous devriez voir une page qui ressemble à ceci :

Page de configuration rapide

Impressionnant! Passons à l'étape suivante.

Pousser l'application React vers le référentiel GitHub

Maintenant que le référentiel distant GitHub est configuré, l'étape suivante consiste à initialiser Git dans le projet afin que nous puissions suivre les modifications et synchroniser notre environnement de développement local avec le référentiel distant.

Suivi et synchronisation des modifications

Initialisez Git avec la commande suivante :

git init

Pousser le code vers le référentiel GitHub

Maintenant, nous allons valider notre code et le pousser vers notre branche sur GitHub. Pour ce faire, copiez et collez simplement le code reçu lors de la création d'un nouveau référentiel (voir la capture d'écran du référentiel ci-dessus).

git commit -m "first commit"
git branch -M main
git remote add origin
git push -u origin main

Ajout du package de dépendance GitHub Pages

Ensuite, nous allons installer le gh-pagespackage dans notre projet. Le package nous permet de publier des fichiers de construction dans une gh-pagesbranche sur GitHub, où ils peuvent ensuite être hébergés.

Installer gh-pagesen tant que dépendance de développement via npm :

npm install gh-pages --save-dev

Ajout des scripts de déploiement

Maintenant, configurons le package.jsonfichier afin que nous puissions pointer notre référentiel GitHub vers l'emplacement où notre application React sera déployée.

Nous devrons également ajouter des scripts predeployet au fichier. Le script est utilisé pour regrouper l'application React ; le script déploie le fichier groupé.deploypackage.jsonpredeploydeploy

Dans le package.jsonfichier, ajoutez une homepagepropriété qui suit cette structure :http://{github-username}{repo-name}

Maintenant, ajoutons les scripts.

Dans le package.jsonfichier, faites défiler jusqu'à la scriptspropriété et ajoutez les commandes suivantes :

"predeploy" : "npm run build",
"deploy" : "gh-pages-d build",

Voici une référence visuelle :


C'est ça! Nous avons terminé la configuration du package.jsonfichier.

Validation des modifications et transmission des mises à jour du code au référentiel GitHub

Maintenant, commitons nos modifications et poussons le code vers notre référentiel distant, comme ceci :

git add .
git commit -m "setup gh-pages"
git push

Nous pouvons déployer notre application React en lançant simplement : npm run deploy. Cela créera une version groupée de notre application React et la poussera vers une gh-pagesbranche de notre référentiel distant sur GitHub.

Pour afficher notre application React déployée, accédez à l' onglet Paramètres et cliquez sur le menu Pages . Vous devriez voir un lien vers l'application React déployée.

Menu des pages

Ajouter un domaine personnalisé

Nous pouvons déployer gratuitement notre application React sur le domaine de GitHub, mais les pages Github prennent également en charge les sous-domaines personnalisés des domaines Apex. Voici des exemples montrant à quoi ressemble chaque type de sous-domaine :

Domaine personnalisé pris en chargeExemple
Sous-domaine personnalisé
Domaine supé

À l'heure actuelle, si nous naviguons vers , nous verrons notre site Web récemment publié. Mais nous pourrions également utiliser un sous-domaine personnalisé ou un domaine Apex à la place.

Voici les étapes pour les configurer :

Déploiement sur un sous-domaine personnalisé GitHub

  1. Achetez un nom de domaine auprès d'un fournisseur de services de domaine de votre choix (par exemple, Namecheap ou GoDaddy )
  2. Connectez le domaine personnalisé aux pages GitHub. Pour ce faire, cliquez sur le menu Pages de l' onglet Paramètres . Ensuite, faites défiler jusqu'au champ Domaine personnalisé et entrez le nom de domaine que vous venez d'acheter. Cela créera automatiquement un commit avec un CNAMEfichier à la racine de votre référentiel
    Onglet Menu Pages
  3. Assurez-vous que l' CNAMEenregistrement de votre fournisseur de services de domaine pointe vers l'URL GitHub du site Web déployé (dans le cas de cet exemple, Pour ce faire, accédez à la page de gestion DNS du fournisseur de services de domaine et ajoutez un CNAMEenregistrement indiquant username.github.iousernamese trouve votre nom d'utilisateur GitHub.

Déploiement sur un domaine GitHub Apex

Pour déployer sur un domaine Apex, suivez les deux premières étapes de déploiement sur un sous-domaine personnalisé, mais remplacez la troisième étape par ce qui suit :

  1. Accédez à la page de gestion DNS du fournisseur de services de domaine et ajoutez un ALIASenregistrement ou un ANAMEenregistrement qui pointe votre domaine Apex vers vos adresses IP GitHub Pages, comme indiqué :
  • 185,199,111,153


GitHub Pages est facile à démarrer et gratuit à utiliser, ce qui en fait une option très attrayante pour les développeurs de tous niveaux.

Dans cet article, nous avons montré comment utiliser les pages GitHub pour convertir une application React en un site Web statique. Nous avons montré comment déployer l'application React sur le domaine de GitHub, ainsi que sur un sous-domaine personnalisé. Si vous cherchez un moyen simple de partager votre code avec le monde, GitHub Pages est une excellente option.

Source :

#react #github 

Déploiement Des Applications React Sur Les Pages GitHub
Hoang  Ha

Hoang Ha


Triển Khai ứng Dụng React Cho Trang GitHub

Sự đơn giản của việc triển khai một trang web tĩnh với GitHub Pages là một quá trình có thể dễ dàng chuyển sang các ứng dụng React. Chỉ với một vài bước, thật dễ dàng để lưu trữ ứng dụng React trên GitHub Pages miễn phí hoặc xây dựng nó để triển khai trên miền tùy chỉnh hoặc miền phụ của riêng bạn.

Trong bài viết này, chúng ta sẽ khám phá cách triển khai ứng dụng React trên Trang GitHub. Chúng tôi cũng sẽ trình bày cách tạo miền tùy chỉnh trên Trang GitHub cho trang web tĩnh của chúng tôi.

Bắt đầu nào!

Trang GitHub là gì?

GitHub Pages là một dịch vụ của GitHub cho phép bạn thêm các tệp HTML, JavaScript và CSS vào kho lưu trữ và tạo một trang web tĩnh được lưu trữ.

github.ioTrang web có thể được lưu trữ trên miền của GitHub (ví dụ hoặc trên miền tùy chỉnh của riêng bạn. Ứng dụng React có thể được lưu trữ trên Trang GitHub theo cách tương tự.

Cách triển khai ứng dụng React cho Trang GitHub

Để triển khai ứng dụng React của bạn cho Trang GitHub, hãy làm theo các bước sau:

  1. Thiết lập ứng dụng React của bạn
  2. Tạo kho lưu trữ GitHub cho dự án của bạn
  3. Đẩy ứng dụng React của bạn vào kho lưu trữ GitHub của bạn

Thiết lập ứng dụng React

Hãy bắt đầu bằng cách tạo một ứng dụng React mới . Đối với hướng dẫn này, chúng tôi sẽ sử dụng create-react-appnhưng bạn có thể thiết lập dự án theo cách bạn muốn.

Mở thiết bị đầu cuối trên máy tính của bạn và điều hướng đến thư mục ưa thích của bạn. Đối với hướng dẫn này, chúng tôi sẽ thiết lập dự án trong thư mục máy tính để bàn, như sau:

cd desktop 

Tạo một ứng dụng React bằng cách sử dụng create-react-app:

npx create-react-app "your-project-name"

Chỉ trong vài phút, create-react-appsẽ hoàn tất việc thiết lập một ứng dụng React mới!

Bây giờ, hãy điều hướng đến thư mục dự án ứng dụng React mới được tạo, như sau:

cd "your-project-name"

Hướng dẫn này chỉ giới hạn trong việc trình bày cách triển khai ứng dụng React cho Trang GitHub, vì vậy chúng tôi sẽ giữ nguyên thiết lập hiện tại mà không thực hiện bất kỳ thay đổi bổ sung nào.

Tạo kho lưu trữ GitHub

Bước tiếp theo là tạo một kho lưu trữ GitHub để lưu trữ các tệp và bản sửa đổi của dự án của chúng tôi.

Trong tài khoản GitHub của bạn, nhấp vào biểu tượng + ở trên cùng bên phải và làm theo lời nhắc để thiết lập kho lưu trữ mới.

Biểu tượng dấu cộng

Sau khi kho lưu trữ của bạn đã được tạo thành công, bạn sẽ thấy một trang giống như sau:

Trang thiết lập nhanh

Đáng kinh ngạc! Hãy tiến hành bước tiếp theo.

Đẩy ứng dụng React vào kho lưu trữ GitHub

Bây giờ kho lưu trữ từ xa GitHub đã được thiết lập, bước tiếp theo là khởi tạo Git trong dự án để chúng tôi có thể theo dõi các thay đổi và giữ cho môi trường phát triển cục bộ của chúng tôi đồng bộ với kho lưu trữ từ xa.

Theo dõi và đồng bộ hóa các thay đổi

Khởi tạo Git bằng lệnh sau:

git init

Đẩy mã đến repo GitHub

Bây giờ, chúng tôi sẽ cam kết mã của mình và đẩy nó đến chi nhánh của chúng tôi trên GitHub. Để thực hiện việc này, chỉ cần sao chép và dán mã nhận được khi bạn tạo một kho lưu trữ mới (xem ảnh chụp màn hình kho lưu trữ ở trên).

git commit -m "first commit"
git branch -M main
git remote add origin
git push -u origin main

Thêm gói phụ thuộc GitHub Pages

Tiếp theo, chúng tôi sẽ cài đặt gh-pagesgói trong dự án của chúng tôi. Gói này cho phép chúng tôi xuất bản các tệp xây dựng thành một gh-pagesnhánh trên GitHub, nơi chúng có thể được lưu trữ sau đó.

Cài đặt gh-pagesdưới dạng phụ thuộc nhà phát triển qua npm:

npm install gh-pages --save-dev

Thêm các tập lệnh triển khai

Bây giờ, hãy cấu hình package.jsontệp để chúng ta có thể trỏ kho lưu trữ GitHub của mình đến vị trí nơi ứng dụng React của chúng ta sẽ được triển khai.

Chúng tôi cũng sẽ cần thêm predeploydeploycác tập lệnh vào package.jsontệp. Tập predeploylệnh được sử dụng để đóng gói ứng dụng React; tập deploylệnh triển khai tệp được đóng gói.

Trong package.jsontệp, hãy thêm một thuộc homepagetính tuân theo cấu trúc này:http://{github-username}{repo-name}

Bây giờ, hãy thêm các tập lệnh.

Trong package.jsontệp, cuộn xuống thuộc scriptstính và thêm các lệnh sau:

"predeploy" : "npm run build",
"deploy" : "gh-pages-d build",

Đây là một tài liệu tham khảo trực quan:


Đó là nó! Chúng tôi đã hoàn tất việc định cấu hình package.jsontệp.

Cam kết các thay đổi và đẩy các bản cập nhật mã lên repo GitHub

Bây giờ, hãy cam kết các thay đổi của chúng tôi và đẩy mã vào kho lưu trữ từ xa của chúng tôi, như sau:

git add .
git commit -m "setup gh-pages"
git push

Chúng ta có thể triển khai ứng dụng React của mình bằng cách chạy npm run deploy:. Thao tác này sẽ tạo một phiên bản gói ứng dụng React của chúng tôi và đẩy nó đến một gh-pageschi nhánh trong kho lưu trữ từ xa của chúng tôi trên GitHub.

Để xem ứng dụng React đã triển khai của chúng tôi, hãy điều hướng đến tab Cài đặt và nhấp vào menu Trang . Bạn sẽ thấy một liên kết đến ứng dụng React đã triển khai.

Menu trang

Thêm miền tùy chỉnh

Chúng tôi có thể triển khai ứng dụng React của mình cho miền của GitHub miễn phí, nhưng Github Pages cũng hỗ trợ miền phụ tùy chỉnh miền Apex. Dưới đây là các ví dụ cho thấy từng loại tên miền phụ trông như thế nào:

Miền tùy chỉnh được hỗ trợThí dụ
wwwtên miền phụ
Miền phụ tùy chỉ

Ngay bây giờ, nếu chúng tôi điều hướng đến , chúng tôi sẽ thấy trang web được xuất bản gần đây của chúng tôi. Tuy nhiên, chúng tôi cũng có thể sử dụng miền phụ tùy chỉnh hoặc miền Apex để thay thế.

Dưới đây là các bước để thiết lập:

Triển khai cho miền phụ tùy chỉnh GitHub

  1. Mua tên miền từ nhà cung cấp dịch vụ tên miền mà bạn chọn (ví dụ: Namecheap hoặc GoDaddy )
  2. Kết nối miền tùy chỉnh với Trang GitHub. Để làm như vậy, hãy nhấp vào menu Trang trên tab Cài đặt . Tiếp theo, cuộn xuống trường Tên miền tùy chỉnh và nhập tên miền mới mua. Điều này sẽ tự động tạo một cam kết với một CNAMEtệp ở gốc của kho lưu trữ của bạn
    Tab Trình đơn Trang
  3. Đảm bảo CNAMEbản ghi trên nhà cung cấp dịch vụ miền của bạn trỏ đến URL GitHub của trang web được triển khai (trong trường hợp của ví dụ này là Để làm như vậy, hãy điều hướng đến trang quản lý DNS của nhà cung cấp dịch vụ miền và thêm CNAMEbản ghi trỏ đến username.github.iođâu usernamelà tên người dùng GitHub của bạn

Triển khai miền GitHub Apex

Để triển khai cho miền Apex, hãy làm theo hai bước đầu tiên để triển khai cho miền phụ tùy chỉnh nhưng thay thế các bước dưới đây cho bước thứ ba:

  1. Điều hướng đến trang quản lý DNS của nhà cung cấp dịch vụ miền và thêm ALIASbản ghi hoặc ANAMEbản ghi trỏ miền Apex của bạn đến các địa chỉ IP GitHub Pages của bạn, như được hiển thị:

Sự kết luận

GitHub Pages rất dễ bắt đầu và sử dụng miễn phí, làm cho nó trở thành một lựa chọn rất hấp dẫn cho các nhà phát triển ở mọi cấp độ kỹ năng.

Trong bài viết này, chúng tôi đã trình bày cách sử dụng GitHub Pages để chuyển đổi một ứng dụng React thành một trang web tĩnh. Chúng tôi đã chỉ ra cách triển khai ứng dụng React cho miền của GitHub, cũng như miền phụ tùy chỉnh. Nếu bạn đang tìm kiếm một cách dễ dàng để chia sẻ mã của mình với mọi người, thì GitHub Pages là một lựa chọn tuyệt vời.


#react #github 

Triển Khai ứng Dụng React Cho Trang GitHub

Implementación De Aplicaciones React En Páginas De GitHub

La simplicidad de implementar un sitio web estático con GitHub Pages es un proceso que se puede transferir fácilmente a las aplicaciones React. Con solo unos pocos pasos, es fácil alojar una aplicación React en Páginas de GitHub de forma gratuita o crearla para implementarla en su propio dominio o subdominio personalizado.

En este artículo, exploraremos cómo implementar aplicaciones React en páginas de GitHub. También demostraremos cómo crear un dominio personalizado en las páginas de GitHub para nuestro sitio web estático.


¿Qué es Páginas de GitHub?

GitHub Pages es un servicio de GitHub que le permite agregar archivos HTML, JavaScript y CSS a un repositorio y crear un sitio web estático alojado.

El sitio web se puede alojar en el github.iodominio de GitHub (p. ej., o en su propio dominio personalizado. Una aplicación de React se puede alojar en páginas de GitHub de manera similar.

Cómo implementar una aplicación React en las páginas de GitHub

Para implementar su aplicación React en GitHub Pages, siga estos pasos:

  1. Configura tu aplicación React
  2. Crea un repositorio de GitHub para tu proyecto
  3. Empuje su aplicación React a su repositorio de GitHub

Configuración de la aplicación React

Comencemos creando una nueva aplicación React . Para este tutorial, lo usaremos, create-react-apppero puede configurar el proyecto como prefiera.

Abra la terminal en su computadora y navegue a su directorio preferido. Para este tutorial, configuraremos el proyecto en el directorio del escritorio, así:

cd desktop 

Cree una aplicación React usando create-react-app:

npx create-react-app "your-project-name"

¡ En solo unos minutos, create-react-apphabrá terminado de configurar una nueva aplicación React!

Ahora, naveguemos al directorio del proyecto de la aplicación React recién creado, así:

cd "your-project-name"

Este tutorial se limita a demostrar cómo implementar una aplicación React en las páginas de GitHub, por lo que dejaremos la configuración actual sin realizar ningún cambio adicional.

Creación de un repositorio de GitHub

El siguiente paso es crear un repositorio de GitHub para almacenar los archivos y revisiones de nuestro proyecto.

En su cuenta de GitHub, haga clic en el ícono + en la esquina superior derecha y siga las indicaciones para configurar un nuevo repositorio.

Ícono más

Después de que su repositorio se haya creado con éxito, debería ver una página similar a esta:

Página de configuración rápida

¡Impresionante! Pasemos al siguiente paso.

Empujando la aplicación React al repositorio de GitHub

Ahora que el repositorio remoto de GitHub está configurado, el siguiente paso es inicializar Git en el proyecto para que podamos realizar un seguimiento de los cambios y mantener nuestro entorno de desarrollo local sincronizado con el repositorio remoto.

Seguimiento y sincronización de cambios

Inicializa Git con el siguiente comando:

git init

Empujando el código al repositorio de GitHub

Ahora, confirmaremos nuestro código y lo enviaremos a nuestra rama en GitHub. Para hacer esto, simplemente copie y pegue el código recibido cuando creó un nuevo repositorio (vea la captura de pantalla del repositorio anterior).

git commit -m "first commit"
git branch -M main
git remote add origin
git push -u origin main

Agregar el paquete de dependencia de Páginas de GitHub

A continuación, instalaremos el gh-pagespaquete en nuestro proyecto. El paquete nos permite publicar archivos de compilación en una gh-pagesrama en GitHub, donde luego se pueden alojar.

Instale gh-pagescomo una dependencia de desarrollo a través de npm:

npm install gh-pages --save-dev

Agregar los scripts de implementación

Ahora, configuremos el package.jsonarchivo para que podamos apuntar nuestro repositorio de GitHub a la ubicación donde se implementará nuestra aplicación React.

También necesitaremos agregar predeployy deployscripts al package.jsonarchivo. El predeployscript se usa para agrupar la aplicación React; el deployscript implementa el archivo incluido.

En el package.jsonarchivo, agregue una homepagepropiedad que siga esta estructura:http://{github-username}{repo-name}

Ahora, agreguemos los scripts.

En el package.jsonarchivo, desplácese hacia abajo hasta la scriptspropiedad y agregue los siguientes comandos:

"predeploy" : "npm run build",
"deploy" : "gh-pages-d build",

Aquí hay una referencia visual:


¡Eso es todo! Hemos terminado de configurar el package.jsonarchivo.

Confirmar cambios y enviar actualizaciones de código al repositorio de GitHub

Ahora, confirmemos nuestros cambios y empujemos el código a nuestro repositorio remoto, así:

git add .
git commit -m "setup gh-pages"
git push

Podemos implementar nuestra aplicación React simplemente ejecutando: npm run deploy. Esto creará una versión empaquetada de nuestra aplicación React y la enviará a una gh-pagesrama en nuestro repositorio remoto en GitHub.

Para ver nuestra aplicación React implementada, vaya a la pestaña Configuración y haga clic en el menú Páginas . Debería ver un enlace a la aplicación React implementada.

Menú de páginas

Agregar un dominio personalizado

Podemos implementar nuestra aplicación React en el dominio de GitHub de forma gratuita, pero Github Pages también admite subdominios personalizados de dominios de Apex. Aquí hay ejemplos que muestran cómo se ve cada tipo de subdominio:

Dominio personalizado admitidoEjemplo
dominio de vé

En este momento, si navegamos a veremos nuestro sitio web publicado recientemente. Pero también podríamos usar un subdominio personalizado o un dominio Apex en su lugar.

Estos son los pasos para configurarlos:

Implementación en un subdominio personalizado de GitHub

  1. Compre un nombre de dominio de un proveedor de servicios de dominio de su elección (por ejemplo, Namecheap o GoDaddy )
  2. Conecta el dominio personalizado a las páginas de GitHub. Para hacerlo, haga clic en el menú Páginas en la pestaña Configuración . A continuación, desplácese hacia abajo hasta el campo Dominio personalizado e ingrese el nombre de dominio recién adquirido. Esto creará automáticamente una confirmación con un CNAMEarchivo en la raíz de su repositorio
    Pestaña Menú Páginas
  3. Asegúrese de que el CNAMEregistro en su proveedor de servicios de dominio apunte a la URL de GitHub del sitio web implementado (en el caso de este ejemplo, Para hacerlo, navegue a la página de administración de DNS del proveedor de servicios de dominio y agregue un CNAMEregistro que apunte a username.github.iodónde usernameestá su nombre de usuario de GitHub.

Implementación en un dominio Apex de GitHub

Para implementar en un dominio de Apex, siga los dos primeros pasos para implementar en un subdominio personalizado, pero sustituya el siguiente por el tercer paso:

  1. Navegue a la página de administración de DNS del proveedor de servicios de dominio y agregue un ALIASregistro o ANAMEregistro que dirija su dominio de Apex a sus direcciones IP de Páginas de GitHub, como se muestra:


GitHub Pages es fácil de usar y de uso gratuito, por lo que es una opción muy atractiva para los desarrolladores de todos los niveles.

En este artículo, demostramos cómo usar GitHub Pages para convertir una aplicación React en un sitio web estático. Mostramos cómo implementar la aplicación React en el dominio de GitHub, así como en un subdominio personalizado. Si está buscando una manera fácil de compartir su código con el mundo, Páginas de GitHub es una excelente opción.


#react #github 

Implementación De Aplicaciones React En Páginas De GitHub

Deploying React apps to GitHub Pages

The simplicity of deploying a static website with GitHub Pages is a process that can be easily transferred to React applications. With just a few steps, it’s easy to host a React app on GitHub Pages for free or build it to deploy on your own custom domain or subdomain.

In this article, we’ll explore how to deploy React apps on GitHub Pages. We’ll also demonstrate how to create a custom domain on GitHub Pages for our static website.

Let’s get started!

See more at:

#react #github 

Deploying React apps to GitHub Pages
Dexter  Goodwin

Dexter Goodwin


Semantic-release-action: GitHub Action for Running Semantic-release


GitHub Action for running semantic-release. Respects any semantic-release configuration file in your repo or the release prop in your package.json. Exports environment variables for you to use in subsequent actions containing version numbers.


See action.yml.

Referencing the major version is (recommended by GitHub).

  # Reference the major version of a release
  - uses: codfish/semantic-release-action@v2
  # Reference a specific commit
  - uses: codfish/semantic-release-action@c4074285a1651e4fecab9c14974d5e01b4625edf
  # Reference a minor version of a release
  - uses: codfish/semantic-release-action@v1.10
  # Reference a branch
  - uses: codfish/semantic-release-action@master

Note: Whenever you use a custom docker-based GitHub Action like this one, you may notice in your run logs, one of the first steps you'll see will be GA building the image for you. You can speed up runs by pulling pre-built docker images instead of making GitHub Actions build them on every run.

  # Reference a docker image from GitHub Container Registry
  - uses: docker://
  # Reference a docker image from Dockerhub
  - uses: docker://codfish/semantic-release-action:v2

If you're security conscious, you can pin the docker image down to a specific digest instead of using an image tag, which is a mutable reference.

  # Reference a docker image from GitHub Container Registry (example for v2.0.0)
  - uses: docker://

Inspect the image version you want here to find the digest. If you prefer pulling from Docker Hub, check here.

Basic Usage

  - uses: actions/checkout@v2

  - uses: codfish/semantic-release-action@v2
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

Using output variables set by semantic-release-action:

  - uses: actions/checkout@v2

  # you'll need to add an `id` in order to access output variables
  - uses: codfish/semantic-release-action@v2
    id: semantic
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

  - run: echo ${{ steps.semantic.outputs.release-version }}

  - run: echo "$OUTPUTS"
      OUTPUTS: ${{ toJson(steps.semantic.outputs) }}

  - uses: codfish/some-other-action@v1
      release-version: ${{ steps.semantic.outputs.release-version }}

Example: Only run an action if a new version was created.

  - uses: actions/checkout@v2

  # you'll need to add an `id` in order to access output variables
  - uses: codfish/semantic-release-action@v2
    id: semantic
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

  - name: docker push version
    if: == 'true'
    run: |
      docker tag some-image some-image:$TAG
      docker push some-image:$TAG

Using environment variables set by semantic-release-action:

  - uses: actions/checkout@v2

  - uses: codfish/semantic-release-action@v2
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

  - run: |
      echo $RELEASE_MAJOR
      echo $RELEASE_MINOR
      echo $RELEASE_PATCH

If you're not publishing to npm and only want to use this action for GitHub releases, the easiest approach would simply be to add "private": true, to your package.json.


It's fairly easy to run semantic-release as a "host action," aka something that runs directly on the VM.

  - run: npx semantic-release
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

If you're just publishing a node package, then this could still work well for you. The problem I found with this is when I was in projects where I had subsequent steps/actions in which I wanted to know whether a new version was cut.

Use Case: For instance, in an application where I'm using semantic-release to manage GitHub releases, but also building and pushing docker images. Dockerhub has a nice GitHub integration to handle this for us, but some other registries do not. If I need to cut a new release, then update a docker registry by adding a new tagged build, I'll want to run semantic-release and then build a docker image, tag it with a version and push it up. In my case I like to push up tags for latest, the semver (i.e. v1.8.3), and just the major the version (i.e. v1).

I want to know 1) if semantic-release cut a new version and 2) what the version is.

There's a number of ways to handle this, but the most elegant way I found to do it was to abstract it into it's own custom action. It abstracts away whatever logic you need to figure out what that new release number is.

This also scales well, just in case I want to add some flexibility and functionality to this action, I can easily leverage it across any project.


You can pass in semantic-release configuration options via GitHub Action inputs using with.

It's important to note, NONE of these inputs are required. Semantic release has a default configuration that it will use if you don't provide any.

Also of note, if you'd like to override the default configuration and you'd rather not use the inputs here, the action will automatically use any semantic-release configuration defined in your repo (.releaserc, release.config.js, release prop in package.json)

Note: Each input will take precedence over options configured in the configuration file and shareable configurations.

Input VariableTypeDescription
branchesArray, String, ObjectThe branches on which releases should happen.
pluginsArrayDefine the list of plugins to use. Plugins will run in series, in the order defined, for each steps if they implement it
extendsArray, StringList of modules or file paths containing a shareable configuration.
additional_packagesArray, StringDefine a list of additional plugins/configurations (official or community) to install. Use this if you 1) use any plugins other than the defaults, which are already installed along with semantic-release or 2) want to extend from a shareable configuration.
dry_runBooleanThe objective of the dry-run mode is to get a preview of the pending release. Dry-run mode skips the following steps: prepare, publish, success and fail.
repository_urlStringThe git repository URL
tag_formatStringThe Git tag format used by semantic-release to identify releases.

Note: Any package specified in extends or additional_packages will be installed automatically for you as a convenience, allowing you to use this action without adding new dependencies to your application or install deps in a separate action step.

Note: additional_packages won't get used automatically, setting this variable will just install them so you can use them. You'll need to actually list them in your plugins and/or extends configuration for semantic-release to use them.

Note: The branch input is DEPRECATED. Will continue to be supported for v1. Use branches instead. Previously used in semantic-release v15 to set a single branch on which releases should happen.

Example with all inputs

  - run: codfish/semantic-release-action@v2
      dry_run: true
      branches: |
            name: 'beta',
            prerelease: true
            name: 'alpha',
            prerelease: true
      tag_format: 'v${version}'
      extends: '@semantic-release/apm-config'
      additional_packages: |
        ['@semantic-release/apm@4.0.0', '@semantic-release/git']
      plugins: |
        ['@semantic-release/commit-analyzer', '@semantic-release/release-notes-generator', '@semantic-release/github', '@semantic-release/apm', '@semantic-release/git']
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}


semantic-release-action sets both output variables and environment variables because why not? Allows users the ability to use whichever they want. I don't know or understand every use case there might be so this is a way to cover more cases.


Output Variables:

Output VariableDescription
new-release-publishedEither 'true' when a new release was published or 'false' when no release was published. Allows other actions to run or not-run based on this
release-versionThe new releases' semantic version, i.e. 1.8.3
release-majorThe new releases' major version number, i.e. 1
release-minorThe new releases' minor version number, i.e. 8
release-patchThe new releases' patch version number, i.e. 3
release-notesThe release notes of the next release.

Environment Variables:

Environment VariableDescription
NEW_RELEASE_PUBLISHEDEither 'true' when a new release was published or 'false' when no release was published. Allows other actions to run or not-run based on this
RELEASE_VERSIONThe new releases' semantic version, i.e. 1.8.3
RELEASE_MAJORThe new releases' major version number, i.e. 1
RELEASE_MINORThe new releases' minor version number, i.e. 8
RELEASE_PATCHThe new releases' patch version number, i.e. 3
RELEASE_NOTESThe release notes of the next release in markdown.


Make the new release available to those binding to the major version tag: Move the major version tag (v1, v2, etc.) to point to the ref of the current release. This will act as the stable release for that major version. You should keep this tag updated to the most recent stable minor/patch release.

git tag -fa v2 -m "Update v2 tag" && git push origin v2 --force

Reference: recommendations

Download Details:

Author: Codfish
Source Code: 
License: MIT license

#javascript #github #action 

Semantic-release-action: GitHub Action for Running Semantic-release
Marisol  Kuhic

Marisol Kuhic


Github Finder App using React.js

Github Finder App

Deployed on Vercel

App to search Github users and display their info. This is part of my React Front To Back 2022 course and is the most up to date version of this project.


You can use the Github API without a personal token, but if you want to use your token, add it to the .env file

Learn how to create a token here

Install Dependencies

npm install


npm start

Tailwind UI and DaisyUi created by Hassib Moddasser

Author: JimmyMtl
Source code:

#react-native #javascript #github 

Github Finder App using React.js
Alfie Mellor

Alfie Mellor


How to Build a Digital Resume Hosted FREE on GitHub Pages

This tutorial shows how to build a digital resume hosted free on Github pages. Turning a real-life resume into a digital resume hosted free on Github pages.

What we will do in this tutorial is review my personal resume and turn it onto an HTML file with styling and host it with Guthub pages for free. See live demo here.

Source Code: 


00:00 - Introduction
4:56 - Project Setup
9:15 - Hero Section
35:50 - Adding Dark Mode
39:50 - Techstack section
44:23 - Work History section
52:30 - Projects sections
57:30 - Project Detail Page
1:01:30 - Adding Responsiveness
1:05:50 - Hosting with Github pages


How to Build a Digital Resume Hosted FREE on GitHub Pages
Jade Bird

Jade Bird


DevOps with .NET MAUI using GitHub Actions & Azure DevOps

Let's learn how to get started with a starter DevOps pipeline with .NET MAUI using GitHub Actions & Azure DevOps

We'll walkthrough some sample pipelines and learn how to configure the settings. You'll learn tips and tricks to help you add DevOps goodness to all your .NET MAUI apps!

#devops #github #dotnet #azure 

DevOps with .NET MAUI using GitHub Actions & Azure DevOps