以下是一个关于如何开始构建网站的答案,我完全赞同并且不含糊。 这会花费一些钱,就像学习弹吉他需要购买吉他和其他配件一样。 这也需要一些时间,而且主要不直接涉及编码本身。 它是关于让你到达一个真正进行网页设计的地方,并且你无法抗拒学习!
我将提到特定的公司名称,但不提供链接,只是为了明确这篇文章不是联盟营销。 谷歌搜索它们应该会直接找到它们。
1. 购买域名
从 Hover 购买域名。 购买一些有用的东西,比如你的名字.com 或商业想法.com。 或者购买一些你实际上会做些什么的愚蠢的东西。

2. 购买一些网站托管
在 Media Temple 购买最便宜的托管计划。 告诉他们你已经拥有域名。 我认为将域名购买公司和托管公司分开更好1。
完成后,您将收到一封服务激活电子邮件。

3. 将新域名的名称服务器指向新的托管
服务激活电子邮件中的链接将带您前往 Media Temple 的指南,其中包含完成设置所需的所有信息。 在 DNS 部分,您将看到 Media Temple 的名称服务器。 我们需要更改 Hover 上我们域名的名称服务器,以便该域名正确指向 Media Temple。

当我们更改这些名称服务器时,我们正在更改 DNS 信息。 每当您更改 DNS 信息时,可能需要一些时间。 此信息需要传播到世界各地为互联网提供动力的路由器。 这就是互联网的工作原理!
请注意,这可能需要一些时间才能开始工作(对于我们即将建立的网站实际上才能显示出来)。
4. 获取一些 FTP 软件
FTP 用于传输文件。 我们将使用它将文件从您的计算机传输到网站托管服务器计算机。 我们将在稍后讨论这些文件,但现在我们只是进行设置。
如果您使用的是 Mac,请获取 Coda。 Coda 是一个 FTP 客户端,但它也是一个代码编辑器,当您像现在一样刚开始时,这非常方便。

我对 PC 软件并不熟悉,但谷歌搜索“适用于 PC 的 FTP 客户端”会显示很多内容。 我相信有一些不错的软件。
5. 通过 FTP 连接到您的网站托管
该 Media Temple 指南区域还将包括 FTP 信息,这意味着
- 主机名
- 用户名
- 密码
将电子邮件中的 FTP 凭据输入 FTP 客户端(创建新站点)。

连接到服务器。

6. 将域名添加到托管
购买托管时,我们告诉他们我们有自己的域名。 因此,让我们在其中进行设置。 这肯定会因托管公司而异。 以下是 Media Temple 的操作方式


7. 通过服务器上的 FTP 找到网站根目录
服务器上始终有一个特定的文件夹是“网站根目录”。 例如,如果您在那里放置一个 index.html 文件,那么当您访问你的名字.com 时就会显示该文件,或者如果您在那里创建一个名为“cool”的文件夹并在该文件夹中放置一个 index.html 文件,那么当您访问你的名字.com/cool/ 时就会显示该文件。

8. 感受力量在你的血管中流淌
您放入网站根目录中的任何内容都将在互联网上实时显示!
如果您在那里放置一个 index.html 文件,那么当您在网页浏览器中访问您的域名时就会显示该文件。

9. 找到一个不错的模板下载,并将其上传到您的服务器
下载一个模板。 谷歌搜索诸如“免费 HTML 模板”之类的内容,甚至可以找到您喜欢的付费模板并购买。 模板并没有什么错。 最终您会变得足够好,不需要模板,或者可以在何时使用模板方面做出明智的选择,但现在,最好从一个外观不错的网站开始,您可以对其进行调整并使其成为自己的网站。 就像学习乐器通过演奏您喜欢的歌曲比学习音阶更有乐趣(并且更容易变得更好)一样。

10. 祝贺
您现在已经建立了一个网站。 您绝对有能力编辑这些文件并使其发生。 无需任何进一步的培训,您就足够聪明,可以找到要更改的词语并在 HTML 中更改它们并查看结果。 您足够聪明,可以找到 CSS 中的颜色值并将它们更改以查看结果。 您足够聪明,可以找出 HTML 元素和 CSS 选择器之间的联系。
这就是绝大多数网页设计师的起步方式。 我知道我就是这样做的。
现在,您可以学习您想学习的任何东西,并在您实际工作的网站中学习。 您可以想象您学习的内容如何应用于您的真实网站。 您做得越多,就越好。 想变得更好吗? 只需构建网站!
替代方案
我想在这篇文章中非常具体。 没有含糊不清的地方。 但这并不意味着这是唯一的途径。 让我们在评论中讨论类似但不同的路径。
升级
在对这个过程感到相当舒适之后,有很多方法可以升级。 一些方法可能包括
- 安装像 WordPress (视频系列)、Kirby、Perch、Ghost 等等这样的 CMS。
- 通过不断设计来提升你的整体设计技能。
- 学习一些 jQuery (视频系列) 来添加高级功能和交互。
- 学习关于版本控制系统,例如 Git。
- 学习如何有效地运营一个网页设计业务。
有很多方法可以提升自己。你很可能会在自然地学习过程中发现大多数方法。
1 – 例如,如果你从你的托管公司购买你的域名,然后决定更换托管公司,托管公司没有动力帮助你处理域名。
我认为网页设计最棒的一点是,你可以直接跳过步骤 1 到 8,直接写一些 HTML 代码/找到一个模板,在浏览器中打开它。你刚刚做了一个网页!你太棒了!学习在本地进行调试是一个很棒的工作流程,我相信我们大多数人每天都在使用它。
是的,太棒了!
我认为真正神奇的地方在于当你控制一个真正的网站时,任何人都可以访问它,那种感觉。这让你有了压力。现在这是一个真实的东西,我必须做好。
lol @ 第 8 步:感受力量在你的血管中流动
:-) 我同意。Chris,我认为这是一种很好的激励人们开始的方法。它让人们可以随意尝试,但同时也创造了“哇!看看我能做什么!这是在实际的互联网上发布的!!!1”的兴奋感。我知道这是我开始的灵感来源。
我以为网页设计是设计网页的艺术,也就是创建网站模型……^^
循序渐进 :-)
我同意。网页设计入门绝对不是从购买域名开始的。我认为这份指南应该更准确地命名为“如何搭建你的第一个网站”或类似的东西。
另外,阅读大量书籍!不仅仅是关于代码的书,还有关于设计本身的书。我最初是 IT 人员,后来转行做了后端开发,现在也做前端!阅读设计书籍和了解设计原理真的帮助我很多,现在我不再害怕提出建议或尝试为网站设计样式。
FileZilla 可以说是 PC 上最好的 FTP 客户端。简单易用,功能齐全(而且非常受欢迎)。
同意!而且它在 Linux 发行版上运行得和在 Windows 上一样好。
它确实是一个非常好的客户端。
可惜的是,它将密码存储在文件中,以纯文本形式!
为什么,为什么?!
确实,重要的是要意识到,你学到的很多东西都是自然而然地学会的。这个领域的信息,和其他任何领域一样,其数量和深度都是压倒性的,很多时候很难知道应该关注什么。
当我刚开始的时候(现在也还在这样做),我开始做的是专注于一些特定的事情,这些事情让我感兴趣——比如容易实现的性能提升——当看到一些新的但与主题相关的知识时,我会记下来,但暂时不去管它。当你在研究自己的特定兴趣时,看到同一个短语出现了两次或更多次,这可能表明你应该深入研究这个领域。
我学到的很多东西,即使现在,在我刚开始的时候,似乎都超出了我的理解范围。没关系,通读那些专业术语和参考资料,找出你确实了解的东西。随着时间的推移,你会开始感觉像加菲猫漫画中的那样——通过渗透学习……随着你越来越熟悉其背景,东西就会开始变得有意义。
超级额外加分
设置 Git 以推送你的网站更改
是的——这几乎就是我最初的做的事情!:)
这里有一个拼写错误 :-P
感谢你的写作!
谢谢!购买原因已经修复。
如果你和我一样是个抠门的人,你可以从免费的 000webhost 网站开始。
它不会给你一个 .com 域名,或者 5 (.. 2)-nines 的可靠性,但是没有广告,没有页脚,没有糟糕的限制性网站构建器,你可以使用 PHP5、MySQL 等:只需上传你的文件。
这些年来,它为我服务得很好。
注意:不是付费的托儿,只是个满意的用户
是的,我多年来一直在使用它。从来没有抱怨过。他们的网站 UI 不是很理想,但免费就是免费的。
当我还是个十几岁的小孩时,我使用 Homestead 创建了最糟糕的 Web 1.0 页面,当时我第一次创建网页时,#8 正是我当时的感受。啊,回忆 XD
为什么更改为网页托管公司的域名服务器比将域名服务器保留在注册商的默认设置,并将它们指向网页托管的 IP 地址更好/更差呢?
因为你可以将主机用作邮件服务器等。
Chris,我不得不不同意你的观点。
上面描述的步骤仅仅是操作任务,在我看来,这些任务与网页设计没有直接关系。
“如何开始网页设计”是关于学习设计。
以下是我的一些看法
• 你在购买域名和托管服务方面到底能有多好?
• 你在将域名服务器指向托管服务方面到底能有多好?
• 你在使用 FTP 方面到底能有多好?
• 你在找到网站根目录方面到底能有多好?
• 你在找到一个模板方面到底需要多好?
要学习网页设计,你可以从以下方面开始
查看 Treehouse
或查看 Lynda.com
或阅读 WebDesignerDepot.com 上的这篇文章 “20+ 学习网页设计和开发的资源”
同时在 Codeacademy (http://www.codecademy.com/en/tracks/web) 中[学习 HTML 和 CSS]。
FTP、域名、托管、服务器、DNS、模板、jQuery,这些都是随着时间的推移自然而然地学到的。
我只是说说而已 :)
关键是给自己设定目标。注册一些学习服务很棒,但如果你只是观看操作指南,却没有为自己的原因创建任何东西,你更有可能中途放弃。拥有自己的东西,并在其中学习,这无价之宝。
这是我对……的理解版本
主题是关于如何准备开始设计的相关事项!
但除此之外,Chris 还提供了一个简单的设计想法(:只是开玩笑:)。
我的理解围绕着开始
免责声明:这是我的理解,如果冒犯到你了,我很抱歉!
@Yeswanth,不,一点也不冒犯,因为在我看来,Chris 的列表更多地是关于“如何开始将你的第一个 HTML 文件上传到你的主机”,而不是真正如何开始成为网页设计师。
在任何人开始网页设计之前,他们都必须首先学习设计。你知道,设计概念,比如临近、层次、比例、对齐、模式、节奏、对比、平衡等等,等等,等等……(实际上,看看这些关于用纸张制作的设计概念海报,我刚刚看到)。
一旦你学习并理解了这些概念,Chris 在这里描述的步骤对于提升你的水平,成为一名更好的网页设计专业人士将变得非常宝贵。
这篇文章很棒……我需要教一堂课,内容就是这个……购买域名……将其与主机绑定……以及将你的文件放到网上……我相信这篇文章会帮助许多学习网页设计的学生。
感谢你写这篇文章……
迈克尔!
这可以被理解为“哇,太棒了!”或“哇,这很冒险”。
事实上,两者都正确。当这种力量贯穿你的血管时,请记住,能力越大,责任越大。不要发布任何你不想让全世界看到的东西。当你更多地参与编程(即使只是 JS)时,不要忘记潜在的安全问题。
很高兴你指出了这一点,Adrian。这篇文章至少应该推荐使用 SFTP 而不是标准的 FTP。
很棒的文章,读着它就让我想起十年前之前有多难。
我以为会是关于核心设计的,但没关系,和往常一样,你分享了一些对读者来说非常有价值的信息。清晰的图片说明,任何人都可以理解和操作,按照这些步骤进行。
此致
Saoumy Roy
可以使用 GitHub Pages 托管静态内容。
Jekyll 也可以帮助你在 github pages 上创建静态博客 :)
一个月前,当我真正开始对抽出更多时间学习网页开发基础知识产生更大的兴趣时,我一定会欣然接受这样的帖子。事实上,我相信我花了无数个小时寻找一些“入门指南”,这些指南能够让我快速上手。我必须说,在花了一些时间构建基础(借助 Chris 的 Lodge 视频、YouTube、书籍和论坛)后,我才更好地理解了这篇博客。
也就是说,有些人会按照这些步骤一步一步地进行,使用 Hover 来获取他们的域名,使用 MediaTemple 来进行托管(IMO 如果你只是想拥有一个个人网站,价格有点贵)。我认为,也许在花金钱购买域名和主机之前,应该先花些时间来了解这些东西都是做什么的?
我只是在思考这个问题,因为我对论坛和开发过程还比较陌生。这只是一个建议,也许已经足够明显了,但还是需要提出来。
给自己设定目标的那一部分非常棒,但后面的具体细节应该在文章中占用更多篇幅。
请推荐一个适合 Windows 的好的 FTP。
@Mahir
Filezilla 是跨平台兼容的。 https://filezilla-project.org/
Cyberduck 也是一个不错的选择。 https://cyberduck.io/
我和我的学生都使用这两个。:-)
对于像 Mac 的 Coda 这样的文本编辑器/FTP 客户端组合,可以使用 Notepad++
http://notepad-plus-plus.org/
FTP 客户端和文件管理器合二为一:Total Commander(以前称为 Windows Commander)。我使用它已经超过 10 年了,我尝试过的其他 FTP 工具/文件管理器,包括 FileZilla,都无法与 Total Commander 的速度相提并论。它也很容易使用。
如果你喜欢 Sublime Text,Sublime SFTP 插件是最好的选择。
这太棒了,Chris!我最近开始教一个朋友网页设计,我发现自己引导她创建了一个 github 帐户,下载了一个 Git 客户端(而不是 ftp),并设置了 github pages(而不是购买托管)。你认为这种方法怎么样?
另一种方法是在你的本地 Windows 或 Linux 系统上安装和使用 **XAMPP** 或 **WAMP**。
这样,你就可以拥有完整的基础设施来运行你自己的本地网站,以便先尝试一些东西。
此外,你还会获得所有你需要进行一些服务器端开发的东西,包括数据库 **MySQL** 和 **PHP**,用来创建和丰富你的 **HTML** 页面。
我使用并推荐 **NetBeans** 作为创建网页的 IDE,它拥有良好的编辑器,还包含对 GIT /GitHub 等版本控制系统的各种集成。
试试看,并不难 :-)
如何开始写作
(1) 买一支铅笔、钢笔或打字机(或全部)
(2) 买一些纸
(3) 买一本字典
(4) 想一个要写的内容
(5) 想一个故事标题
(6) 将故事标题写在纸上
(7) 感受力量贯穿你的指尖
(8) 挣扎……然后找到一个类似的故事,并以此为基础,用你自己的语言写你的故事……
(9) 做点什么
(10) 恭喜你——你是一名作家
*仅仅因为一个人会写并不意味着他们是一名“作家”——这篇文章最好标题为“如何获得自己的网页域名”,而不是“如何开始网页设计”。
哈哈,你真是一针见血。我同意大部分内容,但在谈到获取模板的部分(8)时,我完全不同意
我希望有人在我开始的时候就告诉我将域名和托管分开。你几乎永远不会更改域名,但托管可能会随着你的需求而改变,因此将两者分开会更好。
文章很不错,也很幽默!我记得我第一次尝试创建自己的网站是在一个叫做 Piczo 的东西上,你可以拥有自己的网页之类的东西。我一开始只是尝试更改文本颜色等等。完全不懂。
现在几年过去了,我看到我创建的那些网页有多糟糕,而我当时对它们却无比自豪,这让我觉得很搞笑!
作为旁注,有一些很棒的托管网站,它们在一个地方提供所有东西。我有时使用 One.com,虽然他们每个域名只提供一个数据库。但它是一个很好的入门网站,尤其是我当时对所有服务器相关的东西一无所知。
我知道存在难度曲线,但我认为鼓励人们使用 FTP 这样的未加密协议是不负责任的。
SSH 的使用并不比 FTP 难多少(除非你选择超越 user:pass 并使用公钥/私钥)。许多主要的 FTP 客户端,比如 Cyberduck,通常都包含 SSH 兼容性,因此新用户不会错过现代 UI 等等。
并不是每个网页设计师都是开发者。很多网页设计师害怕 CLI 相关的东西,所以我不认为它应该出现在网页设计入门页面中。
“并不是每个设计师都是开发者” 当谈到 SSH 时,我们指的是 SFTP……而且,你甚至不需要进行任何命令行操作。在 FileZilla 中,只需从 ftp:// 更改为 sftp:// 就行了,就这么简单。如果你是一个熟练的、全面发展的设计师,并且遵循最佳实践,那么你将很容易配置 SSH 服务器。
而且,没有理由说 SSH 配置不应该出现在初学者指南中。这是必须知道的!
记住,你掌握的技能越多,你的价值就越高!
我是一名开发者,大多数时候使用 *nix。我熟悉所有这些,但我曾与一些设计师合作过,我甚至不得不让他们学习 git。如果有人不会使用 git,他们怎么生成 SSH 密钥?我指的是那些一生都在使用 Windows,却学会了如何在文本编辑器中使用 HTML 和 CSS 的设计师。
我完全同意这一点。SFTP 不需要太多额外的设置,大多数情况下你可以与你的主机联系,询问如何操作。安全文化非常重要,我们行业对它的重视程度不够。你会告诉某人使用 Root 作为用户名或 Password1 作为密码吗?或者你会告诉某人使用非 HTTPS Facebook 通过 Wi-Fi 连接吗?
纯 FTP 有其用途,上传商业机密或关键任务数据,即使只是登录一个静态网站,也不是它的预期用途之一。
文章确实很棒!我个人认为只有一步需要改进,那就是关于 FTP 的。我认为简单的老式 FTP 效率低下,应该考虑使用 SFTP 这样的解决方案。使用普通 FTP 时,所有凭据都以明文形式通过互联网发送,而使用 SFTP 时,所有内容都会被加密。
干杯!
为什么将托管和域名分开更好?
我在文章末尾添加了脚注。我会直接指向它,而不是在这里重新发布,以防将来需要更新。
当托管公司通知您域名到期时,您不能直接让它过期,然后从另一家公司重新购买吗?
感谢分享,我推荐使用 Cushy CMS 进行内容管理,它非常容易,您只需将要编辑的内容包装在 DIV 中即可。我的朋友们总是想开始进行网页设计,但却雇人来设计,这可不是一个好的开始!
谢谢!
看起来我们需要在 CodePen 上添加一个“部署到域名”按钮,这样我们就可以从趣味开始,并最终完成部署。
真是令人震惊。
呵呵,不。大多数用户只是使用 CodePen 进行演示,然后嵌入或链接到完整的 CodePen 页面。该按钮只会对 5% 的用户有用,作为一名开发者,我宁愿不为这么小比例的用户做事情。
感谢这篇帖子,Chris,它实际上看起来就像你之前在 Pencil vs Pixel 节目中谈论的内容。回到网页设计的根本,真的很有意思。
我完全同意这一点,因为我走遍了购买书籍和注册 Treehouse 和 lynda.com 学习网页设计的整个过程。信息太多了,以至于让人不知从何入手。我按照他们所有的操作步骤进行,但就是没有领悟,虽然我能理解他们在说什么,但我发现很难自己去实施。8 个月后,我放弃了。我认为 Chris 的想法,即从自己的东西开始,并使其成为一个有责任感的东西,是自然发现事物的一种好方法。然后,随着您的学习,您可以在自己的网站上实施它,并看到它运行起来。我将在本周末开始建立一个网站,并将使用这种思维方式,希望在 3 个月内我能比以前花无数小时观看培训视频时走得更远。谢谢,Chris。
我同意使用 Filezilla 进行 FTP。对于那些只想让网站上线的人来说,这是一个很好的入门介绍,说明了所涉及的步骤。
不要忘记像 MAMP(用于 WordPress)和 SimpleHTTPServer(用于终端中的 HTML5)这样的本地工具。大家使用 GoDaddy 和 Bluehost 的体验怎么样?有什么偏好吗?
我更倾向于使用 Hover 而不是 GoDaddy 来购买域名,并且我喜欢 Bluehost 的托管服务。与我使用过的其他服务相比,我更欣赏它的一切(这只是我的个人偏好,可能不是最好的)。
我的意思是 Hover,而不是 over :)