ainehanta/ainehanta.github.io

Makoto Uju's portfolio site

based "Middleman 4 + webpack 2" template.

Get started

git clone https://github.com/ainehanta/ainehanta.github.io
cd ainehanta.github.io
bundle install --apth vendor/bundle
yarn install

development

bundle exec middleman s

deploy

bundle exec rake publish

Middleman 4 + Webpack 2

A middleman v4 preconfigured to use the external pipeline with just webpack v2. Some helpful stuff is already integrated.

Features

• middleman 4
• webpack 2
• BrowserSync - no manual page reloads ;-)
• Boostrap 4 - to start your frontend fast
• Font Awesome 4.7.0 - to have those nice icons present
• jQuery
• Rspec - prepared to test your static site - lol.

Requirements

• Middleman 4.x
• Ruby 2.x
• Node 5.x
• Webpack 2

How to get started

(optional). Create yourself a .ruby-version and .ruby-gemset-file to not mess up your environment. I'd recommend to use rbenv to manage that environment. This has been tested with ruby version 2.3.3 and a gemset named middleman-webpack.

1. gem install middleman

2. Start a new middleman-project using

   $ middleman init my_new_site -T toadle/middleman-webpack
   

2b. middleman will run bundle install for you. So wait. 3. Run npm install. Wait. 4. Run middleman s. 5. You should be able to open the page at http://localhost:3000. 6. You can create a production-build by running middleman build. 7. Run tests by rake or rspec.

How does it work

• Uses middleman's external pipeline to generate assets. Configuration is in the two environment-files development.rb and production.rb
• Runs webpack as it's external pipeline, as configured in package.json.
• webpack uses the the webpack.config.js as it's configuration.
• When run as middleman s in development it'll start middleman, middleman-livereload, webpack and BrowserSync. So reloading of templates and JS/CSS-changes should be reflected without manual reloads.
• BrowserSync is configured to proxy the middleman-server from localhost:4567 to localhost:3000 to inject itself.
• Stuff webpack does is put into .webpack_build which middleman serves together with it's own files.