在15分钟内建立并启动自定义个人网站

最好的部分–您唯一要使用的是Web浏览器

本小教程假定您没有先验知识，除了如何操作键盘，鼠标和单击Internet上的按钮。但我希望这有助于启动您的Web开发旅程：)

在15分钟内建立并启动自定义个人网站 — 图片来源：Blake Connally，《 Unsplash》

借助Github中一些新颖的新功能以及称为Github Pages的奇妙功能，构建和启动自己的基于HTML的网站从未如此简单。最好的部分是，您的网站不会建立在平台或某种模板之上。我们将使用优质的HTML，即网络语言。您可以构建任何东西，从带有大块字体的蓝色页面打印到您的名字，再到使用互联网所有神奇技巧的带有精美动画和飞猫的奇特响应式网站。没有限制。纯粹的令人敬畏。

足够了，让我们开始吧，我们只有15分钟！一直进行到本文结尾，您将拥有一个类似以下的网站。然后您可以自定义-天空就是极限！

在Github上创建一个新项目

这并不难，首先转到github.com并创建一个帐户。这部分与您在互联网上创建的数百万个帐户没有什么不同。一旦完成，我们就准备好了。

单击Github中的新存储库按钮，然后创建一个新项目。我打电话给我的仓库15分钟！

创建存储库时，请确保已勾选“使用自述文件初始化此存储库”。这将为您创建并初始化您的项目。如果不这样做，则必须在计算机上自己初始化项目，然后将代码推送到Github。而这种做法违背了“在不知道git是什么的情况下，在Web浏览器中完成所有操作”的目的。

很好，如果一切顺利，我们现在就建立了项目。

创建一个index.html文件

我们的整个文件将是一个HTML文件（目前）。那很整洁吧？重要的是，我们的文件必须命名为 index.html 。这是因为Github寻找具有该名称的文件作为我们的网站。那么，我们如何创建该文件？我们点击一个按钮！

就那么简单。将新文件命名为index.html ，然后输入以下代码。代码非常简单。看起来像<this>的有趣的东西称为HTML标签 。稍后会更多有关它们的信息。现在，只知道您打开了<this>这样的标签，然后关闭了</ this>这样的标签。两者之间的所有内容都是标签的内容。

如您所见，我们已经将名字加了两次。放在标题中，放在<title>标记内，一次放在正文中，在<h1>标记内。 <h1>是一个heading1标记，用于巨大的标题，如页面标题。或你的名字。 <title>标记设置网页的标题，该标题也显示在浏览器中选项卡的标题中。

现在我们已经输入了，我们需要保存文件。在Github的世界中，这是通过单击“提交”按钮来完成的。提交可帮助您跟踪文件上的版本，这非常方便。因此，您可以输入一则小的提交消息来解释您对文件所做的更改，然后点击“提交新文件”。您现在可以愉快地忽略所有有关树枝，树木和森林的内容。

开启Github Pages

您已经取得了如此出色的成就！您只需要告诉Github打开“ Github页面”，您的网站就会在互联网上。多么酷啊。单击存储库中的“设置”选项卡，然后向下滚动到Github页面部分。选择主分支作为源，然后单击保存。

繁荣！您的代码（以及您的名字）现在在互联网上：D：D

佩服你的名字

转到<yourusername> .github.io / <your-repository-name> /查看您奇妙的新网站。您甚至不必键入长URL，Github设置中就有一个整洁的链接。如果您没有错过任何步骤，那么您应该会看到自己的名字盯着您。这是非常光荣的，因为您是将它放在那里的人。

我们可以在这里停下来。或者……我们可以使事情看起来更好。

美化

好吧，我们可以使我们的名称看起来更光荣一些，但是只需很少的代码行吗？绝对。在开头部分，我们需要使用<style>标签添加一些CSS。这将帮助我们设置网站特定部分的样式。

<style>
  body {
    background-color: black;
    text-align: center;
    padding: 200px;
  }
  h1 {
    font-size: 60px;
    color: #eeee33;
  }
</style>

我们只是在这里做什么？我们将背景变黑，使我们的名字变大，并将我们的名字变黄（＃eeee33只是选择一种特定类型的黄色的一种奇怪的方式）。

那会是什么样子？非常简单，让我们提交这些内容，然后查看我们的网站发生了什么！ :)单击项目中的index.html文件，然后单击编辑，这是一个小笔图标。然后像以前一样放手！

再次欣赏。你完成了！

前往您的网站并刷新。更新可能需要几分钟。

我知道编写一些代码并等待几分钟以加载我们的网站可能会感觉效率低下，但是在下一篇文章中，我们将学习如何在我们的计算机上本地编写代码，并通过检查代码的外观快速迭代浏览器，然后将所有更改一键推送到Github，以便我们的网站得到更新，让全世界都能看到！

希望您喜欢这篇介绍性文章。请在回复中共享指向您的rad new网站的链接：）

接下来是什么？

好吧，我们写了一些代码，但对代码实际在做什么却有所掩饰。想知道那里发生了什么吗？使用其中一些出色的资源可以更好地理解HTML和CSS。

Codecademy ：他们的HTML和CSS课程很棒！ 4到5年前，我学习了古老的Codecademy版本，它确实对我有用。
CodeLife ：由我的顾问Cesar Hidalgo的初创公司开发的全新平台，可帮助您学习HTML，CSS等。

这是本教程中所有代码的github存储库的链接。

我的下一篇文章将讨论如何在本地计算机上开始在这个新网站上进行迭代，并添加一些新部分来展示您的作品集！谢谢阅读。

From: https://hackernoon.com/build-and-launch-a-custom-personal-website-in-15-minutes-1aaa868b1216