How to Host a Static Website
Table of Contents
In this article I will show you how to host a static website (like the one you are reading).
The big advantage is that you don't need to worry about servers or creating a complete application with a database.
Everything works fine with some .html and .md files (or .org files like How to Use Org With Jekyll to Blog.
What will we need?
- GCC and Make (gcc -v,g++ -v and make -v)
- Ruby
- RubyGems
- Jekyll (website generator)
- Github, Firebase or other static hosting
Jekyll: Our core technology
Jekyll is an open source static website generator written in Ruby. It is designed to simplify the creation of blogs, personal websites, and simple web projects. The main idea behind Jekyll is to transform text written in Markdown format, along with layouts and templates, into a static website.
Unlike dynamic content management systems (CMS) like WordPress, which generate web pages on demand from a database, Jekyll pre-renders website pages during the build process. This results in a static website that can be hosted on any traditional web server as it does not require support for server languages or databases.
Developers and bloggers often appreciate Jekyll for its simplicity, fast performance, and the ability to easily version website content using version control systems such as Git. Additionally, Jekyll is the foundation behind GitHub Pages, a free hosting platform for static web pages linked to GitHub repositories.
Installation prerequisites
MacOSX
To install Jekyll on macOS, you need a suitable Ruby development environment. Although macOS comes pre-installed with Ruby, we do not recommend using that version to install Jekyll.
Instead, you will need to install a separate, newer version of Ruby. We recommend it chrubybecause it is the simplest and least likely to cause problems.
1. Install Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
2. Install chruby and latest Ruby
Installing chruby and ruby-install with Homebrew:
brew install chruby ruby-install xz
Install the latest stable version of Ruby:
ruby-install ruby
It's gonna take a while! So wait to add it to your shell chruby (I will use zshell):
echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc echo "chruby ruby-3.1.2" >> ~/.zshrc # run 'chruby' to see actual version
Restart the terminal and check the Ruby version:
ruby -v # ruby 3.2.2 (2023-03-30 revision e51014f9c0) [arm64-darwin23]
Should return ruby 3.1.2p20 or a newer version.
3. Installing Jekyll
gem install jekyll
Windows
To install Ruby on Windows, the simplest way is to use RubyInstaller - the Ruby+DevKit version.
After installation, select the option MSYS2 and MINGW development tool chain.
When the installation is complete, we will have path Ruby available.
The output should have something like:
ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [x64-mingw-ucrt]
Installing Jekyll via Command Prompt
Open a new cmd and run:
gem install jekyll bundler
Ready! Now Ruby, Jekyll and Bundler are available on Windows.
Creating a new website
Choose or develop your theme for jekyll and test it locally.
bundle exec jekyll s -- port 4001
The host will appear at localhost:4001
If you do not specify the port, the default is 4000
For production, Jekyll will build the html, css and js files in the _site folder.
JEKYLL_ENV=production bundle exec jekyll b
Before uploading to hosting, you can test the website. To do this, it will be necessary to simulate the directory as an http path - with python http.server, we can do:
cd _site python3 -m http.server --directory .
The host will appear at localhost:4001
Deploy to Firebase
To host the project on Firebase servers first create a Firebase project at firebase.
Follow the initial step by step to create a project and install the firebase cli.
sudo npm install -g firebase-tools
With the CLI ready, start a session via the terminal.
firebase login
Now create a firebase project.
firebase init
From the options, choose Hosting. When asked what the public folder will be, Firebase should choose the _site.
Run the deploy from the project's root directory.
firebase deploy
Adding a custom domain
In the Hosting menu, Add Custom Domain it is possible to configure a custom domain.
SSL can take up to 24 hours to activate.
