Publish Static HTML

Move from a development environment to production

Congratulations! You've poured your creativity and skills into crafting a stunning design project on Replit. While Replit offers a fantastic development environment, the built-in preview webpage has limitations. It can't handle large volumes of users and might have occasional downtime, potentially affecting your project's visibility.

To overcome these limitations and showcase your work to the world, we'll take the next step: deployment. Don't worry; the process is a snap.

Flask has been helping our projects by adding our navbar and footer and such to every page. But now we want to export a copy of the site that doesn't require this fancy tool. That's essentially what we'll be doing by flattening your website. This means converting your project into a static HTML format, eliminating the need for constant server interaction. This static version will be much faster, more reliable, and accessible to a broader audience.

To achieve this flattening magic, I'll use a tool called Frozen-Flask. It's a powerful script specializing in creating static Flask application versions. Once your project is flattened, we'll proceed to the deployment stage. This is where your project finds its permanent home on the World Wide Web: a hosting platform called Netlify.

Think of Netlify as your website's personalized apartment building. It provides the infrastructure and resources needed for your project to be live and accessible 24/7.

Publishing

• https://app.netlify.com/drop

  • Create an account on the site and verify your email address

  • Once logged in, you'll see an area indicated by a dotted line where you can drop a folder

    • If your folder isn't uploading, you may images or other files that are too large. Downsize your images or move unneeded files outside of the bootstrap_project folder

  • Edit your site details so you can change the URL from its randomly-issued name

  • Submit the URL so it can be graded. Remember, if you make further changes, you need to re-publish your site using the following instructions:

Updating your page

You've been seeing your page update on your local machine. That's not on the Internet and the link in your browser won't work on anyone else's machine as it refers to a file on your computer. But we can deploy the website to free host using Netlify.

And then select your site

Go the page that will allow us to update the root folder

Requirements

• All stock content replaced

• A color palette implemented uniformly throughout the page and corresponds with the subject of the site

• Custom header and body fonts that corresponds

• CSS file formatted into sections with color palette written in a comment at the top

• CSS rules overwriting theme styles like btn and bg

• A new section added to the navbar and the body with smooth scroll working to that location

• A new Bootstrap component taken from the documentation

• A new CSS class and ID implemented in the CSS and HTML

• Images (not in conflict with copyright law) successfully added to img folder and added to site