The Website for NewPipe
Clone or download
Latest commit 38e7411 Jan 15, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
FAQ adds og meta tags (#90) Aug 22, 2018
_data Update icon Jul 23, 2018
_faq Fix typos Sep 24, 2018
_includes Load JQuery locally Sep 26, 2018
_layouts Add video support to fullscreen mediaView Sep 21, 2018
_plugins Add Git ID to footer Sep 17, 2018
_posts Merge pull request #101 from TeamNewPipe/post-0.14.2 Oct 31, 2018
_tutorials Improve descriptions for auto-play tutorial after app changes Sep 24, 2018
blog Add image information to alt attribute for post images on blog main page Aug 26, 2018
bootstrap Delete not needed files (bootstrap) Feb 19, 2017
css Fix background of feature detail for larger but not too large phones :) Sep 20, 2018
docker/nginx/conf.d Custom error pages Sep 11, 2018
donate Load JQuery locally Sep 26, 2018
font-awesome Delete not used files Feb 21, 2017
img Add post for 0.14.2 release Oct 27, 2018
js Add video support to fullscreen mediaView Sep 21, 2018
legal Load JQuery locally Sep 26, 2018
licenses - add circles to first slide Feb 25, 2018
lunrjs Add new drafts. Jul 22, 2018
pdf add 34c3 slides Apr 2, 2018
press Replace outdated history screenshot Sep 20, 2018
.dockerignore Fix git HEAD hash in footer Oct 4, 2018
.gitignore Update Docker configuration Dec 21, 2017
Dockerfile Fix git HEAD hash in footer Oct 4, 2018
Gemfile Update Jekyll to version 3.8.5 Jan 15, 2019
Gemfile.lock Update Jekyll to version 3.8.5 Jan 15, 2019 change features Feb 24, 2018 Add scripts and apges to handle FAQs and tutorials: Jul 21, 2018
_config.yml Update Jekyll to version 3.8.5 Jan 15, 2019
docker-compose.yml.example Fix isso image tag name Mar 29, 2018
favicon.ico Move favicon to the by the browser expected location when it is not e… Mar 7, 2018
index.html Replace outdated history screenshot Sep 20, 2018

NewPipe Website Generator

Repo for the NewPipe website, which includes the blog and the press kit.

All sites are based on Bootstrap 3.3.7 and Jekyll 3.7.2.



Install Jekyll and Bundler gems through RubyGems:

~ $ gem install jekyll bundler

Navigate to the root directory of this project, dev environment:

bundle install

Navigate to this directory and build the site on the preview server:

~ $ jekyll serve

Run http://localhost:4000/blog or http://localhost:4000/press.


As this repository includes the press kit and the blog, we prefix all layouts and includes with either press_ or blog_.


Categories / Tags

We do not make a difference between categories and tags, but only use categories. Categories are used to tag posts, so they can be found easier. Every tag has an overview page where you can find all posts with this tag. Tags are also recognized as keywords by the search and posts get with these tags get an extra boost and are listed higher.

You can add a category / tag in the YAML header of each page:

categories: category1

categories: [category1, category2, category3]

Post with tags get the following permalink: /blog/category1/category2/title

These categories are implemented right now:

  • release
  • announcement
  • talk
  • download
  • pinned

Every post which has the announcement category will also be shown in press/announcements/.

Posts with the pinned category appear on the right sidebar as Also interesting.

New categories can be implemented via an extra HTML page named categoryName.html and placed in blog/. The new page should look like this:

layout: blog_category
title: categoryName
category: categoryName
Post thumbnails

Post thumbnails which are going to be displayed at the left side of the post, need to be registered in _data/images.yml (see Image metadata to learn how to do this correctly). Thumbnails should be squarisch.

image - Displays an image at the left side of the post. Use the key you registered in _data/images.yml.

imageHidePress - Hides the image in the announcement page of the pres kit.

Image metadata

Image metadata can be set in _data/images.yml. Ypu can display an image in a post with following snippet:

<img src="/img/{{[IMAGE_NAME].url }}" />

newpipe-beta:                          # IMAGE_NAME which is used to display it
  url: logo_app_beta.svg               # path to the file relative to '/img/'
  type: svg                            # file extension like 'svg', 'png' or 'jpeg'
  size: 16583                          # file size of the image in bytes
  name: NewPipe Beta logo              # image description 
  author: Schabi                       # author
  origin: # optional: link to the origin of this image when it is not created by one of our teeam members
  download: /press/logo/#logo-beta     # optional: this is a link to the internal download page with an anchor to the download form '/press/logo/#logo-beta'
Page metadata

metatitle - The title to display in the browser <title></title>

metades - The description to display as <meta name="description">

metakey - Additional keywords for search engines <meta name="keywords">

modified - The date the page was last modified. It will be displayed at the bottom of each page. Format YYYY-MM-DD HH:MM:SS +/-TTTT


At the moment there is one search engine for the press kit and another one for the blog.

The variable search accepts following values wich modify the position in the search results:

exclude - exclude the whole page from the search

FAQ & Tutorials

FAQ and tutorials are located at and

Essentially FAQs and tutorials have the same structure: Both are collections (faq and tutorials) and can have the same attributes which are defined via the YAML front matter. Nevertheless we make a distinction between FAQs and tutorials because there are different behaviours implemented for them. While FAQs are displayed in multiple small collapsible boxes, every tutorial has its own page.

Writing FAQs & Tutorials

Since FAQs and tutorials are collections, firstly you need to create a new .HTML file in either _faq/ or _tutorials/. Please put the category name first and then add the title behind it: player_enable_autoplay.html. In the file, you need to define several things to get your post recognized and printed out correctly:

  • Each post must have at least one category which assigns it to one of the subpages (FAQ/player/, FAQ/download/, FAQ/bugs).
- bugs
- player
- download
  • There are two types a post can have: type: info or type: tutorial.
  • Every post needs a title: title: "Enable Autoplay"

Before you can start writing, there are some more small things to notice to make your post look like the others. Writing short FAQs is quite easy and there are only few things to consider.

  1. To structure the content, use <section>s. There should be no content which is not in a <section>.
  2. To separate parts of your article with a thin line, use <hr/> tags.
  3. To insert images, use the <img/> tag inside of a <figure> tag. Additionally, each image needs a caption (<figcaption>).
  4. Please keep your sentences as shorts as possible. This makes it easier to follow you and your instructions.