Creating a Website with Ktor (Part 3: Using Static Resources)

Exploring Ktor Projects

In the previous article, we learned how to implement FreeMarker. (The link is below)

🔗 Creating a Website with Ktor (Part 2: Using FreeMarker)

While we can create a static website using only FreeMarker, we still need to incorporate static resources such as CSS files, JavaScript files, or images. In this article, we’ll explore how to use these static resources in a Ktor project alongside FreeMarker.

Note: This article is part of the ‘Creating a Website with Ktor’ series. The plugins, directory structure, and code examples are carried over from the previous article.

Step 1: Using Static Resources

There are various static resources; for this example, we will use image files such as .png or .jpg. Normally, we can use and display images by specifying a file path in the src attribute. However, in a Ktor project, file paths are managed by routing, so you need to declare the root of static resources explicitly. In Ktor, we can use static resources by using the staticResources() function.

Open the Routing.kt file and add the following code:

routing {
    // …other route settings
    staticResources("/static", "files") // add this code
}

This code maps the URL /static to the files directory inside the resources directory. Therefore, you need to create a new directory named files inside the resources directory. At this point, you should add an image file to preview. In this article, a file named test-image.png is added.

Run the project and input the image file path in the browser. The file path will be http://0.0.0.0:8080/static/test-image.png. Then, you can access the image file. If you use a different file name, you need to replace the file name in the URL.

You are now ready to use static resources in a Ktor project. In the next step, we’ll learn how to load and display image files with FreeMarker.

Step 2: Displaying an Image

In this step, we’ll place an image on the top page (index.ftl), so you need to prepare an image first. If you plan to publish your website or post screenshots on social media, make sure you use an image that can be used legally. Ensure that you don’t violate any legal issues. If you need a free image, you can use the one I created below.

Note: You can use this image freely, either for commercial purposes or not. However, I do not relinquish the copyright. Therefore, do not distribute it to others or claim that you created this image.

After preparing an image file for the top page, add the image file into the files directory. Then, open the index.ftl file and add the following code:

<img src="/static/site-logo.png" width="500" height="500" alt="logo-image">

Run the project and navigate to http://0.0.0.0:8080/index, and you should see the image specified in the index.ftl. Feel free to adjust the styles using CSS to make it suitable for the top page. This article doesn’t focus on HTML or CSS, so those explanations are omitted. Below is one example of the result:

Congratulations! You’ve mastered how to use static resources in a Ktor project. Additionally, you can use static resources such as CSS files or JavaScript files in a similar manner.

In the next article, I plan to introduce how to handle dynamic data in a Ktor project by implementing a simple comment posting function. Looking forward to it!

<aside>
  <p>
    Thank you for reading!<br>
    If you enjoyed this post, <br>
    I'd appreciate a clap. 😄
  </p>
</aside>