How to make a CloudFlare Pages website in minutes

in Jamstack / Cloudflare / Jekyll

I am using CloudFlare Pages to deploy and host this website. There are lots of other alternatives like GitHub Pages, Netlify etc. Process for them will be almost the same like described below.

TL;DR

The easy way:

  1. Requirements: GitHub account, CloudFlare Pages account. Domain not required; you will get a free subdomain.
  2. Clone my GitHub repository cfpages-starter-jekyll to yours GitHub. This repository contains a Jekyll project files.
  3. You don’t need to setup Jekyll or anything else at this time, just use a repo above.
  4. Create new project at CloudFlare Pages, link it with your GitHub account and click ‘deploy’. That’s all.
  5. Edit [_config.yml] to adjust website titles and settings. Create new posts under [_posts] folder. Check out the following instructions or pages markdown options: Jekyll Markdown Support
  6. Commits are automatically deployed.

JAMStack; Jekyll

JAMStack is fast. Just decided to try it out. Jekyll is a static site generator written on Ruby.

Running Jekyll locally: Development environment

  1. Requirements: vagrant and virtualbox.
  2. Clone repository with vagrantfile: jekyll-vagrant.
  3. Run ‘vagrant up’ command in the folder with vagrantfile
  4. You now have the Jekyll installed!

vagrantfile (I am using Ubuntu, port 4000 forwarded to host OS, it is for Jekyll):

Vagrant.configure("2") do |config|
    config.vm.box = "ubuntu/bionic64"
    config.vm.provision :shell, :path => "bootstrap.sh"
    config.vm.network "forwarded_port", guest: 4000, host: 4000
end

sh script for Jekyll installation on Ubuntu:

apt-get -y update
sudo apt-get -y install ruby-full build-essential zlib1g-dev
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc
gem install jekyll bundler

Running Jekyll locally: site setup

SSH into VM using “vagrant ssh” and run the following commands:

cd /vagrant
jekyll new mysite

This command will initiate a new site in ‘mysite’ folder. Note, it is synced with your host OS as it is located in ‘vagrant’ folder.

Jekyll: installing new theme

Install ‘hydure’ theme:

cd mysite
sudo gem install jekyll-theme-hydure

Edit project [Gemfile] and add a new gem:

gem "jekyll-theme-hydure"

Edit [_config.yml] and change theme:

theme: jekyll-theme-hydure

Jekyll: running locally from vagrant

Run Jekyll to serve your site, you can access it from your host OS via http://localhost:4000/. Parameter --host=0.0.0.0 is required for Jekyll to serve on all instance IPs so that Vagrant can forward connections between host OS and VM. Parameter --force_polling lets Jekyll to update modified project resources on the fly without restarting (when you modify them within a host OS filesystem).

bundle exec jekyll serve --host=0.0.0.0 --force_polling

For a more flexibility you can override theme’s files, locate the path to theme’s files and copy them to ‘mysite’ folder:

bundle info jekyll-theme-hydure

I’ll just leave it here: for running Jekyll with jekyll.environment=production use the following command:

JEKYLL_ENV=production bundle exec jekyll serve --host=0.0.0.0  --force_polling

© 2021. All rights reserved.