How to create a website without an internet connectio

Hello!
My name is cocoro, meaning heart.
I enjoy creating websites using various resources.

On this page, we mainly cover the following topics.

I would like to share some information on these topics. I recently discovered this method and decided to document it as a personal reference, in case it might be useful to someone someday.

I create my website without using Wordpress or any other platform. I use a text editor such as Notepad to create HTML and CSS files.These files are then directly uploaded to the server using software that supports FTP.

There are two main points to consider when creating a site offline.

I believe these are the following are the two main points. Looking back, I realized that by simply dragging and dropping the index.html file into an offline browser, I could display the site.

Note: I think it's better not to share the local URL (path) with others.

“This page contains promotional content.”

Below is a table of contents. You can jump to any item from the list.

≪ Jump to a section ≫

• 　　　　　　　　　　　　　　
• Creating a new folder
• ↓
• Store all site data
• ↓
• Load on browser screen
• ↓
• Non-file:/// references
• ↓
• To Absolute Reference
• ↓
• Mark the include range
• ↓
• Create original pages
• ↓
• Basic method of making
• ↓
• Recommended of points
• 　　　　　　　　　　　　　　

Creating a new folder

In this method, you directly write the code for HTML, CSS, and so on. in Notepad or a similar text editor, change the extension if necessary, and upload it directly to the server. I use a template from Template-Party.

First, create a folder.
This folder can be anywhere on your computer. If you downloaded a template, you probably only need to change the template folder to your preferred folder name. You can create a new folder with any name on the C: drive or desktop of your computer. However, if your site contains a lot of data, it might be better to store it on your C: drive or D: drive.

Next, place the folder at the root level of the directory hierarchy as possible, and create a shortcut on the desktop. The reason is to reduce the load on the CPU, and it will be easier to work with shorter URLs (paths). If you have downloaded a template, it would be a good idea to rename the folder to something simple and easy to understand, such as aaa. The folder name aaa will be the domain name.

For example, create a folder called aaa on the desktop of your PC, and create a folder called "all-html" within it. Let's assume that each of the following contents is included.

・ ABC.html file

・ ABCD.html file

・ ABCDE.html file

And, Suppose you have organized all your HTML pages as shown below.

Create an 'aaa' folder →

In the 'all-html' folder →

Contains the ABC.html file.

Within the ‘aaa’ folder, there is an ‘all-html’ folder that contains the ‘ABC.html’ file. In that case, I think the path will be as follows.

file:///C:/Users/○○○/Desktop/aaa/all-html/ABC.html

I think it will be a URL (path) like this.
(The /○○○/ part and URL will change depending on the person's PC)

At this point, even if you specify the path file:///C:/Users/〇〇〇/Desktop/aaa/all-html/ABC.html as the reference destination, it should not be displayed. If you specify it as a reference destination, the path displayed is a URL other than file:///

C:/Users/○○○/Desktop/aaa/all-html/ABC.html

This is the path.
This seems to be an absolute reference URL (path). For more information on this, see Non-file:/// references

As an aside, I don't think the name of this folder will affect you much until you upload it to the server. However, any name other than the first folder (folder or file name other than the aaa folder) will be the URL of the site, so if you give it an appropriate name, you may get into trouble later.

In other words, maybe HTML's domain and this first folder's name are similar. In other words, the HTML domain is probably the name of this first folder. On the server, after acquiring a domain, the part like "pray-power-is-god-and-cocoro.com" becomes the domain name. On the other hand, in the above example, on the PC, aaa(given name) is the domain. / corresponds to a directory - a hierarchy of folders. If you think about it this way, the question "What is a domain?" may be simple and easy to understand.

Store all site data

Download templates in Notepad or create HTML and CSS directly to store all your site data inside the aaa folder.

If you've downloaded the template, all your site data should already be in that folder, so you can use it as is. It is recommended to use a simple and easy-to-understand name such as aaa or bbb as it will be easier to create.

If you are not using templates, place all site data such as HTML, CSS, JavaScript, jQuery, images, etc. in folders like aaa or bbb. One of the key points when creating a site offline was the following.

"All site data should be stored in one folder."

This was one of the key points. After some research, it appears that you can’t browse individual local folders or files when you are offline. However, if all the files that make up the site, including index.html, were in a single folder, the contents of that folder were referenced.

After confirming this, I dragged and dropped index.html into an offline browser and the site was displayed, and the JavaScript and jQuery related functions also worked without any problems. This alone was surprising, but after trying various things, I found out that Google Web Fonts can also be used. I don't know how it loads offline, but browsers are amazing...I'm in awe.

Regarding web fonts, I was able to use them even after downloading them, so I don't think there is any problem. I tried it with a template that hadn’t been loaded, and JavaScript and jQuery were working fine, so it’s probably not a problem

There are various types of browsers such as Chrome, Safari, Edge, etc., but this method seems to work with any browser. It will be displayed when you drag and drop the created index.html file or ○○○.html file into the browser. Of course, you can also move from the menu.

load on browser screen

Drag and drop the HTML files, such as the index.html file, CSS, and other created HTML files, onto the minimized offline browser screen and check if they are displayed correctly.

If you download the template and do not change the location (directory) of the folders or files in it, you may be able to drag and drop the HTML file into your browser to display it correctly. When I applied the above reference rule, it displayed correctly, even if I moved the location of the file.

Non-file:/// references

The second major point mentioned at the beginning is

Reference URL must be a URL other than file:///

For example,

Create a folder
on your desktop.

Set the folder name to aaa.

Storing index.html to aaa.

In this case, drag and drop the index.html file into the browser, and the following URL will be displayed in the search window where the URL is displayed.

file:///C:/Users/○○○/Desktop/aaa/index.html

I think you will see a URL like this. Remove the file:/// part from this displayed URL, then copy and paste the remaining part of the URL into your CSS file as a relative or absolute reference.

file:///C:/Users/○○○/Desktop/aaa/index.html

↓ Delete only file:/// ↓

C:/Users/○○○/Desktop/aaa/index.html

Applying referral rules in this way loads the CSS, JS, images, and other data needed to display your site. We will explain the following items in detail with images.

Other than file:///

First, open your browser in offline state as shown in the image below.

The language in the image is Japanese. The main message displayed is “Not connected to the Internet”.

In this state, if you drag and drop the index.html file in the aaa folder created on the desktop to the browser, a URL like the image below will be displayed in the URL display list of the search window.

(The ○○○ part and URL differ depending on the person's PC)

When you click on the URL in the search window, you should see a URL like the one below.

file:///C:/Users/○○○/Desktop/aaa/index.html

If you copy and paste this URL as is, it will not be recognized, so please delete only the file:/// part.

C:/Users/○○○/Desktop/aaa/index.html

By doing this, it becomes an absolute reference URL that can be referenced when offline, and it becomes a URL (path) that is loaded.

You can use relative references, such as .. /, but absolute references are recommended. This is because when you connect to the Internet and publish your site, I think it is more efficient to use the replace function to convert in bulk. Absolute references can be consistent.
(「.. /" and "./" are not of the same type)

For example, suppose you upload a CSS file using the following absolute references.

<link rel="stylesheet" href="C:/Users/○○○/Desktop/aaa/css/style.css">

This absolute reference means that the loaded CSS or HTML file will be visible no matter where you navigate to it in the folder. You can use a similar method for JS, images, etc. This absolute reference is easy to create and is useful if you want to use a replace feature such as Notepad to convert local references in bulk. For instance

C:/Users/○○○/Desktop/aaa/

Only this part is called,

Replace it to https:// (your domain)/.

I think it would be efficient to convert the entire page to the above URL in one go. The folder name can be aaa, test, site, or any other name you like. A short and simple name may be better. Even if you move the aaa folder, which contains the data for this entire site, to the C drive or D drive, the procedure is the same, only the URL (path) will change.

If you don't know the URL (path) of the file you want to see, you can find it by dragging and dropping an image such as blue-sky.jpg into your browser. In this case, the following URL will be displayed in the search window.

file:///C:/Users/○○○/Desktop/aaa/□□□/images/blue-sky.jpg

Since this type of URL (path) is displayed, you can easily delete just the “file:///” part and then copy and paste the URL. I think this reference rule is very important because if you move a file or folder without using an absolute reference, CSS may not be applied or the display may be distorted.

For example, If you create a folder named “free” inside the aaa folder and a file named about.html inside that, the reference path would be as follows.

file:///C:/Users/○○○/Desktop/aaa/free/about.html

↓

C:/Users/○○○/Desktop/aaa/free/about.html

The absolute reference URL (path) that this reference rule applies to is the URL without the file:/// part. If you don't know this path, the process for knowing it is the same for CSS and JS. Just follow the folder and drag and drop the CSS file into the browser, and the URL (path) will be displayed.

(Move from aaa folder to "free" folder)

(Drag and drop the "about.html" file into your browser)

(The reference URL (path) will be displayed in the search window. The same applies to CSS and JS)

To Absolute Reference

The reason for using an absolute reference is that you might want to replace only one keyword when you create the original document that you plan to copy. Relative references are displayed without any problem, but if it is a single keyword such as an absolute reference, it will be easier to change the reference destination such as CSS and JavaScript at once with "Replace" in Notepad or a text editor before publishing.For relative references, there are types such as "../", "./", and "/", which can complicate substitutions.

I was confused at first about references such as relative references, but little by little I feel like I'm starting to understand the rules for how to make references. For example, if you want to load style.css one level below the relative reference in the index.html file, do the following in the index.html file:

If you write it like this, the CSS will be loaded into the index.html file. If the index.html file is below the root level, then a relative reference one level up would look like this.

If you write it like this, the CSS will be loaded into the index.html file. I think it means that it is OK as long as these codes are written in the file you want to display, whether it is an absolute reference or a relative reference. I'm guessing that the only difference is whether the location of the data to be displayed (directory, reference, URL, path) is an absolute reference or a relative reference.

Mark the include range

I've tried various methods, but it seems that PHP and SSI include can't be used offline. So, if you want to use PHP or SSI includes as an alternative before publishing them online, it's a good idea to mark the scope of the include first. The code below is for an SSI include and is executed in a slightly different way than a PHP include.

Can't methods such as SSI include be used offline?

I tried various things, but PHP and SSI include were also impossible due to server problems. I looked it up and it seems that it can be implemented using JavaScript, but it seems to require a lot of preparation. For example, we needed a mechanism like a virtual server dedicated to offline loading, so I gave up. I am keenly aware of my lack of knowledge...

@imports will be deprecated in the future, so I tried using an iframe. However, this method had only a limited effect. If you use an iframe, the display might be disrupted, so I thought it would be better to comment it out and mark the range to include. For example, if you have the following SSI include ranges:

I thought it would be easier to use comments like this to mark the range at a glance when including SSI. Since the comments are not displayed, it is easy to copy and paste “inc-header.shtml” into the name of the shtml file.

By the way, the comment out tag on the HTML side is

<!--　--> ← This tag.

<!-- (Free Comment) -->

If you use it as described above, you can also use it to add notes in an HTML file. However, before you actually publish it on the web, it's a good idea to make sure it doesn't contain any personal or sensitive information. This is because anyone can see the code and commented notes in the page's source.

Create original pages

Preparing a manuscript for each page means creating an original copy of the entire site with only one HTML file marked in the include range. Before contracting a rental server and publishing it on the web, you need to create an original that can be used in common on each page. This is because SSI include is not possible offline, so for example, if you create a free page for each page, it will be difficult when you want to rewrite or modify it later.

I thought it would be more efficient to create an original file for each page and copy it. If you have the original, you only need to make one change. And I think it's easier to copy and paste only the parts of the content (text and articles) that you have created individually into the original. You can create it individually in a text file in Notepad and copy and paste it in the range of <body>.</body>.

If you plan to include SSI, it will be easier to understand when copying and pasting by marking the start and end points of SSI include on each page. This is where the absolute reference code above comes in handy. If you specify a reference such as CSS or JS as an absolute reference, you can create a file or folder in any directory by simply replacing "C:/Users/~" with a URL starting with "https://~". Of course, even if you change the location of the file, it will be referenced. Similarly, it is useful to specify it by an absolute reference, such as SSIinclude.

In the case of relative references, if you organize empty pages into folders, the reference destination will change. Therefore, for files with different hierarchies other than the index.html file, it may be useful to have two types of pages: index.html and .html . I'm not sure if relative or absolute reference is better. Google says that it is okay to specify it by absolute reference, so there should be no problem. (Maybe...)

My perception of relative references is as follows:

It is a recognition that such a symbol should be placed at the beginning of the reference path. There is a site that explains these in detail, so I would like you to search for "What is HTML relative reference" etc.

Basic method of making

For now, I would like to provide a brief overview of how to create it on an offline PC. First, open a text editor, such as Notepad. For example, suppose you write the following HTML in the notepad.

Write code like this, and when you save it, select UTF-8 as the save format and name it index. Then change the extension from .txt to .html and place it at the root of the folder that contains all the data for the site. (index.html is completed)

* It is important to note that UTF-8 is not UTF-8 (with BOM) *

If there is a folder named aaa, place the "index.html" file in that folder immediately after opening the aaa folder. This is because there is a rule to place index.html directly under the root domain. Therefore, place index.html immediately after opening the aaa folder, and not inside other folders such as "free" or "blog". Then open Notepad or something like that and write code like this.

Write code like this, select UTF-8, and save it as you did before. Then rename it to style, change the extension from .txt to .css, and place it at the root of the folder that contains all the data for the site.(The style .css is complete)

Then, if you apply the local reference rules mentioned above, images, JS, etc. will be referenced in the same way and the site will be displayed. I think it's OK to create one from scratch, but I personally think it's faster to connect to Wi-Fi and download the template.

Recommended of points

It was much later when I learned about CSS resets, CSS and HTML errors, and PageSpeedInsights speed checks. I was keenly aware that I should have known about it from the beginning. Because it was very difficult to fix.

Therefore, I would like to introduce some recommended steps that you should take first.

If you do these things, you will have an easier time later. SSL seems to vary from server to server, but it also eliminates the need for redirects, so it's best to set it to https:// before requesting your page to be indexed from the Google Console. It may save your time.

The presence or absence of errors in HTML and CSS is also related to the score of PageSpeed Insights, so from an SEO perspective, we recommend doing the following two things from the beginning of your site creation:

HTML and CSS error checking

PageSpeed Insights Score Improvements

It was written that the W3C's online error checking service will be discontinued, so I will post the URL of another checking tool, although it is only HTML.

I was considering whether I could create a site offline using these methods. I think the key point was the reference rule. When you are offline, the URL does not start with https://~. A other than file:/// URL was required. If you pay attention to this, the CSS will also be applied properly. I would like to thank the browser.

I think there are some disadvantages to creating a site offline, but here are the advantages:

・ Save on data charges

・ You can save on the
　 contract fee of the
　 rental server.

・ Save on domain
　 renewal fees

・ etc

It may be temporary, but we believe it has these benefits.Then, you can take the time to create your site slowly and carefully.That way, you might be able to create a lot of high-quality pages, and as soon as your pages are published, you may be more likely to submit to Google AdSense for approval.

When the site is completed and published on the Internet, it seems that you can save further costs by connecting the smartphone and PC with Wi-Fi only when uploading to the server. You can also save more by renting Wi-Fi at convenience stores or train stations, or connecting your laptop to the internet.

However, there are some security concerns when using public Wi-Fi to connect to the Internet. For example, if your computer or smartphone is connected to free Wi-Fi such as public Wi-Fi, if you access a URL that starts with http instead of https "http://○○○/△△△～", the URL Sites that begin with http will not be encrypted . Please be careful when entering or submitting the following information on sites that begin with http.

・ Credit Card Number

・ PIN number

・ Login ID information

・ Login password

・ Important Information,
　 etc.

If you enter each of these information and send it with a Wi-Fi signal, it may be easier for a third party to obtain the information. Of course, there are sites that start with http that have a lot of great information. However, not all of them may be sites created by sensible third parties. When sending important information, it is safer to connect to a trusted communication agency. It's a case-by-case basis, but I think it's possible to create a site offline if you have the flexibility.

What did you think?
I hope that the information on this page will be of some help to you.

There's still a lot I don't know about HTML, and I plan to continue to learn more. In the process, we were able to create a site with the help of each site. I am grateful to each site.

I wonder if it would have been easier if I had done this from the beginning... I thought, so I made a note of it as a memorandum. I hope that the information on this page will be useful to you.

It was an offline catalog of a certain cocoro
（*＾ω＾）

If you liked the information on this page or found it useful, I would be happy if you clicked on the ad that interests you. (｡･ω･｡)

It will motivate me to write articles!
Thank you in advance.
(* . .)⁾⁾