Build a Personal Website Based on Apache and HTML Using a Personal Computer

Table of contents

Step 1: Install the Apache server

1. Start and stop the Apache server

2. Edit the Apache configuration file

3. View Apache log files

4. Configure the virtual host

5. Using .htaccess files

6. Use an SSL certificate

7. Prevent DDoS attack

Step 2: Write HTML web pages

Step Three: Customize Your Website Theme

Step Four: Add Additional Pages and Content

Summarize


This article will introduce how to use Apache and HTML to build a personal website on a personal computer. No need for any experience and professional knowledge, just follow the step-by-step instructions in this article, and you can have your own personal website.

Step 1: Install the Apache server

The Apache server is an open source web server software that runs on operating systems such as Windows, Linux, and Mac OS X. First of all, we need to download the Apache server software. It is recommended to download the Windows version on the Apache Lounge official website. The download address is: https://www.apachelounge.com/download/. Select the corresponding download link according to your operating system version, and extract it to a certain directory after downloading, such as "C:\Apache24\".

Next we need to start the Apache server, open a command prompt (Windows) or a terminal (Mac/Linux), and enter the following command:

Windows:

C:\Apache24\bin\httpd.exe -k start 

Mac/Linux:

sudo /Applications/XAMPP/xamppfiles/xampp startapache 

At this time, we have successfully started the Apache server. Visit http://localhost/ to see the default page of the Apache server.

After you have installed and started the Apache server, you can manage and use it through the following steps:

1. Start and stop the Apache server

You can start and stop the Apache server by typing the following commands in the terminal:

sudo apachectl start 
sudo apachectl stop

When starting the server, you need to enter the administrator password, not when stopping the server. If you modified the Apache configuration file, you need to restart the server by typing the following command in the terminal:

sudo apachectl restart

2. Edit the Apache configuration file

The Apache configuration file is located in the "/etc/apache2" directory, you can use any text editor to edit it. For example, you can use the following command to open Apache's main configuration file:

sudo nano /etc/apache2/httpd.conf

In this file, you can modify many configuration options, such as listening ports, virtual hosts, directory access permissions, and more. After the modification is complete, you need to restart the Apache server for it to take effect.

3. View Apache log files

The Apache server will record all access logs and error logs, you can view them in the "/var/log/apache2" directory. Among them, the access log is located in the "access.log" file, and the error log is located in the "error.log" file. You can view these log files with the following command:

sudo tail -f /var/log/apache2/access.log 
sudo tail -f /var/log/apache2/error.log

Use the "tail -f" command to view the latest contents of the log file in real time.

4. Configure the virtual host

Virtual hosting is a technology that divides a server into multiple independent sites. You can add multiple virtual hosts in the Apache configuration file, and each virtual host can have its own domain name, directory, access rights, etc. For example, you can add the following code to Apache's main configuration file to configure a virtual host:

<VirtualHost *:80>
   ServerName www.example.com
   DocumentRoot /var/www/example 
</VirtualHost>

Among them, "ServerName" specifies the domain name of the virtual host, and "DocumentRoot" specifies the root directory of the virtual host. After the modification is complete, you need to restart the Apache server for it to take effect.

5. Using .htaccess files

The .htaccess file is a configuration file of the Apache server, which can be used to modify the website's directory access permissions, URL rewriting rules, error handling, and more. You can modify directory access permissions by creating a file called ".htaccess" in the root directory of your website and adding the following code in it:

Order Deny,Allow 
Deny from all 
Allow from 127.0.0.1

The above code indicates that only local IP addresses are allowed to access the directory, and other IP addresses will be denied access.

You can also use .htaccess files to rewrite URLs, for example rewrite "http://www.example.com/about.php" to "http://www.example.com/about". You can add the following code in your .htaccess file:

RewriteEngine On 
RewriteRule ^about$ about.php [L]

The above code indicates that "about" in the URL is rewritten to "about.php", and subsequent rewriting rules are stopped.

It should be noted that the use of .htaccess files may have a certain impact on the performance of the server. Therefore, you should use it only when necessary and try to avoid complicated rules.

6. Use an SSL certificate

An SSL certificate is a security protocol used to encrypt website communications. If you want to use an SSL certificate in your website, you need to add the following code to the Apache configuration file:

<VirtualHost *:443>
    ServerName www.example.com
    DocumentRoot /var/www/example
    SSLEngine on
    SSLCertificateFile /path/to/cert.pem
    SSLCertificateKeyFile /path/to/key.pem 
</VirtualHost>

Among them, "SSLEngine" specifies enabling the SSL encryption protocol, and "SSLCertificateFile" and "SSLCertificateKeyFile" specify the path of the SSL certificate and private key. After the modification is complete, you need to restart the Apache server for it to take effect.

7. Prevent DDoS attack

A DDoS attack is a type of hacking that uses a large number of fake requests to attack a website. To prevent DDoS attacks, you can use modules in the Apache server to limit the connection speed and number of connections.

To limit the connection speed you can use the "mod_evasive" module. This module can detect and block a large number of frequent connections, thus protecting websites from DDoS attacks. To use this module, you need to add the following code to your Apache configuration file:

LoadModule evasive_module modules/mod_evasive.so 

<IfModule mod_evasive20.c>
    DOSHashTableSize 3097
    DOSPageCount 5
    DOSSiteCount 50
    DOSPageInterval 2
    DOSSiteInterval 1
    DOSBlockingPeriod 10 
</IfModule>

The above code indicates that the "mod_evasive" module is enabled and various parameters of the connection speed are set. For example, "DOSPageCount" specifies the number of pages allowed to visit the website within 2 seconds, if this value is exceeded, the connection will be blocked.

To limit the number of connections you can use the "mod_limitipconn" module. This module can limit the maximum number of connections for each IP address, thus preventing a single IP address from making too many connections to the website. To use this module, you need to add the following code to your Apache configuration file:

LoadModule limitipconn_module modules/mod_limitipconn.so 

<Location /> 
    MaxConnPerIP 5 
    NoIPLimit .example.com 
</Location>

The above code indicates that the "mod_limitipconn" module is enabled, and the maximum number of connections for each IP address is set to 5. If the number of connections from an IP address exceeds this value, the connection will be blocked.

Step 2: Write HTML web pages

Next we need to write HTML pages to display on our personal website. HTML is a markup language used to create web pages. We can use any text editor to write HTML code, such as Notepad that comes with Windows, or professional code editors such as Notepad++ and Sublime Text. The following is a simple HTML code example:

<!DOCTYPE html> 
<html> 
<head>
     <title>我的个人网站</title> 
</head> 
<body>
     <h1>欢迎来到我的个人网站!</h1>
     <p>这是我第一次搭建个人网站,非常兴奋!</p> 
</body> 
</html>

The above code defines a basic HTML web page, including page title, head and body. We can add any content we want to display in the <body> tag, such as photos, articles, videos, etc.

Save the above code as the "index.html" file, and save the file in the "htdocs" directory of the Apache server, such as "C:\Apache24\htdocs\index.html". In this way, we can view our personal website by visiting http://localhost/index.html.

Step Three: Customize Your Website Theme

We can use CSS to set different themes and styles for our website. CSS is a style sheet language used to control the appearance and style of HTML pages. Here is a simple CSS styling example:

body {
     background-color: #f1f1f1; 
} 

h1 {
     color: red; }
 
p {     
font-size: 20px; 
} 

The above code defines a basic web page style, including background color, heading color and paragraph font size. We can use the <link> tag in the <head> tag to introduce CSS files. For example, we save the above CSS code as a "style.css" file and save the file in the "htdocs" directory. Next, we need to import the CSS file into the HTML file and modify the "index.html" file as follows:

<!DOCTYPE html> 
<html> 
<head>
     <title>我的个人网站</title>
     <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body>
     <h1>欢迎来到我的个人网站!</h1>
     <p>这是我第一次搭建个人网站,非常兴奋!</p> 
</body> 
</html>

In this way, we have successfully introduced custom CSS styles. We can modify the style code in the CSS file to set different themes and styles for our website.

Step Four: Add Additional Pages and Content

We can add other HTML files under the "htdocs" directory to add other pages and content to our website. For example, we can create an "about.html" file to introduce our personal information:

<!DOCTYPE html> 
<html> 
<head>
     <title>关于我</title>
     <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body>
     <h1>关于我</h1>
     <p>我是一名大学本科生,喜欢写代码和学习新技术。</p> 
</body> 
</html>

We can also add links in HTML files to jump between pages. For example, in the "index.html" file add a link to the "about.html" file:

<!DOCTYPE html> 
<html> 
<head>
     <title>我的个人网站</title>
     <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body>
     <h1>欢迎来到我的个人网站!</h1>
     <p>这是我第一次搭建个人网站,非常兴奋!</p>
     <a href="about.html">了解更多</a> 
</body> 
</html>

This way, clicking the "Learn More" link will take you to the "about.html" page.

Summarize

In this tutorial, we learned how to build a personal website on a personal computer using Apache and HTML. We can easily create our own personal website by installing the Apache server, writing HTML pages, customizing the theme of the website, and adding other pages and content. I hope this tutorial can help beginners get started quickly and provide some inspiration and inspiration.

However, this tutorial is just an introductory tutorial, introducing some basic concepts and operations. If you want to have a deeper understanding of website development and design, you also need to learn more knowledge and technologies, such as JavaScript, PHP, databases, website security and so on. At the same time, in order to make your website more perfect and professional, you need to constantly learn and try, and constantly collect user feedback and opinions to improve your website. Finally, I hope you enjoy the process of learning and creating, and successfully create your own personal website!

Guess you like

Origin blog.csdn.net/m0_61789994/article/details/128999020