change assets path

README.md

@@ -0,0 +1,55 @@
+# SoundTown Site
+
+```
+minimum hugo version 0.92.2
+tailwindcss version 3.1.5
+```
+
+# Setup dev env
+
+Run "npm install" (first time only)
+
+Then configure "config.toml"
+
+# Run hugo server
+
+1. Hugo only
+
+```
+hugo serve -D
+```
+
+2. Hugo with tailwindcss watcher (dev)
+
+```
+hugo serve -D
+```
+
+then run tailwindcss server
+
+```
+npm run watch
+```
+
+3. Generate Tailwind CSS (production)
+
+```
+npm run buildcss
+```
+
+Tailwind CSS file located at "./tailwindcss".
+Generated Tailwind CSS located at "./static/css/main.css".
+
+# Build hugo site
+
+```
+hugo --ignoreCache --minify
+```
+
+# To create new page
+
+```
+hugo new content/page_name.md
+```
+
+and then edit file located at "./content/page_name.md", setup frontmatter

config.toml

@@ -3,10 +3,10 @@ languageCode = "id-ID"
 defaultContentLanguage = "id"
 title = "SoundTown"
 summaryLength = 10
-RelativeURLs    = false
-CanonifyURLs    = true
+RelativeURLs = false
+CanonifyURLs = true
 enableRobotsTXT = true
-enableEmoji     = true
+enableEmoji = true
 paginate = 8
 enableGitInfo = true
 pygmentsCodefences = true 

content/somepage.md

@@ -5,7 +5,7 @@ date: 2021-07-20T20:19:50+07:00
 draft: false
 toc: true
 keyword: [tutorial, website]
-# thumbnail: "/images/about.webp"
+# thumbnail: "/assets/images/about.webp"
 tags: [test, test2]
 categories: [tutorial]
 ---

layouts/index.html

@@ -14,22 +14,22 @@ <h2 class="text-[36px] lg:text-[64px] leading-tight font-bold">
 
         <!-- show on mobile, hide on desktop -->
         <div class="block lg:hidden mt-10 mb-20 px-4">
-          <img class="frame" src="/images/hero-image.webp" alt="hero"> 
+          <img class="frame" src="/assets/images/hero-image.webp" alt="hero"> 
         </div>
 
         <div class="mt-12 flex flex-col lg:flex-row items-center gap-5 lg:gap-12">
           <a href="#" class="flex items-center justify-center w-full lg:w-auto px-8 py-2.5 rounded-md border border-primary bg-secondary hover:bg-black transition">
             Learn More
           </a>
           <a href="#" class="flex items-center justify-center w-full lg:w-auto gap-2 px-8 py-2.5 rounded-md bg-primary hover:bg-primary/90 transition">
-            Try Now <img src="/images/play-icon.svg" alt="play">
+            Try Now <img src="/assets/images/play-icon.svg" alt="play">
           </a>
         </div>
       </div>
 
       <!-- show on desktop, hide on mobile -->
       <div class="hidden lg:block px-4">
-        <img class="frame" src="/images/hero-image.webp" alt="hero"> 
+        <img class="frame" src="/assets/images/hero-image.webp" alt="hero"> 
       </div>
     </section>
 
@@ -39,13 +39,13 @@ <h2 class="text-[36px] lg:text-[64px] leading-tight font-bold">
         <div class="bg-[#FFC148] h-3 w-3 rounded-full"></div>
         <div class="bg-[#78FF48] h-3 w-3 rounded-full"></div>
       </div>
-      <img class="hidden lg:block w-full" src="/images/app.webp" alt="app desktop version">
-      <img class="block lg:hidden w-full" src="/images/app-mobile.webp" alt="app mobile version">
+      <img class="hidden lg:block w-full" src="/assets/images/app.webp" alt="app desktop version">
+      <img class="block lg:hidden w-full" src="/assets/images/app-mobile.webp" alt="app mobile version">
     </section>
 
     <section id="about" class="max-w-screen-xl mx-auto mt-36 lg:mt-60 flex flex-col lg:flex-row items-start lg:items-center justify-between w-full">
       <div class="px-4">
-        <img class="frame-2" src="/images/about.webp" alt="about">
+        <img class="frame-2" src="/assets/images/about.webp" alt="about">
       </div>
       <div class="w-full lg:w-[45%] mt-16 lg:mt-0">
         <h2 class="text-[32px] lg:text-[64px] leading-normal font-bold mb-4"><span class="text-primary">About</span> Soundtown</h2>
@@ -65,7 +65,7 @@ <h2 class="text-[32px] lg:text-[64px] leading-normal font-bold mb-4"><span class
           <div class="relative p-3 bg-white h-max">
             <div class="absolute top-3 inset-x-3 bg-primary h-60"></div>
             <div class="p-3">
-              <img class="relative w-full" src="/images/m1.webp" alt="testimonial">
+              <img class="relative w-full" src="/assets/images/m1.webp" alt="testimonial">
             </div>
             <div class="p-3 mt-2">
               <h2 class="text-secondary text-4xl font-semibold mb-5">
@@ -81,7 +81,7 @@ <h2 class="text-secondary text-4xl font-semibold mb-5">
           <div class="relative p-3 bg-white h-max">
             <div class="absolute top-3 inset-x-3 bg-primary h-60"></div>
             <div class="p-3">
-              <img class="relative w-full" src="/images/m2.webp" alt="testimonial">
+              <img class="relative w-full" src="/assets/images/m2.webp" alt="testimonial">
             </div>
             <div class="p-3 mt-2">
               <h2 class="text-secondary text-4xl font-semibold mb-5">
@@ -97,7 +97,7 @@ <h2 class="text-secondary text-4xl font-semibold mb-5">
           <div class="relative p-3 bg-white h-max">
             <div class="absolute top-3 inset-x-3 bg-primary h-60"></div>
             <div class="p-3">
-              <img class="relative w-full" src="/images/m3.webp" alt="testimonial">
+              <img class="relative w-full" src="/assets/images/m3.webp" alt="testimonial">
             </div>
             <div class="p-3 mt-2">
               <h2 class="text-secondary text-4xl font-semibold mb-5">
@@ -113,7 +113,7 @@ <h2 class="text-secondary text-4xl font-semibold mb-5">
           <div class="relative p-3 bg-white h-max">
             <div class="absolute top-3 inset-x-3 bg-primary h-60"></div>
             <div class="p-3">
-              <img class="relative w-full" src="/images/m3.webp" alt="testimonial">
+              <img class="relative w-full" src="/assets/images/m3.webp" alt="testimonial">
             </div>
             <div class="p-3 mt-2">
               <h2 class="text-secondary text-4xl font-semibold mb-5">

layouts/partials/footer.html

@@ -4,7 +4,7 @@ <h1 class="text-xl font-medium flex gap-1 items-end">
     <div class="pb-0.5">oundTown</div>
   </h1>
   <a href="#" class="flex items-center gap-3 bg-primary hover:bg-primary/90 transition px-4 py-3 rounded-md mt-10 mb-12">
-    <img src="/images/email.svg" alt="email">
+    <img src="/assets/images/email.svg" alt="email">
     Contact Us
   </a>
 

layouts/partials/head.html

@@ -29,7 +29,7 @@
   {{ end }}
 
   <!-- Tailwindcss -->
-  <link rel="stylesheet" href="/css/styles.css">
+  <link rel="stylesheet" href="/assets/css/styles.css">
 
   <!-- Google Font -->
   <link rel="preconnect" href="https://fonts.googleapis.com">

layouts/partials/header.html

@@ -6,7 +6,7 @@
         <div class="pb-0.5">oundTown</div>
       </a>
       <button name="menu" class="toggle-menu block lg:hidden">
-        <img src="/images/menu.svg" alt="menu">
+        <img src="/assets/images/menu.svg" alt="menu">
       </button>
     </div>
     <nav class="menu translate-y-[-150%] lg:translate-y-0">