Samples for:
- Gulp funtions with
external_pipeline
- Deploy with
rsync
- Collect data with
data_source
- Collect remote json data with javascript
active
class in menu items withhelpers
- Keep accordion menu open with
yield_content
- Link to any page on language menu item with
yield_content
- Localization (i18n)
- Middleman Blog
Runs on:
- Ruby v2.6.2
- Middleman v4.3.6
- Bootstrap v4.4.1
- jQuery v3.5.1
- popper.js v1.16.0
- Font Awesome Free v5.13.0
- jquery-fancybox v3.1.0
- gulp v4.0.2
-
Install rbenv:
brew install rbenv
-
Install Ruby v2.6.2:
rbenv install 2.6.2 # if installed rbenv local 2.6.2
-
Install Middleman:
gem install middleman
- with middleman init:
middleman init ProjectName -T tarikkavaz/Middleman-Boilerplate cd ProjectName
- with cloning from Github
git clone https://github.com/tarikkavaz/Middleman-Boilerplate.git ProjectName cd ProjectName rm -rf .git/
-
Use Ruby v2.6.2 as local:
rbenv local 2.6.2
-
Install Ruby dependencies:
bundle install --path vendor/bundle
-
Install Node Packages:
yarn install
-
Optionally there is a setup file that installs bundles and node packages (Might need
chmod +x ./bin/setup
if you get Permission Denied). Run:bin/setup
-
Add your Repo:
git init git add . git commit -m "init" git remote add origin https://github.com/your-name/ProjectName.git git push -u origin master
- Open https://localhost:4567
bundle exec middleman
- Run with Production Env
bundle exec middleman -e production
- All files will be compiled in a folder called
build
:bundle exec middleman build
config.rb
set the site location on your server:rsync.production_server = "123.45.0.56" rsync.path = "/home/deployer/sites/ProjectName"
- Uploading with
rsync
(This command will ask for confirmation):bundle exec middleman rsync production
-
All style files are in folder
source/statics/css/
- Use all your styles in
layout.css.scss
- To change asset varaibles like Boostrap colors:
_assets-overwrite.scss
- Custom Variables:
_vars.scss
- Custom Mixins:
_mixins.scss
- Use all your styles in
-
The main Script file is
source/statics/js/custom.js
Use all your scripts in this file. All other assets like jQuery will be compiled in a single file calledsource/statics/js/site.js
. No need to edit this file.