• Switching Your Site to HTTPS on a Shoestring Budget
• CHRISTOPHER SCHMITT
• The Nuggets translation Project
• Permanent link to this article: github.com/xitu/gold-m…
• Translator: lsvih
• Proofreader: Ahonn, Cherry

Switch your site to HTTPS for a low cost

Google’s Search Console team recently sent out an email to all webmasters warning that Google Chrome will start displaying warnings in October on sites that contain forms but do not use security measures.

The following is the notification in my inbox:

If your site does not yet support HTTPS, this notification is directly relevant to you. Even if your site doesn’t use forms, you should migrate to HTTPS early. For now, this is just the first step in Google’s strategy of “flagging unsafe sites.” They made it clear in their message:

This new warning is just part of a long-term plan to mark all pages that serve over HTTP as “insecure.”

Here’s the problem: Installing SSL certificates, converting web site urls from HTTP to HTTPS, converting all links and image links to HTTPS, and so on is not an easy task. Who wants to spend time and money on their own personal website?

I use GitHub Pages to host a number of sites and projects for free, some with custom domain names. Therefore, I wanted to see if I could quickly and inexpensively migrate these sites from HTTP to HTTPS. Finally, I found a relatively simple and low-cost solution, which I hope can help you. Let’s explore this method.

Forcibly enable HTTPS on GitHub Pages

Sites hosted on GitHub Pages can be easily set to enable HTTPS. Enter the project setting page and click Enforce HTTPS.

But we still need SSL

The first step is simple enough, but it doesn’t fit Google’s definition of a secure site. We enabled the HTTPS setting, but did not install or provide SSL certificates for sites using custom domain names. Sites that use the GitHub Pages url directly already meet the requirements, but sites that use custom domain names must go through some extra steps to use security certificates at the domain level.

Another problem is that SSL certificates are not expensive, but they do cost money, and you don’t want to add to that when you’re trying to keep costs as low as possible. So we have to find a way to solve this problem.

We can try SSL for free through CDN!

Cloudflare has to be mentioned here. Cloudflare is a content delivery network (CDN) provider, and it also provides distributed domain name services, which means we can use their network to set up HTTPS. The real benefit of using this service is that they offer a free solution that makes all of this possible.

It is also worth mentioning that there are many posts on the CSS-Tricks forum describing the benefits of using A CDN. While the focus of this article is on security, in addition to helping you use HTTPS, CDN is a great way to reduce server load and improve site performance.

Below, I’ll outline the steps I took to connect to Github Pages using Cloudflare. If you don’t already have a Cloudflare account, you can click here to register and follow the steps.

Step 1: Select the + Add Site option

First, we need to tell Cloudflare the domain name we use. Cloudflare will scan DNS records to verify the existence of a domain name and check the domain name’s public information.

Step 2: Check DNS records

Cloudflare scans DNS records and displays the results for you to view. If Cloudflare determines that the information meets the requirements, it displays an orange cloud icon in the Status column. You’ll need to check the report to make sure it matches the information you left with your domain registrar, and click the ‘Continue’ button to Continue if that’s okay.

Step 3: Get the free plan

Cloudflare asks you what level of service you want. Look, you can choose the “free” option here.

Step 4: Update the DNS server (NS server)

In this step, Cloudflare gives us its server address, and all we need to do is paste this address into the DNS Settings in our domain registrar.

This step is not really difficult, but you may be confused. Your domain registrar may provide instructions for this step. For example, check out GoDaddy’s guide on how to update DNS through their service.

Once this is done, your domain name will soon be mapped to Cloudflare’s servers, which will act as an intermediary between the domain name and Github Pages. However, this step takes some time, and Cloudflare may need 24 hours to process the request.

If you use GitHub Pages with subdomains instead of a master domain, you need to take an extra step. Go to your GitHub Pages Settings page, add a CNAME record to your DNS Settings and set it to point to

.github. IO, where

is your GitHub account. In addition, you’ll need to add an unsuffixed text file named CNAME to the GitHub project root directory for your domain name.

The following screen capture is an example of adding the GitHub Pages subdomain to a CNAME record in a Cloudflare setting:

Step 5: Enable HTTPS in Cloudflare

Now, we technically have HTTPS enabled for GitHub Pages, but we need to do the same with Cloudflare. Cloudflare calls this feature “Crypto,” which not only forces HTTPS on, but also provides the coveted SSL certificate. Now let’s enable Crypto for HTTPS and we’ll get the certificate in the next step.

Enable the Always Use HTTPS option:

At this point, any HTTP request from the browser will be switched to the more secure HTTPS. We’re one step closer to “pleasing” Google Chrome.

Step 6: Use CDN

We are now using CDN to get SSL certificates, so we can take advantage of its performance to get even more benefits. You can improve site performance by automatically compressing files and extending browser cache expiration times.

Select the ‘Speed’ option to allow Cloudflare to automatically compress website resources:

We can also maximize performance by setting browser cache expiration times:

Setting the expiration time to be longer than the default will eliminate the need for the browser to request unchanged site resources every time it visits a site. This will save visitors additional downloads when they come back to your site within a month.

Step 7: Use secure external resources

If your site also uses external resources (and many of us do), you also need to make sure those external resources are secure. For example, if you use a Javascript framework but don’t use HTTPS sources, Google Chrome will say that it reduces the security of our site, so we need to improve it.

If you’re using an external source that doesn’t provide HTTPS, consider hosting it yourself. Anyway, now that we have a CDN, it’s not a problem to do the hosting service load.

Step 8: Activate SSL

That’s it! We have enabled HTTPS in the GitHub Pages setup, and we still lack the certificate to connect the custom domain name to GitHub Pages. Cloudflare provides a free SSL certificate that we can use on our website.

Open Cloudflare’s Crypto Settings page and confirm that the SSL certificate is active:

If the certificate is active, switch to the Page Rules Page from the main menu and select Create Page Rule:

Then click “Add a Setting” and select the “Always Use HTTPS” option:

Click “Save and Deply” and congratulations! We now have a site that is completely secure in the eyes of Google Chrome, and we don’t need to touch or change a lot of code during the migration.

conclusion

Google’s push into HTTPS means front-end developers need to prioritize SSL support when developing their own, corporate, and customer sites. This move will force us to move our site to HTTPS. Using A CDN allows you to use free SSL and improve your site’s performance. Why not?

Have you documented your migration to HTTPS? Let’s compare your migration methods in the comments.

Enjoy your secure and fast website!

---

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, React, front-end, back-end, product, design and other fields. If you want to see more high-quality translation, please continue to pay attention to the Project, official Weibo, Zhihu column.