![]() ![]() $ npm run deploy -m "Deploy React app to GitHub Pages "Īt this point, the GitHub repository contains a branch named gh-pages, which contains the files that make up the distributable version of the React app. In case the branch in your repository has a different name (which you can check by running $ git branch), such as main you can replace all occurrences of master throughout the remainder of this tutorial, with that other name (e.g. Since I have not set that variable in my Git installation, the branch in my repository will be named master. via $ git config -global faultBranch main). The Git repository will have one branch, which will be named either (a) master, the default for a fresh Git installation or (b) the value of the Git configuration variable, faultBranch, if your computer is running Git version 2.28 or later and you have set that variable in your Git configuration (e.g. That characteristic of the folder will come into play in Step 6. In addition to containing the source code of the React app, that folder is also a Git repository. That command will create a new folder named my-app, which will contain the source code of a React app. $ npx create-react-app my-app -template typescript web-ui), you can accomplish that by replacing all occurrences of my-app in this tutorial, with that other name (i.e. In case you want to use a different name from my-app (e.g. gitignore, and/or LICENSE file.Īt this point, your GitHub account contains an empty repository, having the name and privacy type that you specified. ![]() That will make it so GitHub creates an empty repository, instead of pre-populating the repository with a README.md. Initialize repository: Leave all checkboxes empty. For GitHub Pro users (and other paying users), both Public and Private repositories can be used with GitHub Pages. * For GitHub Free users, the only type of repository that can be used with GitHub Pages is Public. Repository privacy: Select Public (or Private*). In this tutorial, I'll be deploying the React app as a project site. The name you enter will show up in a few places: (a) in references to the repository throughout GitHub, (b) in the URL of the repository, and (c) in the URL of the deployed React app. For a user site, GitHub requires that the repository's name have the following format. * For a project site, you can enter any name you want. Repository name: You can enter any name you want*. Visit the Create a new repository form.It is definitely possible (and quite common) to create a dynamic single page web application (SPA) on GitHub pages, however mobile devices may not display content as expected due to relying on JavaScript.Procedure 1.It is also possible to change the source branches to be whatever branch you choose with a little tweaking, this is just a basic guide to get it working.Changes to your GitHub page can sometimes take a few minutes to take effect, so remember to be patient (after all… it is a free service ?). ![]() There’s a bunch of ways to do this but the simplest way is to run the deploy command again. Seeing as the static files in the gh-pages branch is what actually powers the web page, those static files need to be updated. Committing code to the master branch isn’t enough for your page to accept changes.What we need to do is head back to that page and change the source branch from master to our new gh-pages branch that we created in the last step. This is because in step 3 we set the source branch to be Master so we could get the page URL, but the master branch contains our source code, not the static content we need. If you go to your GitHub Pages web page, you’ll notice that the react app’s README file is being shown. This action will add a build folder to your project which will contain the static files that GitHub Pages requires, but also publish the new deployment branch (gh-pages) that we declared in the last step Now that we’ve got everything plumbed in, we should be able to run command npm run deploy. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |