Convert static HTML website

Rick_Groszkiewicz · November 25, 2024, 12:52am

I created my company’s website (www.softwarepolish.com) long ago using Microsoft Frontpage. About 10 years ago, my web hosting company (Aplus.net) stopped supporting Microsoft Frontpage. I have been making updates locally with Microsoft Frontpage, then uploading the changes using WS-FTP.

Over time, I keep finding various pages with broken links. In the past, I could use XENU to find all the broken links on my web site. But About 5 years ago, XENU stopped working. I tried several alternatives recently, but they all basically abort immediately after they start. Typical message is something like “forbidden request” or “connection error”. And Aplus.net said they would NOT help me resolve the problem.

I need to migrate my Frontpage site to a modern web management system. It has about 2.5 GB of data and 2,000 pages. I have been looking at using Wordpress.

I’m a total newb at WordPress and have just started learning about it. I have not found any easy solution to import / translate my Frontpage site to WordPress.

I’m curious if anyone has gone down this path before, or has any suggestions for me …

stochiki · November 25, 2024, 6:37pm

What are your goals with your website?

If you just have static html, I dont know why you would need wordpress (which I believe is a blogging software?)

What you probably want to do is figure out how to run your website on the cloud. If you want to be cost efficient, I suggest that you learn how to run a load balancer like nginx.

As for dead links, you probably want to write a script that loops through each of the files, then write a small regex to get all the links in each file. Then you run something like curl to check if the links work.

SpaceLobster · November 25, 2024, 7:09pm

I can either help, or point you in the right direction.

The first hurdle is separating content from layout, which is what WordPress does. It will greatly simplify things if you assume you are moving content over, but to a new WordPress design/theme. There’s a billion different WordPress themes (layouts) to choose from.

To do that, there’s about three ways to get this done. First, maybe frontpage does this for you. If not maybe there’s content scrapers available online. Failing that, a custom program that spiders your site and grabs the content. You’ll need to also grab the page URL for each page as well.

With the content exported, you have to then import that into WordPress. I suspect that’s a quick script as well. Not difficult, just some diligence making sure URL structure is maintained. But WordPress will accept some formats easily, i.e xml.

So, scrape or export the data, then an import into WordPress. Then two seconds in the WordPress admin panel to choose your theme and done.

For your hosting, find a low cost host that offers automated updates to WordPress, and backups. Both are vital. Other than that, cheap is great. There’s a lot of WordPress hosts that will do all of that, inexpensively.

Broken link checkers abound on the internet. I ran one in ahrefs, didn’t find any broken links, but you do have some pages giving a server error. Anyway, this is an easy problem to solve using existing tools.

So, first question, can you export just the content, not the design, from fp?

Second question, the site looks to have about 20-30 pages. Where are the rest of the pages? They don’t seem to be linked in anywhere visible.

I’ve done this type of thing dozens of times through the years, that’s where I’d start.

SpaceLobster · November 25, 2024, 7:19pm

Also I had a look at some of the broken links. Possibly it’s because you’re using spaces in the urls. Probably an easy fix when going through this.

Rick_Groszkiewicz · November 25, 2024, 7:33pm

Yes, I’m sure that spaces in the URLs are causing broken links. That is something that the web hosting company changed, because the links were not broken previously.

SpaceLobster · November 25, 2024, 7:55pm

So, first question, can you export just the content, not the design, from fp?
second questions, where are all these thousands of pages? I’m only seeing dozens.

Rick_Groszkiewicz · November 25, 2024, 9:09pm

All the content is sitting on my hard drive, so I can use ftp to publish updates
Okay, maybe I don’t really understand the fp site statistics. Probably less than 50 pages.

Rick_Groszkiewicz · November 25, 2024, 9:12pm

@stochiki This was primarily my business website, but is now mostly for personal use. I typically make a few updates each quarter.

I designed this when all web sites were accessed via PC. Using ANY modern website builder will allow it to look decent on iPhone or iPad.

SpaceLobster · November 25, 2024, 9:28pm

The html is in your hard drive, which includes the design and the content/text.

Can you export just the text from fp? Without the images, colours etc?

stochiki · November 25, 2024, 9:29pm

If you want a more direct approach, you can look into hosting a static website on cloud like AWS, google cloud, etc. To make your site look better, you should consider just using a CSS library and just adding the appropriate classes to the html elements.

stochiki · November 25, 2024, 9:38pm

You can actually use chatgpt to convert all your html into something that looks nice (as an example, I usually use bootstrap.css): Here is an example from your webpage:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enrollment Exam Online Courses</title>
    
    <!-- Bootstrap 5 CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Verdana:wght@400;700&display=swap" rel="stylesheet">

    <style>
        body {
            background-image: url('../_themes/aftrnoon/background_aftrnoon.gif');
            background-size: cover;
            background-position: center;
        }

        .content {
            background-color: rgba(255, 255, 255, 0.9);
            padding: 40px;
            border-radius: 10px;
        }

        .course-title {
            font-size: 2.5rem;
            font-weight: bold;
            color: #983738;
        }

        .course-description {
            font-size: 1.1rem;
        }

        .course-link {
            font-size: 1.2rem;
            font-weight: bold;
        }

        .footer {
            text-align: center;
            margin-top: 50px;
            padding: 20px;
            background-color: #f1f1f1;
            border-top: 1px solid #ddd;
        }
    </style>
</head>

<body>

    <!-- Navigation Bar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Enrollment Exam Courses</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Main Content Section -->
    <div class="container my-5 content">
        <h1 class="course-title text-center mb-4">Retirement Announcement (12/31/2019)</h1>
        <p class="course-description">I am retiring effective 12/31/2019. I will be assisting the new instructor for the Enrollment exam online courses available through The Infinite Actuary. You get access to all the study material mentioned below. You can view the online course as often as you like, and on your own schedule.</p>

        <div class="row mt-5">
            <!-- EA-2F Course -->
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card shadow">
                    <div class="card-body">
                        <h3 class="course-title">EA-2F Enrollment Exam Online Course</h3>
                        <p class="course-description">The online course will be available in May 2020. You get access to all the study material mentioned below. You can view the online course as often as you like, and on your own schedule.</p>
                        <a href="http://www.theinfiniteactuary.com/?page=ea_2a" class="course-link">Online course - through The Infinite Actuary</a>
                    </div>
                </div>
            </div>

            <!-- EA-1 Course -->
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card shadow">
                    <div class="card-body">
                        <h3 class="course-title">EA-1 Enrollment Exam Online Course</h3>
                        <p class="course-description">The online course is currently available for the 2020 sitting. You get access to all the study material mentioned below. You can view the online course as often as you like, and on your own schedule.</p>
                        <a href="http://www.theinfiniteactuary.com/?page=ea_1" class="course-link">Online course - through The Infinite Actuary</a>
                    </div>
                </div>
            </div>

            <!-- EA-2L Course -->
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card shadow">
                    <div class="card-body">
                        <h3 class="course-title">EA-2L Enrollment Exam Online Course</h3>
                        <p class="course-description">The online course is currently available for the 2020 sitting. You get access to all the study material mentioned below. You can view the online course as often as you like, and on your own schedule.</p>
                        <a href="http://www.theinfiniteactuary.com/?page=ea_2b" class="course-link">Online course - through The Infinite Actuary</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Other Actuarial Information -->
        <h2 class="course-title mt-5">Other Actuarial Information</h2>
        <p class="course-description"><b>Actuarial Presentations:</b> Rick is a frequent speaker at the Enrolled Actuaries Meeting, as well as meetings of the American Society of Pension Actuaries. You can download the MS Word documents for the slides.</p>
        <a href="actpresen.htm" class="course-link">Actuarial Presentations</a>

        <p class="course-description mt-3"><b>Software Development:</b> Rick has done software development work since 1983. This has the latest resume, and information on recent actuarial projects.</p>
        <a href="prog_res.htm" class="course-link">Software Development</a>
    </div>

    <!-- Footer -->
    <div class="footer">
        <p>© 2024 Enrollment Exam Online Courses | All Rights Reserved</p>
    </div>

    <!-- Bootstrap 5 JS and dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>

</html>

SpaceLobster · November 25, 2024, 9:41pm

That’s fine, but pretty sure op wants a content manager, not diving into learning html 5 and css. And nobody, including me, does that hand stuff anymore. They need something in the way of a design tool a bit more robust than vim lol…which is of course, WordPress.

stochiki · November 25, 2024, 9:43pm

Here’s what it looks like, took me two seconds with chatgpt:

stochiki · November 25, 2024, 9:55pm

My understanding is that he just wants to host a bunch of html files and he wants to make them look better.

Rick_Groszkiewicz · November 25, 2024, 10:13pm

@stochiki Using a CSS library may be too hardcore for me. That’s why I started using MS Frontpage.

SpaceLobster · November 25, 2024, 10:51pm

check your dm’s.

stochiki · November 26, 2024, 12:19am

I understand. But also bear in mind that your website is very basic (mostly just links and tables). And you mentioned that you update it every quarter, so not too many changes. Wordpress might be overkill for your needs. Learning basic html and using a nice modern CSS framework is not too difficult and might be a better solution for you. good luck.

Rick_Groszkiewicz · November 26, 2024, 2:41am

I just counted all the *.htm files on my web site, and there are 3,808 files. Quite a few are in various photo albums.

SpaceLobster · November 26, 2024, 2:51pm

@Rick_Groszkiewicz did you see my dm?

Rick_Groszkiewicz · November 26, 2024, 5:32pm

Yes, I did. Still need to meditate on how to proceed.