---
title: 发布网站
slug: Learn/Getting_started_with_the_web/Publishing_your_website
tags:
  - FTP
  - GitHub
  - Google App Engine
  - Web
  - Web服务
  - 初学者
  - 发布
translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div>

<div class="summary">
<p>在你已经写好了代码并且整理好了你网站的全部文件后，你需要将它们全部上线，这样别人才能看到。这篇文章将向你展示如何轻松地将你简单的示例代码传到网上。</p>
</div>

<h2 id="有哪些方法可供选择？">有哪些方法可供选择？</h2>

<p>发布一个网页并不是三言两语就能简单说明的，这主要是因为我们有很多种方法去完成它。在这篇文章里我们并不准备讲述所有方法，而是从初学者的视角讨论以下三种常见的方式的利弊，然后带你看看我们将要使用的一种方法。</p>

<h3 id="获取主机服务和域名">获取主机服务和域名</h3>

<p>如果你想要完全控制你发布的网页，那么你将需要花钱购置：</p>

<ul>
 <li>主机服务 — 在主机服务提供商的 <a href="/en-US/Learn/What_is_a_web_server">Web 服务器</a>上租用文件空间。将你网站的文件上传到这里，然后服务器会提供 Web 用户需求的内容。</li>
 <li><a href="/en-US/Learn/Understanding_domain_names">域名</a>——一个可以让人们访问的独一无二的地址，比如 <code>http://www.mozilla.org</code>，或 <code>http://www.bbc.co.uk</code> 。你可以从<strong>域名注册商</strong>租借域名 。</li>
</ul>

<p>许多专业的网站通过这种方法接入互联网。</p>

<p>此外，你将需要一个 {{Glossary("FTP", "文件传输协议")}} 程序 ( 点击<a href="/zh-CN/docs/Learn/Common_questions/How_much_does_it_cost#软件">钻研在网络上做某些事情要花费多少：软件</a>查看详细信息 ) 来将网站文件上传到服务器。不同的 FTP 程序涵盖了不同的范围， 但是你通常需要使用主机服务提供商给你的详细信息（比如用户名、密码、主机名）登录到 Web 服务器 。然后程序在两个窗口里分别显示本地文件和服务器文件，这样你就可以在它们之间进行传输：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p>

<h4 id="寻找主机服务和域名的建议" style="font-size: 1.28571428571429rem;">寻找主机服务和域名的建议</h4>

<ul>
 <li>我们不会推荐任何商业化的主机公司。要找到主机公司和域名注册商，只需要搜索 "网络主机服务" 和 "域名" 来找到一家出售域名的公司。 所有这种类型的公司都允许你查看你想要的域名是否可用。</li>
 <li>你的家庭或办公 {{Glossary("ISP", "网络服务提供商")}} 可能会提供一些受限制的的小型主机空间。它们的能使用的功能都会受到限制，但是它们会非常适合你的第一个实验的——联系一下他们！</li>
 <li>有一些免费服务比如 <a href="https://neocities.org/">Neocities</a> ， <a href="https://www.blogger.com">Blogspot</a> ，和 <a href="https://wordpress.com/">Wordpress</a> 。重复一遍， 一分钱一分货，不过它们对于你的初次实验可能会是很理想的。 免费服务大部分也不需要 FTP 软件来上传文件——你只需要将文件拖入到它们网页的界面里。</li>
 <li>有时公司会打包提供主机服务和域名。</li>
</ul>

<h3 id="使用在线工具如_GitHub_或_Google_App_Engine">使用在线工具如 GitHub 或 Google App Engine</h3>

<p>有一些工具能使你在线发布网站 :</p>

<ul>
 <li><a href="https://github.com/">GitHub</a> 是一个“社交编程”网站。它允许你<span style="line-height: 19.0909080505371px;">上传代码库并储存在</span> <a href="http://git-scm.com/">Git</a> 版本控制系统里。 然后你可以协作代码项目，系统是默认开源的，也就是说世界上任何人都可以找到你 GitHub 上的代码。去使用 GitHub，从中学习并且提高自己吧！ 你也可以对别人的代码那样做！ 这是一个非常重要、有用的社区，而且 Git/GitHub 是非常流行的 <a href="https://git-scm.com/book/zh/v2/%E8%B5%B7%E6%AD%A5-%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E6%8E%A7%E5%88%B6">版本控制系统</a> — 大部分科技公司在工作中使用它。 GitHub 有一个非常有用的特点叫 <a href="https://pages.github.com/">GitHub pages</a>，允许你将网站代码放在网上。</li>
 <li>Google App Engine是一个让你可以在Google的基础架构上构建和运行应用的强劲平台——无论你是需要从头开始构建多级web应用还是托管一个静态网站。参阅<a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a>以获取更多信息。</li>
</ul>

<p>不同于大部分其它托管服务，这类工具通常是免费的，不过你只能使用有限的功能。</p>

<h3 id="使用像_Thimble_的基于_Web_的集成开发环境">使用像 Thimble 的基于 Web 的集成开发环境</h3>

<p>有许多web应用能够仿真一个网站开发环境。你可以在这种应用——通常只有一个标签页——里输入 HTML、CSS 和 JavaScript 代码然后像显示网页一样显示代码的结果。通常这些工具都很简单，对学习很有帮助，而且至少有免费的基本功能，它们在一个独特的网址显示你提交的网页。不过，这些应用的基础功能很有限，而且应用通常不提供空间来存储图像等内容。</p>

<p>使用一下以下几种工具，看看你最喜欢哪一个：</p>

<ul>
 <li><a href="https://jsfiddle.net/">JSFiddle</a></li>
 <li><a href="https://thimble.webmaker.org/">Thimble</a></li>
 <li><a href="http://jsbin.com/">JSBin</a></li>
 <li><a href="https://codepen.io/">CodePen</a></li>
</ul>

<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>

<h2 id="通过GitHub发布">通过GitHub发布</h2>

<p>现在，让我们通过Github页面告诉你公布的你的代码是如此的简单。</p>

<ol>
 <li>首先， <a href="https://github.com/join">注册一个GitHub账号，</a> 并确认你的邮箱地址。</li>
 <li>接下来，你需要创建一个新的资源库( repository )来存放你的文件。</li>
 <li>在这个页面上，在<span style="line-height: 19.0909080505371px;"> </span><em>Repository name</em><span style="line-height: 19.0909080505371px;"> </span>输入框里输入 <span style="line-height: 19.0909080505371px;"> </span><em>username</em><span style="line-height: 19.0909080505371px;">.github.io，username 是你的用户名。比如，我们的朋友 bobsmith 会输入  </span><em>bobsmith.github.io。同时勾选</em>  <em>Initialize this repository with a README</em> ，然后点击 <em>Create repository</em>。<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li>
 <li>然后，将你的网站文件夹里的内容拖拽到你的资源库( repository )，再点击 <em>Commit changes</em> 。
  <div class="note">
  <p><strong>提示</strong>: 确保你的文件夹有一个 <em>index.html</em> 文件.</p>
  </div>
 </li>
 <li>
  <p>现在将你的浏览器转到 <em>username</em>.github.io 来在线查看你的网站。比如，<em>如果用户名为chrisdavidmills</em>, 请转到 <a href="http://chrisdavidmills.github.io/">chrisdavidmills.github.io</a>。</p>

  <div class="note">
  <p><strong>提示</strong>: 你的网站可能需要几分钟的时间才能投入使用。 如果它不能立即工作，你可能需要等待几分钟，然后再试一次。</p>
  </div>
 </li>
</ol>

<p>想要了解更多，请看 <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p>

<h2 id="延展阅读">延展阅读</h2>

<ul>
 <li><a href="/zh-CN/docs/Learn/Common_questions/What_is_a_web_server">什么是网络服务器？</a></li>
 <li><a href="/zh-CN/docs/Learn/Common_questions/What_is_a_domain_name">什么是域名？</a></li>
 <li><a href="/zh-CN/docs/Learn/Common_questions/How_much_does_it_cost">钻研在网络上做某些事情要花费多少？</a></li>
 <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>（英文）：来自 Codeacademy 的一个很好的教程，它比本教程更进一步，并展示了一些其他技术。</li>
 <li>Scott Murray 的 <a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or free static web hosting</a> （价格低廉或免费的静态 Web 主机服务）包含一些对可用的 Web 主机服务的建议。</li>
</ul>

<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p>