For the main git repository, devanshdalal.github.io, I am unable to choose the src branch to use for deploying, github.com always picks up the master branch. It becomes difficult now, because I now have to push my build/ forlder to master. Is there a way to automate this?
Currently github doesn't support choosing custom folder for repo named like {GITUSER}.github.io -
From community help post
From https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/, the only three options that GitHub Pages recognizes are:
master branch
docs/ folder on the master branch
gh-pages branch
But for repo like {GITUSER}.github.io, having docs/ folder also doesn't work(I couldn't make it work). I faced this similar issue a while back. I was using jekyll to build the static pages for my site. I know It's really frustrating, but as of now what you want, is not possible.
However, I made a workaround to version-control my jekyll project as well the generated static github.io pages.
I maintain a separate repo for the jekyll version of the project(which in your case I guess would be the react project). So locally I have two separate repo -
{my_username}.github.io - > which will contain the static pages, and remote for this local repo would be the {my_username}.gihub.io repo(the static site repo).
I also have a separate repo for the jekyll project. Which has a different remote repo setup. I configured settings for this project in such way that after build, the static pages will be saved in the local repo of {my_username}.github.io folder. then I can just commit and push separately in the two repos.
This way I can keep track of the static pages as well as the jekyll project that builds the static pages.
You only need to make sure that before you configure a publishing source, the branch or folder you want to use as your publishing source already exists in your repository.
This link GithubPages will solve your problem.
Related
I know two ways of hosting an app.
You either go to settings and set source branch and select folder.
You can follow some steps like npm --save install gh-pages, npm run deploy and so on.
I tried to host my app the 1st way, but it shows README file and it doesn't show index.html in public folder.
The "Configuring a publishing source for your GitHub Pages site" does mention choosing a branch and folder.
But:
gh-pages is always a branch, not a folder.
the folder referenced in the documentation seems only to be /docs: try for testing your index.html in docs/ rather than public/.
That being said, try and test the new (Dec. 2021) feature:
GitHub Pages: using GitHub Actions for builds and deployments for public repositories
Today you will begin to see a new workflow running called pages build and deployment in your public GitHub Pages repositories.
This workflow is automatically triggered when you push to the branch configured for GitHub Pages in your repository.
As the name suggests, it builds and deploys your pages site.
The initial benefit of this change is enabling you to see your build logs and any errors that may occur which has been a long standing issue for Pages users.
However, in the future this will enable us to give you the ability to fully customize your pages build and deployment workflow to use any static site generator you want without having to push the build output to a special branch of the repository.
You may notice this workflow uses some new actions actions/pages-deploy, and actions/jekyll-build-pages.
For now these actions are designed to be used in the generated workflow, however, starting early next year we will introduce some additional changes that will enable you to take advantage of them.
Learn more about GitHub Pages
When I deploy my React App to Github Pages with 'npm run deploy' I am consistently running into a 404 'File not found'. The site is building from the 'gh-pages' branch in my repo, which I have made match my master branch with all of my source files.
One concern I have here, is finding that other operational Github Pages repositories only contain the build folder in their 'gh-pages' branch, not the rest of their source code. A second point of confusion, is that on two occasions now I have committed/pushed my site as described above and it has all worked... until I've gone to update something and the 404 returned.
So, my questions are:
Do I need to set up my 'gh-pages' branch to only contain my build folder so that it can find my index.html and not 404? If so, how do I set a branch to only hold a specific folder and not have other files merged into it?
Can you describe a process to update the site once it's up?
If you want to check out my repository, you can find it at:
https://github.com/edmundweir/doe-website
And the site I am trying to get live is:
https://descendantsofearth.com/
Any help on the matter would be immensely appreciated as I am 500 metres down a troubleshooting rabbit hole and my flashlight has run out of batteries.
With thanks,
Betty.
TLDR: Delete the gh-pages branch on GitHub and then run npm run deploy.
404 'File not found'
This is happening because your gh-pages branch does not have an index.html file at the root and you didn't specify a source folder to use in the GitHub Pages settings. A quick remedy here would be to set the source folder to be /build, but that won't achieve the setup you're looking for with the gh-pages npm pkg.
The site is building from the 'gh-pages' branch in my repo, which I have made match my master branch with all of my source files.
This is the root cause of your issue. Your deploy npm script is currently set to commit the contents of the build folder only to the gh-pages branch. The package will manage this branch for you as a branch with a completely separate history from master.
on two occasions now I have committed/pushed my site as described above and it has all worked... until I've gone to update something and the 404 returned.
Possibly it worked when you ran your deploy script and then you later broke it by manually pushing to the branch?
Do I need to set up my 'gh-pages' branch to only contain my build folder so that it can find my index.html and not 404? If so, how do I set a branch to only hold a specific folder and not have other files merged into it?
The package is handling all of this for you, which is really cool. For some history - when GitHub Pages first came out - the instructions were to create an orphan branch where you would push your static build to, manually. Note that there are a few ways to achieve this though.
Can you describe a process to update the site once it's up?
master should not contain your static build, just like it doesn't contain node_modules etc. You should add build to your .gitignore so that it doesn't get committed. That way you're only committing the actual source code - which minimizes the size of your code base and gives you a clean revision history.
Whenever you want to "deploy" your changes, you should run npm run build to build your static app from your source code and then npm run deploy to have gh-pages push your static build to the gh-pages branch (which GitHub Pages will then use for your site).
After taking a look at console, i got this
Loading failed for the <script> with source “https://abhishek-098.github.io/TourSpot%20/static/js/2.1f6fc1d5.chunk.js”.
Loading failed for the <script> with source “https://abhishek-098.github.io/TourSpot%20/static/js/main.3961266e.chunk.js”.
Link to my Repo : https://github.com/Abhishek-098/TourSpot
For deploying a Single-Page Application (React, Vue) to GitHub Pages, you should know that it is necessary that you do a production build. This can be accomplished by doing npm run build or yarn build depending on the package manager you are using. This command will generate a ./dist or ./build folder that will contain your react app in pure HTML, CSS, and JS.
For GitHub pages, there are some configurations you should do. First of all, the index.html from your production build (from the dist, build folder) should be in the root folder, which means, you should be able to see it when you open the repo (not inside the build folder). If GitHub pages do not detect any index.html in the root of the repo, it will display a 404 page.
Now, since you do not want the production build files messing around with your React project, it is recommended that you create a different branch for your GitHub pages deploy.
So, ideally, you would have two branches: master and gh-pages, the first one containing your React project and the second one containing only your dist folder but in the root of the project.
Here is an example of the structure of a Repo that it's deployed using GitHub pages.
https://github.com/8rb/React-Quiz/tree/master
You can see both branches and the deployment link works perfectly fine.
To configure the branch that is being deployed to GitHub pages, go to settings and select the branch where you have your production build.
All the information was taken for the following link:
https://create-react-app.dev/docs/deployment/#github-pages
I hope you found it useful!
#Rodrigo Ramirez does explain how its done, but leaves out some important information provided in the docs he linked (https://create-react-app.dev/docs/deployment/#github-pages). Maybe the've been updated since but I would recommend following those steps in the doc. They give step by step instructions that are very easy to follow.
I tried following #Rodrigo Ramirez answer, as well as, countless other things on the internet and nothing worked and it was all very complicated. The doc provided here gets it all done for you very easily.
I was trying to deploy a project I made in ReactJS - a tetris game to be exact - and I am coming up with the following error:
On a different stack-overflow post, I read that most likely this is happening because
Most likely there is a reference to manifest.json somewhere in the project, while the file/resource itself does not exist and that I should look for link tags containing rel=manifest.
So I went into my index.html folder and removed the following:
<link rel="manifest" href="/manifest.json">
So after making the changes and updating my code, I pushed to Netlify (netlify deploy, netlify open) and I keep getting the same error. Does anyone know what I may be doing wrong? The project runs perfectly on localhost.
EDIT: adding Network tab image
You do not need to remove manifest.json file. What you need to do is simply connect source code to the version control.
You need to add _redirects file to the public folder. (no extension for this file). add this line to it.
/* /index.html 200
From this, we hope to show components accordingly whenever link updates with components.
Then follow the below steps to host your site easily,
Add your source code to the Bitbucket repository. (connect your local folder to repo)
If you have build remove that folder.
Go to Netlify and link your Bitbucket repository and desired domain.
That's it! Whenever you push the new version to the master branch it will auto-deploy. (No need to build anymore! - make sure to enabled auto-deploy settings to the master branch)
Just use these tools easily. Don't use a lengthy way and make things hard.
How to deploy angular 2 website application on github? I am new to Git and github so just saw the basics on internet and created a repository on github and finally a url was generated in my git bash after running all steps and when I tried to open it Github 404 error pages was showing.
These are the commands which I ran through :
git remote add origin https://github.com/Muraliduke/MuraliDukeResume.git
git push -u origin master
ng github-pages:deploy
Is there any difficulty for single page application to host a website on github? I tried with normal html content and my website on github works fine. But this with ng2 is not working. Just saw on internet that there must be some prefix to be done to support SPA on github but since I am not familiar with github didn't understand it. So kindly suggest me a solution ?
There are a few things :
Deploying to GitHub pages using Angular CLI has been deprecated. Use angular-cli-ghpages
Add the 404.html fix
Ensure you have "turned on" GitHub pages for your gh-pages branch from the repository settings
optionally, add custom domain
This blog has everything you need.
Make sure to do a build to get the necessary files into dist .
ng build --prod
First get all relevant the files from the Dist Folder of your application
for me it was the css files in the assets folder main.bundle.js polyfills.bundle.js vendor.bundle.js
Then push this files in the repo which you have created.
1 -- If you want the application to run on the root directory - create a special repo with the name [yourgithubusername].github.io and opush these files in the master branch
2 -- Where as if you want to create these page in the sub directory of in a different brach other than than the root , create a branch gh-pages and push these files in that branch.
In both the cases the way we access these deployed pages will be different .
For the First Case it will be https://[yourgithubusername].github.io and for the second case it will be [yourgithubusername].github.io/[Repo name].
If Suppose you want to deploy it using the second case make sure to change the base url pf the index.html file in the dist as all the route mappings depend on the path you give and it should be set to [/branchname].
Github Repository - https://github.com/rahulrsingh09/Deployment