Code Monkey home page Code Monkey logo

jekyllhelloworld's Introduction

JekyllHelloWorld

This repo is following the tutorial

Install ruby and Jekyll

Ubuntu

sudo apt update 
sudo apt upgrade
sudo apt install ruby-full build-essential
gem install jekyll bundler(if you don't want to install Gem to /usr/bin, please export GEM_HOME)

Macos

install homebrew
brew install chruby ruby-install
ruby-install ruby-3.3.0(if an error incurs, brew install wget and brew upgrade wget may be helpful)
echo "source ${HOMEBREW_PREFIX}/opt/chruby/share/chruby/chruby.sh" >> env.sh
ehco "source ${HOMEBREW_PREFIX}/opt/chruby/share/chruby/auto.sh" >> env.sh
echo "chruby ruby-3.3.0" >> env.sh
source env.sh
gem install jekyll bundler

How to run

bundle exec jekyll build
bundle exec jekyll serve

File Tree

.
├── assets
│   └── css
│       └── style.scss
├── _authors
│   └── zeyuli.md
├── blog.html
├── _config.yml
├── _data
│   └── navigation.yml
├── Gemfile
├── Gemfile.lock
├── _includes
│   ├── about.md
│   └── navigation.html
├── index.html
├── _layouts
│   ├── author.html
│   ├── default.html
│   └── post.html
├── _post
│   └── 2022-01-01-welcome.md
├── README.md
├── _sass
│   └── main.scss
├── _site
│   ├── assets
│   │   └── css
│   │       ├── style.css
│   │       └── style.css.map
│   ├── authors
│   │   └── zeyuli.html
│   ├── blog.html
│   ├── index.html
│   ├── README.md
│   └── staff.html
└── staff.html

Three component: objects, tags and filters

Tags

  1. Control flow: if, for
  2. include: {% include "template-name" %}
  3. Variable: assign, increment, decrease

Filters

Pre-defined specific functions

File Description

Gemfile

bundle install will install gem according the Gemfile. And Gemfile will copy as the Gemfile.lock

_site

After exec bundle exec jekyll build, the jekyll will create _site folder and generate all the static files into _site.

index.html blog.html and staff.html

  1. Front Matte, configuration between two ---.(As seen as the page-level variables).
  2. layout will use the html in _layouts, e.g. layout: default will use _layouts/default.html. {{content}} is a pre-defined variable to pass the body from index.html(caller) into layout/*html(callee)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.