Hackaton mini-site
The days of simple html pages are long behind us, sir. For most of our front-end apps, we distribute static packages, with dependency configuration and branched repo versioning. If this sounds scary, don't worry, its like rainbows and unicorns.
To install the required components for managing and compiling the Hackaton website, we'll need following tools in our toolbelt: Composer, Git, npm, Bower and Gulp.
If you haven't done so, install Brew right away.
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Start with installing Composer, the dependency manager.
brew tap josegonzalez/homebrew-php
brew install josegonzalez/php/composer
If you don't actively use one of the smaller versioning services, you'll probably end up with Github. Good choice too. Github has an awesome software client for managing your repositories locally.
Nodejs is basicly backend javascript. It’s lightweight and perfect for local builds of compile/distribution dependent projects. Since we’re taking this seriously, that’s just what we’ll do. Add Node.js and npm with brew:
brew install node
Gulp is a Task Runners, which will monitor, compress and compile the project. Gulp a nimble sytar, which makes you feel like you’re doing it for real. Install it with npm:
npm install -g gulp
Bower is the package manager we’ll be using in many projects. Additionally, most of the front-end frameworks come with a bower configuration.
npm install -g bower
####Install Sass Sass is a css extension language. It lets you nest, fragment, re-use, import and compile css code and files. While we're not using it in every project, you'll smell cupcakes and blow glitter out your working station when you do the first time.
sudo gem install sass
The Hackaton site uses a slightly modified public theme called Sydney. You can fuly customise the looks of your website with it! For more information check Sydney's website!
Code Snippets - An easy, clean and simple way to add code snippets to your site.
Simple Calendar - Google Calendar Plugin - Add Google Calendar events to your WordPress site in minutes.
MailChimp for WordPress - MailChimp for WordPress. Subscribe your WordPress site visitors to your MailChimp lists, with ease.
Simple Twitter Tweets - Display your Tweets on your WordPress site using the new Twitter OAuth API v1.1
Slack - Allows you to send notifications to Slack channels when certain events in WordPress occur.
Social Media Widget - Adds links to all of your social media and sharing site profiles. Tons of icons come in 3 sizes, 4 icon styles, and 4 animations.
Team Members - Create new team members, add their positions, bios, social links and copy-paste the shortcode into any post/page.
User Specific Content - Allows you to select specific users by user name, or by role name who can view a specific post content or page content.
WordPress Social Login - Allow your visitors to comment and login with social networks such as Twitter, Facebook, Google, Yahoo and more.
WP Github - Display users Github public repositories, commits, issues and gists.
Please note that several plugins such as Slack and Simple Twitter Tweets require external API's. Make sure you get those API keys in order for the plugins to function :)
The team members and Calendar are displayed on the homepage via shortcodes. Once you have create your team and calendar, go to the Shortcodes admin page and save the Team Shortcode Name and Calendar Shortcode ID respectively
First, clone the hackaton-mini-site project to your regular project folders location
git clone https://github.com/Cloudoki/Hackathon-mini-site.git
If you wish to clone and rename
git clone https://github.com/Cloudoki/Hackathon-mini-site.git folder-name
Now we willll have to install the roots/bedrock required components.
cd /local/path/to/hackaton-mini-site
composer install
Copy the dotenv file and set up your local environment parameters.
cp .env.example .env
nano .env
The theme uses roots/sage as theme stack, install the required components
cd damn-sage
npm install
bower install
For more info on using roots/bedrock, head to roots.io/bedrock.
The theme is managed though Gulp. Some basic commands:
gulp #Compile and optimize the files in your assets directory
gulp watch #Compile assets when file changes are made
gulp --production #Compile assets for production
To connect the theme folder with the bedrock theme directory, add a symlink.
ln -s /path/to/root/sydney ../web/app/themes/sydney
For more info on using roots/sage, head to roots.io/sage docs.