{"id":512,"date":"2024-05-04T20:25:09","date_gmt":"2024-05-04T20:25:09","guid":{"rendered":"https:\/\/zahiralam.com\/blog\/?p=512"},"modified":"2024-05-04T20:28:08","modified_gmt":"2024-05-04T20:28:08","slug":"how-to-set-up-a-website-with-apache-on-ubuntu-24-04","status":"publish","type":"post","link":"https:\/\/zahiralam.com\/blog\/how-to-set-up-a-website-with-apache-on-ubuntu-24-04\/","title":{"rendered":"How to Set Up a Website with Apache on Ubuntu 24.04"},"content":{"rendered":"\n<p>Apache is one of the most popular web servers in the world, known for its versatility and compatibility with many different operating systems. Setting up a website with Apache on an Ubuntu server involves a few straightforward steps, including installing the server software, configuring virtual hosts, and ensuring proper permissions and security. \n\n\n\n<p>This tutorial will guide you through the necessary steps using Ubuntu 24.04 LTS as a reference, but the instructions are applicable to any version of Ubuntu and any Linux operating system.\n\n\n\n<p><strong>Step 1: Install Apache<\/strong>\n\n\n\n<p>First, you need to install Apache on your Ubuntu server. Open your terminal and run the following commands:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-1\">sudo apt update\nsudo apt install apache2<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#sudo%20apt%20update%0Asudo%20apt%20install%20apache2\">\n                            <button class=\"copy-button\" data-label=\"sudo apt update\nsudo apt install apache2\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>This will install Apache and all required dependencies. After the installation is complete, you can check if Apache is running with:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-2\">sudo systemctl status apache2<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#sudo%20systemctl%20status%20apache2\">\n                            <button class=\"copy-button\" data-label=\"sudo systemctl status apache2\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p><strong>Step 2: Configure Your Domain<\/strong>\n\n\n\n<p>Before proceeding, make sure your domain name (e.g., zahiralam.com) is pointing to the IP address of your server. This involves configuring DNS settings through your domain registrar.\n\n\n\n<p><strong>Step 3: Create a Directory for Your Website<\/strong>\n\n\n\n<p>Create a directory where your website\u2019s files will reside:\n\n\n\n<p>\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-3\">sudo mkdir -p \/var\/www\/html\/zahiralam<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#sudo%20mkdir%20-p%20%2Fvar%2Fwww%2Fhtml%2Fzahiralam\">\n                            <button class=\"copy-button\" data-label=\"sudo mkdir -p \/var\/www\/html\/zahiralam\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>You can now add your HTML, CSS, JavaScript, and other files to this directory.\n\n\n\n<p><strong>Step 4: Set Up Apache Virtual Host<\/strong>\n\n\n\n<p>You need to create a virtual host file for your domain. This file will direct Apache to serve your site\u2019s files when someone accesses your domain.\n\n\n\n<p>1. Create a virtual host configuration file:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-4\">sudo vim \/etc\/apache2\/sites-available\/zahiralam.com.conf<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#sudo%20vim%20%2Fetc%2Fapache2%2Fsites-available%2Fzahiralam.com.conf\">\n                            <button class=\"copy-button\" data-label=\"sudo vim \/etc\/apache2\/sites-available\/zahiralam.com.conf\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>2. Add the following configuration to the file, modifying <code>DocumentRoot<\/code> if your files are in a different directory:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-5\">&lt;VirtualHost *:80&gt;\n    ServerAdmin admin@zahiralam.com\n    ServerName zahiralam.com\n    ServerAlias www.zahiralam.com\n    DocumentRoot \/var\/www\/html\/zahiralam\n\n    &lt;Directory \/var\/www\/html\/zahiralam&gt;\n        Options Indexes FollowSymLinks\n        AllowOverride All\n        Require all granted\n    &lt;\/Directory&gt;\n\n    ErrorLog ${APACHE_LOG_DIR}\/zahiralam.error.log\n    CustomLog ${APACHE_LOG_DIR}\/zahiralam.access.log combined\n&lt;\/VirtualHost&gt;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#%3CVirtualHost%20%2A%3A80%3E%0A%20%20%20%20ServerAdmin%20admin%40zahiralam.com%0A%20%20%20%20ServerName%20zahiralam.com%0A%20%20%20%20ServerAlias%20www.zahiralam.com%0A%20%20%20%20DocumentRoot%20%2Fvar%2Fwww%2Fhtml%2Fzahiralam%0A%0A%20%20%20%20%3CDirectory%20%2Fvar%2Fwww%2Fhtml%2Fzahiralam%3E%0A%20%20%20%20%20%20%20%20Options%20Indexes%20FollowSymLinks%0A%20%20%20%20%20%20%20%20AllowOverride%20All%0A%20%20%20%20%20%20%20%20Require%20all%20granted%0A%20%20%20%20%3C%2FDirectory%3E%0A%0A%20%20%20%20ErrorLog%20%24%7BAPACHE_LOG_DIR%7D%2Fzahiralam.error.log%0A%20%20%20%20CustomLog%20%24%7BAPACHE_LOG_DIR%7D%2Fzahiralam.access.log%20combined%0A%3C%2FVirtualHost%3E\">\n                            <button class=\"copy-button\" data-label=\"&lt;VirtualHost *:80&gt;\n    ServerAdmin admin@zahiralam.com\n    ServerName zahiralam.com\n    ServerAlias www.zahiralam.com\n    DocumentRoot \/var\/www\/html\/zahiralam\n\n    &lt;Directory \/var\/www\/html\/zahiralam&gt;\n        Options Indexes FollowSymLinks\n        AllowOverride All\n        Require all granted\n    &lt;\/Directory&gt;\n\n    ErrorLog ${APACHE_LOG_DIR}\/zahiralam.error.log\n    CustomLog ${APACHE_LOG_DIR}\/zahiralam.access.log combined\n&lt;\/VirtualHost&gt;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>3. Save and close the file.\n\n\n\n<p><strong>Step 5: Enable the Site<\/strong>\n\n\n\n<p>Enable your new site configuration and reload Apache to apply changes:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-6\">sudo a2ensite zahiralam.com.conf\nsudo systemctl reload apache2<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#sudo%20a2ensite%20zahiralam.com.conf%0Asudo%20systemctl%20reload%20apache2\">\n                            <button class=\"copy-button\" data-label=\"sudo a2ensite zahiralam.com.conf\nsudo systemctl reload apache2\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p><strong>Step 6: Adjust Permissions and Ownership<\/strong>\n\n\n\n<p>Although your site might work without this step, it\u2019s a good practice to set the proper permissions and ownership to ensure security and proper server operation:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-7\">sudo chown -R www-data:www-data \/var\/www\/html\/zahiralam\nsudo chmod -R 755 \/var\/www\/html\/zahiralam<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#sudo%20chown%20-R%20www-data%3Awww-data%20%2Fvar%2Fwww%2Fhtml%2Fzahiralam%0Asudo%20chmod%20-R%20755%20%2Fvar%2Fwww%2Fhtml%2Fzahiralam\">\n                            <button class=\"copy-button\" data-label=\"sudo chown -R www-data:www-data \/var\/www\/html\/zahiralam\nsudo chmod -R 755 \/var\/www\/html\/zahiralam\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p><strong>Step 7: Test Your Website<\/strong>\n\n\n\n<p>Open a web browser and navigate to zahiralam.com. You should see your website live. If not, check Apache\u2019s error logs for troubleshooting:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-8\">less \/var\/log\/apache2\/zahiralam.error.log<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#less%20%2Fvar%2Flog%2Fapache2%2Fzahiralam.error.log\">\n                            <button class=\"copy-button\" data-label=\"less \/var\/log\/apache2\/zahiralam.error.log\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<p>Setting up a website with Apache on Ubuntu is a process that can be completed in just a few steps. By following this guide, you can host your own static website and gain the flexibility to manage it on your own server. Always remember to keep your server and software updated to protect against vulnerabilities.\n","protected":false},"excerpt":{"rendered":"<p>Apache is one of the most popular web servers in the world, known for its versatility and compatibility with many different operating systems. Setting up [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[74],"tags":[13,66,73],"class_list":["post-512","post","type-post","status-publish","format-standard","hentry","category-web-development","tag-apache","tag-ubuntu-24-04","tag-virtual-host"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/comments?post=512"}],"version-history":[{"count":2,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/512\/revisions"}],"predecessor-version":[{"id":514,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/512\/revisions\/514"}],"wp:attachment":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/media?parent=512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/categories?post=512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/tags?post=512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}