Blogs

When building a site in Liferay, you might be used to the fully-fledged web applications with dynamic content, widgets, and templates. But sometimes, all you need is a simple static site for a small project or a temporary page. In these cases, you don’t need to delve into the complex technologies of Liferay’s site creation tools like stylebooks, fragments, or themes. Instead, you can quickly publish HTML, CSS, and JS files to Liferay's Documents and Media library or using client extensions, which will serve your static content quickly and easily.

I'm David, a Technical Writer at Liferay and this is my very first blog. Here, I’m going to show you how to set up a basic static site with Tic-Tac-Toe style simplicity.

1. Create an `index.html` File for Your Home Page: The first thing you’ll need is an `index.html` file. This will be the homepage of your site and the entry point that users will access. Think of this as the "main" file that points to all your other assets (CSS, JS, images, etc.). Once you’ve created it, upload it to Documents and Media in Liferay. Technically speaking, this is all you really need, but if you prefer to have a fully stylized site with extra pages and images, you can do that too.
2. Create Additional HTML Files for Other Pages: Depending on the complexity of your site, you might want to add more pages, such as an About page or a Contact page. Each of these will need their own `.html` file uploaded to Documents and Media, preferrably in the same folder.
3. Create CSS and JS Files: To make your site look good, you’ll need some CSS. Create a `styles.css` file to define the styles for your site. If your site requires some interactivity (like form validation, dynamic content updates, or even simple animations), you can also add a JavaScript file. So far, this should be pretty conventional and intuitive if you're tech-savvy and familiar with web development.
4. Upload Any Additional Assets: After uploading your HTML, CSS, and JS files to Documents and Media, you'll also need to upload any images or other media contained in your site. If these files are properly referenced in the HTML, the pages will be rendered appropriately with your media, styling and interactivity.

Now that your static site files are uploaded to Liferay, there are two main ways to access and view them. Click on the `index.html` file to open it in Documents and Media. Then, click the info button. You'll see two URLs from where you can access this file. These URLs exist for any file type and visiting them on your browser would install most file types. But since 2025.Q1, HTML files are rendered and this is where your site is hosted.

• Using the Latest Version URL: Anyone with the proper permissions can copy the URL of the `index.html` file from Liferay and visit it directly in their browser. However, Liferay doesn’t recognize the folder structures in Documents and Media when rendering the files. This means that you’ll need to adjust the file paths in your HTML to reflect the Latest Version URL of the files (start in `/documents/d/`).


• Using the WebDAV URL: If you prefer not to adjust the file paths, you can use the WebDAV URL. This method is technically easier as it allows you to maintain your relative file paths since WebDAV will correctly interpret the structure of the folder. However, keep in mind that WebDAV URLs are only accessible to authenticated users, so this method is best suited for internal or private sites.

By following these steps, you can host a simple, static site within Liferay using just the basic HTML, CSS, and JavaScript files. This approach is perfect for small projects or temporary pages, where you don’t need to leverage all of Liferay’s powerful features. Just upload your files to Documents and Media, reference them properly, and you’re good to go! (Most of the time, you'd still want to use Liferay's site functionality or, at least, client extensions)