GoDaddy’s instructions<\/a> for updating nameservers for domains registered through their service.<\/p>\nOnce 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>\nHere is a screenshot with an example of adding a GitHub Pages subdomain as a CNAME record in Cloudflare’s settings:<\/p>\nAdding a GitHub Pages subdomain to Cloudflare<\/figcaption><\/figure>\nStep 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>\nThe Crypto option in Cloudflare’s main menu<\/figcaption><\/figure>\nTurn on the “Always use HTTPS” option:<\/p>\nEnable HTTPS in the Cloudflare settings<\/figcaption><\/figure>\nNow 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>\nAllow Cloudflare to minify the site’s web assets<\/figcaption><\/figure>\nWe can also set the expiration on browser cache to maximize performance:<\/p>\nSet the browser cache in Cloudflare’s Speed settings<\/figcaption><\/figure>\nBy 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>\nCloudflare shows an active SSL certificate in the Crypto settings<\/figcaption><\/figure>\nIf the certificate is active, move to “Page Rules” in the main menu and select the “Create Page Rule” option:<\/p>\nCreate a page rule in the Cloudflare settings<\/figcaption><\/figure>\n…then click “Add a Setting” and select the “Always use HTTPS” option:<\/p>\nForce HTTPS on that entire domain! Note the asterisks in the formatting, which is crucial.<\/figcaption><\/figure>\nAfter 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: