{"id":8283,"date":"2020-06-23T21:23:36","date_gmt":"2020-06-23T21:23:36","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=8283"},"modified":"2020-06-23T21:31:53","modified_gmt":"2020-06-23T21:31:53","slug":"deploying-react-to-github-pages","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/deploying-react-to-github-pages\/","title":{"rendered":"Deploying React to GitHub Pages"},"content":{"rendered":"<ul>\n<li>Create a new repository on GitHub, so we have something to refer to mine&#8217;s called <em>react.io<\/em> so simply replace this with your repo name within these steps, also the steps will show my GitHub repository at putridparrot, again replace this with your GitHub username.<\/li>\n<li>Clone the repository onto your local machine<\/li>\n<li>In the parent folder of your cloned repository run\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\nyarn create react-app react.io --typescript\r\n<\/pre>\n<p><em>Note: without &#8211;typescript if you want plain JavaScript code.<\/em><\/p>\n<li>cd back into your repo folder and type\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\nyarn add gh-pages -D\r\n<\/pre>\n<\/li>\n<li>Open your packages.json and add the following (below the &#8220;verson&#8221; is a good place)\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\n&quot;homepage&quot;: &quot;http:\/\/putridparrot.github.io\/react.io&quot;,\r\n<\/pre>\n<\/li>\n<li>Next up we need to add a predeploy and deploy script within the &#8220;scripts&#8221; section of the packages.json, so add these\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\n&quot;deploy&quot;: &quot;gh-pages -d build&quot;,\r\n&quot;predeploy&quot;: &quot;yarn run build&quot;\r\n<\/pre>\n<\/li>\n<li>Run the following from your shell\/terminal\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\nyarn deploy\r\n<\/pre>\n<\/ul>\n<p>When we run <em>yarn deploy<\/em> the <em>predeploy<\/em> script is run and will create a gh-pages branch on your GitHub remote repo. Also it will default to this branch and when you go to the Settings page of your repository and scroll to the GithHub Pages section, you should see the source set to gh-pages branch.<\/p>\n<p>As this point my React GitHub pages site should be visible at <\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\nhttps:\/\/putridparrot.github.io\/react.io\/\r\n<\/pre>\n<p>You may well want to push the source of your React application to GitHub as well, so simply commit and push to master or another branch, DO NOT overwrite the gh-pages branch, this is basically your deployed site.<\/p>\n<p>To update your GitHub pages, simply run the following each time you&#8217;re ready to deploy to gh-pages<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\nyarn deploy\r\n<\/pre>\n<p>The updated deployment may take up to ten minute to become available.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Create a new repository on GitHub, so we have something to refer to mine&#8217;s called react.io so simply replace this with your repo name within these steps, also the steps will show my GitHub repository at putridparrot, again replace this with your GitHub username. Clone the repository onto your local machine In the parent folder [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[297,243],"tags":[],"class_list":["post-8283","post","type-post","status-publish","format-standard","hentry","category-github","category-react"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=8283"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8283\/revisions"}],"predecessor-version":[{"id":8290,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8283\/revisions\/8290"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=8283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=8283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=8283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}