I can't deploy to GitHub pages my yeoman angular application.
I was using deploy yeoman tutorial:
Remove the dist directory from the .gitignore file. Yeoman projects ignore it by default.
Add the dist directory to your repository: git add dist && git commit -m "Initial dist subtree commit"
Deploy the subtree to a different branch. Specify a relative path to your dist directory with --prefix: git subtree push --prefix dist origin gh-pages
But my GitHub page still using code from branch master. For example http://derk153.github.io/app/index.html is showing some data, but not dist branch gh-pages
GH-page: http://derk153.github.io/
My repo: https://github.com/derk153/derk153.github.io
I think you have to add your Angular application in a new repository in the branch gh-pages.
I recommend you this things:
Create a new repo.
Move your code in this repo.
Add a new branch gh-pages with the dist folder (like Yeoman recommends).
You can use a grunt package like this: https://github.com/tschaub/grunt-gh-pages
Check my example: I have this repo to add the code for my github.io main page: My main github.io repo. Then, I create a new repo with new code here. Check the gh-pages branch, the code is available here.
Related
I have deployed my app at https://hudsonbasso.com/ and it is just showing the readme instead of what is showing on my branch when run locally. I suspect is something with the build folder or gh-pages not recognizing my index.js in the src folder. Link to repo https://github.com/hbasso/wherecaniwatch
enter image description here
I ended up solving this by adding a .nojekyll file and following some of the instructions here https://jiafulow.github.io/blog/2020/07/09/create-gh-pages-branch-in-existing-repo/ to create an empty branch called 'gh-pages' and then my yarn deploy worked!
My react app is not loading the index.js, you can see my repository at https://github.com/Vitorrrocha/Star-Wars-info and the gh-pages: https://vitorrrocha.github.io/Star-Wars-info/ .
package.json: https://github.com/Vitorrrocha/Star-Wars-info/blob/master/package.json
Which branch are you trying to serve as a GitHub page? I see you have just a master branch.
You could make a branch called gh-pages and push your build there. I see you have gh-pages installed as a devDependency. You can use gh-pages -d build it will do everything for you. (build is the output folder of react-scripts build.)
I have a reactjs application that I created using the create-react-app. I have installed gh-pages and successfully deployed it to github pages (project page) using the following command:
gh-pages -d build
However, when I add a custom domain to my github project repository my application could not load the js and css files. My browser is looking for the following files:
http://my.custom.domain/<repo name>/static/css/main.caaf9ea4.css
http://my.custom.domain/<repo name>/static/js/main.76fabd7f.js
The correct link to load these files should be:
http://my.custom.domain/static/css/main.caaf9ea4.css
http://my.custom.domain/static/js/main.76fabd7f.js
In the GitHub repo pages, I have set custom domain to be 'my.custom.domain' (root domain without www). The source is gh-pages branch.
My DNS settings are:
A record, #, value: 192.30.252.153
A record, #, value: 192.30.252.154
CNAME record, www, value: username.github.io
Any ideas how to change the settings so that repo name is not added to the domain?
Make sure your package.json have the attribute homepage. e.g.
"homepage": "https://<git-USER>.github.io/",
That's literally what I just did with my cra projet. If you want to take a look on my project just look at the develop branch. However, I haven't use gh-pages -d build. I just built the project myself and create the branch gh-pages and put the content of my build into it. It should be the same though.
Adding a copy CNAME script to my package.json scripts worked for me as it wasn't being published to gh-pages branch automatically in the React Create App build dir.
"copy": "cp ./CNAME ./build/CNAME",
"predeploy": "yarn build && yarn copy",
This is clearly something I'm misunderstanding but I'm desperately struggling to find an answer.
I've been teaching myself React with create-react-app, I've run "npm run build" to spit out my finished project, and I have the project pushed to a private bitbucket repo.
My expectation would be to then SSH to my server, and git clone the /build directory in order to make this project live. Obviously that is possible (if I removed /build from .gitignore), but since the /build directory is in .gitignore this clearly isn't the intended/desired behaviour.
So, my question is - what is? How does one publish a completed build to server without pulling from git (and obviously without FTP)?
Thanks!
The build directory is in .gitignore as it can be generated from the existing files.
To minimize upload/download time only essential items should be kept in the git repo. Anything that can be generated need not be in the repo (The build directory in this case).
If you are working on a server that has node (AWS, Heroku etc) you can git clone the entire repo on the server and then run npm run build there (after npm install). Then you can do something like
npm install -g serve
serve -s build
The serve module serves static files and you pass the build folder as a parameter.
If you are working on a more old style server like Apache static hosting with cPanel etc then you will need to upload the entire build directory containing static files and index.html.
I have a site generated with yeoman's generator-angular and I'd like to publish this site using github pages. I create the gh-pages branch but my repo does not show up in myusername.github.io/myreponame I think the reason is because index.html is in the app/ directory not the root.
app/
|-- index.html
|-- scripts/
dist/
Gruntfile.js
etc..
Can I tell github pages to load index.html from the app folder? How can I launch a site generated w/ angular-generator to gh pages?
Running grunt build is important as without it dist directory is not created. Also changes will appear on gh-pages only after they are added and pushed to the subtree.
Remove dist from .gitignore file
Run grunt build in console
After the project is built the dist directory needs to be added to the GitHub. Run this command in console: git add dist && git commit -m "Initial dist subtree commit"
And then push the subtree to the gh-pages branch: git subtree push --prefix dist origin gh-pages
All of your answers can be found here!
In a nutshell, you will generate the deployment-ready version of your site. You do this by running grunt. That will generate the optimized, production site in a folder called dist. You will then push the contents of dist directly to gh-pages.
A frequent contributor to Yeoman also made this task: grunt-build-control, which will let you simply run something like grunt deploy.