Website Local Preview - WillHoffer/WillHoffer.github.io GitHub Wiki

Intro

In order to locally preview changes before committing, Jekyll can be used to build the site and locally host it. This also has the benefit of updating immediately, whereas GitHub pages takes longer.

Initial Setup

You will need Ruby installed to perform the process. See this page for guides on installing Ruby for Jekyll. Then, with Ruby one needs to install Jekyll and its dependencies with the following command:

gem install jekyll bundler

Further, one also needs the repository cloned onto one's local device. For this, one can use GitHub desktop with a UI, or simply git commands depending on the user's familiarity.

Local Previewing

  1. Open the appropriate terminal (on Windows, either Command Prompt or PowerShell suffice.)
  2. Navigate to the repo directory (use the cd command on Windows.)
  3. Run the below command, and wait for the website to be served.
bundle exec jekyll serve
  1. In your browser, open the locally served website. The terminal should specify the address; by default it is set to the address:
localhost:4000

For as long as the program is running, the website will be available, and any local changes will be updated. Errors in the website compilation will appear in the terminal, which can be useful for troubleshooting.

When you wish to stop serving the website, either close the terminal window or otherwise follow instructions to close it from the program. Ctrl+C entered into the terminal can close the program.

More Info

See the quickstart guide for Jekyll here. Note that for a website without Jekyll, the preview functionality can be used. Simply run the command to create a new website, jekyll new *directory in which to create the site*. Note that if the folder already exists, you may need to add the argument --force which will cause the program to overwrite any files it needs to create in the process. Do not do this for a website that already uses Jekyll!