---
title: 將你的網站發佈上線
slug: Learn/Getting_started_with_the_web/Publishing_your_website
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="取得主機（hosting）和網域名稱（domain_name）">取得主機（hosting）和網域名稱（domain name）</h3>

<p>如果想要完全掌控你發佈的網站，那你可能需要花錢買：</p>

<ul>
 <li>主機：跟主機租借商（hosting company）的<a href="/zh-TW/docs/Learn/Common_questions/What_is_a_web_server">網路伺服器</a>（web server）租一個放置檔案的空間。你把你建置的網頁檔案放到這個空間中，然後想要連結到網頁的人就能透過網頁伺服器連結到你的網站。</li>
 <li><a href="/zh-TW/Learn/Understanding_domain_names">網域名稱</a>(domain name)：人們可以透過這個獨特的網址來尋找你的網站，像是 <code>http://www.mozilla.org</code> 或 <code>http://www.bbc.co.uk</code>。你需要向<strong>網域名稱註冊商(domain registrar)</strong>租借網域名稱。</li>
</ul>

<p>許多專業的網站是用這個方法發佈的。</p>

<p>除此之外，你還會需要一個 {{Glossary("FTP", "File Transfer Protocol (FTP)")}} 程式（點選<a href="/zh-TW/Learn/How_much_does_it_cost#Software">How much does it cost: software</a> 來取得更多資訊），這樣才能真正的把你建置的網頁檔案傳達給伺服器。FTP 程式很廣泛，但一般來說，你可以用你公司提供的資訊，像是使用者名稱、密碼以及host name來登入你的網頁伺服器，它就會以兩個視窗的形式分別顯示你電腦裡的檔案和你網頁伺服器上的檔案，然後你就可以移動你的檔案。</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="租借主機和網域的方法">租借主機和網域的方法</h4>

<ul>
 <li>在這裡我們不介紹特定的主機租借商(hosting companies)或網域名稱註冊商(domain name registrars)，你只要搜尋「web hosting」與「domain names」就能找到。所有的註冊商都會提供方法，讓你檢查你想要的網域名稱可否使用、或有沒有被註冊過。</li>
 <li>你的 {{Glossary("ISP", "網路供應商")}} 可能會提供有限制的主機，這可以讓你發佈一些比較簡易的網站，雖然會有些限制，但嘗試使用它來發佈你的第一個網站也是很不錯的 — 聯絡並詢問他們！</li>
 <li>有些公司提供免費的服務，像是 <a href="https://neocities.org/">Neocities</a>、<a href="https://www.blogger.com">Blogger</a>和 <a href="https://wordpress.com/">WordPress</a>，但是我要強調，你付出多少得到多少，不過使用它們來發佈你的第一個網站何嘗不是一個理想的方法? 而且免費的服務大部分不需要FTP程序來上傳檔案，你只需要用它們提供的介面來移動檔案。</li>
 <li>有些公司同時提供主機(hosting)和網域(domains)的服務。</li>
</ul>

<h3 id="使用線上工具，像是_GitHub_或_Google_App_Engine">使用線上工具，像是 GitHub 或 Google App Engine</h3>

<p>使用工具來發佈網站：</p>

<ul>
 <li><a href="https://github.com/">GitHub</a> 可以交流程式的平台，它提供你一個空間來存放程式碼，這個空間是基於 <a href="http://git-scm.com/">Git</a> 的<strong>版本控制系統，</strong>你能夠透過系統共同編輯平台上的程式專案，而這個系統是開放資源，也就是說全世界的人都可以找到你的 GitHub code，包括使用它、從中學習並將它改得更好。GitHub 提供一個非常實用的工具— <a href="https://pages.github.com/">GitHub Pages</a>，它能讓你發佈網站。</li>
 <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web &amp; Mobile Backends in Any Language  |  Google Cloud Platform">Google App Engine</a> 是一個強大的平台，不管是要從頭建置 multi-tiered web 程式還是託管靜態網站，它都能讓你在 Google 的基礎下建置和運行應用程式。點選 <a href="/zh-TW/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_這樣的網路_IDE">透過如 Thimble 這樣的網路 IDE</h3>

<p>有些 web app 會模擬網站的開發環境，讓你能執行 HTML, CSS, JavaScript，顯示程式碼執行結果、並渲染至網站上－－一切都在瀏覽器的一個頁籤內完成。通常這些工具用起來都簡單、學起來簡單、基本功能還是免費的。他們用獨一無二的網址，替你保管渲染好的頁面。不過，基本功能基本上很受限，而且 app 通常都不提供如圖像這種 asset 的託管。</p>

<p>試試以下網站，看看你能想到什麼點子：</p>

<ul>
 <li><a href="https://jsfiddle.net/">JSFiddle</a></li>
 <li><a href="https://thimble.mozilla.org">Thimble</a></li>
 <li><a href="http://jsbin.com/">JS Bin</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 Pages 發佈多簡單。</p>

<ol>
 <li>首先註冊 <a href="https://github.com/">GitHub</a> 並驗證電子郵件。</li>
 <li>接著針對要上傳的檔案<a href="https://github.com/new">建立一個 repository</a>。</li>
 <li>在頁面的 <em>Repository name</em> 標籤輸入 <em>username</em>.github.io，<em>username</em> 是指你的用戶名。例如我們的好朋友 bobsmith 就會輸入 <em>bobsmith.github.io</em>.<br>
  另外，請勾選 <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-TW/docs/Learn/Common_questions/What_is_a_web_server">何謂網路伺服器</a></li>
 <li><a href="/zh-TW/Learn/Understanding_domain_names">Understanding domain names</a></li>
 <li><a href="/zh-TW/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a></li>
 <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: A nice tutorial from Codecademy that goes a bit further and shows some additional techniques.</li>
 <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a> by Scott Murray has some useful ideas on available services.</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>

<h2 id="在本模組內">在本模組內</h2>

<ul>
 <li id="Installing_basic_software"><a href="/zh-TW/Learn/Getting_started_with_the_web/Installing_basic_software">安裝基本軟體</a></li>
 <li id="What_will_your_website_look_like"><a href="/zh-TW/Learn/Getting_started_with_the_web/What_will_your_website_look_like">你的網站看起來會是什麼樣子？</a></li>
 <li id="Dealing_with_files"><a href="/zh-TW/Learn/Getting_started_with_the_web/Dealing_with_files">與各式各樣檔案打交道</a></li>
 <li id="HTML_basics"><a href="/zh-TW/Learn/Getting_started_with_the_web/HTML_basics">HTML 基礎</a></li>
 <li id="CSS_basics"><a href="/zh-TW/Learn/Getting_started_with_the_web/CSS_basics">CSS 基本</a></li>
 <li id="JavaScript_basics"><a href="/zh-TW/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 基礎</a></li>
 <li id="Publishing_your_website"><a href="/zh-TW/Learn/Getting_started_with_the_web/Publishing_your_website">將你的網站發佈上線</a></li>
 <li id="How_the_web_works"><a href="/zh-TW/Learn/Getting_started_with_the_web/How_the_Web_works">網路的運作方式</a></li>
</ul>