5290charlie / jekyll-blog-demo

Jekyll Blog Demo Project

jekyll-blog-demo

Jekyll Blog Demo Project

Contents

• Requirements
• Setup
• Checklist
• Extra Credit

---

Requirements

• git
  • Should already be setup
  • Should clone/push using SSH auth (more info)
• ruby
  • Expected version: 2.7.5
  • Minimum version: 2.6.x
  • See rbenv or rvm install versions (optional)
• jekyll + bundler
  • Installed as a gems: gem install jekyll bundler
  • More info on Jekyll

---

Setup

1. Fork this repo

• From demo repo page, click Fork button near top right:
• Select your username and wait for fork to be created
• After fork is created, you will be on page with new repo (example below)

2. Clone repo from your fork

• Select Code dropdown and copy clone url using SSH
• Click here to learn about SSH keys on GitHub
• Navigate to desired parent workinig directory

cd ~/development # or wherever you want to save your local repo

• Paste copied clone url to clone repo (or clone with git GUI)

git clone [e-mail]:myusername/jekyll-blog-demo

3. Open local repo directory

• Change directories into newly cloned repo dir:

cd jekyll-blog-demo

4. Install dependencies

• This will install all gems specified in Gemfile

bundle install

5. Run local Jekyll dev server

• You can add omit the --livereload to restart manually on updates

bundle exec jekyll serve --livereload

6. Visit local dev url

• Open http://localhost:4000 in your browser
• Local dev port can be changed if needed. (see config options here)

---

Checklist

• New Jekyll Project
  • Already done, this repo is a fresh jekyll new ... project
  • See https://jekyllrb.com/docs for more info
• Review expected file usage & structure
  • page uses layout
  • page layout contains an include for listing items
  • each item is output to a new layout
• Build a collection of content block items
  • Each content block item should have a title and subtitle in the frontmatter and some lorem in the main content (below the frontmatter)
  • Each content block item should also have a published setting in the frontmatter
    • This should be a boolean field type (values: true | false)
    • Note: yaml supports a wide range of "valid" boolean values, but true / false is most common.
• In a new section (or include snippet), loop through each item in your collection and output them into content blocks, omitting any blocks whose published setting is false.
• Create a page to hold that section (homepage is fine) and render into the browser.
  • Note: Don't forget to export the collection, section and page from the _config.yml
  • See https://jekyllrb.com/docs for more info
• Create several (at least 3) items (posts) under your new collection
  • At least 1 where: published=true
  • At least 1 where: published=false
  • Test different data/values in "frontmatter" and content blocks
• Commit changes (can use a new/custom branch name)
• Push changes (to your forked repo)
• Open a pull request against this repo (bowtie-co/jekyll-blog-demo)
• Add any additional info and/or questions you might have

---

Extra Credit

• Setup & utilize bootstrap framework
  • Improve and customize styles, responsiveness, etc
• Add new/custom jekyll plugins
• Build and deploy static site as demo

  # Build compiled static site (default out dir: "_site")
  bundle exec jekyll build
  # Copy/deploy contents from _site/* to web server/provider

• Add support for docker development
  • Create Dockerfile + docker-compose.yml files
  • Define jekyll demo builds in containerized envs
  • Running docker-compose up starts the app (same as jekyll start)