Best Way To Host Static Website

akuh

Best Way To Host Static Website - Static web (Static Web) is a website whose content is static / does not change. Once created and online on the Internet, in general, the web cannot be replaced unless it is replaced manually by changing the programming language of the web. Therefore, the relationship is also very rare, so it can be mentioned as an online circular because the information provided is limited.


Excess Static Website

  • No programming skills needed to create static pages
  • Can be watched directly by the browser site without the need for a server program
  • Easier for web development using HTML programming language
  • Deficiency
  • The appearance is not attractive
  • Content is static, does not switch
  • Limited in relationship with clients
  • Do not use a database
  • Do not use PHP programming on the server


GitHub Pages

GitHub is a free service for hosting and sharing the source code of your program or website with someone. Or we can say, GitHub is a social medium for programmers and developers.

Another feature offered by GitHub apart from hosting our program code is that GitHub provides a service called GitHub Pages. There we can have a free subdomain and the source code that we have uploaded initially can be published and watched online. With a note, the program code should be program code from a static site.

Static web means, the web that is made only contains HTML, CSS, and Javascript. There we are not allowed to use PHP and others.

GitHub Pages is very useful if you don't have the money to rent paid hosting and want to quickly publish your web creations online. Although the domain used is still a subdomain of GitHub, but you can set it to use your own TLD (great domain level).

And GitHub Pages does not provide database support, so the web that can be shown is only in the form of a static site. This deficiency causes us to be unable to make the web that has been made more interactive, such as making it for blogging, adding forms for contacts, input and others.


How to Create Github Pages

  • Log in or register to github.com
  • Create new repositories
  • Name the repositories according to the website that will be created
  • Download free-CSS-templates at free-css.com
  • Edit CSS-templates
  • Upload to the Github repository that was created earlier
  • Then go to settings > pages >> Source >>> main >>>> save

  • You will get the website address created there
  • Congratulations, your GitHub page has been successfully created

My Static Website GitHub: https://akuhnet.github.io/akuhnetwork


Netlify

Netlify is a complete platform for automating modern web projects. Replace your hosting infrastructure, continuous integration, and deployment pipeline with a single workflow. Integrate dynamic functionality such as serverless functionality, user authentication, and form handling as your project grows.

Netlify is a CDN as well as a Continuous Deployment Tool for Front-end Developers. Similar to Heroku, to deploy a website to Netlify, we also need to install the Netlify CLI on NPM. The hosting feature itself is almost the same as Heroku. If you know Git, Netlify is perfect for deploying websites via Github, Gitlab, or Bitbucket.

How to Create Static Website Netlify

Because previously I created Github Pages, to create a static website on netlify, all you have to do is import the static website that was created directly into Netlify by adding several files so that it can be loaded on Netlify

  • First, go to app.netlify.com
  • Then login with GitHub
  • After successful login select a new site from git
  • Then Continuous Deployment with Github
  • Select the repository that contains the GitHub pages that were created earlier
  • After that create a new file named .ruby-version in the GitHub repository fill it with:

2.4.3
  • Then create a new file named Gemfile fill with:
source "https://rubygems.org"
gem 'github-pages'


  • After the file has been successfully created, return to the app. netlify select deploy
  • Wait a while until the deployment is complete
  • Congratulations, the Static Website from Netlify has been successfully created

My Static Website app. netlify:  https://akuhnetwork.netlify.app


Vercel

vercel is a cloud base for serverless implementation. This allows developers to host websites and site services that are deployed in an instant, automatic ratio, and require no monitoring, all with minimum composition. Vercel is a tool in the Static Site Hosting group of the technology stack.

Excess :

  • Simple deployment
  • Easy implementation and production-ready with 1 command.
  • Simple mapping, including automatic mapping
  • Support SSR (Server-Side Rendering)
  • Free tier
  • Free SSL

How to Create a Static Website Vercel

  • First, you have to go to vercel.com
  • Select Start Deploy
  • Since this is still related to GitHub then login with GitHub
  • Phone number verification
  • After successful login with GitHub
  • Choose New Project
  • Import Git Repository
  • Select the Static Website Repository that was created on GitHub earlier then import
  • Then wait a while to deploy
  • After the deployment is complete go to the dashboard where you will see the address of the newly created website

Congratulations, the Static Website from Vercel has been successfully created

My Static Website vercel: https://akuhnetwork.vercel.app


GitLab

GitLab Pages is a product of the git repository GitLab where we can host HTML static web or CMS static web generators such as Jekyll, Middleman, Hexo, Hugo, and Pelican.

By default the URL used to connect to a web-hosted on GitLab is HTTP(s)://username.gitlab.io/projectname. This URL can be replaced with your own domain/subdomain and provides HTTPS support using an SSL/TLS certificate from Let's Encrypt.

Projects, in Gitlab we can manage our projects in repositories with private and public states. If we use private status then our project can only be changed and witnessed by us individually. But if we use public status, then our project can be changed, viewed, and downloaded by anyone by Github users.

Unlimited Audience and Private Repo, we can create new repos even for small ratio projects
Project Importing, we can not only import projects from Github, but we can import projects from BitBucket, Google Code, Fogbugz, or git repo with URL.
Protection of rights, we can set read/record permissions to a particular branch.
Wiki, We can document our project using the wiki mechanism.
API (Application Programming Interface), We can set up Gitlab with a powerful set of APIs.
Track and manage releases, simplify the collaboration process by using a single tool to find and monitor the progress of the projects we launch. with a kanban-style board appearance and equipped with labels, milestones, due date, powerful search, issue, and MR Templates.
Improve code quality, collaboration, and code discussion with fast branching and powerful diff tools
In Gitlab, Public and Private features can be accessed and used for free.
Gitlab is supported by LFS (Large File Storage). To make it easier for users who want to upload material in the repo for free.

To create a static website on GitLab, I have already written a tutorial here Free Hosting Website On Gitlab

My Static Website GitLab: https://akuhnet.gitlab.io/akuhnetwork


Firebase

Firebase Hosting is Google's hosting service that provides users with static web content in a secure, fast, free and easy way.

Most web hosting will charge you or will be slow if it's free, you also have to pay extra to get an SSL certificate to convert your website to a secure site with HTTPS
.
Free Firebase hosting. So, will not be charged again. It provides an SSL certificate by default and offers impressive speeds across multiple geographic locations without the need for a separate CDN on top.

How To Make A Static Website With Firebase

  • Log in to Google using Gmail
  • Go to firebase site at firebase.google.com
  • Select start
  • Then add a project, name the project according to the name of the website that will be created
  • In the menu on the right select hosting then get started
  • Download node.js at nodejs.org then install
  • After installed go to the website folder that was created when creating Github pages
  • Press CTRL + SHIFT + right-click on the website folder
  • Open windows terminal
  • After opening the terminal in the website folder, enter the following command:
npm install -g firebase-tools
  • Then log in to firebase in terminal windows with command
firebase login
firebase init

  • Proceed by selecting Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
  • Press <space> then enter
  • The next step is to enter all the HTML and CSS files that were created when creating GitHub pages into the public folder
  • Then deploy to firebase with the command
firebase deploy


Congratulations, your firebase static website has been successfully created, maybe that's all for the Best Way To Host Static Website tutorial, if there are new ones, it will continue to be updated in the future.

My Static Website firebase: https://akuhnetwork.web.app



Any question? write in comments
This tutorial is for educational purposes only
if this tutorial doesn't work please comment, akuh.net will update soon


Next Post Previous Post
No Comment
Add Comment
comment url