Ecoff elementary website: Ecoff Elementary – Chesterfield County Public Schools

One of my friends has been saying for a couple of months that he will make a website during spring break. Now the holidays are ending, but he still hasn’t started. Tomorrow is his birthday, and I decided, as a asshole good friend, to give him a gift: write a step-by-step and as simple as possible instruction.

In reality, it only takes one hour to make a website. I know this because I timed myself doing the following steps myself, and the whole process took a little under an hour (I even registered a new domain and created a new Github account for the sake of experimentation). The code for this site can also be viewed on Github.

1. Go to namecheap.com and register a domain. This step is only if you need your own domain name.

2. Create a Github account and download Git if you haven’t already.

3. Create a directory to host the website and move there with the command cd : these are the commands mkdir my-site && cd my-site . All future commands assume that you are inside the working directory.

4. Making a new Github repository for the site called yourusername. github.io. For example, I’m registered as smilli, so my repository is called smilli.github.io.

5. In the working directory, run git init and git remote add origin github.com/username/username.github.io.git , where instead of ‘username’ we specify our username.

6. Create a file ‘index.html’ in the folder with the site with the HTML code of the main page. It is not necessary to spend a lot of time here, it can be very concise.

 

  
  <-- Add some style to your site, see http://getbootstrap.com for details -->
  


  
YOUR SITE TITLE
  
Your text blahblahbhalbha
  
Another paragraph! Maybe more text!

 

7. We write any text in the code of the main page. The changes are displayed locally with python -m SimpleHTTPServer 8000 and typing localhost:8000 in the browser.

8. Now run the following commands:

 git add .
git commit -m "Initial commit"
git push -u origin master 

9. Go to yourusername.github.io. Here you should see your website! Congratulations, you posted something online.

10. If you want your own domain name, create a ‘CNAME’ file (all in capital letters). There you add one line ‘’yourdomainname.com’’ (without http or www). See CNAME configuration details here.

11. As before, we submit all changes to Github.

 git add .
git commit -m "Add CNAME"
git push 

12. Now log in to namecheap.com and click on the domain name you want in your list of domains. The list will be something like this:

After selecting the domain, the “All Host Records” link will appear in the left pane under the “Host Management” tab. Click on it. You will now see the default settings that Namecheap has specified for your site.

Change the settings as follows (replacing ‘username’ with your username, of course).

13. After the DNS changes take effect, you will be able to see your site on your domain! Congratulations. 🙂

Publishing Your Website – Learning Web Development

• Back
• Review: Getting started with the web
• Next

After you’ve finished coding and organizing the files that make up your website, you need to put it all on the Internet so people can find your site. This article describes how to post a simple example of your code with minimal effort.

Publishing a website is not an easy topic, mainly because there are many different ways to do it. In this article, we do not aim to document every possible method. Rather, we’ll discuss the pros and cons of three broad strategies from a beginner’s point of view, and then you’ll walk through one method that will work for the time being.

Getting hosting and a domain name

To have more control over the content and appearance of a website, most people choose to buy web hosting and a domain name:

• Hosting – leased file space on a web server of a hosting company. You host your website files in this space and the web server serves up the content for web users who request it.
• A domain name is a unique address where people can find your website, such as http://www.mozilla.org or http://www.bbc.co.uk . You can rent a domain name for as many years as you want (minimum 1 year) from domain registrar .

Many professional websites are located on the Internet in this way.

In addition, you will need a File Transfer Protocol (FTP) client (see How Much Does It Cost: Software for details) to transfer the website files to the server. There are many FTP clients, but generally you need to login to the web server using the details provided by your hosting company (for example: username (login), password, hostname). The FTP client will then display the files on your computer in one half of the window and the files on the hosting server in the other half, so you can drag and drop to copy files from your computer to the server and back.

Hosting & Domain Search Tips

• We are not promoting any specific hosting companies here. To find a hosting and domain name registrar, simply search for “web hosting” and “domain names”. All of these services have a feature that allows you to check if a domain name is available or if someone else has already registered it.
• Your home or business ISP may host small websites. The set of possibilities in this case may be limited, but, nevertheless, it can be great for your first experiments – contact them and find out!
• There are also several free services such as Neocities, Blogspot, and WordPress. Again, you get what you pay for, but they are perfect for your initial experiments. The free services don’t require FTP clients for the most part – you can drag and drop your files directly into the web interface.
• Sometimes companies offer both hosting and domain at the same time.

Using online tools such as GitHub or Google App Engine

Some services allow you to publish a site:

• GitHub is a “social network for programmers”. With it, you can upload repositories with your developments for storage in Git – version control system. By default, all developments are kept open source, which means that your code will be available to anyone – participants can learn from it or offer their own improvements. You can also team up with other coders! It’s a very large and helpful community to join, and Git/GitHub is a very popular version control system – most companies now use it for work. GitHub has a very useful GitHub pages feature that allows you to publish your code (your site) to the web.
• Google App Engine is a powerful platform that allows you to build and run applications on Google’s infrastructure – whether you need to build a multi-tier web application from scratch or host a static website. See How to Host Your Website on Google App Engine for more information.

Unlike other hosts, these services are usually free, but you get a limited set of tools in return.

Using cloud IDEs such as CodePen

There are a number of web applications that emulate a web development environment that allow you to enter HTML, CSS, and JavaScript and then display the result of that code as a website, all in a single browser tab. Generally speaking, these tools are quite simple, great for learning, good for sharing code (for example, if you want to share a technique with a colleague or ask colleagues from another office for debugging help), and free (basic features). They host your rendered page at a unique web address. However, the basic functionality is quite limited and applications usually don’t provide hosting space for files like images etc.

Try one of these and see which one you like better:

• JSFiddle
• Thimble
• JSBin
• CodePen

Now, let’s look at how to publish your site on GitHub Pages. We do not want to say that this method is the only and most true, but it is free, quite simple, and also affects certain skills that will definitely be useful for your further learning.

Basic setup

1. First of all, install Git on your computer. This is the main version of the version control system that supports GitHub.
2. Next, create a GitHub account. It’s simple and easy.
3. After you have registered, log in to github.com using your username and password.
4. Next, you need to create a new repository for your files. Click the Plus (+) in the top right corner of the GitHub home page, then select New repository .

On this page, in the Repository name field, enter username .github.io, where username is your username. So, for example, our friend valerii15298 would enter valerii15298.github.io .

Click Create repository and you will be on the following page:

Uploading your files to GitHub

Here we will use the command line to push our repository to GitHub. The command line is a window where you enter commands to quickly do things like create a file or run a program without using the user interface. The command line looks something like this:

Note: You can also use the Git graphical user interface for the same purpose if you are not comfortable using the command line.

All operating systems have a command line:

• Windows : Command line. To open it, press the Windows key, then type Command Prompt in the search field, and select it from the list that appears. Note that Windows has its own command conventions, different from Linux and OS X, so the commands below may differ on your computer.
• OS X : Terminal can be found in Applications > Utilities .
• Linux : You can usually bring up a terminal with Ctrl+Alt+T. If that doesn’t work, look for Terminal in the app drawer or menu.

It might seem a bit scary at first, but don’t worry – you’ll get the basics down in no time. You tell the computer to do something in the terminal by typing a command and pressing Enter.

1. Specify directory 9 on the command line0017 test-site (or another name for the directory containing your site). To do this, use the command cd (i.e. “change directory”). Here’s what you’d get if you placed your website in a directory called test-site on your desktop:

    cd Desktop/test-site
    

2. When the command prompt points inside your website directory, enter the following command, which tells the git tool to turn the directory into a git repository:

    git init
    

3. Let’s go back to the GitHub site. On the current page, you are interested in the “…or push an existing repository from the command line” section. You should see two lines of code in this section. Copy the entire first line, paste it into the command line, and press Enter. The command should look something like this:

    git remote add origin https://github.com/bobsmith/bobsmith.github.io.git
    

4. Next, enter the following two commands, pressing Enter after each. This will prepare the code for uploading to GitHub, and tell Git to manage those files.

    git add --all
   git commit -m 'adding my files to my repository'
    

5. Finally, upload the code to GitHub – go back to the GitHub web page you were on and enter the command in the terminal:

    git push -u origin master
    

6. Now when you go to the web address generated in GitHub in a new browser window ( username.github.io ) you will see your site online! Send the link to your friends, let them appreciate your skill.

Note: If you’re stuck, the GitHub Pages homepage will be of great help to you.

Exploring GitHub further

If you want to make more changes to your test site and upload them to GitHub, you just need to make changes to your files as before. You then need to type the following commands (pressing Enter after each) to push these changes to GitHub:

 git add --all
git commit -m 'another commit'
git push
 

You can replace another commit a more appropriate message describing what changes you just made.

We barely touched Git. To learn more, start at the GitHub Help site.

At this point, you should have your own sample website available at a unique web address. Great!

Further reading

• What is a web server?
• What are domain names?
• How much does it cost to do something on the Internet?
• Site Deployment: A nice course from Codecademy that goes a bit ahead and shows some additional techniques.
• Cheap or Free Static Website Hosting, an article written by Scott Murray has some useful ideas about available services.

• back
• Review: Getting started with the web
• Next

• Basic software installation
• What should your website look like?
• Working with files
• HTML Basics
• CSS Basics
• Basic JavaScript
• Publishing your website
• How the Web Works

Found a content problem with this page?

• Edit the page on GitHub.