<h3>Introduction</h3><p>Once you learn basic html and css and a bit about java script and render web page at your local server (such as python by python3 -m http.server), you might wonder how we can deploy this to the web? This article is to answer the question.</p><h3><br>Options to deploy static web site</h3><p>Assuming your web page does not require backend such as database management nor backend calculation, these web site are categorized as static web site. There are couple of ways to deploy static web site to a web with a free.</p><ul><li>AWS</li><li>Firebase</li><li>GitHub Pages</li><li>Bl.ocks (mainly focusing on d3 as a curation)</li></ul><p>There are other service which could be potentially free on static web page with the combination of paid service, such as digitalocean and heroku. In this article, I assume that you have a certain knowledge about github and will choose GitHub Pages as a demonstration. If you are not familiar with github, you may want to refer previous article (<a href="http://datak.biz/blog/detail/7/" target="_blank">blog about github</a>)</p><p><br></p><h3>GitHub Pages Options</h3><p>They offer static web site with free and unlimited, and combine with their typical git repository. Conversely, as long as you have github repository, it is easy to deploy.</p><p>They offer 2 options to create a page, either yourself/organization itself or a certain project under you/organization. We assume that you would like to create project site under your github account for now.</p><p><br></p><h3>STEP1 : Create a project repository</h3><p>Create a standard github repository at github site and using CLI below connecting your local repository to github's remote repository at github.com;</p><pre>cd <your local repository> git init git add . git commit -m '<your commit message here>' git add remote origin <your URL for remote repository, copy from github site> git push origin master</pre><p>Make sure that you have index.html page, web server finds index.html file and render.</p><p><br></p><h3>STEP2 : Activate github repository as web page</h3><p>At your remote repository site, go to 'settings' tab and scrolling down to show 'GitHub Pages' section. Select 'source branch' and 'location' and push 'save' button.</p><p><img src="/media/django-summernote/2020-12-14/223363a4-9829-47e5-a72f-21fa50fa4903.png" style="width: 100%;"><br></p><p>Your projects URL will be <span style="color: rgb(255, 0, 0);"><your github account>.github.io/<your remote repository name></span> like below</p><p><img src="/media/django-summernote/2020-12-14/332524f6-89ec-42bf-bee9-7c2d3d8fcd4a.png" style="width: 100%;"><br></p><p>That's it! It's very straightforward, thanks github! One note, it potentially happens to take ~30min to deploy until you see your application at the URL</p><p><br></p><p>For a full instruction and documentation, please refer their original page <a href="https://pages.github.com/" target="_blank">here</a>.</p>
<< Back to Blog Posts
Back to Home