{"id":1691,"date":"2021-12-10T12:51:50","date_gmt":"2021-12-10T11:51:50","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=1691"},"modified":"2021-12-10T13:41:04","modified_gmt":"2021-12-10T12:41:04","slug":"how-to-turn-local-folders-into-websites-with-sketch2react","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/","title":{"rendered":"How to turn local folders into websites with Sketch2React"},"content":{"rendered":"\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p class=\"\">From time to time, something pops up that makes me go \u201dHmm wait a minute, this is fascinating, will this work, I wonder?\u201d\u2026 Today that happened again.<\/p>\r\n<p class=\"\">Just browsing through newly added Setapp apps (a service I can\u2019t live without nowadays) I stumbled into <strong>Wunderbucket<\/strong>. I guess the headline got my attention, \u201dTurn folders into websites\u201d\u2026<\/p>\r\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbucket.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1688\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbucket.png\" alt=\"\" width=\"2000\" height=\"1212\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbucket.png 2000w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbucket-300x182.png 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbucket-1024x621.png 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbucket-768x465.png 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbucket-1536x931.png 1536w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbucket-250x152.png 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbucket-550x333.png 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbucket-800x485.png 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbucket-297x180.png 297w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbucket-495x300.png 495w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbucket-825x500.png 825w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><\/a><\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p class=\"\">That seems familiar, doesn\u2019t it? Yes, back over a year ago I did a <a href=\"https:\/\/sketch2react.io\/blog\/tutorial-how-to-publish-host-your-website-on-dropbox\/\" target=\"_blank\" rel=\"noopener\">tutorial<\/a> on how to use the exported HTML from Sketch2React together with a service for Dropbox called DropPages. A bit of a hurdle to set up, but just looking at the number of people that clicked on my tutorial, it clearly was something that got people&#8217;s attention. Well, I got good news for all of you happy clickers and readers, Wunderbucket is even greater!<\/p>\r\n<h2 class=\"\">Wunderful<\/h2>\r\n<p class=\"\">You know, writing these tutorials takes time, and I\u2019ve come up with an internal judging system that goes something like this:<\/p>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>Is it worth spending precious time exploring this?<\/li>\r\n<li>Will others benefit from this?<\/li>\r\n<li>Is it useful, will it make designers lives easier, and more fun?<\/li>\r\n<li>Am I having fun writing this?<\/li>\r\n<li>Can this be used together with our apps?<\/li>\r\n<\/ul>\r\n<p class=\"\">When I check green on all these criteria\u2019s inside my often confused mind, I just go for it. So here we go!<\/p>\r\n<h2 class=\"\">Tutorial requirements<\/h2>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li><a href=\"https:\/\/marketplace.sketch2react.io\/product\/sketch2react-demo\/\" target=\"_blank\" rel=\"noopener\">Sketch2React 2021 Beta<\/a> with a <a href=\"https:\/\/marketplace.sketch2react.io\/product\/sketch2react\/\" target=\"_blank\" rel=\"noopener\">paid license<\/a> (accessing our HTML export in the beta requires full access to our beta program)<\/li>\r\n<li>Wunderbucket app (use the <a href=\"https:\/\/wunderbucket.io\/pricing.html\">free plan<\/a>)<\/li>\r\n<li><a href=\"https:\/\/apps.apple.com\/se\/app\/icons8-lunacy\/id1582493835?mt=12\" target=\"_blank\" rel=\"noopener\">Icons8 Lunacy<\/a> or <a href=\"https:\/\/www.sketch.com\/apps\/\" target=\"_blank\" rel=\"noopener\">Sketch<\/a><\/li>\r\n<li>Setapp subscription (optional)<\/li>\r\n<li>You can use this <a href=\"https:\/\/www.dropbox.com\/s\/6b6s6r7jhk9bmm2\/Wunderful.sketch?dl=0\" target=\"_blank\" rel=\"noopener\">.sketch file<\/a> for Lunacy and <a href=\"https:\/\/www.dropbox.com\/s\/djmnau66h60ptd7\/WunderfulSketch.sketch?dl=0\" target=\"_blank\" rel=\"noopener\">this one for Sketch<\/a><\/li>\r\n<\/ul>\r\n<h2 class=\"\">Why two different .sketch files?<\/h2>\r\n<div class=\"wc-gallery\"><div class='wcflexslider-container wc-gallery-bottomspace-default wc-gallery-clear'><div id='gallery-1' class='gallery wc-gallery-captions-onhover gallery-link-file wcslider wcflexslider' data-reflections='false' data-gutter-width='5' data-columns='2' data-hide-controls='false'><ul class='slides'>\n\t\t\t\t<li class='gallery-item gallery-item-position-1 gallery-item-attachment-1706 wcflex-slide-item'>\n\t\t\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t\t\t<a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/lunacy-view-scaled.jpg\" target=\"_self\"><img src='https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/lunacy-view-1024x592.jpg' width='1024' height='592' alt='' \/><\/a>\n\t\t\t\t\t<\/div><\/li>\n\t\t\t\t<li class='gallery-item gallery-item-position-2 gallery-item-attachment-1707 wcflex-slide-item'>\n\t\t\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t\t\t<a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/sketch-view-scaled.jpg\" target=\"_self\"><img src='https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/sketch-view-1024x581.jpg' width='1024' height='581' alt='' \/><\/a>\n\t\t\t\t\t<\/div><\/li><\/ul><\/div>\n<\/div>\n<\/div>\r\n<p class=\"\">Sometimes in my tests using both Lunacy and Sketch together with Sketch2React I have noticed that when I go from Sketch to Lunacy and then back to Sketch again, certain visual bugs appears. Nothing that shows inside our app, but still, the designer in my finds this very annoying.<\/p>\r\n<p>So to keep this tutorial neat and nice (yes I say that ALOT) lets just go with this workflow.<\/p>\r\n<h2 class=\"\">How to export correctly<\/h2>\r\n<p class=\"\">Turns out, Wunderbucket works really excellent with any HTML structure, basically you turn your locally exported folder into a local host automatically. No need to use Visual Studio Code or any other editor, it really is simple. Awesome stuff and well done team Wunderbucket!<\/p>\r\n<p class=\"\"><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/download-HTML.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1689\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/download-HTML.jpg\" alt=\"\" width=\"1530\" height=\"1058\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/download-HTML.jpg 1530w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/download-HTML-300x207.jpg 300w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/download-HTML-1024x708.jpg 1024w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/download-HTML-768x531.jpg 768w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/download-HTML-250x173.jpg 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/download-HTML-550x380.jpg 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/download-HTML-800x553.jpg 800w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/download-HTML-260x180.jpg 260w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/download-HTML-434x300.jpg 434w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/download-HTML-723x500.jpg 723w\" sizes=\"auto, (max-width: 1530px) 100vw, 1530px\" \/><\/a><\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<p>&nbsp;<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<div class=\"boldgrid-section\" style=\"margin-left: auto; margin-right: auto;\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<h2 class=\"wp-block-heading\" style=\"padding: 0px;\">In Sketch2React<\/h2>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>First, make sure you have visited all the artboards inside Sketch2React that you want to include in our HTML bundle export<\/li>\r\n<\/ul>\r\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-1691-1\" width=\"640\" height=\"360\" preload=\"auto\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/Step-1.mp4?_=1\" \/><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/Step-1.mp4\">https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/Step-1.mp4<\/a><\/video><\/div>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>Go to <strong>Download<\/strong> and choose <strong>Download HTML<\/strong><\/li>\r\n<li>Go to the location on your HD where you saved our export, <strong>unzip the folder<\/strong><\/li>\r\n<\/ul>\r\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-1691-2\" width=\"640\" height=\"360\" preload=\"auto\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/Step-2.mp4?_=2\" \/><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/Step-2.mp4\">https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/Step-2.mp4<\/a><\/video><\/div>\r\n<h2 class=\"\" style=\"padding: 16px 0px 0px;\">In Wunderbucket<\/h2>\r\n<p class=\"\">Wunderbucket adds itself to the macOS menu bar, make sure you have it installed and opened.<\/p>\r\n<p class=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"587\" height=\"703\" class=\"wp-image-1687\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/new-site-wunderbucket.jpg\" alt=\"\" srcset=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/new-site-wunderbucket.jpg 587w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/new-site-wunderbucket-250x300.jpg 250w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/new-site-wunderbucket-550x659.jpg 550w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/new-site-wunderbucket-150x180.jpg 150w, https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/new-site-wunderbucket-417x500.jpg 417w\" sizes=\"auto, (max-width: 587px) 100vw, 587px\" \/><\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\">\r\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\r\n<ul class=\"wp-block-list\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>Press <strong>New Site<\/strong><\/li>\r\n<li>Give your site a silly name<\/li>\r\n<li>Under <strong>Local folder,<\/strong> browse to your unzipped Sketch2React exported HTML folder<\/li>\r\n<li>Leave <strong>Pick a template<\/strong> as it is (Blank) and press <strong>Create site<\/strong><\/li>\r\n<li>Done!<\/li>\r\n<\/ul>\r\n<p class=\"\">You now have two options. Either you press on the link called <strong>local host<\/strong> (which I didn\u2019t do in the video below, which got me perplexed) or you wait until Wunderbucket realizes that you have something to upload.<\/p>\r\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-1691-3\" width=\"640\" height=\"360\" preload=\"auto\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/Part-3.mp4?_=3\" \/><a href=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/Part-3.mp4\">https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/Part-3.mp4<\/a><\/video><\/div>\r\n<h2 style=\"padding: 16px 0px 0px;\">So basically<\/h2>\r\n<ul class=\"\" style=\"padding: 0px 0px 16px 40px;\">\r\n<li>Local host is the locally setup HTML server provided by Wunderbucket, the place you probably will want to look at first to make sure everything looks spectacular<\/li>\r\n<li>Once you have <strong>uploaded your site<\/strong>, press the link containing the name that you gave it, and you\u2019ll see your live site<\/li>\r\n<li>Easy-peasy done!<\/li>\r\n<\/ul>\r\n<p class=\"\">You can do a couple of more things with Wunderbucket, but basically, I\u2019m feeling really lazy, so go ahead, explore on adventurers.<\/p>\r\n<p class=\"\">Here&#8217;s the <a href=\"https:\/\/yowazzup-sketch2react.wunderbucket.dev\" target=\"_blank\" rel=\"noopener\">final build<\/a> uploaded to Wunderbucket.&nbsp;<\/p>\r\n<p>Juan over and out.<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<div class=\"boldgrid-section\">\r\n<div class=\"container\">\r\n<div class=\"row\"><\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>From time to time, something pops up that makes me go \u201dHmm wait a minute, this is fascinating, will this work, I wonder?\u201d\u2026 Today that happened again. Just browsing through newly added Setapp apps (a service I can\u2019t live without nowadays) I stumbled into Wunderbucket. I guess the headline got my attention, \u201dTurn folders into&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">How to turn local folders into websites with Sketch2React<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":1712,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"off","neve_meta_content_width":70,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[166],"tags":[6,55,205],"class_list":["post-1691","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-html","tag-sketch2react","tag-wunderbucket"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to turn local folders into websites with Sketch2React | Sketch2React Blog<\/title>\n<meta name=\"description\" content=\"Using Wunderbucket you go from Sketch2React&#039;s HTML export out to a live website in minutes. Find out how.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to turn local folders into websites with Sketch2React - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Using Wunderbucket you go from Sketch2React&#039;s HTML export out to a live website in minutes. Find out how.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-10T11:51:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-10T12:41:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbuckets2r.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Juan Maguid\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Maguid\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"How to turn local folders into websites with Sketch2React\",\"datePublished\":\"2021-12-10T11:51:50+00:00\",\"dateModified\":\"2021-12-10T12:41:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/\"},\"wordCount\":688,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbuckets2r.png\",\"keywords\":[\"HTML\",\"Sketch2react\",\"Wunderbucket\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/\",\"name\":\"How to turn local folders into websites with Sketch2React - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbuckets2r.png\",\"datePublished\":\"2021-12-10T11:51:50+00:00\",\"dateModified\":\"2021-12-10T12:41:04+00:00\",\"description\":\"Using Wunderbucket you go from Sketch2React's HTML export out to a live website in minutes. Find out how.\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/#primaryimage\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbuckets2r.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbuckets2r.png\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to turn local folders into websites with Sketch2React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips &amp; tricks\",\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sketch2react.io\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\",\"name\":\"Sketch2React Blog\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"width\":512,\"height\":512,\"caption\":\"Sketch2React Blog\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\",\"name\":\"Juan Maguid\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"caption\":\"Juan Maguid\"},\"url\":\"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to turn local folders into websites with Sketch2React | Sketch2React Blog","description":"Using Wunderbucket you go from Sketch2React's HTML export out to a live website in minutes. Find out how.","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:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/","og_locale":"en_US","og_type":"article","og_title":"How to turn local folders into websites with Sketch2React - Sketch2React Blog","og_description":"Using Wunderbucket you go from Sketch2React's HTML export out to a live website in minutes. Find out how.","og_url":"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/","og_site_name":"Sketch2React Blog","article_published_time":"2021-12-10T11:51:50+00:00","article_modified_time":"2021-12-10T12:41:04+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbuckets2r.png","type":"image\/png"}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"How to turn local folders into websites with Sketch2React","datePublished":"2021-12-10T11:51:50+00:00","dateModified":"2021-12-10T12:41:04+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/"},"wordCount":688,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbuckets2r.png","keywords":["HTML","Sketch2react","Wunderbucket"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/","url":"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/","name":"How to turn local folders into websites with Sketch2React - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/#primaryimage"},"thumbnailUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbuckets2r.png","datePublished":"2021-12-10T11:51:50+00:00","dateModified":"2021-12-10T12:41:04+00:00","description":"Using Wunderbucket you go from Sketch2React's HTML export out to a live website in minutes. Find out how.","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/#primaryimage","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbuckets2r.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/12\/wunderbuckets2r.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/how-to-turn-local-folders-into-websites-with-sketch2react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"How to turn local folders into websites with Sketch2React"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips &amp; tricks","publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sketch2react.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sketch2react.io\/blog\/#organization","name":"Sketch2React Blog","url":"https:\/\/sketch2react.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","width":512,"height":512,"caption":"Sketch2React Blog"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e","name":"Juan Maguid","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","caption":"Juan Maguid"},"url":"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/"}]}},"_links":{"self":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/comments?post=1691"}],"version-history":[{"count":10,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1691\/revisions"}],"predecessor-version":[{"id":1719,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/1691\/revisions\/1719"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media\/1712"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=1691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=1691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=1691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}