This article helps you get started with setting up a testing environment and organizing your webpages.
Prerequisites: | You must know what is a web server, how to set up a text editor, and how domain names work. |
---|---|
Objective: | Learn how to set up a local server and a basic directory structure for your new website. |
Summary
Especially when working on your first web project, you'll want to test it locally before you show it to the world. You can do this by setting up a local server. We'll also cover how to put a scalable structure in place so that your files stay organized even when your project gets big.
Active Learning
There is no active learning available yet. Please, consider contributing.
Dig deeper
Setting up your text editor
We're assuming you already have a text editor installed properly. If not, please do that first. Here are a few pointers.
Setting up a local web server
Note: There are all sorts of web server programs out there (e.g. Apache, Lighttpd, IIS, nginx). Apache is free, cross-platform, and easy to install, so we'll use Apache in this article.
Understanding localhost
In the world of DNS, there is one special address that every machine knows: localhost
. This is a reference to your own server, located on your personal machine. You can hit localhost
with your browser without even being connected to the Internet.
Note: localhost
actually points to a reserved IP address that loops back to your own machine: 127.0.0.1
(IPv4) or ::1
(IPv6).
Try accessing your localhost: http://localhost. If you see something similar to the image below, then Congratulations! You already have a web server installed on your machine. (Mac OS X, for example, comes with Apache preloaded.)
If not, we'll have to install Apache.
Either way, you should configure Apache to point to your working directory. We document both these procedures below. They are fundamentally the same, but differ in detail based on your operating system, so we discuss Windows right here. If you aren't using Windows, feel free to skip down to the Ubuntu/Linux or Mac OS X sections of this article.
Getting your server up and running: Windows
Installing Apache
Installing Apache is a bit complicated under Windows. Go here for a thorough walkthrough of installing precompiled Apache binaries.
After installing, access http://localhost/ to see if your server is working. If not, please try your friendly neighborhood search engine or a community support site. There are loads of questions already asked and answered.
Moving the localhost root to your working folder
Behind the curtain, your web server uses http to display files located on a machine. In our example, Apache is showing a file called index.html
located in a subdirectory of our Apache installation. It would be better if we could work in whatever directory we please. (The file's actually called index.html.en
because of language switching, but let's stick to index.html
for now.)
First let's make a folder and then we'll point our web server to this folder:
- Make a folder called
htdocs
in your home folder, namely atC:\Users\username\htdocs
, where username stands for your user account's real user name. (If you're still using a Windows version older than Vista, keep in mind from now on that your home folder is atC:\Documents and Settings\username\htdocs
.) - Open your Apache configuration file, located at
C:\Program Files\Apache Software Foundation\conf\httpd.conf
. Provide administrator credentials as needed. - Within the file, find the following line:
DocumentRoot "C:\
. Change this line so that it points to your ownUsers
\Apache Software Foundation\htdocs"htdocs
folder:DocumentRoot "C:\
Documents and Settings\username\htdocs
" - Further on in the same file, find the
<Directory>
instruction:<Directory "
Change this line like this:C:\
">Users
\Apache Software Foundation\htdocs<Directory "C:\
Documents and Settings\username\htdocs
"> - Save the file.
- Restart Apache: Start ➤ Apache ➤ Restart Apache.
- Reload
localhost
in your browser. If all went according to plan, you'll see the folder's index. By default the index is a list of all the files in the folder, but we'll show you next how to customize the index page. Feel free to skip past the Ubuntu and Mac instructions.
Getting your server up and running: Ubuntu (or Linux in general)
Installing Apache
Under Ubuntu, simply fire up a terminal (Ctrl + Alt + T) and run these commands (providing your password as needed):
sudo apt-get update sudo apt-get install apache2
Note: If you aren't using Ubuntu or another Debian-based distro, follow these seven steps to compile and install Apache. You may need to provide your password. (You're welcome to use a GUI text editor rather than vi
to edit configuration files.)
After installing, access http://localhost/ to see if your server is working. If not, please try your friendly neighborhood search engine or a community support site. There are loads of questions already asked and answered.
Moving the localhost root to your working directory
Behind the curtain, your web server uses http to display files located on a machine. In our example, Apache is showing a file called index.html
located in a subdirectory of our Apache installation. It would be better if we could work in whatever directory we please. (The file's actually called index.html.en
because of language switching, but let's stick to index.html
for now.)
Let's create a directory and point our web server to the directory:
- Create a directory called
htdocs
in your home directory, namely at/home/username/htdocs
, where username stands for your user account's real user name. - Open your Apache configuration file, located at
Provide administrator credentials as needed. (If you aren't using a recent version of Ubuntu or another Debian-based distro, try looking under/etc/apache2/sites-available/000-default.conf.
/etc/apache2/httpd.conf
or/etc/httpd/conf/httpd.conf
.) - Within the file, find the following line:
DocumentRoot /var/www/html
. Change this line so that it points to your ownhtdocs
directory:DocumentRoot /home/
username/htdocs
- At this point you should add some file access restrictions. Add the following lines under the
DocumentRoot
line, substituting your name forUSERNAME
:
<Directory /> Options FollowSymLinks AllowOverride None Require all denied </Directory> <Directory /home/USERNAME/htdocs/> Options Indexes FollowSymLinks MultiViews AllowOverride None Require all granted </Directory>
- Save the file.
- Restart Apache with this terminal command:
sudo apachectl restart
. Provide your administrative password when prompted. - Reload
localhost
in your browser. If all went according to plan, you'll see the directory's index (as pictured below). By default the index is a list of all the files in the directory, but we'll show you next how to customize the index page. Feel free to skip past the Mac instructions.
Getting your server up and running: Mac OS X
Apache comes bundled with Mac OS X. But we still need to move the localhost
root to your working directory.
Behind the curtain, your web server uses http to display files located on a machine. In our example, Apache is showing a file called index.html
located in a subdirectory of our Apache installation. It would be better if we could work in whatever directory we please. (The file's actually called index.html.en
because of language switching, but let's stick to index.html
for now.)
Let's create a directory and point our web server to the directory:
- Create a directory called
htdocs
in your home directory, namely at/Users/username/htdocs
, where username stands for your user account's real user name. - Open your Apache configuration file, located at
/etc/apache2/httpd.conf.
- Within the file, find the following line:
DocumentRoot "/Library/WebServer/Documents"
. Change this line so that it points to your ownhtdocs
directory:DocumentRoot "/Users/
username/htdocs
" - Further on in the same file, find the
<Directory>
instruction:<Directory "
Change this line like this:/Library/WebServer/Documents
"><Directory "/Users/
username/htdocs
"> - Save the file.
- Restart Apache with this terminal command:
sudo apachectl restart
. Provide your administrative password when prompted. - Reload
localhost
in your browser. If all went according to plan, you'll see the directory's index, which by default is a list of all the files in the directory:
Add an index page
When you visit somebody's website, you expect to see more than just a list of files. We should add a custom index page to our local web site. The index is an HTML file. It must be named index.html
and placed within our htdocs
directory.
Just open up your text editor and copy the following html code into a new file:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>This an index page</title> </head> <body> <p>This is my own custom index</p> </body> </html>
Save the file in your htdocs
directory as index.html
:
Now, if you open your local web server at http://localhost, you'll get:
A basic file organization
Structure is critical in any website. A website is rarely made up of only HTML files. We also incorporate images, CSS styling, and JavaScript functionality. From the start you should organize all those files somehow so you don't get lost.
Obviously you're free to organize yourself any way you want, but it's most common to create at least three subdirectories: images
for images, styles
for CSS files, and scripts
for scripts. Simple and straightforward.
Placeholders
Soon we'll discuss how to create a web page, how to use CSS, and later on how to use JavaScript. But you don't need to know anything about those technologies to throw together a few placeholders to prepare the ground.
Let's create a new file, which will be your main stylesheet where you write all CSS style rules. Just copy the following code into a text editor:
body { font-family: sans-serif; }
Save this file into the styles
directory as basic.css
:
Go back into your index page to link it to the stylesheet. We'll rely on the convenient <link>
tag:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>This an index page</title> <link rel="stylesheet" href="/styles/basic.css"> </head> <body> <p>This is my own custom index</p> </body> </html>
Now, if you reopen your local website (or refresh it if you left your browser open), you'll see that the stylesheet has changed the font:
Final project structure
To recap, by now your file/directory-structure should look like this:
htdocs
(the root directory for the project)images
(the directory for your images)scripts
(the directory for all your JavaScript)styles
(the directory for your CSS files)basic.css
(your main stylesheet)
index.html
(the index page of your local website)
That's the minimum directory structure you should have in place to successfully scale your project as it grows. As your project develops, feel free to enhance your structure so it works optimally for you.
Next steps
Now that you are ready to start working and to learn what we've been doing with the placeholders, it's time to write your very first webpage.