將你的網站發佈上線- 學習該如何開發Web | MDN

主機：跟主機租借商（hosting company）的網路伺服器（web server）租一個放置檔案的空間。

你把你建置的網頁檔案放到這個空間中，然後想要連結到網頁的人 ... SkiptomaincontentSkiptosearchSkiptoselectlanguage學習該如何開發WebWeb入門將你的網站發佈上線ArticleActions正體中文(繁體)ThispagewastranslatedfromEnglishbythecommunity.LearnmoreandjointheMDNWebDocscommunity.有哪些選項？透過GitHub發布參閱在本模組內RelatedTopics 全新手請從這開始！ Web入門 Web概述 安裝基本軟體 自己的網站會是什麼樣子？ 處理檔案 HTML基礎概念 CSS基礎概念 JavaScript基礎概念 發佈自己的網站 Web運作的方式 HTML—架構Web HTML介紹 HTML概述 HTML入門 標題裡是什麼？HTML中的後設資料(Metadata) HTML文字基礎概念 建立超連結 進階文字格式 文件與網站架構 HTML除錯 親和度：設個字母 親和度：架構出具備內容的網頁 多媒體與嵌入 多媒體與嵌入的概述 HTML中的圖片 視訊與音訊內容 從物件到iframe—其他嵌入技巧 為Web新增向量圖 適應性圖片 親和度：Mozilla形象頁面 HTML表格 HTML表格概述 HTML表格基礎 HTMLtableadvancedfeaturesandaccessibility Assessment:Structuringplanetdata CSS—設計Web的風格 初探CSS 初探CSS（概述） CSS是什麼？ CSS入門 HowCSSisstructured CSS怎麼運作 Assessment:Stylingabiographypage CSS組件 CSSbuildingblocksoverview Cascadeandinheritance CSSselectors Theboxmodel Backgroundsandborders Handlingdifferenttextdirections Overflowingcontent CSSvaluesandunits SizingitemsinCSS Images,media,andformelements Stylingtables DebuggingCSS OrganizingyourCSS Assessment:FundamentalCSScomprehension Assessment:Creatingfancyletterheadedpaper Assessment:Acool-lookingbox 樣式化文字 樣式化文字概述 基礎的文字與字型樣式化 樣式化列表 樣式化連結 Web字型 親合度：設定社區大學首頁的版面 CSS版面配置 CSS版面配置概述 IntroductiontoCSSlayout NormalFlow 彈性區塊 格線 浮動 定位 Multiple-columnlayout Responsivedesign Beginner'sguidetomediaqueries Legacylayoutmethods Supportingolderbrowsers Assessment:Fundamentallayoutcomprehension JavaScript—動態的用戶端指令 JavaScript第一步 JavaScript第一步概述 什麼是JavaScript？ 初次接觸JavaScript 出了什麼問題？JavaScript疑難排解 儲存你所需的資訊—變數 JavaScript基礎概念—數字與運算子 處理文字—JavaScript中的字串 有用的字串函式 陣列 親合度：傻瓜故事產生器 JavaScript基礎要件 JavaScript基礎要件概述 於程式碼中決策—條件 程式碼迴圈 函式—可重複使用的程式碼區塊 建立自己的函式 函式回傳值 事件介紹 親合度：圖庫 JavaScript物件介紹 JavaScript物件概述 物件基礎概念 物件原型 Object-orientedprogrammingconcepts ClassesinJavaScript 使用JSON資料 物件建構實作 親合度：為彈跳球展示新增功能 非同步的JavaScript AsynchronousJavaScriptoverview IntroducingasynchronousJavaScript Howtousepromises Implementingapromise-basedAPI Introducingworkers Assessment:sequencinganimations 客戶端webAPIs 客戶端webAPIs IntroductiontowebAPIs 文件操作 Fetchingdatafromtheserver ThirdpartyAPIs Drawinggraphics VideoandaudioAPIs Client-sidestorage 網頁表單-與使用者資料合作 核心的表單學習途徑 網頁表單概述 Yourfirstform 如何建構網頁表單 Basicnativeformcontrols TheHTML5inputtypes Otherformcontrols Stylingwebforms Advancedformstyling UIpseudo-classes Client-sideformvalidation Sendingformdata 深入網頁表單 Howtobuildcustomformcontrols SendingformsthroughJavaScript CSSpropertycompatibilitytableforformcontrols 無障礙網頁—每個人都可以使用的網頁 無障礙網頁指南 無障礙網頁概述 何謂無障礙網頁？ HTML:Agoodbasisforaccessibility CSSandJavaScriptaccessibilitybestpractices WAI-ARIA基礎 Accessiblemultimedia 行動裝置上的無障礙 無障礙網頁評估 Assessment:Accessibilitytroubleshooting 工具與測試 Client-sidewebdevelopmenttools Client-sidewebdevelopmenttoolsindex Client-sidetoolingoverview Commandlinecrashcourse Packagemanagementbasics Introducingacompletetoolchain Deployingourapp 介紹前端框架 前端框架簡介 Frameworkmainfeatures React GettingstartedwithReact BeginningourReacttodolist ComponentizingourReactapp Reactinteractivity:Eventsandstate Reactinteractivity:Editing,filtering,conditionalrendering AccessibilityinReact Reactresources Ember GettingstartedwithEmber Emberappstructureandcomponentization Emberinteractivity:Events,classesandstate EmberInteractivity:Footerfunctionality,conditionalrendering RoutinginEmber Emberresourcesandtroubleshooting Vue 開始學Vue CreatingourfirstVuecomponent RenderingalistofVuecomponents Addinganewtodoform:Vueevents,methods,andmodels StylingVuecomponentswithCSS UsingVuecomputedproperties Vueconditionalrendering:editingexistingtodos FocusmanagementwithVuerefs Vueresources Svelte Svelte入門 StartingourSvelteTodolistapp DynamicbehaviorinSvelte:workingwithvariablesandprops ComponentizingourSvelteapp AdvancedSvelte:Reactivity,lifecycle,accessibility WorkingwithSveltestores TypeScriptsupportinSvelte Deploymentandnextsteps Angular Angular新手入門 開始開發我們的Angular待辦事項應用程式 使用樣式點綴我們的Angular應用程式 建立一個item元件 篩選我們的待辦事項項目 建構Angular應用程式與更多資源 GitandGitHub GitandGitHub概述 HelloWorld GitHandbook ForkingProjects Aboutpullrequests MasteringIssues 跨瀏覽器測試 跨瀏覽器測試概述 跨瀏覽器測試介紹 測試執行策略 處理常見的HTML與CSS問題 處理常見的JavaScript問題 處理常見的親合度問題 建置功能偵測 自動化測試介紹 設定自己的自動化測試環境 伺服端網站程式設計 第一步 第一步概述 伺服端介紹 用戶端概述 伺服端網路框架 網站安全 Django網站框架(Python) Django網站框架(Python)概述 介紹 設定開發環境 線上教學：本地圖書館網站 線上教學2：建立網站骨架 線上教學3：使用模型 線上教學4：Django管理網站 線上教學5：建立我們的首頁 線上教學6：泛型清單與細節檢視 線上教學7：會話(Sessions)框架 線上教學8：使用者授權與許可 線上教學9：搭配表單 線上教學10：測試Django的WebApp 線上教學11：佈署Django至產品 WebApp安全性 親合度：DIY迷你部落格 Express網站框架(node.js/JavaScript) Express網站框架(Node.js/JavaScript)概述 Express/Node介紹 設定Node(Express)的開發環境 Express教學1:本地圖書館網站 Express教學2:建立骨架網站 Express教學3:使用資料庫(Mongoose) Express教學4:路由與控制器 Express教程5:呈現圖書館的資料 Express教學6:使用表單 Express教學7:佈署到正式環境 更多資源 常見問題 HTML問題 CSS問題 JavaScriptquestions Web的運作方式 工具與設定 設計與親合度 有哪些選項？透過GitHub發布參閱在本模組內將你的網站發佈上線 前頁 Overview:Gettingstartedwiththeweb 次頁 當你完成你的網頁程式碼後，你需要把它放到網路上，這樣人們才可以搜尋得到。

這個章節將介紹如何快速的把你的程式碼放到網路上。

有哪些選項？發佈網站並不是一個幾句話就能說得完的課題，主要是因為有太多方法能夠發佈網站。

在這個章節中，我們不會介紹所有可能的方法，但是我們會簡單講解三個概念，並從初學者的角度分別說明它們的優缺點，然後一步一步帶你用一個你現階段有辦法完成的方法發佈網站。

取得主機（hosting）和網域名稱（domainname）如果想要完全掌控你發佈的網站，那你可能需要花錢買： 主機：跟主機租借商（hostingcompany）的網路伺服器（webserver）租一個放置檔案的空間。

你把你建置的網頁檔案放到這個空間中，然後想要連結到網頁的人就能透過網頁伺服器連結到你的網站。

網域名稱(domainname)：人們可以透過這個獨特的網址來尋找你的網站，像是http://www.mozilla.org或http://www.bbc.co.uk。

你需要向網域名稱註冊商(domainregistrar)租借網域名稱。

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

除此之外，你還會需要一個FileTransferProtocol(FTP)程式（點選Howmuchdoesitcost:software來取得更多資訊），這樣才能真正的把你建置的網頁檔案傳達給伺服器。

FTP程式很廣泛，但一般來說，你可以用你公司提供的資訊，像是使用者名稱、密碼以及hostname來登入你的網頁伺服器，它就會以兩個視窗的形式分別顯示你電腦裡的檔案和你網頁伺服器上的檔案，然後你就可以移動你的檔案。

租借主機和網域的方法 在這裡我們不介紹特定的主機租借商(hostingcompanies)或網域名稱註冊商(domainnameregistrars)，你只要搜尋「webhosting」與「domainnames」就能找到。

所有的註冊商都會提供方法，讓你檢查你想要的網域名稱可否使用、或有沒有被註冊過。

你的網路供應商(en-US)可能會提供有限制的主機，這可以讓你發佈一些比較簡易的網站，雖然會有些限制，但嘗試使用它來發佈你的第一個網站也是很不錯的—聯絡並詢問他們！ 有些公司提供免費的服務，像是Neocities、Blogger和WordPress，但是我要強調，你付出多少得到多少，不過使用它們來發佈你的第一個網站何嘗不是一個理想的方法?而且免費的服務大部分不需要FTP程序來上傳檔案，你只需要用它們提供的介面來移動檔案。

有些公司同時提供主機(hosting)和網域(domains)的服務。

使用線上工具，像是GitHub或GoogleAppEngine使用工具來發佈網站： GitHub可以交流程式的平台，它提供你一個空間來存放程式碼，這個空間是基於Git的版本控制系統，你能夠透過系統共同編輯平台上的程式專案，而這個系統是開放資源，也就是說全世界的人都可以找到你的GitHubcode，包括使用它、從中學習並將它改得更好。

GitHub提供一個非常實用的工具—GitHubPages，它能讓你發佈網站。

GoogleAppEngine是一個強大的平台，不管是要從頭建置multi-tieredweb程式還是託管靜態網站，它都能讓你在Google的基礎下建置和運行應用程式。

點選HowdoyouhostyourwebsiteonGoogleAppEngine?(en-US)以獲得更多資訊。

這類工具和託管不同，通常他們都是免費的，不過功能當然也會受限。

透過如Thimble這樣的網路IDE有些webapp會模擬網站的開發環境，讓你能執行HTML,CSS,JavaScript，顯示程式碼執行結果、並渲染至網站上－－一切都在瀏覽器的一個頁籤內完成。

通常這些工具用起來都簡單、學起來簡單、基本功能還是免費的。

他們用獨一無二的網址，替你保管渲染好的頁面。

不過，基本功能基本上很受限，而且app通常都不提供如圖像這種asset的託管。

試試以下網站，看看你能想到什麼點子： JSFiddle Thimble JSBin CodePen 透過GitHub發布來看看把網站用GithubPages發佈多簡單。

首先註冊GitHub並驗證電子郵件。

接著針對要上傳的檔案建立一個repository。

在頁面的Repositoryname標籤輸入username.github.io，username是指你的用戶名。

例如我們的好朋友bobsmith就會輸入bobsmith.github.io. 另外，請勾選InitializethisrepositorywithaREADME後點選Createrepository。

之後，把網站內容拖曳到repository目錄，並勾選Commitchanges。

注：請確定目錄內有index.html檔案。

現在讓瀏覽器連到username.github.io來看看你的網站。

例如你的用戶名字是chrisdavidmills，就連到chrisdavidmills.github.io。

注：讓網站上線需要一點時間。

如果網站沒有馬上運行，稍等一段時間後再試一次。

想多理解的話，請參考GitHubPagesHelp.參閱 何謂網路伺服器 Understandingdomainnames Howmuchdoesitcosttodosomethingontheweb? DeployaWebsite:AnicetutorialfromCodecademythatgoesabitfurtherandshowssomeadditionaltechniques. CheaporFreeStaticWebsiteHostingbyScottMurrayhassomeusefulideasonavailableservices. 前頁 Overview:Gettingstartedwiththeweb 次頁 在本模組內 安裝基本軟體 你的網站看起來會是什麼樣子？ 與各式各樣檔案打交道 HTML基礎 CSS基本 JavaScript基礎 將你的網站發佈上線 網路的運作方式 Foundaproblemwiththispage?EditonGitHubSourceonGitHubReportaproblemwiththiscontentonGitHubWanttofixtheproblemyourself?SeeourContributionguide.Lastmodified:2022年6月23日,byMDNcontributors