How to deploy a create-react-app with github-actions
<p dir="auto">Here's a quick guide on how to deploy a CRA (create-react-app) to GitHub pages using GitHub actions.<br />
We'll create a GitHub Action workflow that runs the build command and then deploys the <code>build directory by pushing it to the <code>gh-pages branch.
<h2>Setup
<h3>1. Prefix URLs
<p dir="auto">GitHub pages urls looks like <code>user.github.io/repo-name, so we need to make sure all our relative URLs are prefixed by <code>/repo-name. Using create-react-app, it's enough to add <code>"homepage": "/repo-name", to the <code>package.json. The <code>build command will automatically take care of the rest.
<h3>2. Add deployment key
<p dir="auto">Deploying to GitHub pages means pushing the <code>build directory to the <code>gh-pages branch. Currently, pushes using default GitHub Actions credentials <a href="https://github.community/t5/GitHub-Actions/Github-action-not-triggering-gh-pages-upon-push/m-p/26869" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">do not trigger a GitHub pages rebuild.<br />
Meaning, we need to <strong>set up a deployment key for the repo first that can be used by the GitHub action.<br />
I use the same deployment key for the gh-pages deployment actions across all my repos.<br />
You can create a new SSH public/private key pair using this command:
<pre><code>cd ~/.ssh
ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages-actions -N ""
<ol>
<li>Following the <a href="https://github.com/peaceiris/actions-gh-pages#getting-started" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Getting Started section of this gh-pages Action we <strong>add a new write-access deployment key** in the <code>/repo/settings/keys section pasting our <strong>public key from the <code>.pub file.
<p dir="auto"><img src="https://images.hive.blog/768x0/https://raw.githubusercontent.com/peaceiris/actions-gh-pages/master/images/deploy-keys-1.jpg" alt="Add Deployment key" srcset="https://images.hive.blog/768x0/https://raw.githubusercontent.com/peaceiris/actions-gh-pages/master/images/deploy-keys-1.jpg 1x, https://images.hive.blog/1536x0/https://raw.githubusercontent.com/peaceiris/actions-gh-pages/master/images/deploy-keys-1.jpg 2x" />
<ol>
<li>We need to make the private key accessible to our GitHub action. To do this add the corresponding <strong>secret key in the <code>repo/settings/secrets section.<br />
Make sure to name it <code>ACTIONS_DEPLOY_KEY.
<p dir="auto"><img src="https://images.hive.blog/768x0/https://github.com/peaceiris/actions-gh-pages/blob/master/images/secrets-1.jpg?raw=true" alt="Add Deployment key" srcset="https://images.hive.blog/768x0/https://github.com/peaceiris/actions-gh-pages/blob/master/images/secrets-1.jpg?raw=true 1x, https://images.hive.blog/1536x0/https://github.com/peaceiris/actions-gh-pages/blob/master/images/secrets-1.jpg?raw=true 2x" />
<h2>GitHub Action
<p dir="auto">Now all that's left is to create a new <code>.github/workflows/deploy.yml workflow file and paste the following GitHub action YAML code:
<pre><code>name: Deployment
on:
push:
branches:
- master
jobs:
deploy:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [12.x]
steps:
- uses: actions/checkout@v1
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: Install Packages
run: npm install
- name: Build page
run: npm run build
- name: Deploy to gh-pages
uses: peaceiris/actions-gh-pages@v3
with:
deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
publish_dir: ./build
<p dir="auto">On each push to the <code>master branch it performs the following tasks:
<ol>
<li>Checkout the code from the master push
<li>Install Node v12
<li>Run <code>npm install
<li>Run <code>npm build which creates the <code>build folder.
<li>Deploy the <code>./build folder to gh-pages using the deploy key in the <code>secrets.ACTIONS_DEPLOY_KEY variable.
<p dir="auto">To test the deployment process push this workflow file to master.
<hr />
<p dir="auto">Originally published at <a href="https://cmichel.io/create-react-app-github-actions/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://cmichel.io/create-react-app-github-actions/