tutorial-order.adoc

Module and Tutorial Order

Table of Contents

• Project: Build a Basic Website with a Static Website Generator
  • Module 1: Project Overview and Tools
  • Module 2: Preparing your Linux / Mac / Windows workstation
  • Module 3: Setup a basic website
• Project: Build a Blogging a Website with a Static Website Generator
  • Module 1: Project Overview and Tools
  • Module 2: Activate and configure the blog module in Awestruct
  • Module 3: Writing a blog post
  • Module 4: Publishing your blog post
  • Module 5: Setting up comments and analytics
  • Module 6: Customize look & feel / theme
• Project: Content Foundations
• Project: Collaboration
• Project: Add Rich Content, Responsive Design Features and Interactive Functionality to Your Website
  • Module 1: Project Overview and Tools

Module and Tutorial Order

High-level outline

• Big picture, goals and finish line (topic and the agenda)

• intro to tools (AsciiDoc, Awestruct, git, GitHub)

• setup Awestruct-based website repository and simple publish to GitHub Pages

• content foundations

  • information architecture & readibility

  • activating AsciiDoc on their site

• sample AsciiDoc page (e.g., about.adoc)

• convert sample Markdown document from jekyllrb.com to AsciiDoc (e.g., pages.md and/or posts.md)

• setup Awestruct posts extension

• do collaboration (e.g., guest blog post, etc)

• make static dynamic using jQuery & family, responsive grid, etc

Project: Build a Basic Website with a Static Website Generator

Create a website hosted on GitHub Pages to use for reporting your experiences at OSCON.

Module 1: Project Overview and Tools

A quick overview of the tools we’ll use to create the website.

1. Project Introduction (2-3m)

2. Introduction to the console and text editor

3. Introduction to Ruby (3m)

4. Introduction to git (3m)

5. Introduction to gems and bundler (3m)

6. Introduction to awestruct

7. Introduction to asciidoctor

Module 2: Preparing your Linux / Mac / Windows workstation

Using a console and text editor, we’ll learn how to install and setup the tools needed to create and launch the website.

1. Setting up Ruby

   1. Console Hands On: Install Ruby

2. Setting up git

   1. Console Hands On: Install git

3. Setup execution PATH

4. Choosing your text editor

Module 3: Setup a basic website

With the built-in CSS grid system and styles, we’ll launch a basic website baked by Awestruct

1. Install Awestruct

2. Setup a new website project with Awestruct

3. Install Rake and Bundler

4. Setup a git repository for your website project

5. Configure website name, title, author and organization

6. Activate AsciiDoc content

7. Configure a theme for AsciiDoc and the website

Project: Build a Blogging a Website with a Static Website Generator

We will learn how to setup the Awestruct blog module, create posts, manage comments, and customize the blog’s layout and functionality.

Module 1: Project Overview and Tools

1. Project Introduction

2. Awestruct pipeline

   Sidebar: Awestruct pipeline * How do I setup layouts for the blog index & posts

   + NOTE: Make boilerplate code available on wiki

3. Haml and Slim Introduction Sidebar: layout files and Haml (or Slim)

4. Sass and Foundation Introduction

   Sidebar: SASS & Foundation primer

5. Travis CI introduction

Module 2: Activate and configure the blog module in Awestruct

1. Activate posts extension (blog, news, etc)

2. Extensionless URLs

Module 3: Writing a blog post

You’ll learn how to add, tag, and categorize blog posts.

1. Create a blog post

2. Writing the blog post’s header and metadata with AsciiDoc syntax

3. Using source code in your site

4. Using images and videos

Module 4: Publishing your blog post

• How do I publish my blog post? (A: as above)

• How does the automatic publishing work?

  • Jekyll - automatic

  • Awestruct - via Travis CI

• How do I setup a Travis account?

• How do I link my Travis account to my GitHub account?

• How do I activate Travis on my repository?

• How do I configure Travis to publish my site? (git serves as your blog admin backend)

Module 5: Setting up comments and analytics

1. Add Disqus Comments and Google Analytics

2. Custom Domain Name

• Configure?

• Gravatars?

Module 6: Customize look & feel / theme

• How do I modify the layouts?

• How do I modify the styles?

Project: Content Foundations

1. Chunked content

2. Content re-usability and chunks - what and why

3. Goals, constraints, and methods

   1. Content types and organization

4. Asciidoctor features that can help

5. Output, anyway you need it, anyway you like it

   1. multipart book/docs

   2. manpage

   3. easy, replaceable styling

Project: Collaboration

• How does collaboration work?

• How do I propose a revision or new content?

  Sidebar: Pull request primer

• How do I send revisions to someone else’s proposal

• "Fork and Edit this file" button

Project: Add Rich Content, Responsive Design Features and Interactive Functionality to Your Website

Module 1: Project Overview and Tools

1. Typography, images, video, audio, include files and data, social

2. Responsive grid and elements

3. Plugins, JQuery, JavaScript