How to Copy a Website: Cloning & Using Designs as a Template

Do you want to save a copy of a website to your computer? Whether you want to download an entire website for archival purposes or just want to try using a webpage as a template for your own website, copying websites is easier than you'd think! This How.com.vn article will teach you two easy ways to download an exact clone of any website to your PC or Mac, and show you how to copy just the HTML and CSS of any website for use in your own code.

Things You Should Know

Copying the code from a website lets you use an existing web design as a template for your own site. This is common for beginning coders.
To clone an entire website, use a website copying tool like HTTrack on a PC.
While you can copy most of a website's structure, the site may not look the same on your computer due to complex code.
While it's common for developers to experiment with each other's code, never plagiarize content when publishing your own site.

Method 1

Method 1 of 3:

Using Chrome Developer Tools to Copy Code (Any Device)

Download Article

1
Go to the website you want to clone in Google Chrome. If you'd rather copy a website's code without downloading the entire website and its subfolders, you can do so easily in the Google Chrome web browser.
- This method is great if you're familiar with HTML and CSS and only care about the code—not archiving all of a website's content. You can copy a site's HTML and linked CSS files and create local copies of them on your computer, but you may need to modify the code slightly to fix any broken references.
- While you won't want to replicate another designer's website exactly for legal reasons, it doesn't hurt to adapt existing HTML and CSS from another site and work it into your own code.
This opens Chrome's Developer Tools, which you can use to view the code of individual elements, style sheets, and entire web pages.
Advertisement
At the top of the right panel, you'll see an icon of a square with an arrow at its bottom-right corner. If this icon is gray, click it to turn it blue. This allows you to select specific elements on the page. Now, as you scroll down the page, each element will highlight in blue and display some basic properties of that element.
4
Click an element to see some basic properties. After you click an area of the page, you'll see some code appear in the right panel, as well as some basic style information such as text color, font information, and accessibility info over the element.
- As you scroll down, you'll also see the code in the right panel change to reflect where you're pointed with the element picker.
Alternatively, you can click Ctrl + P on a PC or Cmd + P on a Mac. A list of files linked to the current page will appear, including the site's index.html or styles.css.
Look for a file called index or index.html—it'll have a blue sheet of paper icon. This displays the code of the page you're looking at right now in the upper-right corner of the window.
7
Copy the code and paste it into a text editor. Now that you have the code, you can highlight it in the "Index" window, right-click the highlighted area, and then choose Copy to copy it to your clipboard.
- For a longer page of code, click inside the box containing the code and press Ctrl + A (PC) or Cmd + A (Mac) to select all code at once. Then, right-click the selected area and choose Copy.
- Once you've copied the code, paste it into a new text file on your computer in an app like Notepad or TextEdit, then save the file with the .html file extension.
8
Copy the CSS file(s). Some websites work their CSS code into the index file itself, while others have one or more separate CSS files containing layout, style, and formatting code. Copying that code is easy:
- Click the three dots at the top-right and select Open file.
- Look for files that end with .css, such as styles.css or default.css—the index page you copied relies on code in those CSS files for layout and style.
- Select a file, then copy and paste it into a new text file on your computer. Be sure to give it the same name as it appears on the live website so the index page you downloaded knows how to reference the file.
- Additionally, note the directory the CSS files are in—if you want to be able to view the website exactly as it appears online, you'll need to mimic the file structure of the remote site or modify the HTML code so the site knows how to reference the CSS file.

Method 2

Method 2 of 3:

Using SiteSucker to Clone a Site (Mac OS)

Download Article

1
Download SiteSucker from the Mac App Store. SiteSucker is a Mac app that makes it easy to download a complete copy of a website. The app is not free, but you may find it to be worth the small fee for its convenience. You can download it from the Mac App Store.
- SiteSucker generally ignores JavaScript on websites, so sites that rely on JavaScript may not look the same after downloading. However, if you know HTML and JavaScript, you may be able to fix broken layouts and references.
With SiteSucker's default settings, every page on the website will download to your computer. SiteSucker will follow every link it finds but will only download files from the same web server.
3
Open SiteSucker and click Settings. Here you can configure custom options, including the folder you'd like to save the site to on your Mac, download limits, and file types to ignore.^{[1]XResearch source}
- To choose a destination folder, select a location from the bottom menu on the General tab.
- If you're downloading a larger site and don't want to fill up your hard drive, you can click Limit to set limits, including the maximum number of directory levels, files, and file size.^{[2]XResearch source}
- Click the File Type tab to choose which types of files to download and ignore. For example, if you don't want to download images, you can uncheck the "Images" option.^{[3]XResearch source}
- Advanced users can adjust the settings for SiteSucker, but if you just want to copy a website you don't need to worry about changing anything.
- Click OK when you're finished.
4
Click the Download button to begin saving the website. SiteSucker will start downloading all the content from the website. This can potentially take a very long time, and you can monitor the progress in the bottom part of the SiteSucker window.
- If the website requires a username and password to log in, enter it when prompted. By default, SiteSucker will check your Keychain first to see if your login information is already stored. If it isn't, you'll need to enter this information manually.^{[4]XResearch source}
5
View your copied website after the download is complete. Once you have finished downloading the site, you can view it offline just as if you were online. SiteSucker localizes the pages so they point to the downloaded files instead of the original online address. This allows you to view the entire site without an internet connection.
- Click the Log button to check for errors, such as files that could not be downloaded.

Method 3

Method 3 of 3:

Using HTTrack to Clone a Site (Windows or Linux)

Download Article

1
Download and install HTTrack. If you want to copy an entire site, or many pages from a site at once, on a Windows or Linux system, you'll want the help of an automatic site downloader. One popular website copier is HTTrack, an open-source program available for Windows and Linux. This program can copy an entire site, or even the entire internet if configured (im)properly! Download HTTrack from https://www.httrack.com.
- While you can download most of the website's structure, the downloaded files may not look exactly the same. Many modern websites use elaborate CSS and JavaScript to enhance their site layouts, and this code may not download or implement properly when saved to your computer.
HTTrack has a simple wizard that will walk you through the process of downloading a website.
3
Create a project and click Next. First, enter a name for your project, such as the name of the site you're downloading. Then, choose a folder on your computer to which you'll save the downloaded files.
- If you leave the default download location intact, HTTrack will create a new folder with your project's name at that location and save the website in that new folder.
4
Select Download web site(s) from the drop-down menu. This ensures that HTTrack will download all of the content from the website, including pictures and other files.
- Some files, such as streaming videos, will not be downloaded.
5
Enter the address you want to copy. You can enter in multiple websites if you'd like to copy multiple sites in the same project directory. By default, HTTrack will grab every possible link from that website that stays on the same web server.
- If the website you want to copy requires you to log in, use the “Add URL” button to enter the website address as well as the username and password.
- You can click the Set options… button to configure advanced options, including Scan Rules, which lets you choose certain file types and extensions to exclude. You can also set Limits, such as a maximum download rate or total maximum download size.
Once you have entered your URLs, you can begin the copying process. Depending on the size of the website, the download process can take a significant amount of time and bandwidth to complete. HTTrack will show the progress of all the files you are copying to your computer.^{[5]XResearch source}
7
Check out your copied website. Once the download is complete, you can open the copied website and browse it directly from your computer. Open any of the HTM or HTML files in a web browser to view the pages as if you were online. The files are localized by default so the links point to the downloaded files and not to the website.
- You can also open these files in a web page or text editor to see the code that makes them work.
- Click View log file to check for errors, such as files that could not be retrieved.

Community Q&A

Search

Add New Question

Question
Can I edit the name of the website and I copied and other futures, then host it again?
Arya Bigaria
Community Answer
Yes. As if you're copying the website, make sure you change a lot of it, or you will get copyrighted.
Thanks! We're glad this was helpful.
Thank you for your feedback.
If How.com.vn has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission.Support How.com.vn
Yes No
Not Helpful 15 Helpful 60
Question
How do I modify a saved webpage?
Community Answer
You can just change the HTML code! All you have to do is open it with an HTML editor or Notepad.
Thanks! We're glad this was helpful.
Thank you for your feedback.
If How.com.vn has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission.Support How.com.vn
Yes No
Not Helpful 11 Helpful 19
Question
Can I upload a downloaded website created with Word Press to another host server that has Word Press installed?
Community Answer
No, you can't. The back-end files are not copied/downloaded, and Wordpress has a PHP back-end that makes it live.
Thanks! We're glad this was helpful.
Thank you for your feedback.
If How.com.vn has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission.Support How.com.vn
Yes No
Not Helpful 22 Helpful 22

See more answers

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Video

Tips

If you use a website copying tool, the site's robots.txt file might prevent downloads of certain directories. Webmasters use robots.txt files to prevent search engines like Google from indexing parts of a website.^{[6]XResearch source} Site downloaders generally check for a robots.txt file and respect the site owner's wishes. You can usually change an option in your site downloader to ignore the robots.txt file, but do so at your own risk—sometimes these ignored directories could be huge.^{[7]XResearch source}
Thanks
Helpful0 Not Helpful0

Submit a Tip

All tip submissions are carefully reviewed before being published

Submit

Thanks for submitting a tip for review!

Warnings

Copying a website and then using it as your own is not only plagiarism, but can also be considered theft of intellectual property. Never use the content copied from another website as your own, although you can quote small portions of someone else's content if you provide attribution.
Thanks
Helpful1 Not Helpful1
Many webmasters have functions in place that will automatically notify them if their content shows up on the Web under someone else's site. Do not assume that content you can access is available for use. Always contact the webmaster or site owner before using anything for your own work.
Thanks
Helpful0 Not Helpful0