Learn web development

发布网站

一旦你编写且整理好了你网页的全部文件,你需要将它们全部上传到网上别人才能看到. 这篇文章向你展示了如何轻松地将你简单的样品传到网上。

可供选择的方法

发布一个网页并不简单，主要是因为我们有太多方法去完成它了。在这篇文章里我们并不准备列出全部方法。 反而我们准备从初学者的视角讨论一下三种常见的方式的利弊。然后带你看看我们将要使用的一种方法。

主机服务和域名

如果你想要取得你发布的网页的完全控制，那么你将需要花钱购置以下：

  • 主机服务 — 在主机服务提供商的 web server 上租用文件空间。将你网站的文件上传到这，然后服务器会响应web用户提出的要求。
  • 域名（domain name） — 一个可以让人们访问的独特的地址，像 http://www.mozilla.org，或 http://www.bbc.co.uk. 你可以从 domain registrar 租借域名 。

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

此外，你将需要一个文件传输协议（FTP）程序 ( 点击 How much does it cost: software 查看详细信息 ) 来将网站文件上传到服务器。 不同的 FTP 程序之间差别非常大， 但是通常你需要使用主机服务提供商给你的详细信息连接到Web服务器 ( 比如用户名、密码、主机名 )。然后程序在两个窗口里分别显示本地文件和服务器文件，你可以在它们之间进行传输：

寻找主机服务和域名的建议

  • 我们不会推荐任何商业化的主机公司。要找到主机公司和域名注册商，只需要搜索 "web hosting" 和 "domain names" 来找到一家出售域名的公司。 所有这种类型的公司都允许你搜索你想要的域名。
  • 你的家庭网或办公网络服务提供商可能会提供一些有限的小型主机空间。它们的空间都非常有限，但是它们会非常适合你的第一个实验的 — 联系一下他们！
  • 有一些免费服务比如 Neocities, Blogspot, 和 Wordpress. 重复一遍， 一分钱一分货，不过它们对于你的初次实验可能会是很理想的。 免费服务大部分也不需要 FTP 软件来上传文件 — 你只需要将文件拖入到它们网页的界面里。
  • 有时公司会打包提供主机服务和域名的。

使用在线工具如 GitHub 或 Dropbox

有一些工具能使你在线发布网站 :

  • GitHub 是一个“社交编程”网站。它允许你上传代码库并储存在 Git 版本控制系统里。 然后你可以协作代码项目，系统是默认开源的，意味着世界上任何人都可以找到你 GitHub 上的代码。去使用 GitHub，从中学习并且提高自己吧！ 你也可以对别人的代码那样做！ 这是一个非常重要、有用的社区，而且 Git/GitHub 是非常流行的 version control system — 大部分科技公司在工作中使用它。 GitHub 有一个非常有用的特点叫 GitHub pages，允许你将网站代码放在网上。
  • Dropbox 是一个允许你在保存文件在网上并可从任何计算机中获取的文件存储系统。任何接入互联网的人都可以进入你设置为公开的文件目录。 如果那个文件夹内包含网站文件， 它将被自动视为一个网站。 点击 Host websites With Dropbox 查看更多信息。

不像大量其他的主机，这类工具通常是免费的，不过你只能使用有限的功能。

使用像 Thimble 的基于Web的集成开发环境

有许多web应用能够仿真一个网站开发环境，允许你输入 HTML、CSS 和 JavaScript 然后显示代码的结果 —— 全部在一个标签页里！通常这些工具都很简单，对学习很有帮助，而且是免费的（基本功能），它们在一个独特的地址显示你提交的网页。不过，基础功能是很有限的，而且这些应用通常不提供如图像的内容的主机空间。

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

通过GitHub发布

现在我们将讲述如何通过GitHub发布你的网站。我们并没有说这是唯一的甚至是最好的方法，只是因为它是免费的，并且非常简单，在你学习的道路上试着发现其他新的方法。

安装

  1. 首先，install Git 在机器上安装Git。这是 GitHub 工作的基础版本控制系统。
  2. 接下来， sign up for a GitHub account 注册一个 GitHub 账号，so easy~
  3. 注册完之后，登录 github.com 。
  4. 接下来，你需要创建一个新的仓库来存放你的文件。点击 GitHub 主页右上方的的 Plus(+) ，然后选择 New Repository。
  5. 在这个页面上，在 Repository name 输入框里输入  username.github.io，username 是你的用户名。比如，我们的朋友 bobsmith 会输入  bobsmith.github.io。
  6. 点击 Create repository； 然后会跳转到这一页面：

将文件上传到 GitHub

这是我们使用命令行来上传我们的仓库到 GitHub 的地方。命令行是你输入命令来完成像新建文件和运行程序等操作的地方，与在用户界面点击不同。命令行大概是这个样子：

提示：如果你对命令行不习惯的话，你也可以使用  Git graphical user interface Git 图形界面来完成同样的工作。

任何系统都自带命令行工具：

  • Windows: 命令提示符(Command Prompt) 可以点击开始菜单，输入命令提示符，在出现的列表中选中打开。注意 Windows和 Linux 还有 OS X 有不同的命令规则， 所以下面的命令可能在你的机器上有所不同。
  • OS X: 终端(Terminal) 在 应用 > 工具。
  • Linux: 通常你可以按下 Ctrl + Alt + T 呼出命令行。 如果那没有起作用，在应用栏或菜单里找到终端(Terminal)。

这看起来好像很麻烦，不过别担心 — 你很快就会掌握这些基础的。 你通过在终端里键入命令并按回车来告诉计算机执行相应的命令。

  1. 从命令行进入 test-site 目录 (或者其他包含网站文件的目录名)。 在这里我们使用 cd 命令 ( 也就是 "改变 目录")。 下面是如果你将 test-site 放在桌面上时应该输入的命令：  
    cd Desktop/test-site
  2. 当使用命令行进入你的目录后，输入下面的命令来告诉 git 工具来将这个目录上传到 git 仓库： 
    git init
  3. 接下来回到 GitHub 网站。在当前页面上，看到 push an existing repository from the command line 这一部分。 你应该看到了两行代码。拷贝第一行代码粘贴到命令行，然后按回车。命令行应该像下面这样： 
    git remote add origin https://github.com/bobsmith/bobsmith.github.io.git
  4. 接下来，输入下面两个命令，在每一行输入完后按下回车。这两个命令为上传到 GitHub 做好准备，并且要求 Git 来管理文件。 
    git add --all
git commit -m 'adding my files to my repository'
  5. 最后，输入我们在第三步里看到的第二行命令： 
    git push -u origin master
  6. 现在当你在新标签页打开你的 GitHub 页面时 (username.github.io)，你应该可以看到你的网页了！通知你的朋友们来看看你的杰作！

提示：如果你有问题，看看 GitHub Pages homepage 来解决。

更多关于 GitHub

如果你想对你的网页做更多改变并且上传到 GitHub，你只需要像你之前一样更改文件。然后，你只要输入下列命令（每个命令后记得回车）来在 GitHub 上做出更改：

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

你可以将 another commit 换成其他更适合描述你所做的更改的提示。

我们只讲述了一点点 Git 的知识，要深入学习，请访问 GitHub Help site。

结论

到此为止，你应该将你的网页上传到了特定的网址。非常棒！

延展阅读

 

文档标签和贡献者