{"id":1,"date":"2023-11-19T17:12:57","date_gmt":"2023-11-19T17:12:57","guid":{"rendered":"http:\/\/tech.upcode.in\/?p=1"},"modified":"2023-11-24T01:19:45","modified_gmt":"2023-11-24T01:19:45","slug":"hello-world","status":"publish","type":"post","link":"https:\/\/tech.upcode.in\/?p=1","title":{"rendered":"How to deploy a static website?"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>What Is a Static Website?<\/strong><\/h2>\n\n\n\n<p>A static website is&nbsp;a website that displays the same content for every viewer.&nbsp;The content is stored on a web server and is coded in HTML, CSS, and JavaScript.&nbsp; Ideally, the content will not change on the page until the site developer makes any changes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How Do Static Websites Work?<\/strong><\/h2>\n\n\n\n<p>Static websites serve pre-built HTML, CSS, and JavaScript files directly to the user&#8217;s browser without needing server-side processing or database queries. Unlike dynamic websites that generate content on the server in response to user requests, static websites deliver fixed, unchanging content to all users.<\/p>\n\n\n\n<p>The static website files can be hosted on a web server. This server can be a traditional web server, a content delivery network (CDN), or a specialised static site hosting service.<\/p>\n\n\n\n<p>Upon receiving the request, the server simply returns the requested files to the user&#8217;s browser. Since the content is pre-built and doesn&#8217;t change dynamically, the server doesn&#8217;t need to perform any server-side processing.<\/p>\n\n\n\n<p>The user&#8217;s browser receives the HTML, CSS, and JavaScript files and renders the webpage locally. The browser handles any client-side interactivity or dynamic behaviour using JavaScript.<\/p>\n\n\n\n<p>The browser is responsible for showing the visual appearance to the user according to the file contents.<\/p>\n\n\n\n<p>The complete webpage is loaded in the user&#8217;s browser, and they can navigate between different pages by clicking links or interacting with the site. The website tends to load quickly since there&#8217;s no server-side processing during user interactions.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"803\" height=\"1024\" src=\"https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/static-website-flow-803x1024.png\" alt=\"\" class=\"wp-image-11\" srcset=\"https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/static-website-flow-803x1024.png 803w, https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/static-website-flow-235x300.png 235w, https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/static-website-flow-768x979.png 768w, https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/static-website-flow-1205x1536.png 1205w, https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/static-website-flow.png 1280w\" sizes=\"(max-width: 803px) 100vw, 803px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Advantages of using static Websites:<\/strong><\/h2>\n\n\n\n<ul>\n<li><strong>Speed:<\/strong> Static websites are generally faster because no server-side processing or database queries are involved.<\/li>\n\n\n\n<li><strong>Simplicity:<\/strong> They are easier to develop and maintain since they don&#8217;t require a server-side codebase or database management.<\/li>\n\n\n\n<li><strong>Security:<\/strong> With fewer components and no server-side processing, static websites can be more secure and less vulnerable to certain types of attacks.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Limitations:<\/strong><\/h2>\n\n\n\n<ul>\n<li><strong>Interactivity:<\/strong> Static websites are limited in terms of dynamic content and user interactivity since most of the processing happens on the client side.<\/li>\n\n\n\n<li><strong>Scalability:<\/strong> Managing content on a large scale can become cumbersome as each change requires manual updates to the static files.<\/li>\n\n\n\n<li><strong>Dynamic Content:<\/strong> If your website requires real-time or frequently updated content, a static approach might not be suitable.<\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>What are the deployment options?<\/strong><\/h1>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>GitHub Pages<\/strong><\/h2>\n\n\n\n<p>GitHub Pages is&nbsp;a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website.<\/p>\n\n\n\n<p><strong>Step 1: Create Your Static Website<\/strong><\/p>\n\n\n\n<p><strong>Step 2: Create a GitHub Repository<\/strong><\/p>\n\n\n\n<ul>\n<li><strong>Sign in to GitHub.<\/strong> If you don&#8217;t have a GitHub account, sign up at <a href=\"https:\/\/github.com\/\">GitHub<\/a>.<\/li>\n\n\n\n<li><strong>Create a New Repository:<\/strong>\n<ul class=\"has-medium-font-size\">\n<li>Click on the &#8220;+&#8221; in the top right corner of the GitHub homepage.<\/li>\n\n\n\n<li>Choose &#8220;New repository.&#8221;<\/li>\n\n\n\n<li>Enter a repository name.<\/li>\n\n\n\n<li>Optionally, add a description.<\/li>\n\n\n\n<li>Click &#8220;Create repository.&#8221;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"367\" data-id=\"12\" src=\"https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-create-respository-1024x367.png\" alt=\"\" class=\"wp-image-12\" srcset=\"https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-create-respository-1024x367.png 1024w, https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-create-respository-300x108.png 300w, https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-create-respository-768x275.png 768w, https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-create-respository-1536x550.png 1536w, https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-create-respository.png 2026w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<p><strong>Step 3: Push Your Code to GitHub<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-d9b184a9fb7789c8a0f9e45cc9f51ad5\"><code><code># Navigate to your project folder<br>cd \/path\/to\/my-static-website<br><br># Initialize a new Git repository<br>git init<br><br># Add all files to the repository<br>git add .<br><br># Commit the changes<br>git commit -m \"Initial commit\"<br><br># Add the GitHub repository as a remote<br>git remote add origin &lt;https:\/\/github.com\/&gt;&lt;your-username&gt;\/&lt;repository-name&gt;.git<br><br># Push the code to GitHub<br>git push -u origin main  # Use \"master\" instead of \"main\" if you're using an older Git version<br><\/code><\/code><\/pre>\n\n\n\n<p><strong>Step 4: Configure GitHub Pages<\/strong><\/p>\n\n\n\n<ol>\n<li class=\"has-medium-font-size\"><strong>Go to Repository Settings:<\/strong>\n<ul>\n<li>Open your GitHub repository.<\/li>\n\n\n\n<li>Click on the &#8220;Settings&#8221; tab.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Scroll Down to the GitHub Pages Section:<\/strong>\n<ul>\n<li>In the &#8220;GitHub Pages&#8221; section, you&#8217;ll see a dropdown menu for branch selection. Choose the branch you want to deploy (usually <strong><code>main<\/code><\/strong> or <strong><code>master<\/code><\/strong>).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Save the Changes:<\/strong>\n<ul>\n<li>GitHub Pages will provide a link to your deployed site (e.g., <strong><code>https:\/\/&lt;your-username&gt;.github.io\/&lt;repository-name&gt;<\/code><\/strong>).<\/li>\n\n\n\n<li>Save the changes.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>Step 5: Access Your Deployed Site<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\">After a few moments, your static website will be live on GitHub Pages.<\/p>\n\n\n\n<p class=\"has-medium-font-size\">You can access it using the provided link, and changes you make to the repository will automatically trigger updates to the deployed site.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"371\" src=\"https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-done-1024x371.png\" alt=\"\" class=\"wp-image-13\" srcset=\"https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-done-1024x371.png 1024w, https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-done-300x109.png 300w, https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-done-768x278.png 768w, https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-done.png 1528w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\ud83d\udca1 Refer: <a href=\"https:\/\/docs.github.com\/en\/pages\/getting-started-with-github-pages\/creating-a-github-pages-site\">Official documentation<\/a><\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>Netlify<\/strong><\/h1>\n\n\n\n<p><strong>Step 1: Create Your Static Website<\/strong><\/p>\n\n\n\n<p><strong>Step 2: Create a GitHub Repository<\/strong><\/p>\n\n\n\n<ul>\n<li class=\"has-medium-font-size\"><strong>Sign in to GitHub.<\/strong> If you don&#8217;t have a GitHub account, sign up at <a href=\"https:\/\/github.com\/\">GitHub<\/a>.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Create a New Repository:<\/strong>\n<ul>\n<li>Click on the &#8220;+&#8221; in the top right corner of the GitHub homepage.<\/li>\n\n\n\n<li>Choose &#8220;New repository.&#8221;<\/li>\n\n\n\n<li>Enter a repository name.<\/li>\n\n\n\n<li>Optionally, add a description.<\/li>\n\n\n\n<li>Click &#8220;Create repository.&#8221;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"367\" data-id=\"12\" src=\"https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-create-respository-1024x367.png\" alt=\"Create a new repository in Github\" class=\"wp-image-12\" srcset=\"https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-create-respository-1024x367.png 1024w, https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-create-respository-300x108.png 300w, https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-create-respository-768x275.png 768w, https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-create-respository-1536x550.png 1536w, https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-create-respository.png 2026w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<p><strong>Step 3: Push Your Code to GitHub<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-d370101c87db86b858a61a0682eab679\"><code># Navigate to your project folder\ncd \/path\/to\/my-static-website\n\n# Initialize a new Git repository\ngit init\n\n# Add all files to the repository\ngit add .\n\n# Commit the changes\ngit commit -m \"Initial commit\"\n\n# Add the GitHub repository as a remote\ngit remote add origin &lt;https:\/\/github.com\/&gt;&lt;your-username&gt;\/&lt;repository-name&gt;.git\n\n# Push the code to GitHub\ngit push -u origin main  # Use \"master\" instead of \"main\" if you're using an older Git version\n<\/code><\/pre>\n\n\n\n<p><strong>Step 4: Sign Up for Netlify<\/strong><\/p>\n\n\n\n<ol>\n<li><strong>Sign up:<\/strong> If you don&#8217;t have a Netlify account, sign up at <a href=\"https:\/\/www.netlify.com\/\">Netlify<\/a>.<\/li>\n\n\n\n<li><strong>Log in:<\/strong> Log in to your Netlify account.<\/li>\n<\/ol>\n\n\n\n<p><strong>Step 4: Connect to GitHub<\/strong><\/p>\n\n\n\n<ol>\n<li class=\"has-medium-font-size\"><strong>Create a New Site:<\/strong>\n<ul>\n<li>On the Netlify dashboard, click &#8220;New site from Git.&#8221;<\/li>\n\n\n\n<li>Choose your Git provider (GitHub, GitLab, Bitbucket).<\/li>\n\n\n\n<li>Authorize Netlify to access your repositories.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Select Your Repository:<\/strong>\n<ul>\n<li>Choose the repository you created earlier.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Configure Your Settings:<\/strong>\n<ul>\n<li>Set the publish directory to the folder containing your files (e.g., <strong><code>public<\/code><\/strong>).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Deploy Site:<\/strong>\n<ul>\n<li>Click &#8220;Deploy site.&#8221;<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 5: Access Your Deployed Site<\/strong><\/h3>\n\n\n\n<p class=\"has-medium-font-size\">Once the deployment is complete, Netlify will provide a unique URL for your site (e.g., <strong><code>https:\/\/yoursite.netlify.app<\/code><\/strong>). You can access your deployed site using this link.<\/p>\n\n\n\n<p class=\"has-medium-font-size\">\ud83d\udca1 Refer to the <a href=\"https:\/\/docs.netlify.com\/welcome\/add-new-site\/\">official documentation<\/a> when you are stuck.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>Vercel<\/strong><\/h1>\n\n\n\n<p><strong>Step 1: Create Your Static Website<\/strong><\/p>\n\n\n\n<p><strong>Step 2: Create a GitHub Repository<\/strong><\/p>\n\n\n\n<ul>\n<li class=\"has-medium-font-size\"><strong>Sign in to GitHub<\/strong> If you don&#8217;t have a GitHub account, sign up at <a href=\"https:\/\/github.com\/\">GitHub<\/a>.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Create a New Repository:<\/strong>\n<ul>\n<li>Click on the &#8220;+&#8221; in the top right corner of the GitHub homepage.<\/li>\n\n\n\n<li>Choose &#8220;New repository.&#8221;<\/li>\n\n\n\n<li>Enter a repository name.<\/li>\n\n\n\n<li>Optionally, add a description.<\/li>\n\n\n\n<li>Click &#8220;Create repository.&#8221;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"367\" src=\"http:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-create-respository-1024x367.png\" alt=\"Create a new repository in Github\" class=\"wp-image-12\" srcset=\"https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-create-respository-1024x367.png 1024w, https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-create-respository-300x108.png 300w, https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-create-respository-768x275.png 768w, https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-create-respository-1536x550.png 1536w, https:\/\/tech.upcode.in\/wp-content\/uploads\/2023\/11\/github-create-respository.png 2026w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Step 3: Push Your Code to GitHub<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-d370101c87db86b858a61a0682eab679\"><code># Navigate to your project folder\ncd \/path\/to\/my-static-website\n\n# Initialize a new Git repository\ngit init\n\n# Add all files to the repository\ngit add .\n\n# Commit the changes\ngit commit -m \"Initial commit\"\n\n# Add the GitHub repository as a remote\ngit remote add origin &lt;https:\/\/github.com\/&gt;&lt;your-username&gt;\/&lt;repository-name&gt;.git\n\n# Push the code to GitHub\ngit push -u origin main  # Use \"master\" instead of \"main\" if you're using an older Git version\n<\/code><\/pre>\n\n\n\n<p><strong>Step 3: Sign Up for Vercel<\/strong><\/p>\n\n\n\n<ol>\n<li class=\"has-medium-font-size\"><strong>Sign up:<\/strong> If you don&#8217;t have a Vercel account, sign up at <a href=\"https:\/\/vercel.com\/\">Vercel<\/a>.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Log in:<\/strong> Log in to your Vercel account.<\/li>\n<\/ol>\n\n\n\n<p><strong>Step 4: Import Your Project<\/strong><\/p>\n\n\n\n<ol>\n<li class=\"has-medium-font-size\"><strong>Import Project:<\/strong>\n<ul>\n<li>In your Vercel dashboard, click on the &#8220;Import Project&#8221; button.<\/li>\n\n\n\n<li>Choose your Git provider (GitHub, GitLab, Bitbucket).<\/li>\n\n\n\n<li>Authorize Vercel to access your repositories.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Select Your Repository:<\/strong>\n<ul>\n<li>Choose the repository you created earlier (<strong><code>my-static-website<\/code><\/strong>).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Configure Your Settings:<\/strong>\n<ul>\n<li>Vercel will automatically detect your project settings.<\/li>\n\n\n\n<li>Set the output directory to the folder containing your files (e.g., <strong><code>public<\/code><\/strong>).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Deploy Project:<\/strong>\n<ul>\n<li>Click &#8220;Deploy&#8221; to deploy your project.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>Step 5: Access Your Deployed Site<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\">Once the deployment is complete, Vercel will provide a unique URL for your site (e.g., <strong><code>https:\/\/yoursite.vercel.app<\/code><\/strong>). You can access your deployed site using this link.<\/p>\n\n\n\n<p class=\"has-medium-font-size\">\ud83d\udca1 Refer to the <a href=\"https:\/\/vercel.com\/docs\/getting-started-with-vercel\">official documentation<\/a> when you are stuck.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>AWS S3<\/strong><\/h1>\n\n\n\n<p><strong>Step 1: Create Your Static Website<\/strong><\/p>\n\n\n\n<p><strong>Step 2: Sign in to AWS and Open S3 Console<\/strong><\/p>\n\n\n\n<ol>\n<li class=\"has-medium-font-size\"><strong>Sign in to AWS:<\/strong> If you don&#8217;t have an AWS account, sign up at <a href=\"https:\/\/aws.amazon.com\/\">AWS<\/a>.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Open S3 Console:<\/strong>\n<ul>\n<li>Navigate to the AWS Management Console.<\/li>\n\n\n\n<li>In the &#8220;Find Services&#8221; search bar, type &#8220;S3&#8221; and select the S3 service.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>Step 3: Create an S3 Bucket<\/strong><\/p>\n\n\n\n<ol>\n<li class=\"has-medium-font-size\"><strong>Create Bucket:<\/strong>\n<ul>\n<li>Click the &#8220;Create bucket&#8221; button.<\/li>\n\n\n\n<li>Enter a globally unique bucket name (e.g., <strong><code>my-static-website-bucket<\/code><\/strong>).<\/li>\n\n\n\n<li>Choose the AWS region for your bucket.<\/li>\n\n\n\n<li>Click &#8220;Next.&#8221;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Configure Options:<\/strong>\n<ul>\n<li>Leave the default settings and click &#8220;Next.&#8221;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Set Permissions:<\/strong>\n<ul>\n<li>Enable &#8220;Block all public access&#8221; for security (you&#8217;ll override this for website hosting).<\/li>\n\n\n\n<li>Click &#8220;Next.&#8221;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Review and Create:<\/strong>\n<ul>\n<li>Review your settings and click &#8220;Create bucket.&#8221;<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>Step 4: Upload Your Files<\/strong><\/p>\n\n\n\n<ol>\n<li class=\"has-medium-font-size\"><strong>Open Bucket:<\/strong>\n<ul>\n<li>In the S3 console, click on your newly created bucket.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Upload Files:<\/strong>\n<ul>\n<li>Click &#8220;Upload.&#8221;<\/li>\n\n\n\n<li>Add files or drag and drop your static website files.<\/li>\n\n\n\n<li>Click &#8220;Upload.&#8221;<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>Step 5: Configure Bucket for Website Hosting<\/strong><\/p>\n\n\n\n<ol>\n<li class=\"has-medium-font-size\"><strong>Properties Tab:<\/strong>\n<ul>\n<li>In the S3 console, select the &#8220;Properties&#8221; tab for your bucket.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Static Website Hosting:<\/strong>\n<ul>\n<li>Click &#8220;Static website hosting.&#8221;<\/li>\n\n\n\n<li>Choose &#8220;Use this bucket to host a website.&#8221;<\/li>\n\n\n\n<li>Set the index document to <strong><code>index.html<\/code><\/strong> or the main HTML file of your site.<\/li>\n\n\n\n<li>Optionally, set the error document if you have a custom error page.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Save Changes:<\/strong>\n<ul>\n<li>Click &#8220;Save changes.&#8221;<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 6: Set Bucket Policy for Public Access<\/strong><\/h3>\n\n\n\n<ol>\n<li class=\"has-medium-font-size\"><strong>Permissions Tab:<\/strong>\n<ul>\n<li>Go to the &#8220;Permissions&#8221; tab for your bucket.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Bucket Policy:<\/strong>\n<ul>\n<li>Click &#8220;Bucket Policy.&#8221;<\/li>\n\n\n\n<li>Add a policy to make the bucket contents public. Replace <strong><code>\"Resource\"<\/code><\/strong> and <strong><code>\"Principal\"<\/code><\/strong> with your bucket name and your AWS account ID.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-c7ea69f252746962d816e10ea485182c\"><code>{\n    \"Version\": \"2012-10-17\",\n    \"Statement\": &#91;\n        {\n            \"Effect\": \"Allow\",\n            \"Principal\": \"*\",\n            \"Action\": \"s3:GetObject\",\n            \"Resource\": \"arn:aws:s3:::my-static-website-bucket\/*\"\n        }\n    ]\n}\n<\/code><\/pre>\n\n\n\n<ul>\n<li class=\"has-medium-font-size\">Click &#8220;Save changes.\u201d<\/li>\n<\/ul>\n\n\n\n<p><strong>Step 7: Access Your Deployed Site<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\">After setting up the S3 bucket for static website hosting, AWS will provide an endpoint URL. You can access your deployed static website using this URL. It should look like:<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-f1b3c91a914e7af4b90aa8ea621fc79b\"><code>\nhttp:&#47;&#47;my-static-website-bucket.s3-website-us-east-1.amazonaws.com\n\n<\/code><\/pre>\n\n\n\n<p class=\"has-medium-font-size\">Replace &#8220;my-static-website-bucket&#8221; with your actual bucket name and &#8220;us-east-1&#8221; with your AWS region.<\/p>\n\n\n\n<p class=\"has-medium-font-size\">\ud83d\udca1 Refer to the <a href=\"https:\/\/docs.aws.amazon.com\/AmazonS3\/latest\/userguide\/website-hosting-custom-domain-walkthrough.html\">official documentation<\/a> when you are stuck.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>Firebase Hosting<\/strong><\/h1>\n\n\n\n<p class=\"has-medium-font-size\">Deploying a static website with Firebase Hosting is a straightforward process, and Firebase Hosting provides features such as automatic SSL, CDN distribution, and easy integration with Firebase services. Here&#8217;s a step-by-step guide with an example:<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Step 1: Create Your Static Website<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Step 2: Set Up Firebase Project<\/strong><\/p>\n\n\n\n<ol>\n<li class=\"has-medium-font-size\"><strong>Sign in to Firebase:<\/strong> If you don&#8217;t have a Google account, sign-up and then sign in to the <a href=\"https:\/\/console.firebase.google.com\/\">Firebase Console<\/a>.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Create a New Project:<\/strong>\n<ul>\n<li>Click on &#8220;Add project&#8221; or select an existing project.<\/li>\n\n\n\n<li>Follow the prompts to create a new project.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Enable Firebase Hosting:<\/strong>\n<ul>\n<li>In your project dashboard, click on &#8220;Hosting&#8221; in the left-hand menu.<\/li>\n\n\n\n<li>Click &#8220;Get Started&#8221; to enable Firebase Hosting.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Step 3: Install Firebase CLI<\/strong><\/p>\n\n\n\n<ol>\n<li class=\"has-medium-font-size\"><strong>Install the Firebase CLI:<\/strong>\n<ul>\n<li>Open a terminal or command prompt.<\/li>\n\n\n\n<li>Run the following command to install the Firebase CLI globally: <\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-bbcbd4383f9af6db3649fbdcf9f237e1\"><code><code>npm install -g firebase-tools<\/code><\/code><\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Step 4: Initialize Firebase in Your Project<\/strong><\/p>\n\n\n\n<ol>\n<li class=\"has-medium-font-size\"><strong>Navigate to Your Project:<\/strong>\n<ul>\n<li class=\"has-medium-font-size\"><span style=\"font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, sans-serif;\">Open a terminal. Change to your project directory:<\/span> <code>cd \/path\/to\/my-static-website<\/code><br><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Initialize Firebase:<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"has-medium-font-size\">\n<li>Run the following command and follow the prompts: <code>firebase init<\/code><\/li>\n\n\n\n<li>Choose &#8220;Hosting&#8221; as the feature to set up.<\/li>\n\n\n\n<li>Select your Firebase project.<\/li>\n\n\n\n<li>Set the public directory to the folder containing your files (e.g., <strong><code>public<\/code><\/strong>).<\/li>\n\n\n\n<li>Choose whether to configure your app as a single-page app (SPA).<\/li>\n<\/ul>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Step 5: Deploy Your Site<\/strong><\/p>\n\n\n\n<ol>\n<li><strong>Build Your Project:<\/strong>\n<ul>\n<li class=\"has-medium-font-size\">If your static site needs a build step, run the build command specified in your project configuration.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Deploy to Firebase:<\/strong>\n<ul class=\"has-medium-font-size\">\n<li>Run the following command to deploy your site to Firebase Hosting: <code>firebase deploy<\/code><\/li>\n\n\n\n<li>Firebase will provide a hosting URL (e.g., <strong><code>https:\/\/your-project-id.web.app<\/code><\/strong>). You can also configure a custom domain if needed.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Step 6: Access Your Deployed Site<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\">Once the deployment is complete, your static website will be live on Firebase Hosting.<\/p>\n\n\n\n<p class=\"has-medium-font-size\">You can access it using the provided hosting URL.<\/p>\n\n\n\n<p class=\"has-medium-font-size\">\ud83d\udca1 Refer <a href=\"https:\/\/firebase.google.com\/docs\/hosting\/quickstart\">official documentation<\/a> when you are stuck.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What Is a Static Website? A static website is&nbsp;a website that displays the same content for every viewer.&nbsp;The content is stored on a web server and&#46;&#46;&#46;<\/p>\n","protected":false},"author":2,"featured_media":18,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,1,7,3,2,4,5],"tags":[9,8,11,10],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/tech.upcode.in\/index.php?rest_route=\/wp\/v2\/posts\/1"}],"collection":[{"href":"https:\/\/tech.upcode.in\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tech.upcode.in\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tech.upcode.in\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tech.upcode.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1"}],"version-history":[{"count":2,"href":"https:\/\/tech.upcode.in\/index.php?rest_route=\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":24,"href":"https:\/\/tech.upcode.in\/index.php?rest_route=\/wp\/v2\/posts\/1\/revisions\/24"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tech.upcode.in\/index.php?rest_route=\/wp\/v2\/media\/18"}],"wp:attachment":[{"href":"https:\/\/tech.upcode.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tech.upcode.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tech.upcode.in\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}