Tag: github

Posted on

Free hosting for React apps: GitHub Pages and gh-pages

I work primarily with AWS and so my first choice for deployment of personal React projects is either a public S3 bucket with Static Website Hosting option enabled, or CloudFront with an S3 origin.

While costs for a site with low traffic will typically cost you < $1 a month with these options, there’s other options available that can be used for personal projects for free. Many of these are covered in this LogRocket article. If you’re already using GitHub, using GitHub Pages to host a React app is pretty easy with the gh-pages utility.

Assuming you have an exising React project, add gh-pages to your app:

npm i --save-dev gh-pages

Edit your package.json and add a couple of scripts:

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

When you run ‘npm run deploy’ predeploy will run first to build your prod app, and then upload it to the remote origin for your git project. Note – this util assumes your GitHub remote repo is called origin, and it will fail with this error if it is called something else:

Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option).

If you name your remote GitHub repo something else, just add it again with the name origin ‘git remote add origin remote-repo-url’

When gh-pages runs, it uploads the built React app from ./build to a new branch on your repo called gh-pages. If you check the settings for your project, you should see the GitHub Pages settings for your app is configured to use this branch as it’s source:

If it’s using another branch change it to use gh-pages. Hit the url shown in the settings above to load your app from GitHub Pages!

Posted on

Deploying to github pages with gh-pages

Using gh-pages npm module to build and deploy a React app to github pages I get this error:

Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option).

According to this answer to an issue logged on the project, gh-pages expects your remote repo to be named ‘origin’ and doesn’t work if you use any other name when you ‘get remote add’ you repo for a project. Add the same repo with the name ‘origin’ and then it works as expected.

Posted on

Creating a static website with GitHub Pages

I have a bunch of note as html files and want to easily host them somewhere. I’m looking into using GitHub Pages. GitHub pages provide themes, but for html files you need to add a header to the start of each file in markup format using Jekyll Front Matter.

---
layout: default
---

Add a sample test page with a couple of headers and you end up with a page rendered with your selected theme:

Access your site with the url: https://[your-github-user-id].github.io/[repo-name]

Posted on

Resetting a GitHub Personal Access Token on MacOS

Personal Access Token’s are used to grant access to one of your repos with specific permissions. They have an expiry, so when one expires you need to recreate a new one, details are here.

If you’re trying to push and your token has expired, you’ll see an error like this:

> git push
remote: Invalid username or password.
fatal: Authentication failed for 'https://github.com/youraccount/yourrepo

The first time accessing a repo requiring authentication is simpler because it will prompt you for your id and password (or token). Once you’ve set one up though, it’s not as obvious how to reset a new token value, since the git cli only gives you the above error, it doesn’t prompt you to enter a new password/token.

To replace your cached credentials, use these steps (from here):

git config --global --unset credential.helper

git credential-osxkeychain erase
host=github.com
protocol=https

Press Return twice on the second step. Close your Terminal, open a new one, then:

git config --global user.name "userid"
git config --global user.email you@example.com

From your GitHub account, go to Settings from the top right icon, then Developer Settings, then Personal Access Tokens.

Next time you do a push, use the Personal Access Token value when prompted for your password.

Proudly powered by WordPress