Skip to content

Latest commit

 

History

History
175 lines (131 loc) · 6.06 KB

README.md

File metadata and controls

175 lines (131 loc) · 6.06 KB

HU2K17 UI Assignment

Prerequisties

  • Ruby version 2.0 or above
  • RubyGems
  • NodeJS
  • Python 2.7

Read more [here] (https://jekyllrb.com/docs/installation/#requirements/)

Getting Started

clone the repository

git clone git@git.hashedin.com:hashedin/hu2k17-ui-track.git

Go to your project code directory

cd hu2k17_ui

Install bundler if not installed

gem install bundler

Run bundler to install the dependencies.

bundler install

Run the development server

jekyll serve

Open http://localhost:4000/ to browse the website

Developing Pages

You should familiarise yourself with jekyll and jekyll-assets, but here is a quick cheatsheet:

Template Structure

- _assets                         
    - scripts                         
    - styles
    - libs
- _includes
- _layouts
- _pages
- _sites
- _posts
- img
- fonts
  • _assets/scripts: Add your scripts files here
  • _assets/libs: third party libaries will be saved here.
  • _assests/styles: Write your page style here. We are following SASS to write style. Divide style on component level like layout, header etc.
  • _sites: This is where the generated site will be placed (by default) once Jekyll is done transforming it. Don't check-in this code in git.
  • img: Add images here.
  • fonts: Add fonts here.
  • _posts: Your dynamic content, so to speak. The naming convention of these files is important, and must follow the format: YEAR-MONTH-DAY-title.md. The permalinks can be customized for each post, but the date and markup language are determined solely by the file name. Read more here
  • _includes: These are the partials that can be mixed and matched by your layouts and posts to facilitate reuse. The liquid tag {% include file.ext %} can be used to include the partial in _includes/file.ext.
  • _layouts: These are the templates that wrap posts. Layouts are chosen on a post-by-post basis in the YAML Front Matter, which is described in the next section. The liquid tag {{ content }} is used to inject content into the web page.
  • _pages: Write your page's main template as Markdown here. See example index.md and about.md. You can pass dynamic content from here and refer to template through layout.

HTML

  1. Include files go under templates/includes
  2. To include a file, use {% include head.html %}
  3. To load css files, use {% css main %}. .css extension is not needed
  4. To load javascript files, use {% js vendor %}. .js extension is not needed
  5. Layout files go under templates/layout. You can add templates to wrap your posts here.
  6. Write your page root point as markdown. In the front matter (the three dashes at the top) - add title, description, headline and other such variables. Set the layout to respective template file.The layout page should use variables defined in markdown file - such as headline, subheadline etc.

CSS

  1. CSS fragments/scss files go under _assets/styles
  2. Main css files - i.e. files that are combined and included in html files - go under _assets/css. As of now, we only have two css files - main.scss and vendor.scss
  3. Use the syntax {% css main %} to include a css file within a HTML file. See _includes/head.html for an example

Custom Javascript

  1. Put custom javascript files under _assets/scripts
  2. Include your custom javascript in _assets/scripts/main.js using the //= require menu.js syntax
  3. All files in main.js are bundled, minified and versioned automatically
  4. Include main.js in your html using the {% js main %} syntax. .js extension is not needed

Third Party Javascript

  1. Add third party javascript files under _assets/libs
  2. Include the javascript in the file _assets/scripts/vendor.js

Images

  1. Add images under img directory
  2. Use an absolute path, not a relative path. Use /img/someimage.png, not img/someimage.png. Note the leading slash.

NOTE

Never overwrite/update existing images. Images are cached for a year, so they will not be updated. If you want to update an image, create a new one and use it instead.

Working with blogs

See https://jekyllrb.com/docs/posts/

Deploying

Step 1: Configure AWS Credetials

We host the website on S3, so you need AWS credentials to deploy. Request Devops for AWS credentials - you will get a key and secret.

Take the key and secret, and store it in a file .env at the root of your project.

touch .env

Then, edit .env and add your credentials

AWS_ACCESS_KEY_ID = YOUR-ACCESS-KEY
AWS_SECRET_ACCESS_KEY = YOU-SECRET-ACCESS-KEY

##Note

  • Update s3_bucket value in s3_website.yml.
  • You can refer to this

Don't share AWS keys. Never submit .env and s3_website.yml file with PR.

Step 2: Preparing the build

  1. First, ensure everything is committed and pushed.
  2. Run the command jekyll build
  3. The files are generated under the _site directory
  4. To test the files, run python -m SimpleHTTPServer inside the _site directory, and test it thoroughly

Step 3: Deploy

To Deploy it on S3

./deploy.sh

To simulate a dry run, use the --dry-run flag

./deploy.sh --dry-run

s3_website only uploads changes. To force it to push everything again, use the --force flag

./deploy.sh --force

Important Link

  • Links to mockups: Zeplin
  • To check page performance: You need to add this extension in your chrome. PageSpeed
  • To check SEO:
    • Add this extension in your chrome to check the SEO Scrore: WooRank
    • Add this extension in your chrome to check the html page hierarchy. HTML5 Outline