Sometimes I need to put a quick static site online without much fuss. This very site is an example.
Here’s how I do it.
For this post, I’ll assume you’re on a recent version of Windows. We’re going to use
jekyll to handle the static site creation. In order to get it installed, we’ll need a few
prerequisites.
Start off by installing chocolatey via PowerShell. Instructions are here.
chocolatey is a package manager for Windows that I like to use to manage most utilities.
Once chocolatey is installed, we’ll use it to install ruby and git. Open an
administrator PowerShell window and run:
PS> choco install git ruby -y
chocolatey will automatically download and run the appropriate installers.
Next, we’ll install jekyll. Open a new PowerShell terminal (to ensure the PATH is
up-to-date with the chocolatey installations) and run the following:
PS> gem install jekyll bundler
This will install jekyll and dependencies. For details on installation, further
instructions are here.
Create a new GitHub repo for your site (click here). Enter a repository name (like your site name) and leave the repo public and uninitialized.
Open a new PowerShell terminal. Navigate to the directory where you’ll keep your project.
PS> cd ~\Source\Repos
Clone your GitHub repo and move into the directory.
PS> git clone git@github.com:username/site-name.git
PS> cd .\site-name\
Run the jekyll scaffolder to create the site structure.
PS> jekyll new .
Now we have a basic web site created. Let’s preview it.
PS> jekyll serve
jekyll will render the site and launch a preview server. Open
http://127.0.0.1:4000/ to view the site.
Press ctrl-c and type y to shutdown the preview.
Let’s get this site online. First, commit the changes to the git repo and push to GitHub.
PS> git add *
PS> git commit -m "Initial commit"
PS> git push
To host, we’ll use Netlify. Create a new site from your GitHub repo by following
the instructions here. Select GitHub as the source, then find and select
your repo. Use jekyll build as the build command and _site/ as the publish directory.
Wait for Netlify to deploy your web site. Once deployed, click the preview
link (e.g. https://random-site-name.netlify.com) to view your site on the web!
Whenever you push to the master branch of your GitHub repository, Netlify will re-build
and deploy your site.
Suggested next steps: