Hi I have a index.html file I generate using another framework how could I connect this page to my astro website on website.com/newdir?
#How could I add an external .html page into the website?
astral basin
prime reefBOT
Hi @astral basin. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To connect your index.html file to your Astro website, you would need to convert it into an Astro page. Astro pages use the .astro file extension and support the same features as Astro components.
Here are the steps you can follow:
-
Create a new file in your Astro project directory at
src/pages/newdir/index.astro. This will be your new Astro page in the project. -
Copy the content of your
index.htmlfile and paste it into your newindex.astrofile. -
If your
index.htmlfile contains any JavaScript, you would need to move it into the frontmatter of your.astrofile. The frontmatter is the section between the---dashes at the top of the file. Any JavaScript code in the frontmatter runs in the terminal, not in the browser.
Here's an example of what your index.astro file might look like:
---
// Your JavaScript code goes here
console.log('This runs in your terminal, not the browser!');
---
<!-- Your HTML code goes here -->
<html>
<body>
<h1>Hello, World!</h1>
</body>
</html>
<style>
h1 { color: orange; }
</style>
Please note that Astro emphasizes minimized JavaScript usage and optimized loading times for an improved user experience. So, it's recommended to only include the necessary JavaScript in your Astro pages.