When I first started in web development, one of the hardest things I found wasn’t learning new skills or creating the projects I had in mind, but it was what to do once I had a site I thought was ready to publish. There are endless tutorials to build these websites but far fewer on the steps that you should take when you are ready to share. Below is my guide from start to finish on how I would approach compiling and publishing my website, derived from two years of learning to code and a year as a computer science student. This isn’t a hard-and-fast guide, but one which you should try and then mould to the way you want to work.

当我刚开始进行Web开发时，发现的最困难的事情之一是没有学习新技能或创建自己想念的项目，但这是一旦我拥有一个准备发布的网站后便要做的事情。 建立这些网站的教程无穷无尽，但是准备好共享时应该采取的步骤要少得多。 以下是我从头到尾的指南，该指南指导我如何进行网站的编译和发布，该指南源于两年的编码学习和一年的计算机科学专业。 这不是一成不变的指南，但您应该尝试一下，然后根据自己的工作方式进行调整。

校对 (Proofread)

I cannot stress the importance of proofreading. Whether you’re publishing your portfolio or an e-commerce site for a company, even a few spelling or grammar mistakes can instantly switch an employer or customer off. It can be hard to spot mistakes in spelling while in your IDE, although some such as Jetbrains include a spell check, so make sure to read through your site again in the browser as if you were a visitor and you’ll see any mistakes or errors that they may see.

我不能强调校对的重要性。 无论您是为公司发布投资组合还是电子商务网站，即使是一些拼写或语法错误都可能立即将雇主或客户拒之门外。 尽管在Jetbrains之类的应用程序中包括拼写检查功能，但是在IDE中很难发现拼写错误，因此请确保像浏览器一样再次在浏览器中通读您的网站，否则您会发现任何错误或他们可能会看到的错误。

元标记和视口优化 (Meta Tags and Viewport Optimisation)

Once the content is ready and you’re prepared to publish, the next step is to configure the <meta> tags and ensure your CSS is responsive. Meta tags, stored in the head of the HTML file, are used to define basic descriptions or parameters of the website such as the description and keywords, used by search engines to index websites and help with SEO (Search Engine Optimisation).

内容准备好并准备发布后，下一步就是配置<meta>标记并确保CSS能够响应。 存储在HTML文件开头的元标记用于定义网站的基本描述或参数(例如描述和关键字)，搜索引擎将其用于索引网站并帮助SEO(搜索引擎优化)。

An example of a set of meta tags would be:

一组元标记的示例为：

While most of these tags are used for SEO, one tag is crucial for a responsive design, the <metaname=”viewport”> tag. The purpose of this tag is to scale the content up or down to fit the device it is being viewed on. Responsive design is more important than ever in modern design due to the rapid growth in smartphone browsing. I take the approach of using “Mobile First Design” where the design of the mobile experience is prioritised and then media queries are used to resize and reposition elements as needed for the new screen sizes.

尽管大多数这些标签都用于SEO，但<metaname=”viewport”>标签对于响应式设计至关重要。 此标签的目的是按比例放大或缩小内容，以适合正在查看内容的设备。 由于智能手机浏览的快速增长，响应式设计在现代设计中比以往任何时候都更加重要。 我采用“移动优先设计”的方法，其中优先考虑了移动体验的设计，然后根据新屏幕尺寸的需要，使用媒体查询来调整元素的大小和位置。

My full list of media queries looks like this:

我完整的媒体查询列表如下所示：

I do not recommend using the full list of queries for most projects, however, that is the full list of different commonly used device sizes that will allow for the most responsive design.

我不建议对大多数项目使用完整的查询列表，但是，这是不同的常用设备尺寸的完整列表，这些尺寸将允许最快速的设计。

内容优化 (Content Optimisation)

While running locally on your machine, you won’t experience any delay in loading pages, as they are not being requested from a server. However, once published, content-heavy sites could take so long to load that visitors click off before your first sentence has even loaded. A post by MachMetrics shows how with mobile phone usage on the up; having fast loading webpages is necessary to allow users, regardless of signal strength, to access. They quote research from Google, in which they said,

在您的计算机上本地运行时，您不会在加载页面时遇到任何延迟，因为服务器没有要求它们。 但是，内容发布的网站一旦发布，加载时间可能会很长，以至于访问者在您的第一句话加载之前就已经单击了。 MachMetrics的帖子显示了手机的使用情况如何上升。 快速加载网页对于使用户(无论信号强度如何)都能够访问是必要的。 他们引用了Google的研究，他们说：

‘The average time it takes to fully load the average mobile landing page is 22 seconds. However, research also indicates 53% of people will leave a mobile page if it takes longer than 3 seconds to load.’

完全加载平均移动目标网页所需的平均时间为22秒。 但是，研究还表明，如果加载时间超过3秒，就有53％的人会离开移动页面。

There are a few steps you can take to reduce the total amount of data which the server must load:

您可以采取一些步骤来减少服务器必须加载的数据总量：

1. Decrease media sizeIf you take your own photos or download them from a stock site, then chances are the resolution of the image is so much bigger than you need. My rule for images is that I resize the images so that the largest size used matches the largest size site I have coded for usually, this would be a 4k resolution. I will also usually have a separate, even smaller image, specifically for mobile display as there is no need for a small 6-inch phone display to be loading a desktop-sized high-resolution image. There may be certain cases where keeping the photo quality is important for example, a gallery and in this case, there will be other ways for you to manage this.

   减小介质尺寸如果您拍摄自己的照片或从库存站点下载它们，则图像的分辨率可能比所需的分辨率大得多。 我对图像的规则是调整图像的大小，以使使用的最大尺寸与我通常编码的最大尺寸的站点匹配，这将是4k分辨率。 通常，我还将有一个单独的甚至更小的图像，专门用于移动显示器，因为不需要小的6英寸电话显示器来加载桌面尺寸的高分辨率图像。 在某些情况下，保持照片质量很重要，例如画廊，在这种情况下，您可以通过其他方式来管理照片。

2. Loading scripts after contentIf you are using a <body onload=”Function()”> to run a script on your page, it is best to put this at the end of the body instead of at the start. When this is placed at the start, the browser will process the JavaScript before loading the HTML, this causes an issue when the JavaScript file is very large or if it involves files and media as this will all need to load before it will try to load the HTML. However, reversing this order means that the content can load before the script is run. This means a far better user experience as its better for there to be a slight delay in a function than a long delay before the user sees any content.

   内容后加载脚本如果使用<body onload=”Function()”>在页面上运行脚本，则最好将其放在正文的末尾而不是开头。 如果将其放在开始位置，则浏览器将在加载HTML之前处理JavaScript，这会在JavaScript文件很大或涉及文件和媒体时引起问题，因为在尝试加载前都需要先加载HTML。 但是，反转此顺序意味着可以在运行脚本之前加载内容。 这意味着更好的用户体验，因为与用户看到任何内容之前的长时间延迟相比，功能上的轻微延迟要好得多。

选择域名和托管服务 (Picking a domain and hosting service)

Once I have got through all the previous steps, the final step is to choose a hosting platform to publish the site on. There are two main contenders for my preferred hosting provider; GitHub pages and Netlify. Both services are free to use and excellent for beginners as they can both be deployed from a git repo for more convenient deployments. If you are not currently planning on purchasing a domain, I would recommend GitHub pages to get started as they will give you a memorable domain, using your GitHub username, and not a randomly generated phrase which will be far better to market yourself with.

完成上述所有步骤后，最后一步是选择一个托管平台来发布该网站。 我首选的托管服务提供商有两个主要竞争者； GitHub页面和Netlify 。 两种服务都是免费使用的，并且对初学者来说非常好，因为它们都可以从git repo进行部署，从而可以更方便地进行部署。 如果您当前不打算购买域名，我建议您开始使用GitHub页面，因为它们将使用您的GitHub用户名为您提供一个令人难忘的域名，而不是随机生成的短语，这将更好地推销自己。

I use Netlify for my hosting, I chose Netlify as it allows for unlimited websites, which is useful as I have multiple projects published at any one time, and a fully-featured CMS (content management system) allowing me to also host my blog giving a single solution for all my current needs. There are limits to this free plan, however, including bandwidth and the number of server minutes used to build projects. In the four months I have been using this so far, I haven’t reached even close to any of their limits and I doubt this will be a problem for most projects.

我使用Netlify进行托管，我选择Netlify是因为它允许无限的网站，这非常有用，因为我可以同时发布多个项目，而功能齐全的CMS(内容管理系统)则可以托管我的博客，满足我当前所有需求的单一解决方案。 但是，此免费计划有限制，包括带宽和用于构建项目的服务器分钟数。 到目前为止，在我使用这四个月的时间里，我还没有达到他们的极限，我怀疑这对于大多数项目来说都是一个问题。

However, if you are planning to buy a domain, the service I have used and recommend is Google Domains. I used this service because not only did it integrate with a service I already heavily use, meaning I don’t need to create and manage another account, but it was also very easy to connect to my hosting platform of choice with instructions on both ends to connect the two (Found in a popup window when you start the process). You also have the option of setting up G-Suite, Google’s business office and mail suite. Most people won’t need this but it could be useful if you are working on a startup or team project with multiple people involved. If you choose not to use G-Suite, a standard google domain does come with email forwarding allowing you to set up to 100 email addresses using your domain which can be forwarded to your normal Gmail address.

但是，如果您打算购买域名，我使用并推荐的服务是Google Domains 。 我之所以使用此服务，是因为它不仅与已经大量使用的服务集成在一起，这意味着我不需要创建和管理另一个帐户，而且通过两端的说明连接到我选择的托管平台也非常容易连接两者(启动过程时在弹出窗口中找到)。 您还可以选择设置Google商务办公室和邮件套件G-Suite。 大多数人不需要它，但是如果您在一个涉及多个人的启动或团队项目中工作，它可能会很有用。 如果您选择不使用G-Suite，则电子邮件转发确实会附带一个标准的Google域，该域允许您使用您的域设置多达100个电子邮件地址，并且可以将其转发到您的普通Gmail地址。

概要 (Summary)

For the best deployment of your site or project, it is important not to overlook these steps to ensure that it looks as professional as possible while also having the best reach and opportunity to become a success.

为了最好地部署您的站点或项目，重要的是不要忽略这些步骤，以确保它看起来尽可能专业，同时也拥有最大的成功机会和成功机会。

TLDR:

TLDR：

1. Proofread all content.
   校对所有内容。
2. Check Meta tags in the head are as descriptive as possible for best SEO.
   头部的Check Meta标签尽可能具有描述性，以获得最佳SEO。
3. Ensure CSS is optimised with a responsive design for computers, phones and tablets.
   确保通过针对计算机，电话和平板电脑的响应式设计优化CSS。
4. Optimise content by shrinking images as much as possible, using different images for mobile where possible and running javascript after content has been loaded.
   通过尽可能缩小图像，尽可能在移动设备上使用其他图像并在加载内容后运行javascript来优化内容。
5. Picking the right domain and hosting provider to fit your needs.
   选择合适的域名和托管服务提供商以满足您的需求。