Why MozillaTN Campus Club Building Website in Jekyll

March 8, 2017

Most recently MozillaTN17 has been organised. One of the agenda of the meetup is to build strong relationship with Campus Clubs Students (formely Firefox Student Ambassador). During that time our plan was to discuss with each and every campus club and help them build a small website for them. It was my responsibility to bring website for campus clubs. I teamed up with Prasanth and karthick.

Prasanth is awesome guy who loves Jekyll very much, and Karthick is good at validting the designs

Till the meetup date we did not choose the design, make it easier for the campus clubs to edit and host it. On meetup date, myself and Prasanth sat all alone and were editing the template at the second day end we came up with the template and we were sure on changing few things campus clubs will be able to bring their own website so they can make it live.

Why Campus Club Website

  • MozillaTN campus clubs are very active, they host large number of events (QA Days, L10n Sprint, Rust Hackathons etc.,) we can not write all the clubs report in mozillatn due to the time taken for accepting pull request, so having club website makes the club lead easier to push the content.
  • All campus clubs associated with one or more communities so to show case their activities we need a website.
  • Website posts stays for long time and act as online proof for their club contribution.
  • Campus Club will have ownership to their website.

Why Jekyll

  • MozillaTN website is running on Jekyll, so contributors can learn Jekyll and write post in main website in long time.
  • Jekyll is really a good static site generator.
  • Simple HTML is difficult to scale, not all love to write html tags for all posts.
  • Jekyll also supports HTML tags.

Why Jekyll based github pages instead anything else

  • Many at first suggest for using Wordpress for MozillaTN. It was first in Wordpress when we started in 2014. But if we are in github we are so open and ownership can be transferred easily.
  • Most importantly all the club websites are interconnected using disqus code. Post of one clubs will be cross shared in another campus club website.
  • Learning curve is good. We actually look like we dont know anything at the start but it is like simple C programming.
  • More customizable than we expect.
  • Cost of running is 0.

Steps for Club to run their website.

  1. First any member (call person SC) of the club should file an issue in github.
  2. As of now MozillaTN admins will create an Repo for that club (repo name will be in lower case only).
  3. SC will have write access to his club repo. So he has to clone Clubs repo and his college repo
  4. Now you will have two folder Clubs and your Club Repo folder.
  5. Simply copy docs folder from Clubs repo to your Club Repo.
  6. After copying from clubs folder, delete club folder now you have to work only in your college club repo.
  7. Then you have to edit few files

Editing _config.yml

Change title, eg:- MozillaTN Velammal Club

Change description, eg:- Velmmal is very old clubs.

Change url, eg:- https://mozillatn.github.io/collegeclubreponame

Change about.md File

Write a detailed description about your Club and who to contact in the about.md page.

Change contents inside _data folder

You will be having past contributors, present contributors and organisers file. Make sure you update them properly. It is mandatory to update in organisers file if you want to write any post (either event invitation[event] or event report[blog] ).

Change title in .md files

There are some files where we have hardcoded the title. You have to change them. List of files are about.md , blog.md, contributors.md, events.md . In all these files chanage as About MozillaTN , Blog of MozillaTN , Contributors of MozillaTN , Events of MozillaTN . Replace with your club name.

  1. After making these changes, you have to push it to github.
  2. Once you successfully push it to github, MozillaTN Org owner will be giving you admin access to make your website live.
  3. So in setting page of your Club repo there will be a heading GitHub Pages under which you will have Source there you have to choose master branch /docs folder

Thats it you club website is live.

At the time of writing this post around 4-5 clubs have published their website, list is below

These website have pushed atleast one post.

So whenever you are planning for event, you have to write a small post about the plan of event, what you will be doing, when is going to happen and where it is going to happen (in post the value for categories is as follow categories:event ) and in this same invitation post ask contributors to share the feedback as comments after event. Then after event make sure you write a small report what worked well and what things to be improved in next meetup (in post the value for categories is as follow categories:blog ) so it will be learning for other clubs who are planning for similar event.


  • Club leads who are organising events regularly (atleast 3 per month) will be having Editor access to our MozillaTN social Media accounts and they will be trained to update it regularly.
  • As said you will learn a basics of Content Management System.

Read Other Related Posts about : Mozilla

  • MozillaTN SFDHack WebExtension Workshop
  • MozillaTN SNSCT WebExtension Workshop
  • Creating ShortenURL Maker Addon
  • Comments

    comments powered by Disqus