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.

Deploying Static HTML

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.

Using Github Pages for Projects

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.

Getting Started with Github Pages

Here are the steps you should follow to get started with Github Pages:

1. Go to the Github Pages Homepage
2. Click the "Project site" option in the "What is GitHub Pages?" section
3. Below that click "Start from scratch"
4. Create and push a repo with an index.html file (be sure to add minimal content so you can tell if your page is serving correctly)
5. Go to the "Settings" tab of the repo you just created
6. Find the "Github Pages" section in the settings for that repo
7. Select the branch you'd like to use (probably master)
8. Click "Save" next to the dropdown!
9. You now should be able to visit http://YOUR_GITHUB_USERNAME.github.io/YOUR_REPO_NAME and see the rendered index.html file you created

Using Surge.sh for Projects

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.

Getting Started with Surge.sh

Here are the steps to get started with Surge:

1. You'll need to install Node.js to use npm
2. Use npm install -g surge to install the Surge command-line tool
3. cd into your project directory and run $ surge from your command-line
4. Surge will prompt you for account creation and then upload your content
5. If you want to see the docs for more info they're here

Here is a nice quick video if you want to see how easy it is to use Surge!

Wrapping Up

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.

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!