Once you have your markup ready to display to the world, you'll want to be able to upload it to a hosting provider where it can be viewed via the web. We'll be covering a few popular free options for deploying static HTML content in this lesson. One is Github Pages, which is a widely used and reliable way to deploy static content from your existing Github repositories. The other is Surge, which is a super simple service for deploying static content in a single command. Both are perfectly acceptable to use; our personal favorite is Surge for its simplicity.
Because HTML is just static content it is common for services like Github to allow users to upload content and serve it for free. Dynamic content usually requires a database and an environment to run a server-side scripting language. As you can imagine, dynamic content costs more money to host because of its requirements. It is also more complex to deploy for these reasons as well. Static content hosting and deployment is fairly straightforward and in these cases it's free!
Next, we'll take a look at two solutions which are widely used service for hosting developer project pages and portfolio sites.
Github Pages is a service Github provides for users to create sites from their account, organization, and projects. It works by serving content from your uploaded git repositories.
If you think about your Github repository as the root directory for a website, how Github Pages works under the hood should start to make sense. Once you set the master branch of your repository to be the branch used by Github Pages, Github Pages serves a homepage for that project from the master branch. If you have an
index.html file in the root directory of that repository it is treated as the index page for that end point.
Here are the steps you should follow to get started with Github Pages:
index.htmlfile (be sure to add minimal content so you can tell if your page is serving correctly)
http://YOUR_GITHUB_USERNAME.github.io/YOUR_REPO_NAMEand see the rendered
index.htmlfile you created
Surge.sh is a simple static web publishing service geared towards front-end developers. The great thing about Surge is that it is dead simple. One command will upload your content and make it ready to view on a sub-domain of the Surge site.
Here are the steps to get started with Surge:
npm install -g surgeto install the Surge command-line tool
cdinto your project directory and run
$ surgefrom your command-line
Here is a nice quick video if you want to see how easy it is to use Surge!
As you create more projects with Viking and in your dev career you'll find that free static hosting services are a life saver! They keep you from having to pay for hosting and allow you to keep your projects nice and tidy by playing nice with the workflows you already use.