Blog Migration: Continuation of WIP PR #7144

Gemfile

@@ -44,10 +44,10 @@ group :jekyll_plugins do
    gem "jekyll-theme-tactile", "0.0.3"
    gem "jekyll-theme-time-machine", "0.0.3"
    gem "jekyll-titles-from-headings", "~> 0.1"
+   gem "jekyll-include-cache", "~> 0.1"
+   gem 'jekyll-youtube', '~> 1.0'
 end
 
-gem "jekyll-include-cache", "~> 0.1"
-
 gem "kramdown", "~> 1.11"
 gem "rouge", "~> 2.0"
 gem "pry"

Gemfile.lock

@@ -12,9 +12,9 @@ GEM
     ethon (0.11.0)
       ffi (>= 1.3.0)
     execjs (2.7.0)
-    faraday (0.13.1)
+    faraday (0.14.0)
       multipart-post (>= 1.2, < 3)
-    ffi (1.9.18)
+    ffi (1.9.21)
     forwardable-extended (2.6.0)
     jekyll (3.6.0)
       addressable (~> 2.4)
@@ -33,11 +33,11 @@ GEM
       coffee-script (~> 2.2)
     jekyll-default-layout (0.1.4)
       jekyll (~> 3.0)
-    jekyll-feed (0.9.2)
+    jekyll-feed (0.9.3)
       jekyll (~> 3.3)
-    jekyll-gist (1.4.1)
+    jekyll-gist (1.5.0)
       octokit (~> 4.2)
-    jekyll-github-metadata (2.9.3)
+    jekyll-github-metadata (2.9.4)
       jekyll (~> 3.1)
       octokit (~> 4.0, != 4.4.0)
     jekyll-include-cache (0.1.0)
@@ -49,13 +49,13 @@ GEM
       jekyll (~> 3.0)
     jekyll-redirect-from (0.13.0)
       jekyll (~> 3.3)
-    jekyll-relative-links (0.5.1)
+    jekyll-relative-links (0.5.2)
       jekyll (~> 3.3)
-    jekyll-sass-converter (1.5.0)
+    jekyll-sass-converter (1.5.2)
       sass (~> 3.4)
-    jekyll-seo-tag (2.3.0)
+    jekyll-seo-tag (2.4.0)
       jekyll (~> 3.3)
-    jekyll-sitemap (1.1.1)
+    jekyll-sitemap (1.2.0)
       jekyll (~> 3.3)
     jekyll-swiss (0.4.0)
     jekyll-theme-architect (0.0.3)
@@ -86,35 +86,41 @@ GEM
       jekyll (~> 3.3)
     jekyll-theme-time-machine (0.0.3)
       jekyll (~> 3.3)
-    jekyll-titles-from-headings (0.5.0)
+    jekyll-titles-from-headings (0.5.1)
       jekyll (~> 3.3)
-    jekyll-watch (1.5.0)
-      listen (~> 3.0, < 3.1)
+    jekyll-watch (1.5.1)
+      listen (~> 3.0)
+    jekyll-youtube (1.0.0)
+      jekyll
     json (1.8.6)
-    kramdown (1.15.0)
+    kramdown (1.16.2)
     liquid (4.0.0)
-    listen (3.0.8)
+    listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
+      ruby_dep (~> 1.2)
     mercenary (0.3.6)
     method_source (0.9.0)
-    minima (2.1.1)
-      jekyll (~> 3.3)
+    minima (2.3.0)
+      jekyll (~> 3.5)
+      jekyll-feed (~> 0.9)
+      jekyll-seo-tag (~> 2.1)
     multipart-post (2.0.0)
-    octokit (4.7.0)
+    octokit (4.8.0)
       sawyer (~> 0.8.0, >= 0.5.3)
-    pathutil (0.16.0)
+    pathutil (0.16.1)
       forwardable-extended (~> 2.6)
-    pry (0.11.2)
+    pry (0.11.3)
       coderay (~> 1.1.0)
       method_source (~> 0.9.0)
-    public_suffix (3.0.0)
+    public_suffix (3.0.2)
     rb-fsevent (0.10.2)
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
     rouge (2.2.1)
+    ruby_dep (1.5.0)
     safe_yaml (1.0.4)
-    sass (3.5.3)
+    sass (3.5.5)
       sass-listen (~> 4.0.0)
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
@@ -164,6 +170,7 @@ DEPENDENCIES
   jekyll-theme-tactile (= 0.0.3)
   jekyll-theme-time-machine (= 0.0.3)
   jekyll-titles-from-headings (~> 0.1)
+  jekyll-youtube (~> 1.0)
   json (~> 1.7, >= 1.7.7)
   kramdown (~> 1.11)
   minima (~> 2.0)
@@ -173,4 +180,4 @@ DEPENDENCIES
   unicode-display_width (~> 1.1)
 
 BUNDLED WITH
-   1.15.4
+   1.16.1

Makefile

@@ -9,7 +9,7 @@ build: ## Build site with production settings and put deliverables in _site.
 	bundle exec jekyll build
 
 build-preview: ## Build site with drafts and future posts enabled.
-	bundle exec jekyll build --drafts --future
+	bundle exec jekyll build --drafts --future --trace
 
 serve: ## Boot the development server.
 	bundle exec jekyll serve

_config.yml

@@ -14,6 +14,10 @@ safe: false
 lsi: false
 
 latest: "v1.10"
+
+paginate: 7
+paginate_path: "/blog/page:num/"
+
 defaults:
   -
     scope:
@@ -66,6 +70,8 @@ plugins:
   - jekyll-sitemap
   - jekyll-seo-tag
   - jekyll-include-cache
+  - jekyll-paginate
+  - jekyll-youtube
 # disabled gems
 #  - jekyll-redirect-from
 
@@ -90,3 +96,4 @@ tocs:
   - samples
   - search
   - imported
+  - blog

_includes/footer.html

@@ -1,9 +1,9 @@
-<footer>
+<footer col="12">
     <main class="light-text">
         <nav>
             <a href="/docs/tutorials/stateless-application/hello-minikube/">Get Started</a>
             <a href="/docs/home/">Documentation</a>
-            <a href="http://blog.kubernetes.io/">Blog</a>
+            <a href="/blog">Blog</a>
             <a href="/partners/">Partners</a>
             <a href="/community/">Community</a>
             <a href="/case-studies/">Case Studies</a>

_includes/head.html

@@ -29,4 +29,5 @@
     {% if page.js %}{% assign jslist = page.js | split: ',' | compact %}{% for jsurl in jslist %}<script src="{{ jsurl | strip }}"></script>
     {% endfor %}<!-- custom js added -->{% else %}<!-- no custom js detected -->{% endif %}
     {% seo %}
+    {% feed_meta %} 
 </head>

_includes/header.html

@@ -6,7 +6,7 @@
     <div class="nav-buttons" data-auto-burger="primary">
         <ul class="global-nav">
             <li><a href="/docs/home/">Documentation</a></li>
-            <li><a href="http://blog.kubernetes.io/">Blog</a></li>
+            <li><a href="/blog">Blog</a></li>
             <li><a href="/partners/">Partners</a></li>
             <li><a href="/community/">Community</a></li>
             <li><a href="/case-studies/">Case Studies</a></li>
@@ -45,7 +45,7 @@ <h3><a href="/community/">Community</a></h3>
             <p>If you need help, you can connect with other Kubernetes users and the Kubernetes authors, attend community events, and watch video presentations from around the web.</p>
         </div>
         <div class="nav-box">
-            <h3><a href="http://blog.kubernetes.io">Blog</a></h3>
+            <h3><a href="/blog">Blog</a></h3>
             <p>Read the latest news for Kubernetes and the containers space in general, and get technical how-tos hot off the presses.</p>
         </div>
         </main>

_includes/youtubePlayer.html

@@ -0,0 +1 @@
+<iframe width="560" height="315" src="https://www.youtube.com/embed/{{ include.id }}" frameborder="0" allowfullscreen></iframe>

_layouts/blog.html

@@ -0,0 +1,193 @@
+---
+#empty front matter
+---
+<!DOCTYPE html>
+<html id="blog">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="shortcut icon" type="image/png" href="/images/favicon.png">
+  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic">
+  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
+  <link rel="stylesheet" type="text/css" href="/css/jquery-ui.min.css">
+  <link rel='stylesheet' type='text/css' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
+  <!-- <link rel="stylesheet" type="text/css" href="/css/case_study_styles.css"> -->
+  <link rel="stylesheet" type="text/css" href="/css/blog.css">
+  <link rel="stylesheet" type="text/css" href="/css/styles.css">
+  <!-- <link rel="stylesheet" type="text/css" href="/css/sweetalert.css"> -->
+  <link rel="stylesheet" type="text/css" href="/css/callouts.css">
+
+  <link rel="stylesheet" type="text/css" href="/css/custom-jekyll/tags.css">
+  {% if page.deprecated %}<link rel="stylesheet" type="text/css" href="/css/deprecation-warning.css">{% endif %}
+  <link rel="stylesheet" type="text/css" href="/css/gridpage.css">
+  <link rel="stylesheet" type="text/css" href="/css/blog.css">
+
+  {% if page.description %}
+  <meta name="description" content="{{ page.description }}" />
+  {% else %}
+  <meta name="description" content="{{ page.title }}" />
+  {% endif %}
+
+  <script src="/js/jquery-2.2.0.min.js"></script>
+  <script src="/js/jquery-ui.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+  <script src="/js/script.js"></script>
+  <script src="/js/sweetalert.min.js"></script>
+  <script src="/js/custom-jekyll/tags.js"></script>
+  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
+
+  {% feed_meta %}
+
+  {% seo %}
+</head>
+
+
+
+<body>
+  <div id="cellophane" onclick="kub.toggleMenu()"></div>
+  <header>
+    <nav  class="nav-buttons" data-auto-burger="primary">
+      <ul class="global-nav">
+        <li><a href="/docs/home/">Documentation</a></li>
+        <li><a href="/blog">Blog</a></li>
+        <li><a href="/partners/">Partners</a></li>
+        <li><a href="/community/">Community</a></li>
+        <li><a href="/case-studies/">Case Studies</a></li>
+        <li>
+          <a href="#">
+            {{page.version}} <span class="ui-icon ui-icon-carat-1-s"></span>
+          </a>
+          <ul>
+            {% for version in page.versions %}
+            {% if page.versionedurl contains version.version %}
+            <li><a href="{{ version.url }}{{ page.versionedurl[version.version] }}">{{ version.version }}</a></li>
+            {% else  %}
+            <li><a href="{{ version.url }}{{ page.url }}">{{ version.version }}</a></li>
+            {% endif %}
+            {% endfor %}
+          </ul>
+        </li>
+      </li>
+    </ul>
+    <a href="/docs/home" class="button" id="viewDocs" data-auto-burger-exclude>View Documentation</a>
+    <a href="/docs/tutorials/kubernetes-basics/" class="button" id="tryKubernetes" data-auto-burger-exclude>Try Kubernetes</a>
+    <button id="hamburger" onclick="kub.toggleMenu()" data-auto-burger-exclude><div></div></button>
+  </nav>
+</div>
+</header>
+
+<div class="container-fluid">
+  <div id="blog-hero" class="light-text">
+      <a class= 'logo' href='http://kubernetes.io/'></a>
+  <div class='blog-title'>
+      <h1> Kubernetes Blog </h1>
+    </div>
+
+  <div class="clear" style="clear: both"></div>
+  </div>
+
+
+  <div class="row blog-content" >
+   <div class="col-xs-10 col-sm-9 col-lg-9 text">
+
+       <h4 class="date-header">{{ page.date | date: ' %A, %B %-d, %Y' }} </h4>
+      <h3 class="post-title entry-title">  {{page.title}} </h3>
+      {{ content }}
+
+        <div class="PageNavigation">
+          <div class="pagerButton left">
+            {% if page.next.url %}
+              <h4><a class=" button" href="{{page.next.url}}"> &laquo; Next </a></h4>
+            {% endif %}
+          </div>
+
+          <div class="pagerButton right">
+            {% if page.previous.url %}
+              <h4><a class=" button" href="{{page.previous.url}}"> Prev &raquo;</a></h4>
+            {% endif %}
+          </div>
+
+
+
+
+        </div>
+    </div>
+
+
+    <div class="col-xs-1 col-sm-1 col-sm-3 col-lg-3 text">
+      <div ="widget-content">
+        <link href='http://kubernetes.io/feed.xml' rel='alternate' type='application/atom+xml'>
+        <a class="widget-link" href="https://kubernetes.io/feed.xml"> <i class="fas fa-rss fab-icon"> </i> </a>
+        <a class="widget-link" href="https://twitter.com/kubernetesio"> <i class="fab fa-twitter-square fab-icon"> </i> @Kubernetesio</a>
+        <a class="widget-link" href="https://github.com/kubernetes/kubernetes"> <i class="fab fa-github-square fab-icon"></i> View on Github </a>
+        <a class="widget-link" href="http://slack.k8s.io"><i class="fab fa-slack fab-icon"> </i> #kubernetes-users </a>
+        <a class="widget-link" href="http://stackoverflow.com/questions/tagged/kubernetes"><i class="fab fa-stack-overflow fab-icon"></i>Stack Overflow</a>
+        <a class="widget-link" href="http://get.k8s.io/"><i class="fab fa-stack-overflow fab-icon"></i>Download Kubernetes</a>
+      </div>
+
+<!-- Begin Sidebar  Loop -->
+    {% for post in site.posts  %}
+    {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
+    {% capture this_month %}{{ post.date | date: "%B" }}{% endcapture %}
+    {% capture next_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
+    {% capture next_month %}{{ post.previous.date | date: "%B" }}{% endcapture %}
+    {% if forloop.first %}
+    <div class="sidebar-current-year">
+    <h4 id="{{ this_year }}-ref">{{this_year}}</h4>
+    <!-- Here we open a div and ul that are conditionally closed in the lower blocks -->
+    <div>
+      <h4 id="{{ this_year }}-{{ this_month }}-ref">{{ this_month }}</h4>
+      <ul>
+        {% endif %}
+        <li><a href="{{ post.url }}">{{ post.title }}</a></li>
+      {% if forloop.last %}  <!-- This section closes the entire div and ul at the final iteration-->
+      </ul>
+    </div>
+  </div>     <!-- end of final conditional -->
+    {% else %}
+        {% if this_year != next_year %}
+          </ul>
+          <!-- this closes the collapsible year body -->
+        </div>
+        <!-- this closes the sidebar-previous-year opened below -->
+      </div>
+      <div class="sidebar-previous-year">
+        <input type="checkbox" id="{{ next_year }}-ref-checkbox" class="heading-year-toggle-checkbox"/>
+        <label class="collapsible-year-heading-label" for="{{ next_year }}-ref-checkbox">
+          <span class="collapsible-year-body-caret">►&nbsp;</span>
+          <h4 class="collapsible-year-header" id="{{ next_year }}-ref">{{next_year}}</h4>
+        </label>
+        <div class="collapsible-year-body">
+          <input type="checkbox" id="{{ next_year }}-{{ next_month }}-ref-checkbox" class="heading-month-toggle-checkbox"/>
+          <label class="collapsible-month-heading-label" for="{{ next_year }}-{{ next_month }}-ref-checkbox">
+            <span class="collapsible-posts-list-caret">►&nbsp;</span>
+            <h5 class="collapsible-month-header" id="{{ next_year }}-{{ next_month }}-ref">{{ next_month }}</h5>
+          </label>
+          <ul class="collapsible-posts-list">
+            {% else %}
+              {% if this_month != next_month %}
+              </ul>
+
+
+              <input type="checkbox" id="{{ this_year }}-{{ next_month }}-ref-checkbox" class="heading-month-toggle-checkbox"/>
+              <label class="collapsible-month-heading-label" for="{{ this_year }}-{{ next_month }}-ref-checkbox">
+                <span class="collapsible-posts-list-caret">►&nbsp;</span>
+                <h5 class="collapsible-month-header" id="{{ this_year }}-{{ next_month }}-ref">{{ next_month }}</h5>
+              </label>
+
+              <ul class="collapsible-posts-list">
+            {% endif %}
+        {% endif %}
+    {% endif %}
+{% endfor %}
+
+</div>
+
+
+</div>
+
+</div>
+</body>
+{% include footer.html %}
+{% include footer-scripts.html %}
+</html>