make it to template

404.html

@@ -0,0 +1,9 @@
+---
+layout: default
+title: "404: Page not found"
+permalink: 404.html
+---
+
+<div>
+  <h1>404: Page not found</h1>
+</div>

Gemfile

@@ -16,10 +16,10 @@ gem "minima","2.0"
 
 gem "jekyll-sitemap"
 
-gem "jekyll-seo-tag"
-
 gem 'therubyracer'
 
+gem 'jekyll-paginate'
+
 # If you want to use GitHub Pages, remove the "gem "jekyll"" above and
 # uncomment the line below. To upgrade, run `bundle update github-pages`.
 # gem "github-pages", group: :jekyll_plugins

Gemfile.lock

@@ -27,18 +27,17 @@ GEM
       pathutil (~> 0.9)
       rouge (>= 1.7, < 4)
       safe_yaml (~> 1.0)
-    jekyll-feed (0.9.2)
-      jekyll (~> 3.3)
+    jekyll-feed (0.12.1)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-paginate (1.1.0)
     jekyll-sass-converter (1.5.2)
       sass (~> 3.4)
-    jekyll-seo-tag (2.2.3)
-      jekyll (~> 3.3)
-    jekyll-sitemap (1.1.1)
-      jekyll (~> 3.3)
+    jekyll-sitemap (1.3.1)
+      jekyll (>= 3.7, < 5.0)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
     kramdown (1.17.0)
-    libv8 (3.16.14.19)
+    libv8 (3.16.14.19-x86_64-linux)
     liquid (4.0.3)
     listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
@@ -53,7 +52,7 @@ GEM
     rb-inotify (0.10.0)
       ffi (~> 1.0)
     ref (2.0.0)
-    rouge (3.5.1)
+    rouge (3.6.0)
     ruby_dep (1.5.0)
     safe_yaml (1.0.5)
     sass (3.7.4)
@@ -71,7 +70,7 @@ PLATFORMS
 DEPENDENCIES
   jekyll (= 3.8.6)
   jekyll-feed (~> 0.6)
-  jekyll-seo-tag
+  jekyll-paginate
   jekyll-sitemap
   minima (= 2.0)
   therubyracer
@@ -80,4 +79,4 @@ RUBY VERSION
    ruby 2.6.3p62
 
 BUNDLED WITH
-   2.0.1
+   2.0.2

_config.yml

@@ -21,19 +21,23 @@ description:
 baseurl: "" # the subpath of your site, e.g. /blog
 github_username:  alainpham
 
+# jekyll-paginate configuration
+paginate: 10
+
 # Build settings
 markdown: kramdown
 #theme: minima
-gems:
+plugins:
   - jekyll-feed
   - jekyll-sitemap
-  - jekyll-seo-tag
+  - jekyll-paginate
 exclude:
   - Gemfile
   - Gemfile.lock
 include: ["_pages"]
 permalink: /posts/:title/
 excerpt_separator: <!--more-->
-author: https://www.linkedin.com/in/alainpham
+author: http://www.linkedin.com/in/alainpham
+
+host: 0.0.0.0
 
-host: 0.0.0.0

_data/settings.yml

@@ -0,0 +1,33 @@
+# Change 'comments' to true for Disqus comments
+disqus:
+  comments: true
+  disqus_shortname: 'apham'
+
+# If you are not using Google Analytics, please change 'google-ID' to an empty string
+google-ID: 'UA-91332049-1'
+
+menu: 
+  - name: Featured Projects
+    submenu:
+      - name: MicroBam
+        link: /projects/microbam
+      - name: OurLegacy
+        link: /projects/ourlegacy
+  - name: Posts
+    link: /
+  - name: Tags
+    link: /tags
+  - name: About
+    link: /about
+  - name: Follow me
+    submenu:
+      - name: GitHub
+        icon: github
+        link: http://github.com/alainpham
+      - name: LinkedIn
+        icon: linkedin-square
+        link: http://www.linkedin.com/in/alainpham
+      - name: Twitter
+        icon: twitter
+        link: https://twitter.com/koint
+

_drafts/draft.md

@@ -0,0 +1,28 @@
+---
+layout: default
+title: "draft"
+date: 2019-07-11 05:00:00 +0200
+published: 2019-07-11 05:00:00 +0200
+comments: true
+categories: development
+tags: [test,test2]
+github: "https://github.com/alainpham/"
+---
+Hello This is a good one.
+<!--more-->
+
+## Test Title 1
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus in metus vulputate eu scelerisque felis imperdiet proin fermentum. Maecenas ultricies mi eget mauris pharetra et ultrices neque. Mauris pellentesque pulvinar pellentesque habitant. Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem. Nec sagittis aliquam malesuada bibendum. Pharetra massa massa ultricies mi quis hendrerit. In hac habitasse platea dictumst. Turpis massa tincidunt dui ut ornare lectus sit. Egestas purus viverra accumsan in nisl nisi scelerisque. Vel pharetra vel turpis nunc eget lorem dolor sed. Sit amet tellus cras adipiscing enim. At varius vel pharetra vel turpis nunc eget. Facilisis magna etiam tempor orci. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim.
+
+Pharetra pharetra massa massa ultricies mi quis hendrerit. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et. Suscipit tellus mauris a diam maecenas sed enim ut. At consectetur lorem donec massa sapien faucibus et molestie. Amet est placerat in egestas erat imperdiet sed euismod nisi. A diam maecenas sed enim ut sem viverra aliquet. Tristique magna sit amet purus gravida quis blandit turpis. Ut eu sem integer vitae justo eget magna. Urna nec tincidunt praesent semper feugiat. Commodo odio aenean sed adipiscing diam donec adipiscing tristique risus. Nisi lacus sed viverra tellus in hac habitasse platea dictumst. Quisque non tellus orci ac auctor. Orci ac auctor augue mauris. Eu volutpat odio facilisis mauris. Scelerisque viverra mauris in aliquam sem fringilla ut morbi tincidunt. Dolor purus non enim praesent elementum facilisis leo. Nibh nisl condimentum id venenatis. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque.
+
+Risus in hendrerit gravida rutrum quisque. Eleifend donec pretium vulputate sapien nec. Sed viverra tellus in hac habitasse platea dictumst vestibulum. Tortor at auctor urna nunc. Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Quisque sagittis purus sit amet volutpat. Nullam ac tortor vitae purus. Arcu risus quis varius quam quisque id. Quis imperdiet massa tincidunt nunc. Ut diam quam nulla porttitor.
+
+Ac turpis egestas sed tempus urna et pharetra. Odio eu feugiat pretium nibh ipsum consequat nisl vel pretium. Placerat in egestas erat imperdiet sed. Tortor at risus viverra adipiscing at in tellus integer feugiat. Mauris sit amet massa vitae tortor condimentum lacinia quis. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Sem integer vitae justo eget magna. Suspendisse interdum consectetur libero id. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare.
+
+Sed vulputate mi sit amet mauris commodo. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Eu sem integer vitae justo eget magna fermentum iaculis eu. Quis ipsum suspendisse ultrices gravida. Tincidunt eget nullam non nisi est. Aliquam purus sit amet luctus venenatis lectus magna. Feugiat nisl pretium fusce id. Ipsum dolor sit amet consectetur adipiscing elit. Eu turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. At elementum eu facilisis sed odio. Tellus in metus vulputate eu scelerisque felis imperdiet. Quis commodo odio aenean sed adipiscing diam donec adipiscing. Morbi tincidunt augue interdum velit. Ut morbi tincidunt augue interdum velit euismod in pellentesque massa. Commodo quis imperdiet massa tincidunt.
+### Test title 2
+
+ffdfds
+
+## Testsss

_includes/analytics.html

@@ -4,7 +4,7 @@
   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
   })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 
-  ga('create', 'UA-91332049-1', 'auto');
+  ga('create', '{{site.google-ID}}', 'auto');
   ga('send', 'pageview');
 
 </script>

_includes/disqus.html

@@ -1,4 +1,4 @@
-{% if page.comments %}
+{% if site.data.settings.disqus.comments and page.comments %}
 
 <div id="disqus_thread"></div>
 <script>
@@ -14,7 +14,7 @@
 
 (function() { // DON'T EDIT BELOW THIS LINE
 var d = document, s = d.createElement('script');
-s.src = '//apham.disqus.com/embed.js';
+s.src = '//{{ site.data.settings.disqus.disqus_shortname }}.disqus.com/embed.js';
 s.setAttribute('data-timestamp', +new Date());
 (d.head || d.body).appendChild(s);
 })();

_includes/header.html

@@ -13,30 +13,32 @@
 			</div>
 			<div id="navbar-collapse-menu" class="collapse navbar-collapse">
 				<ul class="nav navbar-nav">
-					<li class="dropdown"><a class="dropdown-toggle"
-						data-toggle="dropdown" href="#">Featured Projects<span
-							class="caret"></span></a>
-						<ul class="dropdown-menu">
-							<li><a href="/projects/microbam">MicroBam</a></li>
-							<li><a href="/projects/ourlegacy">OurLegacy</a></li>
-						</ul></li>
-					<li><a href="/">Posts</a></li>
-<!-- 					<li><a href="/">Presentations</a></li>-->
-					<li><a href="/tags">Tags</a></li>
-					<li><a href="/about/">About</a></li>
-					<!-- <li><a href="/books/">Recommended books</a></li> -->
-					<li class="dropdown"><a class="dropdown-toggle"
-						data-toggle="dropdown" href="#">Follow me<span
-							class="caret"></span></a>
-						<ul class="dropdown-menu">
-							<li><a href="http://github.com/alainpham"> <i
-									class="fa fa-inverse fa-github fa-2x"></i> GitHub</a></li>
-							<li><a href="http://www.linkedin.com/in/alainpham"> <i
-									class="fa fa-inverse fa-linkedin-square fa-2x"></i> LinkedIn</a></li>
-							<li><a href="https://twitter.com/koint"> <i
-									class="fa fa-inverse fa-twitter fa-2x"></i>Twitter</a></li>
-						</ul></li>
 
+					{% for item in site.data.settings.menu %}
+						<!-- If has submenues -->
+						{% if item.submenu %}
+						<li class="dropdown">
+							<a class="dropdown-toggle"	data-toggle="dropdown" href="#">
+								{{item.name}}
+								<span class="caret"></span>
+							</a>
+							<ul class="dropdown-menu">
+								{% for subitem in item.submenu %}
+									<li>
+										<a href="{{subitem.link}}">
+											{% if subitem.icon %}
+											<i class="fa fa-inverse fa-{{subitem.icon}} fa-2x"></i>
+											{% endif %}
+											{{subitem.name}}
+										</a>
+									</li>
+								{% endfor %}
+								</ul>
+							</li>
+						{% else %}
+							<li><a href="{{item.link}}">{{item.name}}</a></li>
+						{% endif %}
+					{% endfor %}
 				</ul>
 			</div>
 		</div>

index.html

@@ -4,8 +4,28 @@
 description: Sharing about Application Development, Integration, Cloud, Big Data and Digital Transformation 
 comments: true 
 ---
+
+<!-- Pagination links -->
+<div >
+	{% if paginator.previous_page %}
+		<a href="{{ paginator.previous_page_path }}" >
+		Previous
+		</a>
+	{% else %}
+		<span>Previous</span>
+	{% endif %}
+	| <span class="page_number ">
+		Page: {{ paginator.page }} of {{ paginator.total_pages }}
+	</span> | 
+	{% if paginator.next_page %}
+		<a href="{{ paginator.next_page_path }}" >Next</a>
+	{% else %}
+		<span >Next</span>
+	{% endif %}
+</div>
+
 <div class="list-group">
-	{% for post in site.posts %} 
+	{% for post in paginator.posts %} 
 	<div class="list-group-item">
 	<a href="{{ post.url }}">
 		<h4 class="list-group-item-heading">{{ post.title }}</h4>
@@ -25,3 +45,22 @@ <h6 class="list-group-item-heading">{{ post.published | date: '%B %d,
 	{% endfor %}
 </div>
 
+<!-- Pagination links -->
+<div >
+{% if paginator.previous_page %}
+	<a href="{{ paginator.previous_page_path }}" >
+	Previous
+	</a>
+{% else %}
+	<span>Previous</span>
+{% endif %}
+| <span class="page_number ">
+	Page: {{ paginator.page }} of {{ paginator.total_pages }}
+</span> | 
+{% if paginator.next_page %}
+	<a href="{{ paginator.next_page_path }}" >Next</a>
+{% else %}
+	<span >Next</span>
+{% endif %}
+</div>
+