{"id":259594,"date":"2017-09-04T07:17:11","date_gmt":"2017-09-04T14:17:11","guid":{"rendered":"http:\/\/css-tricks.com\/?p=259594"},"modified":"2017-09-04T08:25:48","modified_gmt":"2017-09-04T15:25:48","slug":"switching-site-https-shoestring-budget","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/switching-site-https-shoestring-budget\/","title":{"rendered":"Switching Your Site to HTTPS on a Shoestring Budget"},"content":{"rendered":"

Google’s Search Console team<\/a> recently sent out an email to site owners with a warning<\/a> that Google Chrome will take steps starting this October to identify and show warnings on non-secure sites that have form inputs.<\/p>\n

<\/p>\n

Here’s the notice that landed in my inbox:<\/p>\n

\"\"
The notice from the Google Search Console team regarding HTTPS support<\/figcaption><\/figure>\n

If your site URL does not support HTTPS, then this notice directly affects you. Even if your site does not have forms, moving over to HTTPS should be a priority, as this is only one step in Google’s strategy to identify insecure sites. They state this clearly in their message:<\/p>\n

The new warning is part of a long term plan to mark all pages served over HTTP as “not secure”.<\/p><\/blockquote>\n

\"\"
Current Chrome’s UI for a site with HTTP support and a site with HTTPS<\/figcaption><\/figure>\n

The problem is that the process of installing SSL certificates and transitioning site URLs from HTTP to HTTPS\u2014not to mention editing all those links and linked images in existing content\u2014sounds like a daunting task. Who has time and wants to spend the money to update a personal website for this?<\/p>\n

I use GitHub Pages to host a number sites and projects for free\u2014including some that use custom domain names. To that end, I wanted to see if I could quickly and inexpensively convert a site from HTTP to HTTPS. I wound up finding a relatively simple solution on a shoestring budget that I hope will help others. Let’s dig into that.<\/p>\n

Enforcing HTTPS on GitHub Pages<\/h3>\n

Sites hosted on GitHub Pages have a simple setting to enable HTTPS. Navigate to the project’s Settings and flip the switch to enforce HTTPS.<\/p>\n

\"\"
The GitHub Pages setting to enforce HTTPS on a project<\/figcaption><\/figure>\n

But We Still Need SSL<\/h3>\n

Sure, that first step was a breeze, but it’s not the full picture of what we need to do to meet Google’s definition of a secure site. The reason is that enabling the HTTPS setting neither provides nor installs a Secure Sockets Layer (SSL) certificate to a site that uses a custom domain<\/a>. Sites that use the default web address provided by GitHub Pages are fully secure with that setting, but those of us that use a custom domain have to go the extra step of securing SSL at the domain level.<\/p>\n

That’s a bummer because SSL, while not super expensive, is yet another cost and likely one you may not want to incur when you’re trying to keep costs down. I wanted to find a way around this.<\/p>\n

We Can Get SSL From a CDN … for Free!<\/h3>\n

This is where Cloudflare comes in. Cloudflare is a Content Delivery Network (CDN) that also provides distributed domain name server services. What that means is that we can leverage their network to set up HTTPS. The real kicker is that they have a free plan that makes this all possible.<\/p>\n

It’s worth noting that there are a number of good posts<\/a> here on CSS-Tricks that tout the benefits of a CDN. While we’re focused on the security perks in this post, CDNs are an excellent way to help reduce server burden and increase performance<\/a>.<\/p>\n

From here on out, I’m going to walk through the steps I used to connect Cloudflare to GitHub Pages so, if you haven’t already, you can snag a free account<\/a> and follow along.<\/p>\n

Step 1: Select the “+ Add Site” option<\/h4>\n

First off, we have to tell Cloudflare that our domain exists. Cloudflare will scan the DNS records to verify both that the domain exists and that the public information about the domain are accessible.<\/p>\n

\"\"
Cloudflare’s “Add Website” Setting<\/figcaption><\/figure>\n

Step 2: Review the DNS records<\/h4>\n

After Cloudflare has scanned the DNS records, it will spit them out and display them for your review. Cloudflare indicates that it believes things are in good standing with an orange cloud in the Status column. Review the report and confirm that the records match those from your registrar. If all is good, click “Continue” to proceed.<\/p>\n

\"\"
The DNS record report in Cloudflare<\/figcaption><\/figure>\n

Step 3: Get the Free Plan<\/h4>\n

Cloudflare will ask what level of service you want to use. Lo and behold! There is a free option that we can select.<\/p>\n

\"\"
Cloudflare’s free plan option<\/figcaption><\/figure>\n

Step 4: Update the Nameservers<\/h4>\n

At this point, Cloudflare provides us with its server addresses and our job is to head over to the registrar where the domain was purchased and paste those addresses into the DNS settings.<\/p>\n

\"\"
Cloudflare provides the nameservers for updated the registrar settings.<\/figcaption><\/figure>\n

It’s not incredibly difficult to do this, but can be a little unnerving. Your registrar likely has instructions for how to do this. For example, here are GoDaddy’s instructions<\/a> for updating nameservers for domains registered through their service.<\/p>\n

Once you have done this step, your domain will effectively be mapped to Cloudflare’s servers, which will act as an intermediary between the domain and GitHub Pages. However, it is a bit of a waiting game and can take Cloudflare up to 24 hours to process the request.<\/p>\n

If you are using GitHub Pages with a subdomain<\/strong> instead of a custom domain, there is one extra step you are required to do. Head over to your GitHub Pages settings and add a CNAME record in the DNS settings. Set it to point to <your-username>.github.io<\/code>, where <your-username><\/code> is, of course, your GitHub account handle. Oh, and you will need to add a CNAME text file to the root of your GitHub project which is literally a text file named CNAME with your domain name in it.<\/p>\n

Here is a screenshot with an example of adding a GitHub Pages subdomain as a CNAME record in Cloudflare’s settings:<\/p>\n

\"\"
Adding a GitHub Pages subdomain to Cloudflare<\/figcaption><\/figure>\n

Step 5: Enable HTTPS in Cloudflare<\/h4>\n

Sure, we’ve technically already done this in GitHub Pages, but we’re required to do it in Cloudflare as well. Cloudflare calls this feature “Crypto” and it not only forces HTTPS, but provides the SSL certificate we’ve been wanting all along. But we’ll get to that in just a bit. For now, enable Crypto for HTTPS.<\/p>\n

\"\"
The Crypto option in Cloudflare’s main menu<\/figcaption><\/figure>\n

Turn on the “Always use HTTPS” option:<\/p>\n

\"\"
Enable HTTPS in the Cloudflare settings<\/figcaption><\/figure>\n

Now any HTTP request from a browser is switched over to the more secure HTTPS. We’re another step closer to making Google Chrome happy.<\/p>\n

Step 6: Make Use of the CDN<\/h4>\n

Hey, we’re using a CDN to get SSL, so we may as well take advantage of its performance benefits while we’re at it. We can speed up performance by reducing files automatically and extend browser cache expiration.<\/p>\n

Select the “Speed” option in the settings and allow Cloudflare to auto minify our site’s web assets:<\/p>\n

\"\"
Allow Cloudflare to minify the site’s web assets<\/figcaption><\/figure>\n

We can also set the expiration on browser cache to maximize performance:<\/p>\n

\"\"
Set the browser cache in Cloudflare’s Speed settings<\/figcaption><\/figure>\n

By moving the expiration out date a longer than the default option, the browser will refrain itself from asking for a site’s resources with each and every visit\u2014that is, resources that more than likely haven’t been changed or updated. This will save visitors an extra download on repeat visits within a month’s time.<\/p>\n

Step 7: Make External Resource Secure<\/h4>\n

If you use external resources on your site (and many of us do), then those need to be served securely as well. For example, if you use a Javascript framework and it is not served from an HTTP source, that blows our secure cover as far as Google Chrome is concerned and we need to patch that up.<\/p>\n

If the external resource you use does not provide HTTPS as a source, then you might want to consider hosting it yourself. We have a CDN now that makes the burden of serving it a non-issue.<\/p>\n

Step 8: Activate SSL<\/h4>\n

Woot, here we are! SSL has been the missing link between our custom domain and GitHub Pages since we enabled HTTPS in the GitHub Pages setting and this is where we have the ability to activate a free SSL certificate on our site, courtesy of Cloudflare.<\/p>\n

From the Crypto settings in Cloudflare, let’s first make sure that the SSL certificate is active:<\/p>\n

\"\"
Cloudflare shows an active SSL certificate in the Crypto settings<\/figcaption><\/figure>\n

If the certificate is active, move to “Page Rules” in the main menu and select the “Create Page Rule” option:<\/p>\n

\"\"
Create a page rule in the Cloudflare settings<\/figcaption><\/figure>\n

…then click “Add a Setting” and select the “Always use HTTPS” option:<\/p>\n

\"\"
Force HTTPS on that entire domain! Note the asterisks in the formatting, which is crucial.<\/figcaption><\/figure>\n

After that click “Save and Deploy” and celebrate! We now have a fully secure site in the eyes of Google Chrome and didn’t have to touch a whole lot of code or drop a chunk of change to do it.<\/p>\n

In Conclusion<\/h3>\n

Google’s push for HTTPS means front-end developers need to prioritize SSL support more than ever, whether it’s for our own sites, company sites, or client sites. This move gives us one more incentive to make the move and the fact that we can pick up free SSL and performance enhancements through the use of a CDN makes it all the more worthwhile.<\/p>\n

Have you written about your adventures moving to HTTPS? Let me know in the comments and we can compare notes. Meanwhile, enjoy a secure and speedy site!<\/p>\n","protected":false},"excerpt":{"rendered":"

Google’s Search Console team recently sent out an email to site owners with a warning that Google Chrome will take steps starting this October to identify and show warnings on non-secure sites that have form inputs.<\/p>\n","protected":false},"author":249703,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[634,638,1042],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":310881,"url":"https:\/\/css-tricks.com\/using-structured-data-to-enhance-search-engine-optimization\/","url_meta":{"origin":259594,"position":0},"title":"Using Structured Data to Enhance Search Engine Optimization","date":"May 26, 2020","format":false,"excerpt":"SEO is often considered the snake oil of the web. How many times have you scrolled through attention-grabbing headlines on know how to improve your SEO? Everyone and their uncle seems to have some \u201cmagic\u201d cure to land high in search results and turn impressions into conversions. Sifting through so\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/structured-data.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":298946,"url":"https:\/\/css-tricks.com\/weekly-platform-news-internet-explorer-mode-speed-report-in-search-console-restricting-notification-prompts\/","url_meta":{"origin":259594,"position":1},"title":"Weekly Platform News: Internet Explorer Mode, Speed Report in Search Console, Restricting Notification Prompts","date":"November 14, 2019","format":false,"excerpt":"In this week's roundup: Internet Explorer finds its way into Edge, Google Search Console touts a new speed report, and Firefox gives Facebook's notification the silent treatment. Let's get into the news! Edge browser with new Internet Explorer mode launches in January Microsoft expects to release the new Chromium-based Edge\u2026","rel":"","context":"In "Weekly Platform News"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/wpn-20191114.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":292747,"url":"https:\/\/css-tricks.com\/weekly-platform-news-html-inspection-in-search-console-global-scope-of-scripts-babel-env-adds-defaults-query\/","url_meta":{"origin":259594,"position":2},"title":"Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults Query","date":"July 11, 2019","format":false,"excerpt":"In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties aren't computing hogs, variables defined at the top-level in JavaScript are global to other page scripts, and Babel env now supports the defaults query\u2026","rel":"","context":"In "Weekly Platform News"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/web-platform-news-190621.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":336490,"url":"https:\/\/css-tricks.com\/deliver-enhanced-media-experiences-with-googles-core-web-vitals\/","url_meta":{"origin":259594,"position":3},"title":"Deliver Enhanced Media Experiences With Google\u2019s Core Web Vitals","date":"March 30, 2021","format":false,"excerpt":"Hello! Satarupa Chatterjee from Cloudinary. There is a big change coming from Google in May 2021 having to do with their Core Web Vitals (CWVs). It's worth paying attention here, as this is going to be a SEO factor. I recently spoke with Tamas Piros about CWVs. The May 2021\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/cwv-tamas-piros.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":301784,"url":"https:\/\/css-tricks.com\/searching-the-jamstack\/","url_meta":{"origin":259594,"position":4},"title":"Searching the Jamstack","date":"January 21, 2020","format":false,"excerpt":"Here's Raymon Camden on adding site search functionality to a site that is statically hosted. A classic trick! Just shoot 'em to Google and scope the results to your site:

<\/form> I'd probably use JavaScript to inject\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/1578578209-jamstacksearch.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":344580,"url":"https:\/\/css-tricks.com\/using-google-drive-as-a-cms\/","url_meta":{"origin":259594,"position":5},"title":"Using Google Drive as a CMS","date":"July 22, 2021","format":false,"excerpt":"We\u2019re going to walk through the technical process of hooking into Google Drive\u2019s API to source content on a website. We\u2019ll examine the step-by-step implementation, as well as how to utilize server-side caching to avoid the major pitfalls to avoid such as API usage limits and image hotlinking. A ready-to-use\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/google-drive-api.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/259594"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/249703"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=259594"}],"version-history":[{"count":18,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/259594\/revisions"}],"predecessor-version":[{"id":259722,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/259594\/revisions\/259722"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=259594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=259594"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=259594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}