During this and subsequent courses, you will create many websites, and may wish to host them online. Developing websites locally works fine when all you need to do is look at the code and resulting web pages by yourself. However, eventually, you’ll want and need to show your work to others. The easiest way to accomplish this is to use one of a number of free services.
Many of the services discussed below are commonly used with git (a command-line tool for version control) and either GitHub or GitLab (two popular online git repository hosting services).
While using git/GitHub/GitLab are beyond the scope of this course, learning them is something you’ll need to do in the coming semesters.
In the meantime, you are encouraged to create accounts for yourself on both GitHub and GitLab. It’s free, and doing so will make it easier to connect to other services discussed below:
In this course we are focused on HTML, CSS, and JavaScript for client-side
web development. The web sites we will create are often referred to as
static sites, because they
are comprised of files (.html, .css, .js) with no server application.
A static site only needs a web server to serve its files.
Because static sites are so simple to host (you just need to upload your files), there are many options for hosting them. Previously this was the kind of thing that people did on their own, setting up, or renting space on a web server.
Today there are numerous free options for hosting your own personal static sites. We’ll briefly mention three, and focus on the simplest.
No matter which hosting service you use, make sure you follow these guidelines when creating your web pages.
index.html file in the root of your folder. This is necessary so that your site has an entry point, and people can navigate to it without knowing the name of your web pages. In addition to your index.html page, ou can also have other .html pages that use different names; just add links to them from your index.html page. my-website/
|
+--- index.html
+--- about.html
+--- styles/
|
+--- style.css
+--- images/
|
+--- logo.png
In your index.html, you should refer to these other files and directories using paths relative to the index.html file, without specifying a protocol, domain, etc. For example:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="styles/style.css" type="text/css">
</head>
<body>
<h1 class="logo">Welcome!</h1>
<a href="about.html">About</a>
</body>
</html>
In the HTML above, notice how the stylesheet <link> and anchor <a> elements both use paths relative to index.html, and don’t use a leading /.
In the CSS file, you’d do something similar, but the paths would be relative to the styles/style.css file this time:
.logo {
background-image: url('../images/logo.png');
}
By specifying all your file paths for scripts, stylesheets, images, etc as relative paths to the file where you include them,
cd my-website.npx parcel build index.html. See the parcel cli docs for details on changing the public URL if your host uses a particular path for your site (e.g., GitHub pages).dist/ directory.Glitch provides both online coding and hosting together in one tool. You can remix existing pages and then add your own files or change the code.
If you need a quick way to both create and host a small web site, especially if you’re just wanting to learn and experiment with something, Glitch is a good option to consider. See the help docs for more info.
To use Netlify, first you need to Sign up. If you followed the advice above, you already have a GitHub account, and can authenticate using your GitHub (or GitLab) account vs. having to create a new one for Netlify.
Once you’ve signed up, the easiest way to deploy your web site is to drag-and-drop the site’s folder into the dropzone on your Netlify dashboard. There is a short video tutorial available in the Netflify docs as well
Once your site is deployed, you can manage it via the Netlify Dashboard. See the Netflify docs for more info on other things you can do.
GitHub is a git hosting service, which also offers static site hosting for users and their open source repositories. Using GitHub usually means working with git, but you can also begin by using the GitHub Desktop app, and upload your files that way.
GitHub provides static hosting via GitHub Pages. In order to use GitHub Pages for free, you’ll need to host your source code on GitHub in a public repository. As a student you can get special access to GitHub and create private repositories.
Similar to GitHub, GitLab provides git repository hosting. They also have a pages feature for hosting static sites.
The docs are excellent, and cover all aspects of setup and customization.