-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathpath---2018-5-29-git-hub-pages-three-ways-b397fe4647bab77a6713.js
2 lines (2 loc) · 12.1 KB
/
path---2018-5-29-git-hub-pages-three-ways-b397fe4647bab77a6713.js
1
2
webpackJsonp([0xde1ccdada446],{419:function(e,a){e.exports={data:{site:{siteMetadata:{title:"Armando Sosa",author:"Armando Sosa"}},markdownRemark:{id:"/Users/soska/dev/personal/soska.github.com/src/posts/2018/5/29/git-hub-pages-three-ways/index.md absPath of file >>> MarkdownRemark",html:'<p>\n <a\n class="gatsby-resp-image-link"\n href="/static/real-artists-ship-7d420dc58f3a433d88e95e4de3821692-c1266.jpg"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n \n <span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; ; max-width: 590px; margin-left: auto; margin-right: auto;"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 52.916666666666664%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAECAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAABAP/aAAwDAQACEAMQAAAB504sUSR//8QAGBABAAMBAAAAAAAAAAAAAAAAAQACERD/2gAIAQEAAQUCAy1QiE3v/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQMBAT8Bp//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABYQAQEBAAAAAAAAAAAAAAAAADEAIP/aAAgBAQAGPwJmcf/EABsQAQEAAgMBAAAAAAAAAAAAAAEAESFRgaHR/9oACAEBAAE/IU/GXw+YDrLqFzO5v//aAAwDAQACAAMAAAAQxD//xAAWEQADAAAAAAAAAAAAAAAAAAAQEVH/2gAIAQMBAT8QSD//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAYEAEBAQEBAAAAAAAAAAAAAAABEQAhMf/aAAgBAQABPxBudKB65uYzxYmYkTpbRNPKyfSu9b//2Q==\'); background-size: cover; display: block;"\n >\n <img\n class="gatsby-resp-image-image"\n style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n alt="Real Artists Ship"\n title=""\n src="/static/real-artists-ship-7d420dc58f3a433d88e95e4de3821692-f8fb9.jpg"\n srcset="/static/real-artists-ship-7d420dc58f3a433d88e95e4de3821692-e8976.jpg 148w,\n/static/real-artists-ship-7d420dc58f3a433d88e95e4de3821692-63df2.jpg 295w,\n/static/real-artists-ship-7d420dc58f3a433d88e95e4de3821692-f8fb9.jpg 590w,\n/static/real-artists-ship-7d420dc58f3a433d88e95e4de3821692-85e3d.jpg 885w,\n/static/real-artists-ship-7d420dc58f3a433d88e95e4de3821692-d1924.jpg 1180w,\n/static/real-artists-ship-7d420dc58f3a433d88e95e4de3821692-c1266.jpg 1200w"\n sizes="(max-width: 590px) 100vw, 590px"\n />\n </span>\n </span>\n \n </a>\n </p>\n<p>Is it weird that GitHub is quickly becoming my favorite hosting platform? I’ve been putting things online for a while now, but the truth is that I have never enjoyed it. Getting a server up and going feels like a big hassle and as a result I almost always refrained from doing passion projects.</p>\n<p>Well, no more.</p>\n<p>Full disclaimer: I know that if you want to build a fully-featured backend application GitGub Pages is not going to be enough. But I hope this guide is helpful for people doing content projects or static single-page applications.</p>\n<h2>Why GitHub Pages</h2>\n<p>There are great static hosting companies like <a href="https://www.netlify.com/">Netlify</a> or <a href="https://surge.sh">Surge</a>. And there’s also Zeit’s <a href="https://zeit.co/now">Now</a>, which does way more than just static hosting. Also, let’s remember that you can even use an S3 bucket to host static html on a custom domain.</p>\n<p>While trying to decide for one those options, a friend asked me why I haven’t considered to use GitHub Pages. I honestly hadn’t think about it. For starters, I thought using <a href="https://jekyllrb.com/">Jekyll</a> was a requirement and —for no good reason— I just don’t like Jekyll. After <a href="https://help.github.com/articles/using-a-static-site-generator-other-than-jekyll/">I found that to be false</a>, and since I was already using Git and GitHub for version-control and development purposes it was just minutes to have my project online.</p>\n<p>It was an eye-opening moment. And I wondered what else I can use it for?</p>\n<h2>Hosting a Gatsby blog</h2>\n<p>I already wrote <a href="https://armandososa.org/2018/5/25/gatsby/">about my experience setting up this blog with Gatsby</a> but I saved the recipe for the hosting part for this post. It’s actually quite simple, thanks to a <a href="https://www.npmjs.com/package/gh-pages">npm package called gh-pages</a>.</p>\n<p>The official <a href="https://www.gatsbyjs.org/docs/how-gatsby-works-with-github-pages/">instructions are pretty simple</a> so there’s no need for me to duplicate them here. Just remember, if <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">you’re using custom domains</a> to save your CNAME file, not in the root of your project, but inside the <code class="language-text">static</code> folder. Otherwise, your custom domain will stop working after every deploy.</p>\n<p>In my experience, I wanted my domain <code class="language-text">armandososa.org</code> to be the <em>anchor</em> for all my current and future projects. So I set up my Gatsby blog as my <a href="https://help.github.com/articles/user-organization-and-project-pages/#user-and-organization-pages-sites">User Site</a> with my domain poiting to it. This way, other repository projects automatically become subpaths for this host. For example, my <a href="https://github.com/soska/react-keyboardist">keyboardist</a> repo, automatically becomes available under <a href="https://armandososa.org/react-keyboardist">armandososa.org/react-keyboardist</a> which I find pretty neat.</p>\n<h2>Hosting a Create React App project</h2>\n<p><a href="https://github.com/facebook/create-react-app">Create React App</a> is Facebook’s official zero-configuration React Development tool and it’s jsut great. I happened to start a big project just months before CRA was released and I went back and ditched my whole home-made configuration and just used CRA default configuration instead. It just works™.</p>\n<p>Chances are that, if you’re creating a React app for your boss or for a big client, you’ll put in a Docker container or whatever kids do these days. For small apps, side projects or just demos I think putting them in Github Pages is perfectly adequate.</p>\n<p>To do just that you’ll have to install our helpful <a href="https://www.npmjs.com/package/gh-pages">gh-pages</a> npm package.</p>\n<div class="gatsby-highlight">\n <pre class="language-text"><code class="language-text">$ npm install gh-pages</code></pre>\n </div>\n<p>And setup a <code class="language-text">deploy</code> script in your <code class="language-text">package.json</code>, telling <code class="language-text">gh-pages</code> where to fidn the compiled output.</p>\n<div class="gatsby-highlight">\n <pre class="language-json"><code class="language-json"><span class="token property">"scripts"</span><span class="token operator">:</span><span class="token punctuation">{</span>\n <span class="token property">"deploy"</span><span class="token operator">:</span><span class="token string">"gh-pages -d build"</span>\n<span class="token punctuation">}</span></code></pre>\n </div>\n<p>If you add a <code class="language-text">predeploy</code> script, it will be run before deploy. That’s helpful if you don’t want to forget to build your app first.</p>\n<div class="gatsby-highlight">\n <pre class="language-json"><code class="language-json"><span class="token property">"scripts"</span><span class="token operator">:</span><span class="token punctuation">{</span>\n <span class="token property">"predeploy"</span><span class="token operator">:</span><span class="token string">"npm run build"</span><span class="token punctuation">,</span>\n <span class="token property">"deploy"</span><span class="token operator">:</span><span class="token string">"gh-pages -d build"</span>\n<span class="token punctuation">}</span></code></pre>\n </div>\n<p>And if you need a <code class="language-text">CNAME</code> file for your custom domain, you’ll have to put it in inside the <code class="language-text">public</code> folder, along the favicon and other static files. CRA’s <code class="language-text">build</code> script will copy the whole contents of this folder into the <code class="language-text">build</code> folder when compiling your app.</p>\n<h2>Just show me the Readme</h2>\n<p>Sometimes you just want a quick public website for your Open Source project and you don’t have time to create a Gatsby blog or a React app. Or maybe you do have the time but choose to spend it watching The Office on Netflix and that’s cool. The point is that you don’t have to.</p>\n<p>If you already have a well-crafted <code class="language-text">README.md</code> (and you should), all you need to do is go to your repository settings and select <code class="language-text">master branch</code> as the source of your GitHub Pages and GitHub will use it to build your page. I like the default theme, but you can select a different one.</p>\n<p>\n <a\n class="gatsby-resp-image-link"\n href="/static/settings-c67caf7e49871ae75d20aaaae5b2454f-c2a76.png"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n \n <span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; ; max-width: 590px; margin-left: auto; margin-right: auto;"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 43.8618925831202%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsSAAALEgHS3X78AAABXUlEQVQoz42R2U7DMBBF8/9/BhXlBR4KApo2zeI63tJQx7F9GbuRaEFITHQ0izyTWQrrAno9ozceUg0QvYA2BloraCWzllJkToPJmvOe3ioIITPJt9YiSTF6i6fhHet+gwf+jLv2EWu+wepYElvcsy1WiWRTLPmbc4nXab+ww4vd4c0fUAWGYooOlW1RO4Yu9GgzgtDk66wbf6t7qMwRckGBRYFjUChiiDjsa7CWYRxGaKmzNkpDCwVFDNqQbzCa0yVO60lEj4vEhUAjJ19qjXJf4aPco5cSHaedUZHJTbDTBOcc2e5bzyETYsT1F2KgDikopELTMbAjp4QZlvAh4D+S8hNJAk1bBErsug513aBpGrqagKILaupaLZfknEPpEcLMGM/zTaFfBZPBKWlX1TT2AYzGTT+ZZ+rSe8yJbFPMx5z0l6QV5JGtnXAaPzN2cksHC1ej4UdXP0mNfAEPKLaxe3T34QAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n >\n <img\n class="gatsby-resp-image-image"\n style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"\n alt="settings"\n title=""\n src="/static/settings-c67caf7e49871ae75d20aaaae5b2454f-fb8a0.png"\n srcset="/static/settings-c67caf7e49871ae75d20aaaae5b2454f-1a291.png 148w,\n/static/settings-c67caf7e49871ae75d20aaaae5b2454f-2bc4a.png 295w,\n/static/settings-c67caf7e49871ae75d20aaaae5b2454f-fb8a0.png 590w,\n/static/settings-c67caf7e49871ae75d20aaaae5b2454f-c2a76.png 782w"\n sizes="(max-width: 590px) 100vw, 590px"\n />\n </span>\n </span>\n \n </a>\n </p>\n<p>Hot tip: If you want to add images to spice up your <code class="language-text">README</code>, you can add them to your repo. For example, I like having an <code class="language-text">assets</code> folder because I saw someone else naming it that.</p>\n<div class="gatsby-highlight">\n <pre class="language-markdown"><code class="language-markdown"></code></pre>\n </div>\n<hr>\n<p>So these are three ways that I’ve been using GitHub Pages to remove friction from my development process. This way I can actually ship stuff instead of just having tons of unreleased side projects in my hard disk.</p>\n<p>What did I miss? <a href="https://twitter.com/soska">Let me know on Twitter</a> or send me an e-mail to arm.sosa[at]gmail.com.</p>',frontmatter:{title:"GitHub Pages Three Ways",subtitle:"Why you may not need a hosting company",blurb:"Is it weird that GitHub is quickly becoming my favorite hosting platform?",date:"May 29, 2018"}}},pathContext:{slug:"/2018/5/29/git-hub-pages-three-ways/",previous:{fields:{slug:"/2018/5/25/gatsby/"},frontmatter:{title:"So you want to build a blog with Gatsby?",subtitle:"Here's what I learned doing just that.",blurb:null}},next:null}}}});
//# sourceMappingURL=path---2018-5-29-git-hub-pages-three-ways-b397fe4647bab77a6713.js.map