Publishing a Personal Site

Using Jekyll/Github/Netlify to get online quickly

Posted by David Van Loon on September 16, 2018

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.

Installing tools

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.

Setup site

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.

Publish site

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.

Next steps

Suggested next steps:

  • Modify site content
  • Add a post
  • Add a theme
  • Configure a custom domain name