How to Upload HTML Files and Pages to WordPress

Why upload HTML files to WordPress? If you'rebuilding or growing a WordPress website, importing HTML files and pages can save you significant time when setting up your website or when adding new, customized content. Sometimes you might want to build a custom HTML page or use pages from an older website and then add them to WordPress.

In this post, we'll show you how to add your HTML files and pages to your WordPress site.

我们将介绍：

• What is an HTML file?
• 为什么将HTML文件上传到WordPress
• How to Upload an HTML File to WordPress
• 如何将HTML页面添加到WordPress

What is an HTML file?

HTMLstands for "hypertext markup language," which is a language used to create and structure webpages. HTML files are text-only documents, and they contain highly interactive content that’s designed to be viewed on a web browser. HTML files can be created from scratch, or you can take existing files — like Google Docs — and convert them into HTML.

Below is an example of what an HTML file could contain.

See the PenHTML File Example由HubSpot（@hubspot) onCodePen.

HTML files can be loaded on any type of web browser. This makes them more mobile-friendly, because they’ll render properly regardless of the device or operating system being used. If you have multiple people working on your website, or if you have outsourced the job to an external developer, HTML files are a great way to distribute content before publishing it on your website.

But, this isn’t the only benefit of using HTML files. When you’re working in WordPress, HTML files are great for creating customized content that may not be offered natively with your current WordPress theme.

Read on for some additional reasons to upload HTML files and webpages when building your site on WordPress.

为什么将HTML文件上传到WordPress

WordPress isn't just a website builder, it's a content management system. Which means, even if your site is hosted on WordPress, you don't have to create every single page within the WordPress interface.

在创建网页时，WordPress具有其好处。您可以使用预先设计的主题创建精美的页面，甚至可以安装页面构建器Elementorto create sales pages, landing pages, and product pages.

但是，您可能需要将自定义HTML文件存储在WordPress仪表板中。这是您想要的一些原因。

You don’t want to rebuild pages from scratch.

你可能会有一个转换现有的HTML页面well, and rather than rebuilding it on WordPress, you can save time by just uploading the page directly. This also reduces the risk of human error, because rather than manually copying and pasting code, you can simply upload the content altogether via an HTML file.

You want to customize your page beyond a bottled theme.

上传HTML文件的另一个好处是，它允许您在主题允许的内容之外自定义内容。例如，假设您的旧网站使用了您真正喜欢的模板或页面，但在WordPress上没有提供。您可以将HTML复制到该内容，然后将其上传到WordPress网站。

Or, you can recreate the content from scratch and write the HTML yourself. Once complete, upload your HTML file to WordPress, and presto! You now have a new, customized page or feature at your disposal.

It’s easier to verify your website with services such as Google Search Console.

最后，将HTML上传到WordPress的一个很大好处是，它可以帮助您在Google搜索控制台上验证网站。要使用Google搜索控制台，您首先需要验证您的网站，其中涉及uploading a special HTML fileto WordPress. This gives Google access to your data and ensures your site is indexed properly by Google's search engine.

Ready to start uploading? Read on for a step-by-step guide to uploading HTML files to WordPress.

1. Navigate to your Admin Dashboard.

You can use the WordPress Visual Editor to quickly add HTML files to your website. To access the Visual Editor, first go to your admin dashboard.

2. Click 'Pages' in the left sidebar.

接下来，看看左侧侧边栏。应该有一个标记为“页面”的选项。点击它。这应该在右侧加载一个新屏幕，类似于下面的示例，您可以看到您创建的所有页面。

3. Choose an existing page or create a new one.

Now, you should have the option to either edit an existing page or add a new one. To add a new page, simply click the button next to the “Pages” title that sasys "Add new."

如果您想编辑现有帖子，请单击帖子名称本身，然后立即加载编辑器。视觉编辑器默认情况下应打开，但是如果您还使用诸如Elementor之类的页面构建器，则需要悬停在页面的名称上，然后单击“编辑”，而不是“使用Elementor进行编辑”。

4. Click 'Add Block.'

Once you've accessed the Visual Editor, click the option in the top left to "add block." This will trigger a dropdown menu on the left-hand side of the screen.

5.添加一个“文件”块。

Using the search bar at the top of the left-hand menu, search for the term "File." Then, click on it to upload a new file.

另外，您也可以搜索“ HTML”。该块将允许您输入HTML，但是您必须将其手动复制并粘贴到代码块中。如果您要上传简短的代码段，则可以使用此功能，但是将媒体选项用于更大的上传是更有效的。

6. Choose your HTML file.

在出现的模块中，选择“上传”的选项。然后，选择要添加到帖子的HTML文件。选择您的文件后，应自动将其添加到您的帖子中。

You can also add the file to your media library. This will allow you to reuse the HTML file in other blog posts.

How to Fix "File Type is Not Permitted for Security Reasons" Error

在某些情况下，您may encounter this errorwhen trying to upload your HTML file to your blog post or media library.

导航的最简单方法是使用HTML块。使用HTML块，您可以在HTML文件中复制所有代码，并将其直接粘贴到WordPress页面中 - 类似于下面的示例。

如何将HTML页面添加到WordPress

Let's say we were the proud designers of the site, Lonéz Scents, and we wanted to migrate this page to WordPress.

Image Source

Let’s take a look at the process of migrating this page to WordPress.

1. Compress the HTML page into a ZIP folder.

从您当前的CMS导出网页。您无需触摸任何这些文件，除非您要在将其上传到WordPress之前自定义。

Make sure this HTML file is compressed into a ZIP folder.

2. Navigate to your WordPress website’s cPanel.

Excellent! Now you have the HTML file you’ll be migrating to your WordPress website.

Next, it’s time to access your cPanel, where your website's database is located. You get these logins from your hosting provider.

Pro Tip:如果您想为您做繁重的举重，有些hosting providerswill migrate your webpages for you for free. Make sure to check with your hosting service.

To navigate to the cPanel, login to your hosting provider’s website and find out where they keep the link to your cPanel.

In Bluehost, click “Advanced” on the sidebar, scroll down to “Files,” then click “File Manager.”

3. Enter your public_HTML folder inside your cPanel.

Your public_HTML folder will be found in the left sidebar. If you host several websites, you’ll need to choose the website where you want to migrate the page to.

4. Add a new folder to your website’s public_HTML folder.

Click the “+Folder” button at the top of the screen to create a new folder. Now, name your new folder and then click Create New Folder. (This folder name will be a part of your HTML page's URL.)

5.上传新文件夹的压缩HTML文件。

Once the folder is created, click on it. Then, click on the Upload button at the top of the screen. There should be an option Select File and you can choose the zipped HTML file you want to add.

6. Extract the files.

Once uploaded, your zipped HTML file is now in the folder. Select the file and click Extract at the top-right corner of the screen. Now, click Extract files.

7. Preview your page.

You'll now see an option called Extraction Results. Click Close. Then, click Reload in the middle of the screen. You'll see the unzipped HTML file in the folder. (If you like, delete the ZIP file. It won't affect your extracted HTML page or any other folders.)

Finally, you can preview the page by visiting yourdomain.com/FolderName/HTMLFileName.html.

And you're done! You now know how to upload HTML files to your WordPress website.

Upload HTML Files to WordPress to Build Your Site

Uploading HTML files to WordPress may just be the way to go — especially if you want to create a highly customized site that you can’t build with a theme. It’s also a great option for you if you want to migrate your old site to the WordPress platform. The best part is that it’s easy — but make sure to bookmark this guide, so you never get lost during the process.

Editor's note: This post was originally published in July 2019 and has been updated for comprehensiveness.