web网站开发基础_Web开发基础系列第二部分创建您的网站

web网站开发基础

This guide was developed for web developers at Levare, a volunteer initiative meant to amplify the Black community by helping Black-owned businesses create an online presence.

本指南是为 Levare 网站开发人员开发的， Levare 是一项志愿者计划，旨在通过帮助黑人拥有的企业建立在线形象来扩大黑人社区。

包装经理 (Package Managers)

When starting with web development, you’re going to run into many dependencies that will most probably not already be installed on your computer. The node package manager allows you to install these JavaScript packages in your projects so that you can use them. For more information and to install, check out their website. Yarn also allows you to install packages, and you can find more information and installation here. I recommend installing both so that you won’t run into issues in the future.

在开始Web开发时，您将遇到许多依赖关系，这些依赖关系很可能尚未安装在您的计算机上。 节点包管理器允许您在项目中安装这些JavaScript包，以便可以使用它们。 有关更多信息和安装，请访问其网站 。 Yarn还允许您安装软件包，您可以在此处找到更多信息和安装。 我建议同时安装两者，以免将来出现问题。

编辑代码 (Editing Code)

A code editor allows you to edit, run, and debug your code. You will need to install a code editor to start developing your code. A popular code editor is Atom, created by Github. It has Github Integration, which makes it easy to work with the Git workflow. Another popular one and the one I use is VSCode, created by Microsoft. I like it because of the style, but either is fine.

代码编辑器允许您编辑，运行和调试代码。 您将需要安装代码编辑器才能开始开发代码。 流行的代码编辑器是Github创建的Atom 。 它具有Github集成，因此可以轻松使用Git工作流程。 我使用的另一个流行的是由Microsoft创建的VSCode 。 我喜欢它的风格，但是两者都很好。

Once you open your project folder, you’ll be able to see all your projects on the left side of your screen by pressing the top left icon on the sidebar. You will also be able to open the command prompt on the bottom of your screen so that you can run commands. On Mac, you can do this by pressing the “Terminal” option on the Menu bar and pressing “New Terminal.”

打开项目文件夹后，按侧边栏左上角的图标，您将可以在屏幕左侧看到所有项目。 您还可以在屏幕底部打开命令提示符，以便可以运行命令。 在Mac上，您可以通过按菜单栏上的“终端”选项并按“新终端”来执行此操作。

Screenshot of A Taste of Africa Workspace 非洲趣味工作区屏幕截图

从头开始或模板创建网站 (Starting a Website from Scratch or a Template)

If you are planning on going down this route, congrats! You will be taking on an enormous feat, but it will be a rewarding experience. There are two aspects of all websites: front-end and back-end. You can develop websites with front-end only, but adding a back-end will allow the user to do a lot more.

如果您打算走这条路，那就恭喜！ 您将获得巨大的成就，但这将是有益的经历。 所有网站都有两个方面：前端和后端。 您只能使用前端开发网站，但是添加后端将使用户做更多的事情。

前端 (Front-end)

Front-end involves all the parts of the website that you can see and interact with. Static websites are websites that do not change from user to user. There are no databases involved, and the user is limited in its interactivity with the website. All static websites have three basic components: HTML, CSS, and JavaScript. There are a ton of resources that can help you start with building from scratch.

前端涉及您可以看到并与之交互的网站的所有部分。 静态网站是指不会因用户而异的网站 。 没有涉及数据库，并且用户与网站的交互性受到限制。 所有静态网站都具有三个基本组件：HTML，CSS和JavaScript。 有大量资源可以帮助您从头开始构建。

• W3Schools covers the basics of HTML, CSS, and JavaScript. They also have tutorials for almost every conceivable component, so it’s a great reference.

  W3Schools涵盖了HTML，CSS和JavaScript的基础知识。 他们也为几乎所有可能的组件提供了教程，因此它是一个很好的参考。

• freeCodeCamp also offers many guides and certifications in all areas of web dev. They also have a great Youtube channel where they walk through how to build entire web projects in a few hours.

  freeCodeCamp还为Web开发的所有领域提供了许多指南和认证。 他们还有一个很棒的Youtube频道 ，他们将在几个小时内逐步指导如何构建整个Web项目。

• Bootstrap offers great templates and components in pure HTML, CSS, and JavaScript. Definitely recommend it if you are starting from scratch and want to play around with different components and see how everything fits in together. Bootstrap also has a CSS grid system that is widely used to build responsive websites.

  Bootstrap以纯HTML，CSS和JavaScript提供了出色的模板和组件。 如果您是从头开始并且想玩弄不同的组件并查看所有内容如何组合在一起的，绝对可以推荐它。 Bootstrap还具有CSS网格系统 ，该系统广泛用于构建响应式网站。

• React is a JavaScript framework that allows you to build beautiful user interfaces. It also allows you to easily reuse components.

  React是一个JavaScript框架，可让您构建漂亮的用户界面。 它还使您可以轻松地重用组件。

• React Bootstrap takes Bootstrap components and React-ifies them. Again, easy to reuse components and alter them as you need, especially if you are already familiar with Bootstrap.

  React Bootstrap接受Bootstrap组件并对其进行React化。 同样，易于重用组件并根据需要更改它们，尤其是如果您已经熟悉Bootstrap。

• The Net Ninja offers great Youtube tutorials in a wide variety of fields,

  网络忍者(Net Ninja)在各个领域提供了出色的Youtube教程，

Gatsby creates static websites with React. There are already tons of templates available on the website, but make sure you are following the instructions on how to download and install the Gatsby command line program.

Gatsby使用React创建静态网站。 网站上已经有大量模板可用，但是请确保您遵循有关如何下载和安装Gatsby命令行程序的说明 。

后端 (Back-end)

Back-end helps power everything that is going behind the screens of your website. It helps define data architecture and business processes and run application programming interfaces, or APIs, which takes care of data requests. Like front-end, there are a ton of back-end resources, but some are more compatible with certain front-end frameworks than others.

后端有助于增强网站屏幕背后的所有功能。 它有助于定义数据体系结构和业务流程，并运行负责数据请求的应用程序编程接口或API。 像前端一样，有大量的后端资源，但是有些比某些前端框架更兼容某些前端框架。

• Node.js is a back-end runtime environment that uses JavaScript outside a web browser. It’s usually paired with React as a frontend framework.

  Node.js是一个后端运行时环境，在Web浏览器之外使用JavaScript。 通常将它与React作为前端框架配对使用。

• Express is another back-end framework that is built upon Node and makes it easier to build back-end functionalities. I would highly recommend checking out Net Ninja’s tutorials on these two frameworks.

  Express是在Node之上构建的另一个后端框架，使构建后端功能更加容易。 我强烈建议您查看有关这两个框架的Net Ninja的教程。

• GraphQL is a query language for APIs that you can use alongside your back-end systems to retrieve data according to your taste. GraphQL powers lots of Gatsby templates, so it may be something to look into if you plan on using Gatsby.

  GraphQL是一种API的查询语言，可与您的后端系统一起使用，以根据您的喜好检索数据。 GraphQL支持许多Gatsby模板，因此，如果您打算使用Gatsby，可能需要研究一下。

Another really cool API that you could use is the Google Sheets API. This API allows you to take information from a Google Sheet that you create and use it on your website. You can also use this API to allow users to input information on your website, which will then show up on your sheet. If you are new to databases and back-end functionalities, I highly recommend looking into using this API to power your website. If you want to connect your Google Sheets API to your Gatsby website, I recommend checking out this article.

您可以使用的另一个非常酷的API是Google Sheets API 。 使用此API，您可以从自己创建的Google表格中获取信息，并在网站上使用它。 您还可以使用此API允许用户在您的网站上输入信息，然后该信息将显示在工作表上。 如果您不熟悉数据库和后端功能，强烈建议您使用此API为您的网站提供动力。 如果您想将Google Sheets API连接到Gatsby网站，建议您阅读本文 。

为正在进行的网站做贡献 (Contributing to Ongoing Website)

If you are joining a team (like Levare!) and are planning on contributing to ongoing websites, you can easily:

如果您正在加入一个团队(例如Levare！)并计划为正在进行的网站做出贡献，则可以轻松地：

• Fork the remote repository using the fork option on top of the repository.

  餐桌上使用的仓库顶部的叉选项的远程仓库。

• Contribute to separate branches within the repository by creating new branches both remotely and locally

  通过远程和本地创建新分支，为存储库中的单独分支做出贡献

With both of these options, you don’t need to worry about what is happening with the original repository or branch, as nothing will happen to that branch until you merge. Once you’ve decided where to place your remote repository, make sure you clone the repository on the local repository using

使用这两个选项，您不必担心原始存储库或分支的情况，因为合并之前，该分支不会发生任何事情。 确定远程存储库的位置后，请确保使用以下命令在本地存储库上克隆存储库

git clone <repository-link>

You will be placed on the master branch after you clone your repository, so make sure you check out the right branch once you start developing. By default, your remote repository is now named origin on you local.

克隆存储库后，您将被放置在master分支上，因此请确保在开始开发后签出正确的分支。 默认情况下，您的远程存储库现在在本地命名为origin。

Clone Your Repository with the Link 使用链接克隆您的存储库

After cloning a repository, make sure that you install all the necessary packages for that project. They will almost always be in the package.json folder, and you will want those in your respective files as well. You can do this by running

克隆存储库后，请确保已安装该项目的所有必需软件包。 它们几乎总是位于package.json文件夹中，并且您也希望它们位于各自的文件中。 您可以通过运行

npm install — save

on your terminal.

在您的终端上。

package.json file that lists all the dependencies for the project 列出项目所有依赖项的package.json文件

Once you get your local repository downloaded, read the README! Most well-documented repositories will tell you specifically how to run and test your code on their READMEs, but here are some ways you can run common frameworks:

下载本地存储库后，请阅读自述文件 ！ 大多数文档齐全的存储库将具体告诉您如何在其自述文件上运行和测试代码，但是以下是一些可以运行通用框架的方法：

• Vanilla JS: Open the HTML file on your web browser! It will update in real-time
  Vanilla JS：在网络浏览器中打开HTML文件！ 它将实时更新
• React:
  React：

npm start

• Gatsby:
  盖茨比：

gatsby develop

• Node:
  节点：

node <file-name>

• GraphQL: runs automatically with Gatsby, and you can check out how it works at
  GraphQL：与Gatsby一起自动运行，您可以在以下位置查看它的工作方式

http://localhost:8000/___graphql

READMEs can also give you information on how to edit components, especially if there are unique components involved in your project. Otherwise, you can depend on your awesome teammates to teach you! My co-volunteer Lindsay Fei created this awesome guide on how to edit components on our own website for the business we are helping. I highly recommend checking it out if you want to learn how to develop cool components like forms and work with Chrome Dev Tools.

自述文件还可以为您提供有关如何编辑组件的信息，尤其是在项目中涉及独特组件的情况下。 否则，您可以依靠您的杰出团队成员来教您！ 我的共同志愿者Lindsay Fei创建了这本很棒的指南，内容涉及如何在我们自己的网站上为我们正在帮助的业务编辑组件。 如果您想学习如何开发诸如表单之类的出色组件并使用Chrome Dev Tools，我强烈建议您进行检查。

Dev Tools is seen on the right side of this page Dev Tools出现在此页面的右侧

与他人合作 (Working with Others)

Whenever you start working, I recommend pulling from the remote branch. You can do this by running

每当您开始工作时，建议您从远程分支中拉出 。 您可以通过运行

git pull <remote-repo-name> <remote-branch-name>

in your terminal. That way, you’ll also always have the updated code.

在您的终端中。 这样，您将始终拥有更新的代码。

Whenever you’ve made significant progress, make sure you remember to commit your changes and push to your remote repository. That way, everyone on your team always has the most updated version of the code.

当你已经取得了显著的进步，一定要记住提交更改，并推到远程存储库。 这样，您团队中的每个人都始终拥有最新版本的代码。

If you are ready to merge your branch or fork with the main branch or repository on Github, then you have to make a pull request (PR). PRs incorporate the changes you have made to your code to the source that you are contributing to. Most projects require approval from the collaborators so that unwanted changes aren’t made to the main codebase, so PRs are another way to control code.

如果您准备好将分支或分支与Github上的主分支或存储库合并，则必须发出请求请求(PR) 。 PR将您对代码所做的更改合并到您贡献的源中。 大多数项目都需要合作者的批准，这样才不会对主代码库进行不必要的更改，因此PR是控制代码的另一种方法。

Pull Request between Staging and Master Branch 在暂存和主分支之间的拉取请求

After you make a PR, Github will tell you if the two branches are able to be merged properly with their own checks. After you merge, I recommend pulling the code from the merged branch and testing it on your local to ensure there are no errors.

完成公关后，Github会告诉您两个分支是否能够通过自己的支票正确合并。 合并后，建议从合并分支中提取代码并在本地进行测试，以确保没有错误。

Branches will be able to successfully merge 分支机构将能够成功合并

If you’re contributing to a specific branch or a fork or even your own project, make sure you create a good README so that future contributors will have an easy time working with your code. If you need help getting started, check out this website.

如果您要为特定的分支，分支或什至自己的项目做贡献，请确保创建良好的自述文件，以便将来的贡献者可以轻松地使用代码。 如果您需要入门方面的帮助，请访问此网站 。

Default README for gatsby-starter-business, the template we used for A Taste of Africa gatsby-starter-business的默认自述文件，这是我们用于非洲风味的模板

If you have issues on your website that you are not able to figure out, you can always open an issue on the Issues tab on your Github repository. Contributors can look at these issues and help you find potential solutions.

如果您的网站上有无法解决的问题，则可以始终在Github存储库的“问题”选项卡上打开问题。 贡献者可以研究这些问题，并帮助您找到潜在的解决方案。

Thank you for reading! Part I can be found here and III will be released soon. Please let me know if I should add anything. You can find me on Twitter or Linkedin.

感谢您的阅读！ 在这里可以找到第一部分，第三部分将很快发布。 请让我知道是否要添加任何内容。 您可以在Twitter或Linkedin上找到我。

翻译自: https://medium.com/swlh/foundations-of-web-development-series-part-ii-creating-your-website-8c1f29a1d13a

web网站开发基础