github pages

For someone who is trying to break into software development, it doesn’t matter where you look — LinkedIn, career advice boards, youtube tutorials — the advice is always the same: you need a portfolio. freeCodeCamp knows this advise, and they make it compulsory to create one to finish their “Responsive Web Design” Certification.

对于试图进行软件开发的人来说，无论身在何处(LinkedIn，职业建议委员会，youtube教程)，建议都一样：您需要投资组合。 freeCodeCamp知道此建议，因此他们必须创建一个建议来完成其“响应式Web设计”认证。

The portfolio is supposed to be a living document. You finish a project, you throw that bad boy onto your portfolio to show it off to the world. You constantly add to it, displaying your personal growth trajectory. You give it to potential recruiters and hiring managers to add some dimension to your resume.

该投资组合应该是一份有生命的文件。 您完成了一个项目，然后将那个坏男孩丢到您的作品集上，向世人展示。 您不断添加它，显示您的个人成长轨迹。 您将其提供给潜在的招聘人员和招聘经理，以在简历中添加一些内容。

Out of the five projects to get that certification, I put hands-down the most work into my portfolio. If it was going to be my digital first impression, I wanted to ensure that it was the best one I could make.

在获得该认证的五个项目中，我不遗余力地将大部分工作投入了我的投资组合。 如果这将是我对数字的第一印象，我想确保它是我能做出的最好的印象。

The de facto method for completing the projects on freeCodeCamp is to use codepen.io. The free version lets you code in an HTML, CSS, and JavaScript pane, and see your changes as you type them in a window. You can open the page in a full view, which eliminates the HTML, CSS, and JavaScript panes, but leaves a black banner at the top. The url is a hash, something like https://codepen.io/cam-barts/full/ZPWpqo, which is not memorable, doesn’t give any indication about the site’s content, and in my opinion doesn’t make any waves on a resume. Furthermore, unless you pay for a membership with codepen, you can’t change it.

在freeCodeCamp上完成项目的实际方法是使用codepen.io。 免费版本使您可以在HTML，CSS和JavaScript窗格中进行编码，并在窗口中键入更改时查看更改。 您可以以完整视图打开页面，该视图消除了HTML，CSS和JavaScript窗格，但在顶部保留黑色横幅。 该网址是一个哈希值，类似于https://codepen.io/cam-barts/full/ZPWpqo ，它让人难以忘怀，它无法提供有关该网站内容的任何信息，而且我认为它不会引起任何轰动在简历上。 此外，除非您使用Codepen支付会员资格，否则无法更改。

Around the time I was finishing my project, the stars aligned and I discovered two technologies that would help my portfolio stand out: Github Pages and Google Lighthouse.

在我完成项目的那段时间，星星排列在一起，我发现了两种可以帮助我的作品脱颖而出的技术：Github Pages和Google Lighthouse。

Github Pages allows you to host a website directly from a GitHub repository. It offers a pretty slick github.io url, which tickled my fancy for something to put on a resume. It would allow me full control of what my users would see when they navigated to the site (so long, black banner), and I wouldn’t have to deal with self hosting or paying for some other hosting service.

Github Pages允许您直接从GitHub存储库托管网站。 它提供了一个漂亮的github.io网址，这让我很想把一些东西放在简历上。 这将使我能够完全控制用户导航到该网站时所看到的内容(很长的黑色横幅)，而且我不必处理自托管或为其他托管服务付费的问题。

I heard about Google Lighthouse in the CodeNewbie Podcast featuring Frances Coronel. It audits your website straight from Chrome Dev Tools for five areas: Performance, Progressive Web App, Accessibility, Best Practices, and SEO. SEO, or Search Engine Optimization, is what helps your site float to the top of search engines like Google, which helps you get found. Also, now that I was going to host my site on Pages, I wanted to take responsibility for my site’s performance, and to effectively do that I had to at least have a benchmark.

我在Frances Coronel主持的CodeNewbie播客中听说过Google Lighthouse 。 它可以直接从Chrome开发工具中审核您的网站的五个方面：性能，渐进式Web应用程序，可访问性，最佳做法和SEO。 SEO或搜索引擎优化可帮助您的网站升至Google等搜索引擎的顶部，从而帮助您找到自己的网站。 另外，既然我打算将我的网站托管在Pages上，我想对网站的性能负责，要有效地做到这一点，我至少必须有一个基准。

My goal in writing this article is to help you create a blazing fast, professional looking portfolio site at no cost to you. I want it to be something you’re proud to post about on LinkedIn and plaster on the top of your resume, and I want to leverage GitHub Pages and Google Lighthouse to do it.

我写这篇文章的目的是帮助您免费创建一个快速，专业的外观投资组合网站。 我希望它能成为您自豪地在LinkedIn上发布和在简历顶部贴上石膏的东西，并且我想利用GitHub Pages和Google Lighthouse来实现。

To go any further, I’ve made a few assumptions. The first is that you have a Github account. If you don’t already have one, creating one is easy. The second is that you have a basic understanding of git. If you’re brand new, there are plenty of excellent articles on getting started. This article assumes you’ve completed your portfolio on codepen. Finally, you should have Google Chrome installed.

更进一步，我做了一些假设。 首先是您有一个Github帐户。 如果您还没有，那么创建一个就很容易了。 第二个是您对git有基本的了解。 如果您是新手，那么有很多关于入门的优秀文章 。 本文假设您已经在Codepen上完成了投资组合。 最后，您应该已经安装了Google Chrome。

This article follows my personal portfolio. You can find the pen here, the code here, and the final product is at cam-barts.github.io.

本文遵循我的个人档案。 您可以在这里找到笔，在这里找到代码，最终产品在cam-barts.github.io 。

入门 (Getting started)

Setting up your Github Pages site is pretty straightforward. The TL;DR version is:

设置您的Github Pages网站非常简单。 TL; DR版本为：

• Create Repository following name convention [GitHub Username].github.io按照名称约定[Repository Username] .github.io创建存储库
• Clone Locally本地克隆

• Create index.html, style.css, script.js files within repository

  在存储库中创建index.html ， style.css ， script.js文件

• Add code to those files将代码添加到这些文件
• Commit and push to GitHub提交并推送到GitHub
• Profit!利润！

You create a repository with a title that follows the convention [Your Github Username].github.io. Here is mine: cam-barts.github.io. Whatever code gets pushed to that repository gets displayed when you navigate to that site.

您创建的存储库的标题遵循约定[Your Github Username] .github.io。 这是我的：cam-barts.github.io。 当您导航到该站点时，将显示推送到该存储库的所有代码。

So, when you’ve cloned the repository locally, what exactly do you put into it?

因此，当您在本地克隆存储库后，您将其放入什么位置？

You should start with three files, an index.html file, a style.css file, and a script.js file. In whatever editor you like (I use Atom), you should start with the following code snippet in your index.html:

您应该从三个文件开始，一个index.html文件，一个style.css文件和一个script.js文件。 在任何喜欢的编辑器中(我使用Atom )，都应该在index.html中以以下代码段开头：

There is a lot going on here that might be unfamiliar if you have only been working with codepen.io.

如果您仅使用codepen.io，那么这里发生的很多事情可能是您不熟悉的。

The dir attribute in the html tag indicates that the document should be read Left To Right. That just ensures that when your page shows up, all of the elements are left justified, which is how English speakers read.

在HTML标记中dir属性指示文档应读大号 EFTŤöř飞行。 这样可以确保在您的页面显示出来时，所有元素都保持对齐，这就是说英语的人的阅读方式。

The meta tags in the head indicate metadata about the page, which helps search engines like Google index your site.

头部的meta标签表示有关页面的元数据，可帮助Google等搜索引擎为您的网站编制索引。

At this point, you should go ahead fill out the meta tags and the title tag. Note that the keywords meta tag’s content should be comma separated, and should include terms that you would want people to use in Google to find your portfolio. Here’s what mine looks like:

此时，您应该继续填写meta标签和title标签。 请注意， 关键字元标记的内容应以逗号分隔，并应包含您希望人们在Google中使用的术语来查找您的投资组合。 这是我的样子：

The next step is to copy the HTML section of your portfolio pen into the body section of your snippet. Once that’s completed, if you linked to any outside CSS or JS in your pen settings, such as to Bootstrap or Font Awesome, you need to link those in your index.html.

下一步是将投资组合笔HTML部分复制到代码段的body部分中。 完成此操作后，如果您链​​接到笔设置中的任何外部CSS或JS(例如Bootstrap或Font Awesome) ，则需要将它们链接到index.html中 。

Create more link tags for css and script tags for JavaScript and add the links that are in the settings to the href and src attributes, respectively. To ensure that your styles and scripts show up, be sure to put them before the existing link and script tags in the snippet. For example, linking to Bootstrap and JQuery would look like:

为css创建更多链接标记，为JavaScript创建脚本标记，并将设置中的链接分别添加到href和src属性。 为确保显示样式和脚本，请确保将其放在代码段中现有链接和脚本标签的前面。 例如，链接到Bootstrap和JQuery看起来像：

Next, you need to add your own CSS into your style.css, and if you have any JavaScript, add that to your script.js.

接下来，您需要将自己CSS添加到style.css中 ，如果您有任何JavaScript，请将其添加到script.js中 。

After you’ve done that, you’re good to commit all your work and push it to Github. Immediately after you do that, you can navigate to [Your Github Username].github.io and check out your website!

完成之后，您最好将所有工作提交并推送到Github。 完成后，您可以立即导航到[您的Github用户名] .github.io并查看您的网站！

优化您的投资组合网站 (Optimizing your portfolio site)

Congratulations on publishing your portfolio!

恭喜您发布您的作品集！

The next steps involve optimizing your site. For this, we will use Google Lighthouse. It is better to do this in an In Private Browser window so that any cache or Chrome extensions you may have will not affect the results. When you navigate to your site, open Chrome Developer Tools (Ctrl + Shift+ i) and click on the Audits tab.

下一步涉及优化您的网站。 为此，我们将使用Google Lighthouse 。 最好在“专用浏览器”窗口中执行此操作，以使您可能拥有的任何缓存或Chrome扩展程序都不会影响结果。 导航到网站时，打开Chrome开发者工具(Ctrl + Shift + i)并单击“ 审核”选项卡。

Progressive Web Apps are outside of the scope of this tutorial, but there is no harm in running all of the audits. When you run them, you should get a page that looks like this:

渐进式Web应用程序不在本教程的讨论范围之内，但是运行所有审核没有任何危害。 运行它们时，您应该获得一个如下所示的页面：

The best thing about these reports is that it gives you “Opportunities” to improve your scores.

这些报告的最好之处在于，它为您提供了“机会”来提高您的分数。

In the performance section, it tells you to serve next gen file formats such as WebP versus traditional .PNG images, and suggests lazy loading the images.

在性能部分，它告诉您提供下一代文件格式，例如WebP与传统.PNG图像，并建议延迟加载图像。

In the SEO section, it suggests SEO improvements such as adding a description meta tag and using legible font sizes. Not only does it make these suggestions, it links to articles with practical examples with things to change in your code to optimize for those areas.

在SEO部分，它建议SEO进行改进，例如添加描述元标记和使用清晰的字体大小。 它不仅会提出这些建议，而且还会链接到带有实际示例的文章，并在您的代码中进行更改以针对这些领域进行优化。

For me, it only took an hour to get the scores for my site in the high 90s for Performance, Accessibility, Best Practices, and SEO. You can see all to the changes I made here.

对我来说，只花了一个小时就获得了我的网站在性能，可访问性，最佳实践和SEO方面得分最高的90分数。 您可以看到我在这里所做的所有更改。

更进一步 (Going further)

Next steps for your site are up to you. You could link it to Google Analytics to see how many visitors your Portfolio is getting. You could add sections for your awards to show your freeCodeCamp certifications as you get them. The evolution of your site is completely in your hands! Comment links to your portfolio below.

您网站的后续步骤由您决定。 您可以将其链接到Google Analytics(分析)，以查看您的投资组合吸引了多少访客。 您可以添加奖项部分，以在获得免费CodeCamp认证时显示它们。 您网站的发展完全掌握在您的手中！ 评论链接到下面的您的投资组合。

翻译自: https://www.freecodecamp.org/news/boost-your-dev-portfolio-with-github-pages-and-lighthouse/

github pages