github上建立仓库_如何在github页面上建立投资组合

github上建立仓库

A portfolio is hands down the most effective way for developers to demonstrate their previous experience and achievements. Presenting your body of work in a well-curated manner can play a big role in helping you stand out from other job applicants, and get your potential new employer excited about the skillset you offer.

资产组合是开发人员展示其先前经验和成就的最有效方法。 以精心策划的方式展示您的工作体系可以在帮助您脱颖而出的其他求职者中发挥重要作用，并使您的潜在新雇主对您提供的技能感到兴奋。

As an increasing number of developers opt to create websites for their portfolios, it can be challenging to figure out how best to create an online portfolio at an economical price. Luckily, GitHub offers an option to host your portfolio free of charge while still being accessible to a large audience. This article will guide you through the creation of a unique portfolio on GitHub without requiring any previous HTML or JavaScript experience. So, without further ado, let’s dive in!

随着越来越多的开发人员选择为其投资组合创建网站，要想出最好的办法以经济的价格创建在线投资组合可能是具有挑战性的。 幸运的是，GitHub提供了一个选项，可以免费托管您的作品集，同时仍可吸引大量读者。 本文将指导您在GitHub上创建独特的产品组合，而无需任何以前HTML或JavaScript经验。 因此，事不宜迟，让我们开始吧！

投资组合创建 (Portfolio Creation)

Photo by Joshua Aragon on Unsplash

约书亚·阿拉贡 ( Joshua Aragon)在 Unsplash上 拍摄的照片

选择一个模板 (Select a template)

There are plenty of websites providing free boilerplate HTML templates and you can use any popular theme websites to find a great option (such as Envato or TemplateMonster). The one I use personally, and that we will be using for this tutorial, can be found on HTML5up. I am not sponsored by them so this is just a convenient website I found on Google. This template does not initially come with images but, as we can access issues on other sites, this isn’t an issue. Unsplash is a great source for free reusable images in high quality which we will use later on in this guide.

有很多网站提供免费的样板HTML模板，您可以使用任何流行的主题网站找到一个不错的选择(例如Envato或TemplateMonster)。 我个人使用的(我们将在本教程中使用的)可以在HTML5up上找到 。 我不是由他们赞助的，所以这只是我在Google上找到的便捷网站。 该模板最初不包含图像，但是由于我们可以访问其他站点上的问题，因此这不是问题。 Unsplash是免费提供可重复使用的高质量图像的绝佳来源，我们将在本指南的后面部分中使用。

I recommend that your template be professional and simple in appearance, this may mean that you need to delete quite a few details fom your current portfolio and retain only some personal information and details of previous projects. Once you decide on the template, your download should include some HTML files and possibly other fonts and images. You may unzip the files anywhere you like; if you are using the same website, I recommend something similar to Massively or Multiverse.

我建议您的模板应专业且外观简单，这可能意味着您需要删除当前投资组合中的许多细节，并仅保留一些个人信息和以前项目的细节。 确定模板后，您的下载内容应包括一些HTML文件以及可能的其他字体和图像。 您可以将文件解压缩到任何您喜欢的位置； 如果您使用的是同一网站，则我建议您使用类似于Massively或Multiverse的网站。

设置VS代码 (Set up VS Code)

Once we have the template, make sure that you have Visual Studio Code installed. If you haven’t installed this yet then no worries, the steps are fairly simple and the process shouldn’t take too long. Once in VS Code, open the folder where you have unzipped the files. We will need to add the Live Server extension, which does not require any setup and is free to use. This extension will allow us to see the changes we make to the website in real-time.

有了模板后，请确保已安装Visual Studio Code。 如果您尚未安装此程序，则无需担心，这些步骤非常简单，并且过程不会花费太长时间。 进入VS Code后，打开解压缩文件的文件夹。 我们将需要添加Live Server扩展，它不需要任何设置即可免费使用。 通过该扩展程序，我们可以实时查看对网站所做的更改。

修改代码 (Modify the code)

We now have the whole project ready and can begin making our portfolio. Everything we need to modify can be found in index.html.

现在，我们已经准备好了整个项目，可以开始制作我们的产品组合了。 我们需要修改的所有内容都可以在index.html找到。

1.Titles and Headers

1.标题和标题

Find the header that contains the website title. It should look something like the following:

查找包含网站标题的标题。 它看起来应该如下所示：

<h1>This is<br />
Massively</h1>

Here, everything in between h1 is the actual text. I will change it to “My Portfolio” but you are free to design it as you like. Now, if you have installed a website plugin for VS Code you should be able to see the updated version of the website. If you do not, make sure you have set everything up properly and go back to the previous steps.

在此， h1之间的所有内容均为实际文本。 我将其更改为“我的投资组合”，但您可以自由设计它。 现在，如果您已经安装了VS Code的网站插件，则应该可以看到该网站的更新版本。 如果没有，请确保已正确设置所有内容，然后返回到先前的步骤。

<h1>My Portfolio</h1>

Great, over the next few steps we’ll make the portfolio look nice and add the proper texts. I will walk you through the steps for the portfolio I am using but most templates are quite similar in terms of code so personalizing your portfolio shouldn’t be an issue.

太好了，在接下来的几个步骤中，我们将使作品集看起来不错并添加适当的文本。 我将引导您逐步了解我正在使用的投资组合的步骤，但是大多数模板在代码方面都非常相似，因此个性化您的投资组合不应该成为问题。

Next, you should have a line containing some sort of paragraph. One idea is to modify it to showcase what the portfolio is all about.

接下来，您应该在一行中包含某种段落。 一种想法是对其进行修改以展示产品组合的全部含义。

<p>A free, fully responsive template...</p>

Let’s change it to the following:

让我们将其更改为以下内容：

<p>A demonstration of my projects and experience.</p>

2.Tabs and Links

2.标签和链接

In the template I have chosen, there are several tabs that we don’t need as it’s best to keep the portfolio simple. If you have tabs as well, search for their display names in the code. In my case, I am looking for the “Generic Page”. Simply delete those lines and keep just one tab.

在我选择的模板中，不需要几个选项卡，因为最好使投资组合保持简单。 如果还具有选项卡，请在代码中搜索其显示名称。 就我而言，我正在寻找“通用页面”。 只需删除这些行并仅保留一个选项卡即可。

<li><a href="generic.html">Generic Page</a></li>

My template also has various social media links, if you’d like to get rid of those you just need to find code similar to the one below and delete it:

我的模板还具有各种社交媒体链接，如果您想摆脱那些链接，只需找到与以下代码相似的代码并将其删除：

<li><a href="https://medium.com/@.." class="icon brands fa-medium"><span class="label">Medium</span></a></li>

If you would like to keep the social media links, change the href value to the link of your website. You can also change the icons by modifying the fa-medium part of the code to the icon of your choice. By changing the medium to GitHub you will get the proper icon to link your projects. I would recommend keeping only GitHub, LinkedIn, and Stack Overflow.

如果您想保留社交媒体链接，请将href值更改为网站的链接。 您还可以通过将代码的fa-medium部分修改为您选择的图标来更改图标。 通过将媒体更改为GitHub，您将获得适当的图标来链接您的项目。 我建议只保留GitHub，LinkedIn和Stack Overflow。

3.Images and Paragraphs

3.图像和段落

My template has a date, which is not necessary so I’m going to delete this as well. The next large header can be modified to something similar to the following:

我的模板有一个日期，这不是必需的，因此我也要删除它。 可以将下一个大标头修改为类似于以下内容：

<h2>My name is German</h2>
<p>I am a passionate Software Developer.</p>

Under the name, you could place the project that you are most proud of. Simply change the link to your image and the button link, then you can have a page with a short description of that project and several images. Here is an example:

您可以使用该名称命名最引以为傲的项目。 只需将链接更改为图像和按钮链接，即可获得一个页面，其中包含对该项目的简短描述和几张图像。 这是一个例子：

<a href="#" class="image main"><img src="images/pic01.jpg" alt="" /></a><ul class="actions special"><li><a href="#" class="button large">Check it out</a></li></ul>

As you already know, the content inside of href=” ” is a link to your page; you can style the other images and links to your projects in a similar way. This is where you can dive deep on the design of your page and make sure that your portfolio looks great.

如您所知， href=” ”内的内容是指向您页面的链接； 您可以用类似的方式设置其他图像的样式，并链接到您的项目。 在这里，您可以深入研究页面的设计，并确保您的投资组合看起来不错。

4.Contact Details

4.联系方式

After the projects are all set up, we can move to the bottom of the page. Here, I have a form for submitting questions. While I find this to be a helpful addition to my portfolio, it’s not entirely necessary so feel free to find something similar to what I have shown and delete it.

设置完所有项目后，我们可以移至页面底部。 在这里，我有一个提交问题的表格。 尽管我发现这对我的作品集很有帮助，但这并不是完全必要的，因此请随意查找与我显示的内容类似的内容并将其删除。

<form method="post" action="a">
    ...
</form>

Finally, there are the contact details at the end of the page. You need to replace the text with your actual details, being sure to make it look nice and clean. We have now completed the main parts of our portfolio, all the other elements are rather similar and you are free to experiment and edit everything to your liking!

最后，页面末尾有联系方式。 您需要用实际的详细信息替换文本，并确保文本看起来干净整洁。 现在，我们已经完成了产品组合的主要部分，所有其他元素都非常相似，您可以根据自己的喜好自由尝试和编辑所有内容！

托管投资组合 (Hosting the Portfolio)

Richy Great on Richy Great的 Unsplash Unsplash摄影

Now that our project is finished we can host it on GitHub Pages. If you do not have a GitHub account, it’s free to create one. Once the account is created you’ll want to go to the profile page. Next, select “Repositories” and choose “Create a New Repository”. To use GitHub Pages you need to name the project similar to the one I have shown. First, input your GitHub profile name and keep the rest. Now press “Create Repository”.

现在我们的项目完成了，我们可以将其托管在GitHub Pages上。 如果您没有GitHub帐户，则可以免费创建一个。 创建帐户后，您需要转到个人资料页面。 接下来，选择“存储库”，然后选择“创建新存储库”。 要使用GitHub Pages，您需要将项目命名为类似于我所展示的项目。 首先，输入您的GitHub个人资料名称，然后保留其余名称。 现在按“创建存储库”。

sharrik21.github.io

You do not need to know how to use Git through the command line since everything can be done through the website. Select “Upload Existing File” and copy all the files from your project to the website. You can copy the whole folder since the index file has to be easily accessible. Once all of the files have been uploaded, the portfolio is officially ready. Your portfolio is published as the project name. Copy the website name we’ve used above and you can preview the portfolio!

您不需要知道如何通过命令行使用Git，因为一切都可以通过网站完成。 选择“上传现有文件”，然后将项目中的所有文件复制到网站。 由于索引文件必须易于访问，因此您可以复制整个文件夹。 所有文件上传完毕后，产品组合正式准备就绪。 您的投资组合将作为项目名称发布。 复制我们上面使用的网站名称，您可以预览投资组合！

最后的想法 (Final Thoughts)

This article has guided you through creating a beautiful and practical portfolio that will make you stand out from any other job applicant. The portfolio is easy to make as it only requires a slight modification of the existing templates, and you’re free to use any templates you like and make your portfolio unique. I hope that you enjoyed learning this skill and that it helps you land your dream job! Thanks for reading.

本文已指导您创建漂亮而实用的作品集，使您在任何其他求职者中脱颖而出。 投资组合很容易制作，因为它只需要对现有模板进行一点修改，您就可以随意使用任何您喜欢的模板并使您的投资组合具有独特性。 我希望您喜欢学习这项技能，并希望它能帮助您找到理想的工作！ 谢谢阅读。

翻译自: https://codeburst.io/how-to-build-a-portfolio-on-github-pages-2daaf5ded5e3

github上建立仓库