{"id":71763,"date":"2024-04-30T21:00:43","date_gmt":"2024-04-30T13:00:43","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=71763"},"modified":"2024-05-10T18:50:18","modified_gmt":"2024-05-10T10:50:18","slug":"host-static-website-cloudflare-pages","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/host-static-website-cloudflare-pages\/","title":{"rendered":"How to Host Free Static Website in CloudFlare Pages"},"content":{"rendered":"

Cloudflare Pages<\/a> is one of my favorite Cloudflare\u2019s platforms. It\u2019s makes deploying static sites and JAMStack applications easy. You will get access to the fast Cloudflare\u2019s global network, latest web standard such as HTTP3 and QUIC and image compression, and automatic free SSL<\/a> for you site. It also integrates with Github well that allows you to automate and set up continuous deployment in your site deployment process.<\/p>\n

In this tutorial, we\u2019ll walk you through the process of getting started with Cloudflare Pages, deploying your first website, and exploring its various features to optimize your site.<\/p>\n

Without further ado, let\u2019s just get started.<\/p>\n

Build your site<\/h2>\n

You do not need to use a special library or framework to build your site. Your site can be as simple as an HTML file, as follows:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>My Website<\/title>\r\n    <link rel=\"stylesheet\" href=\"styles.css\">\r\n<\/head>\r\n<body>\r\n    <header>\r\n        <h1>Welcome to My Website!<\/h1>\r\n    <\/header>\r\n    <main>\r\n        <section>\r\n            <h2>About Me<\/h2>\r\n            <p>I am a web developer with a passion for creating beautiful and functional websites.<\/p>\r\n        <\/section>\r\n        <section>\r\n            <h2>My Skills<\/h2>\r\n            <ul>\r\n                <li>HTML<\/li>\r\n                <li>CSS<\/li>\r\n                <li>JavaScript<\/li>\r\n            <\/ul>\r\n        <\/section>\r\n    <\/main>\r\n    <footer>\r\n        <p>© 2023 My Website<\/p>\r\n    <\/footer>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\u2026with the corresponding CSS file:<\/p>\n
\r\n* {\r\n    box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n    font-family: Arial, sans-serif;\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\nheader {\r\n    background-color: #333;\r\n    color: #fff;\r\n    padding: 1em;\r\n    text-align: center;\r\n}\r\n\r\nmain {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    min-height: 100vh;\r\n    padding: 2em;\r\n}\r\n\r\nsection {\r\n    margin: 2em 0;\r\n}\r\n\r\nh1, h2 {\r\n    font-weight: bold;\r\n    text-align: center;\r\n}\r\n\r\np {\r\n    line-height: 1.5;\r\n}\r\n\r\nul {\r\n    list-style: none;\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\nli {\r\n    display: inline-block;\r\n    margin: 0 1em;\r\n}\r\n<\/pre>\n
Note that your main HTML file has to be named index.html<\/code>.<\/p>\n
Deploying your Site<\/h2>\n
Once we have the files for our website ready, we can deploy it to Cloudflare.<\/p>\n
There are two ways we can do:<\/p>\n
    \n
  1. Upload the file using the GUI<\/li>\n
  2. Use the Cloudflare CLI<\/li>\n<\/ol>\n
    In this case, let\u2019s use the GUI. We are going to deploy our site by uploading the files directly to Cloudflare with the GUI it provides. It\u2019s the easiest and quickest way to get it up and running with Cloudflare Pages.<\/p>\n
    Using Cloudflare GUI<\/h2>\n
    Follow these steps to deploy with the Cloudflare GUI:<\/p>\n
      \n
    1. Login to your Cloudflare account.<\/li>\n
    2. Go to Workers & Pages > Overview<\/strong>.<\/li>\n
    3. Select Create Application<\/strong>.<\/li>\n
    4. Within the Create an application<\/strong>, go to the Pages<\/strong> tab.<\/li>\n<\/ol>\n
      In this Pages<\/strong> tab, click Upload Assets<\/strong>.<\/p>\n
      <\/figure>\n
      You will be directed to a new section where you need to name your project. This name will be used for the domain as well.<\/p>\n
      <\/figure>\n
      Click Upload Folder<\/strong>, and select the folder where you put the HTML and CSS files. The upload process should generally be instant and live immediately in the project main domain.<\/p>\n
      <\/figure>\n
      Site Preview<\/h2>\n
      One of the cool things about using Cloudflare Pages is that you can upload your site for preview. This usefule when you want to check how the site would look and work before making it live in production. Or, if you\u2019re a web developer, this is also useful to preview your site for your clients before the site is accessible from the main domain. To do so:<\/p>\n
        \n
      1. Go to Workers & Pages > Overview<\/strong>.<\/li>\n
      2. Select your project.<\/li>\n
      3. Click Create new deployment<\/strong>.<\/li>\n<\/ol>\n
        <\/figure>\n
        You will see the option, Production<\/strong> and Preview<\/strong>, where you can upload your site. Select Preview<\/strong> and give it a name. This name will be used to for the subdomain for the preview environment. For example, if we name it \u201crev1\u201d, Cloudflare will upload the site to rev1.{{ project-name }}.page.dev<\/strong>. Once the name is set, you can select the folder that contains updates of your.<\/p>\n
        <\/figure>\n
        In this example, we can see that the site on the preview environment appears with the update, and it does not affect anything on the main domain at all.<\/p>\n
        Serving a \u201cNot Found\u201d Page<\/h2>\n
        Another Clouflare Pages can handle for you is to serve a custom \u201cNot Found\u201d page. To do so, simply create a file at the top level of your site. And the site again.<\/p>\n
        \r\n.\r\n|-- 404.html\r\n|-- index.html\r\n|-- style.css\r\n<\/pre>\n
        Once uploaded, when you try to load a page that does not exist on your, Cloudflare will serve the 404.html<\/code> page automatically with the correct HTTP status.<\/p>\n
        <\/figure>\n
        Adding Redirects<\/h2>\n
        Another thing you can do in Cloudflare is adding redirections. It means that you can redirect of one URL of your site or to URL of other site. This features supports all the redirect status code<\/a> including 301<\/em>, 302<\/em>, and 307<\/em>. To do this, it\u2019s fairly simple. You only need to add a special file _redirects<\/code> on the top level of your site.<\/p>\n
        \r\n.\r\n|-- 404.html\r\n|-- _redirects\r\n|-- index.html\r\n|-- styles.css\r\n<\/pre>\n
        In this `_redirects<\/em>` file, you can add the redirection rules. For example, if you want to redirect all the traffic from `\/about<\/em>` to `\/about-me<\/em>`, you can add the following line:<\/p>\n
        \r\n\/about \/about-me\/ 301\r\n<\/pre>\n
        Re-upload your site, and go to \/about<\/code> page. You should find the page redirected to \/about-me\/<\/code> page.<\/p>\n
        <\/figure>\n
        Wrapping-up<\/h2>\n
        Cloudflare makes it easy to put your static website online. You can deploy a preview version of your site to review changes before making them live. It also handles \u2018Not Found\u2019 pages automatically and lets you set up custom redirects. Overall, Cloudflare Pages offers a convenient solution to get your website up and running without needing too much technical knowledge, and hopefully this tutorial can help you get started with it.<\/p>","protected":false},"excerpt":{"rendered":"
        Cloudflare Pages is one of my favorite Cloudflare\u2019s platforms. It\u2019s makes deploying static sites and JAMStack applications easy. You will get access to the fast Cloudflare\u2019s global network, latest web standard such as HTTP3 and QUIC and image compression, and automatic free SSL for you site. It also integrates with Github well that allows you…<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Host Free Static Website in CloudFlare Pages - Hongkiat<\/title>\n<meta name=\"description\" content=\"Cloudflare Pages is one of my favorite Cloudflare's platforms. It's makes deploying static sites and JAMStack applications easy. You will get access to\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/host-static-website-cloudflare-pages\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Host Free Static Website in CloudFlare Pages\" \/>\n<meta property=\"og:description\" content=\"Cloudflare Pages is one of my favorite Cloudflare's platforms. It's makes deploying static sites and JAMStack applications easy. You will get access to\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/host-static-website-cloudflare-pages\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-30T13:00:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-10T10:50:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/host-static-website-cloudflare-pages\/create-an-application.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/host-static-website-cloudflare-pages\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/host-static-website-cloudflare-pages\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Host Free Static Website in CloudFlare Pages\",\"datePublished\":\"2024-04-30T13:00:43+00:00\",\"dateModified\":\"2024-05-10T10:50:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/host-static-website-cloudflare-pages\\\/\"},\"wordCount\":749,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/host-static-website-cloudflare-pages\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/host-static-website-cloudflare-pages\\\/create-an-application.jpg\",\"articleSection\":[\"General\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/host-static-website-cloudflare-pages\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/host-static-website-cloudflare-pages\\\/\",\"name\":\"How to Host Free Static Website in CloudFlare Pages - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/host-static-website-cloudflare-pages\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/host-static-website-cloudflare-pages\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/host-static-website-cloudflare-pages\\\/create-an-application.jpg\",\"datePublished\":\"2024-04-30T13:00:43+00:00\",\"dateModified\":\"2024-05-10T10:50:18+00:00\",\"description\":\"Cloudflare Pages is one of my favorite Cloudflare's platforms. It's makes deploying static sites and JAMStack applications easy. You will get access to\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/host-static-website-cloudflare-pages\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/host-static-website-cloudflare-pages\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/host-static-website-cloudflare-pages\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/host-static-website-cloudflare-pages\\\/create-an-application.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/host-static-website-cloudflare-pages\\\/create-an-application.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/host-static-website-cloudflare-pages\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Host Free Static Website in CloudFlare Pages\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Host Free Static Website in CloudFlare Pages - Hongkiat","description":"Cloudflare Pages is one of my favorite Cloudflare's platforms. It's makes deploying static sites and JAMStack applications easy. You will get access to","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/host-static-website-cloudflare-pages\/","og_locale":"en_US","og_type":"article","og_title":"How to Host Free Static Website in CloudFlare Pages","og_description":"Cloudflare Pages is one of my favorite Cloudflare's platforms. It's makes deploying static sites and JAMStack applications easy. You will get access to","og_url":"https:\/\/www.hongkiat.com\/blog\/host-static-website-cloudflare-pages\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2024-04-30T13:00:43+00:00","article_modified_time":"2024-05-10T10:50:18+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/host-static-website-cloudflare-pages\/create-an-application.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/host-static-website-cloudflare-pages\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/host-static-website-cloudflare-pages\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Host Free Static Website in CloudFlare Pages","datePublished":"2024-04-30T13:00:43+00:00","dateModified":"2024-05-10T10:50:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/host-static-website-cloudflare-pages\/"},"wordCount":749,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/host-static-website-cloudflare-pages\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/host-static-website-cloudflare-pages\/create-an-application.jpg","articleSection":["General"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/host-static-website-cloudflare-pages\/","url":"https:\/\/www.hongkiat.com\/blog\/host-static-website-cloudflare-pages\/","name":"How to Host Free Static Website in CloudFlare Pages - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/host-static-website-cloudflare-pages\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/host-static-website-cloudflare-pages\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/host-static-website-cloudflare-pages\/create-an-application.jpg","datePublished":"2024-04-30T13:00:43+00:00","dateModified":"2024-05-10T10:50:18+00:00","description":"Cloudflare Pages is one of my favorite Cloudflare's platforms. It's makes deploying static sites and JAMStack applications easy. You will get access to","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/host-static-website-cloudflare-pages\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/host-static-website-cloudflare-pages\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/host-static-website-cloudflare-pages\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/host-static-website-cloudflare-pages\/create-an-application.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/host-static-website-cloudflare-pages\/create-an-application.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/host-static-website-cloudflare-pages\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Host Free Static Website in CloudFlare Pages"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-iFt","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/71763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=71763"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/71763\/revisions"}],"predecessor-version":[{"id":71837,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/71763\/revisions\/71837"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=71763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=71763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=71763"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=71763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}