How do I deploy an Angular 13 application to Git Hub Pages and not get Readme or 404 - github-pages

tldr; I think I need to add a github token. I have a token from github, but I have no idea how to implement it at the stage that I'm at.
I am trying to deploy an angular 13 app to github pages. Right now, it is just the auto-generated app (I haven't added or changed any code at this point). Here are the steps I have taken
Step 1: Create App and make sure it works
ng new <appName>
cd <appName>
ng serve
Step 2: Create a Repo on Github
Step 3: Check if it automatically connected to a repo (and remove if it's not the one we want)
git remote
git remote -v
git remote remove origin
Step 4: Connect to correct Git Repo (replace variables with username and project name)
git remote add origin <https://github.com/USERNAME/PROJECT_NAME.git>
Step 5: Push to Git repo
git branch -m main
git add .
git commit -m "initial commit"
git push -u origin main
Step 6: Hosting
npm install -g gh-pages
ng build --prod --base-href /PROJECT_NAME/ (find project name in angular.json at very bottom
gh-pages -d dist
When I do all of this, it shows that it worked. But then, it just loads a 404 error. After a lot of googling, I think it has something to do with a token. So I went and got the token, but I'm not sure what to do with it.
P.S. already saw Git Hub Pages not Deploying. (404) and it was unhelpful.

The answer was User Error. The code above works and will deploy an app successfully to gitHub pages.
The problem was I was going to https://humanhickory.github.io/ but the ng build --prod --base-href had actually created a new folder which I had to navigate to (so https://humanhickory.github.io//)
Futhermore, I was able to use the token by running gh-pages -d dist a second time. The first time I did it it said "remote: Invalid username or password. Fatal: authentication failed for '....'". However, when I ran the same command a second time, it prompted me to log in. So there's that.

Related

GitHub Pages Custom Domain Settings Gets Reset During new Commit

I have a static site generated using Zola and I'm using GitHub Actions to do a build of my static site and publish that into a gh-pages branch of my repository. I have also configured my project to serve via GitHub pages using the gh-pages branch.
The problem I'm facing is that as soon as my GitHub action builds a new version and pushes it to the gh-pages branch, the custom domain setting in the GitHub settings gets reset.
Here is what I do in my GitHub action to build and push to TARGET_BRANCH (gh-pages) branch:
- name: Commit and push to target branch
run: |-
git config --global user.email "workflow-bot#mydomain.com"
git config --global user.name "workflow-bot"
git checkout --orphan $TARGET_BRANCH
rm -rf .github/
mv public ..
rm -rf *
mv ../public/* .
touch .nojekyll
touch README.md
echo 'https://www.bigelectrons.com - SITE GENERATED USING ZOLA' > README.md
git add .
git commit -m "generated using zola build"
git push --set-upstream origin $TARGET_BRANCH --force
Any idea what the problem is and how I could resolve th
I just had to add a CNAME file to my gh-pages branch. For example., in the run command, I had to add these two lines:
touch CNAME
echo 'mydomain.com' > CNAME
I know this is not Zola-related, but I've stumbled upon the same error when using Mkdocs.
The documentation says that you need to create a CNAME file in your docs_dir directory, so that their gh-deploy script can pick that up and copy it at the right place in the gh-pages branch (see that doc here).
For information, using the Github developer settings page to set the custom domain does exactly the same thing, ie. creating a CNAME file at the root of the gh-pages branch.

Git submodule failure when building pages with Hugo

I am trying to follow the steps on Deployment as described in the manual of Academic-Hugo. The goal is to upload the Hugo website to GitHub pages.
However the following step fails and I have no clue what the issue could be:
$ git submodule add -f -b master https://github.com/<USERNAME>/<USERNAME>.github.io.git public
Reactivating local git directory for submodule 'public'.
fatal: 'origin/master' is not a commit and a branch 'master' cannot be created from it
Unable to checkout submodule 'public'
The .gitmodules file looks like this (not sure how relevant that is though...):
[submodule "themes/academic"]
path = themes/academic
url = https://github.com/gcushen/hugo-academic.git
[submodule "public"]
path = public
url = https://github.com/<USERNAME>/<USERNAME>.github.io.git
branch = master
While <USERNAME> is my actual username of course.
I am new to Hugo and github pages and would appreciate any pointers on how to resolve this or even where to look for the root of the issue.
I had the same issue. I tried to continue on anyway and it ended up working:
site $ hugo
site $ cd public/
site/public $ git add .
site/public $ git commit -m "initial build"
site/public $ git push # After this, all is well.
I did run a git status prior to pushing, but it had a warning (don't recall the message) and suggested I remove the remote origin. I ignored that too.
Had the same issue today and landed on this site that has some useful info about deleting modules and re-doing the whole thing from start. Hope it might be useful to others as well.

How do I deploy Ember.js app developed with ember-cli on github pages?

I have successfully created a small application using ember-cli. I tried pushing it to gh-pages branch of my github repo but it shows error in browser console
Uncaught ReferenceError: require is not defined
loading of vendor.js and vendor.js files from dist/assets is also failing.
I'm not able to run standalone ember app from dist folder in local machine as well, same errors.
has anyone tried it. if yes how to do it correctly?
Since December 2014 there is also an ember-cli addon for this.
First make sure to have set modulePrefix in config/environment.js to your repo's name on github. E.g., for https://github.com/username/my-cool-repo it should be modulePrefix: 'my-cool-repo'.
Then follow these instructions:
Install the addon.
$ ember install:addon ember-cli-github-pages
Commit the changes made by the addon.
$ git add . && git commit -m "Installed addon ember-cli-github-pages"
Create the gh-pages branch with only the necessary files.
$ git checkout --orphan gh-pages && rm -rf `ls -a | grep -vE '.gitignore|.git|node_modules|bower_components|\.\/|\.\.\/'` && git add . && git commit -m "Initial gh-pages commit"
Switch back to your source branch (most likely master).
$ git checkout master
Build your ember app to the gh-pages branch.
$ ember gh-pages:commit --message "Initial gh-pages release"
Push everything (or at least the gh-pages branch) to github.
(This was different for ember-cli <= 0.1.4 and might change again in the future. Make sure to visit the addon's readme.)
As the comments already say: change the baseUrl in config/environment.js to the name of the GitHub repository you are pushing the app to. For example:
Your GitHub respository is called myEmberApplication and resides in
https://github.com/yourUsername/myEmberApplication.git
then the URL to this project's gh-pages would be
https://yourUsername.github.io/myEmberApplication
So in your case you have to change the baseUrl from / (default) to /myEmberApplication.
The reason why you have to do this is because ember-cli adds the <base> header to your index.html file.

How to force GitHub Pages build?

Every GitHub repository can have (or be) a GitHub Pages website, that can be built with Jekyll. GitHub builds the site every time you push a new commit.
Is there a way to force the refresh of the Github Pages website without pushing a new commit?
From GitHub support, 2014-06-07:
It's not currently possible to manually trigger a rebuild, without pushing a commit to the appropriate branch.
Edit:
As Andy pointed out in the comments, you can push an empty commit with the command:
git commit -m 'rebuild pages' --allow-empty
git push origin <branch-name>
Edit 2:
Thanks to GitHub Actions, it's fairly easy to trigger a daily publish: https://stackoverflow.com/a/61706020/4548500.
If you want a quick script solution, here it is. Just do the following tasks only once, and run the script whenever you want to rebuild your GitHub page.
1. Create a personal access token for the command line:
Follow the official help here to create a personal access token. Basically, you have to log in your GitHub account and go to: Settings > Developer settings > Personal access tokens > Generate new token.
Tick repo scope.
Copy the token.
2. Create the following script:
Create a file called RebuildPage.sh and add the lines:
#!/bin/bash
curl -u yourname:yourtoken -X POST https://api.github.com/repos/yourname/yourrepo/pages/builds
Here,
Replace yourname with your GitHub username.
Replace yourtoken with your copied personal access token.
Replace yourrepo with your repository name.
3. Run the script:
If you use Windows 10:
You need to setup Windows Subsystem for Linux, if not already done. Follow this to do so.
Remove the first line (#!/bin/bash) from the script and save the script as RebuildPage.bat. (i.e., replace .sh with .bat in the script file name)
Alternative to the above point: To get the double-click feature for running the .sh file:
Set bash.exe as the default program for .sh files.
Open regedit.exe and edit HKEY_CLASSES_ROOT\Applications\bash.exe\shell\open\command. Set the (Default) value to:
"C:\Windows\System32\bash.exe" -c " \"./$(grep -oE '[^\\]+$' <<< '%L')\";"
Now double-click the script wheneven you want to rebuild your GitHub page. Done!
If you use Linux/Mac, running the script is as same as running other scripts. Done!
Additional notes for the solution:
This solution utilizes a API of GitHub REST API v3. Here is the official documentation for the API.
Now that GitHub Actions are available, this is trivial to do:
# File: .github/workflows/refresh.yml
name: Refresh
on:
schedule:
- cron: '0 3 * * *' # Runs every day at 3am
jobs:
refresh:
runs-on: ubuntu-latest
steps:
- name: Trigger GitHub pages rebuild
run: |
curl --fail --request POST \
--url https://api.github.com/repos/${{ github.repository }}/pages/builds \
--header "Authorization: Bearer $USER_TOKEN"
env:
# You must create a personal token with repo access as GitHub does
# not yet support server-to-server page builds.
USER_TOKEN: ${{ secrets.USER_TOKEN }}
Sample repo that does this: https://github.com/SUPERCILEX/personal-website/actions
Pages API: https://developer.github.com/v3/repos/pages/#request-a-page-build
I had this problem for a while, and pushing to master branch didn't change anything on myapp.github.io, for two reasons :
1 - Build
No matter how many time I tried to push my work on master, build would not start. I found a workaround by modifying my file in Github online editor (open your index.html and edit it on Github website, then commit)
2 - Caching issues
Even after a successful build, I would still see the exact same page on myapp.github.io, and hard reloading with Ctrl + Shift + R wouldn't solve it. Instead, if using Chrome, inspect your page, head into the Application tab, select "Clear storage" in the left menu, and click on "Clear site data" at the bottom of the menu.
Even after I pushed my changes to GitHub repository, I was not able to see the changes today. Then I checked my repository settings for more information, there I could see, all these times the build was failing and that was the reason I was not able to see the changes.
You may also see a message as "Your site is having problems building: Unable to build page. Please try again later."
Then I was checking my recent commits and tried to find out what causes this issue. At the end I was able to fix the issue.
There was an additional comma in the tags (,) and that caused this issue.
You will not get relevant error messages if there are any issues in your .md file. I recommend you to check for the build status and compare the changes if you are facing the same issue.
This is doable as of v3 of the GitHub API, though it is currently in preview
https://developer.github.com/v3/repos/pages/#request-a-page-build
POST /repos/:owner/:repo/pages/builds
The empty commit didn't work for me, but based on #benett answer, this worked for me:
Open Postman, create a new request with this URL: https://api.github.com/repos/[user_name]/[repo_name]/pages/builds (replace with your name and repo), and select POST method.
Before you run it, go to the headers tab and add a new key Accept with the value application/vnd.github.mister-fantastic-preview+json
Now you can run it and visit your pages again.
I was having trouble refreshing even though my Github Actions was showing that my site has been deployed.
Toggling the publishing source did the trick for me. I switched the publishing source from master to content and then back to master. You can check how to change the publishing source of the branch here
I went through the same problem, to solve it I developed a githu action that works with scheduler and supports updating multiple gh-pages at the same time.
https://github.com/marketplace/actions/jekyll-update-github-pages-without-new-commit, the action update gh-pages without generate new commits.
name: Update all github pages
on:
schedule:
- cron: "30 0 * * *"
jobs:
github-pages:
runs-on: ubuntu-latest
name: Update Github Pages Initiatives
steps:
- name: Jekyll update github pages without new commit
uses: DP6/jekyll-update-pages-action#v1.0.1
with:
DEPLOY_TOKEN: ${{ secrets.GH_PAGES_DEPLOY_TOKEN }}
USER: ${{ secrets.GH_PAGES_USER }}
FILTER: 'is%3Apublic%20org%3Adp6'
Log action
Alternative Solution
You may have received an email from GitHub telling you that Jekyll did not succeed at building your site when you pushed it to your gh-pages. If this is the case, you can try to force push to trigger another build.
If you use a dedicated folder for the final website, let's say a public folder, you can try to rebuild your folder and add the folder to your commited changes. After that, you'll need to split those file into your gh-pages branch and force them to trigger another build even if the files did not change at all. The rest of the code bellow just removes the commits for the public folder for convenience and removes it from the local filesystem.
Code
git add public
git commit -am ":bug: triggering another jekyll build"
git push origin $(git subtree split --prefix public master):gh-pages --force
git reset HEAD~1
rm -rf public
Tips
If there are uncommited changes that are not part of the final site, you can stash them with the following command.
git stash
Then do the above command to manually force the Jekyll build and unstash them.
git stash pop
References
Online Git Manual
I surmise from other answers that this was once difficult?
Go to Settings->Pages
Just under "Change theme" you'll see a link to the actual Github action labeled "pages build and deployment workflow".
Click Re-run all jobs

post_receive hook in git: how does it checkouts my non-git folder?

I am using webfaction for my web deployment.
I have a Django app at: webapps/django_app/project_name/
I have a Git repo at: webapps/git_app/repos/my_repo.git
my_repo.git is a bare repository. It is not a working directory.
whenever I push from my local development computer to the remote (webfaction --> my_repo.git), I want my django_app to get the pushed code.
I followed this post which works fine. But no explanation of how this works is given.
I have added these two lines in post_recieve hook in my_repo.git.
#!/bin/sh
GIT_WORK_TREE=/home/username/webapps/django/myproject git checkout -f
GIT_WORK_TREE=/home/username/webapps/django/myproject git reset --hard
what does this two lines actually do?
Moreover, my Djangoapp folder is not a git repo. still whenever push is made to my_repo.git, Djangoapp gets updated. so how does it work?
When you are managing files locally with .git, you typically have two things:
Your git repository, which is contained in the .git directory, and
Your work tree, which is the set of files you are actually editing.
By default, the repository is a subdirectory of the work tree, but this is not a requirement. Setting the GIT_WORK_TREE environment variable directs git to use a different location for your checkout out files.
So the first line...
GIT_WORK_TREE=/home/username/webapps/django/myproject git checkout -f
...is asking git to check out the HEAD of the repository into /home/username/webapps/django/myproject.
The second line...
GIT_WORK_TREE=/home/username/webapps/django/myproject git reset --hard
...makes sure that /home/username/webapps/django/myproject does not have any local changes. reset --hard discards any changes to files that are tracked by git. By "local changes" I mean any changes that you or someone else has made to files in this directory; ideally, there won't be any, but if there were some there, reset -f makes sure that the modified files are overwritten with the version of the file stored in the repository.
For more details on any of the commands listed here, try running git <command> --help for the man page, or see The Git Book.