{"id":74437,"date":"2026-08-07T21:00:00","date_gmt":"2026-08-07T13:00:00","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=74437"},"modified":"2026-08-04T14:52:48","modified_gmt":"2026-08-04T06:52:48","slug":"add-http-password-astro-site","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/add-http-password-astro-site\/","title":{"rendered":"How to Add HTTP Password on an Astro Site"},"content":{"rendered":"<p>So you just built a site with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/astro.build\">Astro<\/a>, and now you need to lock it down. Maybe it is a work-in-progress for a client, or an internal tool you do not want indexed by search engines.<\/p>\n<figure>\n  <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/add-http-password-astro-site\/cover.jpg\" alt=\"Astro login prompt\" width=\"1000\" height=\"650\">\n<\/figure>\n<p>You could <a href=\"https:\/\/www.hongkiat.com\/blog\/best-business-vpn\/\">set up a VPN<\/a>, configure nginx auth, or install an npm package. But those add complexity, extra config files, and more things that can break.<\/p>\n<p>Astro has a built-in middleware system that runs whenever a page or endpoint is rendered, and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Guides\/Authentication\">HTTP Basic Authentication<\/a> is a standard HTTP feature supported by every browser. You do not need extra packages for this setup, but you do need an Astro adapter or runtime that supports on-demand rendering, plus a middleware function and two environment variables.<\/p>\n<p>In this post, I\u2019ll show you how to add <strong>HTTP Basic Authentication to your Astro site<\/strong> using only the tools already in your project.<\/p>\n<p>Let\u2019s get started.<\/p>\n<h2 id=\"prerequisites\">Prerequisites<\/h2>\n<p>Before we start, make sure you have these ready.<\/p>\n<ul>\n<li>An Astro project running Astro 2.6 or later. Middleware landed in Astro 2.6.0, though this guide assumes you are deploying with an adapter or runtime that supports on-demand rendering.<\/li>\n<li>A way to set environment variables on your deployment platform. Most platforms like Netlify, Vercel, <a href=\"https:\/\/www.hongkiat.com\/blog\/host-static-website-cloudflare-pages\/\">Cloudflare Pages<\/a>, or Railway support this in their dashboard.<\/li>\n<\/ul>\n<h2 id=\"creating-the-middleware-file\">Creating the Middleware File<\/h2>\n<p>Astro middleware lives in <code>src\/middleware.ts<\/code> (or <code>.js<\/code> if you are not using TypeScript). Create that file and start with the <code>onRequest<\/code> handler.<\/p>\n<pre>import { defineMiddleware } from 'astro:middleware';\n\nexport const onRequest = defineMiddleware(async (context, next) => {\n  \/\/ auth logic goes here\n  return next();\n});<\/pre>\n<p>The <code>defineMiddleware<\/code> function wraps your handler and gives you access to the request context and a <code>next<\/code> function to continue the request pipeline.<\/p>\n<h2 id=\"writing-the-authentication-check\">Writing the Authentication Check<\/h2>\n<p>HTTP Basic Authentication works with two pieces: an <code>Authorization<\/code> header from the client, and a <code>401<\/code> response from the server when that header is missing or wrong. The browser handles the login popup automatically once it sees the <code>WWW-Authenticate<\/code> header.<\/p>\n<p>Here is the function that checks the credentials.<\/p>\n<pre>function isAuthenticated(request: Request): boolean {\n  const user = import.meta.env.BASIC_AUTH_USER;\n  const pass = import.meta.env.BASIC_AUTH_PASS;\n\n  if (!user || !pass) {\n    return true;\n  }\n\n  const authHeader = request.headers.get('Authorization');\n\n  if (!authHeader?.startsWith('Basic ')) {\n    return false;\n  }\n\n  const encoded = authHeader.slice(6);\n  const decoded = atob(encoded);\n  const [providedUser, providedPass] = decoded.split(':');\n\n  return providedUser === user && providedPass === pass;\n}<\/pre>\n<p>The flow is simple. If the environment variables are not set, allow all traffic. If no <code>Authorization<\/code> header exists, block the request. If there is a header, decode the Base64 value, split it on the colon, and compare the credentials.<\/p>\n<p>If you are on an older Node release, you can fall back to <code>Buffer.from(encoded, 'base64').toString()<\/code>. That approach is also fine if you prefer not to rely on the global <code>atob<\/code>.<\/p>\n<h2 id=\"handling-the-401-response\">Handling the 401 Response<\/h2>\n<p>When the authentication check fails, the server needs to send a <code>401<\/code> status code with a <code>WWW-Authenticate<\/code> header. This header tells the browser to show its native login prompt.<\/p>\n<pre>export const onRequest = defineMiddleware(async (context, next) => {\n  if (!isAuthenticated(context.request)) {\n    return new Response('Unauthorized', {\n      status: 401,\n      headers: {\n        'WWW-Authenticate': 'Basic realm=\"Staging\", charset=\"UTF-8\"',\n      },\n    });\n  }\n\n  return next();\n});<\/pre>\n<p>The <code>realm<\/code> parameter is a label that appears in the browser\u2019s login dialog. I used <strong>\u201cStaging\u201d<\/strong> here, but you can set it to anything that describes your protected area.<\/p>\n<p>When the browser receives this response, it shows a native login prompt with the realm name. The user enters their username and password, and the browser sends the credentials in the <code>Authorization<\/code> header on the next request. This is all handled by the browser, no JavaScript or custom form needed.<\/p>\n<h2 id=\"configuring-environment-variables\">Configuring Environment Variables<\/h2>\n<p>The credentials come from two environment variables: <code>BASIC_AUTH_USER<\/code> and <code>BASIC_AUTH_PASS<\/code>. These are read at runtime using <code>import.meta.env<\/code>, which is Astro\u2019s way of accessing environment variables in server-side code.<\/p>\n<p>For local development, add them to a <code>.env<\/code> file in your project root. If you need a quick refresher on how environment variables behave, this guide to the <a href=\"https:\/\/www.hongkiat.com\/blog\/linux-command-env\/\"><code>env<\/code> command<\/a> is worth bookmarking.<\/p>\n<pre>BASIC_AUTH_USER=staging-user\nBASIC_AUTH_PASS=staging-password<\/pre>\n<p>On your deployment platform, set the same variables in the environment settings. The exact location varies by platform, but you will usually find it under Site Settings, Environment Variables, or a similar section.<\/p>\n<h2 id=\"testing-it\">Testing It<\/h2>\n<p>Run your Astro dev server, typically with:<\/p>\n<pre>npm run dev<\/pre>\n<p>\u2026and open the site in a browser. You should see a login prompt immediately. Enter the credentials you set, and the site loads normally. Cancel the prompt, and you get a blank \u201cUnauthorized\u201d page.<\/p>\n<figure>\n  <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/add-http-password-astro-site\/unauthorized.jpg\" alt=\"Unauthorized page\" width=\"1000\" height=\"650\">\n<\/figure>\n<p>I tested this with an Astro 5 project deployed on Cloudflare Pages and it worked without any issues. The key is using an adapter or runtime that supports on-demand rendering, so the auth check runs before the protected page is rendered.<\/p>\n<h2 id=\"troubleshooting\">Troubleshooting<\/h2>\n<p>You might run into this error when you try to access <code>Astro.request.headers<\/code> inside a page component. You see an error along this line below:<\/p>\n<pre>Astro.request.headers was used when rendering the route `src\/pages\/index.astro'. Astro.request.headers is not available on prerendered pages.<\/pre>\n<p>This happens because Astro prerenders static pages at build time. When a page is prerendered, there is no live HTTP request, so there are no headers to read. The error shows up even if the middleware is correctly handling authentication, because the page itself is still trying to access request data during static generation.<\/p>\n<p>There are two ways to fix this.<\/p>\n<p>The first option is to mark the page for server-side rendering by adding this line to your page frontmatter.<\/p>\n<pre>---\nexport const prerender = false;\n---<\/pre>\n<p>This tells Astro to render this page on each request instead of prebuilding it as static HTML. The page will have access to request headers, cookies, and other runtime data.<\/p>\n<p>The second option is to switch your entire project to server-side rendering. Set the output mode in your Astro config file.<\/p>\n<pre>\/\/ astro.config.mjs\nexport default defineConfig({\n  output: 'server',\n});<\/pre>\n<p>This makes every page server-rendered by default. You can still opt individual pages back to static with <code>export const prerender = true<\/code>. This approach makes sense if most of your pages need request data, or if you are already running middleware for authentication.<\/p>\n<p>In my case, I used <code>output: 'server'<\/code> since the whole site needed to be behind authentication. Every page is rendered on demand, so headers are always available.<\/p>\n<h2 id=\"wrapping-up\">Wrapping Up<\/h2>\n<p>HTTP Basic Authentication in Astro middleware gives you a password-protected site with no dependencies and no additional infrastructure. The entire implementation fits in about 25 lines of code. For staging sites, preview deployments, or internal tools, this is often enough.<\/p>\n<p>If you need more control, you can extend the same pattern. Use a database lookup instead of hardcoded credentials, token-based auth, or session cookies. The middleware is just JavaScript running on every request, so you can add any logic you need.<\/p>\n<p>Try it on your next Astro project. It takes five minutes and removes one more reason to add a package.<\/p>","protected":false},"excerpt":{"rendered":"<p>Protect an Astro site with HTTP Basic Authentication using middleware, environment variables, and no extra packages.<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[3392],"tags":[],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Add HTTP Password on an Astro Site - Hongkiat<\/title>\n<meta name=\"description\" content=\"Protect an Astro site with HTTP Basic Authentication using middleware, environment variables, and no extra packages.\" \/>\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\/add-http-password-astro-site\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add HTTP Password on an Astro Site\" \/>\n<meta property=\"og:description\" content=\"Protect an Astro site with HTTP Basic Authentication using middleware, environment variables, and no extra packages.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/add-http-password-astro-site\/\" \/>\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=\"2026-08-07T13:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/add-http-password-astro-site\/cover.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\\\/add-http-password-astro-site\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/add-http-password-astro-site\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Add HTTP Password on an Astro Site\",\"datePublished\":\"2026-08-07T13:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/add-http-password-astro-site\\\/\"},\"wordCount\":983,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/add-http-password-astro-site\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/add-http-password-astro-site\\\/cover.jpg\",\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/add-http-password-astro-site\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/add-http-password-astro-site\\\/\",\"name\":\"How to Add HTTP Password on an Astro Site - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/add-http-password-astro-site\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/add-http-password-astro-site\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/add-http-password-astro-site\\\/cover.jpg\",\"datePublished\":\"2026-08-07T13:00:00+00:00\",\"description\":\"Protect an Astro site with HTTP Basic Authentication using middleware, environment variables, and no extra packages.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/add-http-password-astro-site\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/add-http-password-astro-site\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/add-http-password-astro-site\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/add-http-password-astro-site\\\/cover.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/add-http-password-astro-site\\\/cover.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/add-http-password-astro-site\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add HTTP Password on an Astro Site\"}]},{\"@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 Add HTTP Password on an Astro Site - Hongkiat","description":"Protect an Astro site with HTTP Basic Authentication using middleware, environment variables, and no extra packages.","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\/add-http-password-astro-site\/","og_locale":"en_US","og_type":"article","og_title":"How to Add HTTP Password on an Astro Site","og_description":"Protect an Astro site with HTTP Basic Authentication using middleware, environment variables, and no extra packages.","og_url":"https:\/\/www.hongkiat.com\/blog\/add-http-password-astro-site\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2026-08-07T13:00:00+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/add-http-password-astro-site\/cover.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\/add-http-password-astro-site\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/add-http-password-astro-site\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Add HTTP Password on an Astro Site","datePublished":"2026-08-07T13:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/add-http-password-astro-site\/"},"wordCount":983,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/add-http-password-astro-site\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/add-http-password-astro-site\/cover.jpg","articleSection":["Coding"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/add-http-password-astro-site\/","url":"https:\/\/www.hongkiat.com\/blog\/add-http-password-astro-site\/","name":"How to Add HTTP Password on an Astro Site - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/add-http-password-astro-site\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/add-http-password-astro-site\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/add-http-password-astro-site\/cover.jpg","datePublished":"2026-08-07T13:00:00+00:00","description":"Protect an Astro site with HTTP Basic Authentication using middleware, environment variables, and no extra packages.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/add-http-password-astro-site\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/add-http-password-astro-site\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/add-http-password-astro-site\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/add-http-password-astro-site\/cover.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/add-http-password-astro-site\/cover.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/add-http-password-astro-site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Add HTTP Password on an Astro Site"}]},{"@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-jmB","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/74437","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=74437"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/74437\/revisions"}],"predecessor-version":[{"id":74438,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/74437\/revisions\/74438"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=74437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=74437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=74437"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=74437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}