How to build static sites using Hugo, Jekyll, or Gatsby on Windows

Using Hugo, Jekyll, or Gatsby on Windows involves installing the necessary tools and dependencies and then setting up and running your static site generator of choice. Here's a step-by-step guide for each:

Using Hugo on Windows

1. Install Hugo:

   • Download the latest Hugo release for Windows from the Hugo Releases page.
   • Download the appropriate .zip file for your architecture (usually hugo_extended_[version]_Windows-64bit.zip for 64-bit systems).
   • Extract the hugo.exe file and place it in a directory that is in your system's PATH (e.g., C:\Program Files\Hugo\).

2. Verify Installation: Open Command Prompt or PowerShell and run:

   hugo version
   

   This should display the installed Hugo version.

3. Create a New Hugo Site:

   hugo new site my-website
   cd my-website
   

4. Add a Theme:

   • Find a theme on the Hugo Themes site.
   • Follow the theme’s installation instructions, typically:

     git init
     git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
     echo 'theme = "ananke"' >> config.toml
     

5. Run the Site Locally:

   hugo server
   

   Open your browser and navigate to http://localhost:1313.

Using Jekyll on Windows

1. Install Ruby and Jekyll:

   • Download and install RubyInstaller for Windows from rubyinstaller.org.
   • Ensure you check the option to install MSYS2 when prompted during the installation process.
   • After installation, open a new Command Prompt window and install Jekyll and Bundler:

     gem install jekyll bundler
     

2. Create a New Jekyll Site:

   jekyll new my-website
   cd my-website
   

3. Serve the Site Locally:

   bundle exec jekyll serve
   

   Open your browser and navigate to http://localhost:4000.

Using Gatsby on Windows

1. Install Node.js and npm:

   • Download and install Node.js from nodejs.org.
   • This will also install npm, the Node.js package manager.

2. Install Gatsby CLI: Open Command Prompt or PowerShell and run:

   npm install -g gatsby-cli
   

3. Create a New Gatsby Site:

   gatsby new my-website
   cd my-website
   

4. Run the Gatsby Development Server:

   gatsby develop
   

   Open your browser and navigate to http://localhost:8000.

Common Steps for All Generators

1. Editing Content:

   • Open your project folder in a code editor like Visual Studio Code.
   • Edit the content and configurations according to the static site generator’s documentation.

2. Building the Site for Production:

   • For Hugo:

     hugo
     

   • For Jekyll:

     bundle exec jekyll build
     

   • For Gatsby:

     gatsby build
     

   The generated static files will be available in the public (Gatsby) or docs/_site (Hugo/Jekyll) directory, which you can then deploy to a web server.