Build2 Learn Chennai website 🌎

WhatsApp

Join the Build2Learn Github Group - https://b2l-chennai.herokuapp.com/

• Build2learn Chennai's public website
  • Feature
  • Getting Started (builing the website locally)
    • Linux
    • Mac OS
    • Windows
    • Docker
  • Writing a post
  • Adding a project
  • Updating the feedback form shortlink
  • Website Structure
  • Contributing
  • License

Welcome to the Build2Learn Chennai public website 🌎 The website is written with Jekyll and hosted on GitHub Pages.

The website is publicly available on http://build2learn.in/.

Feel free to fork ⸑ or star ⭐️ this repo! Contributions are really appreciated. Please have a look at the Contributing Guidelines or at the TODO list down there. You can easily start having a look at our Issues.

Feature 💅

• Material Designed (based on hcz-jekyll-blog theme) 🎨
• Mobile Responsive 📱
• Push Notifications 🔔 (with OneSignal)
• Progressive Web App ready 🖥
• HTML5 Cache support ♻️
• Awesome Community behind 🤝

Getting Started (builing the website locally) 🛠

To get starting developing, we really recommend to clone the website locally and start developing on your machine.

This will allow you to preview what the generated site will look like in your browser locally. Jekyll comes also with a auto-regenerate feature, this will allow you to quickly iterate over different changes to the website (useful if you're touching the CSS files). More info about the auto-regenerate feature on the Jekyll usage page.

Linux

1. Install Ruby with your package manager.

Debian
sudo apt install ruby

ArchLinux
sudo pacman -S ruby

2. Clone this repository (you need git installed).

git clone https://github.com/b2l-chennai/b2l-chennai.github.io.git
cd b2l-chennai.github.io/

3. To configure gems user-wide add the following line to your shell configuration files, for example ~/.bashrc or ~/.zshrc

export GEM_HOME=$(ruby -e 'print Gem.user_dir')

4. Open your terminal and install jekyll and bundler

gem install jekyll
gem install bundler

5. To run executable gems, without typing the full location, run the following command or add it to your shell configuration files, for example ~/.bashrc or ~/.zshrc.

PATH=$(ruby -e 'print Gem.user_dir')/bin:$PATH

6. To install gems into GEM_HOME

bundle install

7. Serve the website with the following command,

bundle exec jekyll serve

You should be able to see the local website at http://127.0.0.1:4000

Mac OS

To be able to build the site locally, you need Homebrew installed. Please follow this link to install Homebrew

1. Clone this repository (you need git installed).

git clone https://github.com/b2l-chennai/b2l-chennai.github.io.git
cd b2l-chennai.github.io/

2. Open your terminal and install ruby, jekyll and bundler (skip the related command if you already have the package installed).

brew install ruby
sudo gem install jekyll
sudo gem install bundler

3. Serve the website with the following command

bundle exec jekyll serve

You should be able to see the local website at http://127.0.0.1:4000/.

Windows

You must have git for windows installed in your system.

1. Download and install Ruby and Rubygems using rubyInstaller for windows

2. Using git bash, clone this repository.

git clone https://github.com/b2l-chennai/b2l-chennai.github.io.git
cd b2l-chennai.github.io/

2. On your terminal install jekyll and bundler

gem install jekyll bundler

3. Serve the website with the following command

bundle exec jekyll serve

You should be able to see the local website at http://127.0.0.1:4000/.

Docker

1. Be sure to have Docker installed on your local machine

Ubuntu
sudo apt-get install docker

ArchLinux
sudo pacman -S docker

2. Clone this repository (you need git on your machine)

git clone https://github.com/b2l-chennai/b2l-chennai.github.io.git
cd b2l-chennai.github.io/

3. Run a Docker container with jekyll/jekyll image and serve the site

docker run --rm -it \
-p 4000:4000 -v "$PWD":/srv/jekyll \
jekyll/jekyll jekyll serve

You should be able to see the local website at http://127.0.0.1:4000

This command will download the jekyll/jekyll image from Docker Hub and build a container from that image.
Container port 4000 is linked to localhost:4000, so that you can access the site from that address.
Every time this container is executed, it'll automatically do a bundle install, thus retrieving all Gem dependencies before building and serving.

Writing a post 📝

To add a new post to the blog page, you need to create a new file in the _post folder. Please follow the naming of the file, like:

2018-01-29-hello-world.md

The structure of the blog post file should be as following:

---
layout: post
title: <TITLE OF YOUR BLOGPOST>
date:   <DATE OF YOUR BLOGPOST LIKE '2018-01-29 13:50:39'>
categories: <LIST OF SPACE SEPARATED CATEGORIES>
---

<BODY OF YOUR BLOGPOST>

Adding a project 📝

To add a new project go to - 'projects.json' and add the following to the json file before making a pull request

{ "name": "Name of your project", "image": "Upload the photo imgur.com and get a direct link", "url": "Your github project url", "date": "December 18 2017", "tags": ["HTML, CSS, JavaScript"] }

Website Structure 🗺

Here a short description of the project structure:

• _config.yml Jekyll config file, used to provide projectwise configuration.
• _data Contains JSON files used to build pages
  • _data/project.json Used to build the /projects page.
  • _data/social.json Used to create the social buttons.
  • _data/urls.json Used to create the navigation bar.
• _includes Static HTML files that will be used to generate web pages
  • _includes/analytics.html Google Analyics snippet.
  • _includes/css.html CSS Includes go here.
  • _includes/header.html Header for all pages is here, including the homepage with the big image.
  • _includes/footer.html Footer for all pages is here.
  • _includes/js.html JS Includes go here.
  • _includes/main.html Main content is here (whatever is between header and footer).
  • _includes/meta.html META tags go here.
  • _includes/navigation.html Navigation menu is here.
  • _includes/share-page.html Share buttons (after content) are here.
  • _includes/social_links.html Social buttons in the header are generated here.
• _layouts Layout files used to create pages
  • _layouts/default.html Default layout, all the pages follow this structure. All the other layouts will just add elements to this layout.
  • _layouts/page.html Page layout, used to render static pages (like the About page).
  • _layouts/post.html Blogpost layout, used to render blogposts from the _posts folder).
  • _layouts/posts_by_gategory.html Layout used when user clicks on a specific category.
  • _layouts/project.html Projects layout, used to display seminars with Cards.
• blog/index.html Index file for the blog page. Used by the jekyll-paginate.
• category Contains one file for every category. Please add files here before using new categories in blogposts.
• manifests Contains manifests file for the PWA.
• static Contains static files served directly by Jekyll (Images, JS, CSS, etc.)
  • static/css CSS and SASS files goes here. .scss file starting with double --- will be built by Jekyll and the resulted .css file will be available in the static/css/_site folder. Please note that this project is using Bootstrap Material Design, feel free to use the CSS classes you need.
  • static/img Images goes here
  • static/js Javascript files goes here.
• about.md About page, Markdown file used to create it.
• feed.xml XML File used to create the RSS feed.
• projects.md Projects page, Markdown file used to create it. For cards creation refer to the project layout file.
• feed.xml XML File used to create the RSS feed.
• feedbackform.md Feedback form redirect page, used to handle the feedback form QR code.
• sw.js Service Worker used for PWA purpose.

Contributing 🤝

Feel free to contribute to this project! You can have a look at our Contribution guidelines if you don't know how to proceed.

Feel free to open a issue or submit a new pull request ❤️

Here a short TODO list:

• Create the hall of fame page to display the projects done and made during the build2learn meets.

License 📄

This project is licensed under the MIT License - see the License file for details