Architect: A Jekyll Theme for GitHub Pages

The Architect theme

Architect is a Jekyll theme for GitHub Pages. You can preview the theme to see what it looks like, or even use it today.

Usage

To use the Architect theme:

Add the following to your site's _config.yml:

remote_theme: pages-themes/architect@v0.2.0
plugins:
- jekyll-remote-theme # add this line to the plugins list if you already have one

Optionally, if you'd like to preview your site on your computer, add the following to your site's Gemfile:

gem "github-pages", group: :jekyll_plugins

Customizing

Configuration variables

Architect will respect the following variables, if set in your site's _config.yml:

title: [The title of your site]
description: [A short description of your site's purpose]

Additionally, you may choose to set the following optional variables:

show_downloads: ["true" or "false" (unquoted) to indicate whether to provide a download URL]
google_analytics: [Your Google Analytics tracking ID]

Stylesheet

If you'd like to add your own custom styles:

Create a file called /assets/css/style.scss in your site

Add the following content to the top of the file, exactly as shown:

---
---

@import "{{ site.theme }}";

Add any custom CSS (or Sass, including imports) you'd like immediately after the @import line

Note: If you'd like to change the theme's Sass variables, you must set new values before the @import line in your stylesheet.

Layouts

If you'd like to change the theme's HTML layout:

1. For some changes such as a custom favicon, you can add custom files in your local _includes folder. The files provided with the theme provide a starting point and are included by the original layout template.
2. For more extensive changes, copy the original template from the theme's repository
   (Pro-tip: click "raw" to make copying easier)
3. Create a file called /_layouts/default.html in your site
4. Paste the default layout content copied in the first step
5. Customize the layout as you'd like

Customizing Google Analytics code

Google has released several iterations to their Google Analytics code over the years since this theme was first created. If you would like to take advantage of the latest code, paste it into _includes/head-custom-google-analytics.html in your Jekyll site.

Overriding GitHub-generated URLs

Templates often rely on URLs supplied by GitHub such as links to your repository or links to download your project. If you'd like to override one or more default URLs:

Look at the template source to determine the name of the variable. It will be in the form of {{ site.github.zip_url }}.

Specify the URL that you'd like the template to use in your site's _config.yml. For example, if the variable was site.github.url, you'd add the following:

github:
  zip_url: http://example.com/download.zip
  another_url: another value

When your site is built, Jekyll will use the URL you specified, rather than the default one provided by GitHub.

Note: You must remove the site. prefix, and each variable name (after the github.) should be indent with two space below github:.

For more information, see the Jekyll variables documentation.

Roadmap

See the open issues for a list of proposed features (and known issues).

Project philosophy

The Architect theme is intended to make it quick and easy for GitHub Pages users to create their first (or 100th) website. The theme should meet the vast majority of users' needs out of the box, erring on the side of simplicity rather than flexibility, and provide users the opportunity to opt-in to additional complexity if they have specific needs or wish to further customize their experience (such as adding custom CSS or modifying the default layout). It should also look great, but that goes without saying.

Contributing

Interested in contributing to Architect? We'd love your help. Architect is an open source project, built one contribution at a time by users like you. See the CONTRIBUTING file for instructions on how to contribute.

Previewing the theme locally

If you'd like to preview the theme locally (for example, in the process of proposing a change):

1. Clone down the theme's repository (git clone https://github.com/pages-themes/architect)
2. cd into the theme's directory
3. Run script/bootstrap to install the necessary dependencies
4. Run bundle exec jekyll serve to start the preview server
5. Visit localhost:4000 in your browser to preview the theme

Running tests

The theme contains a minimal test suite, to ensure a site with the theme would build successfully. To run the tests, simply run script/cibuild. You'll need to run script/bootstrap once before the test script will work.

Download Details:

Author: Pages-themes
Source Code: https://github.com/pages-themes/architect 
License: CC0-1.0 license

#jekyll #theme #githubpages 

Slate: A Jekyll Theme for GitHub Pages

The Slate theme 

Slate is a Jekyll theme for GitHub Pages. You can preview the theme to see what it looks like, or even use it today.

Usage

To use the Slate theme:

Add the following to your site's _config.yml:

remote_theme: pages-themes/slate@v0.2.0
plugins:
- jekyll-remote-theme # add this line to the plugins list if you already have one

Optionally, if you'd like to preview your site on your computer, add the following to your site's Gemfile:

gem "github-pages", group: :jekyll_plugins

Customizing

Configuration variables

Slate will respect the following variables, if set in your site's _config.yml:

title: [The title of your site]
description: [A short description of your site's purpose]

Additionally, you may choose to set the following optional variables:

show_downloads: ["true" or "false" (unquoted) to indicate whether to provide a download URL]
google_analytics: [Your Google Analytics tracking ID]

Stylesheet

If you'd like to add your own custom styles:

Create a file called /assets/css/style.scss in your site

Add the following content to the top of the file, exactly as shown:

---
---

@import "{{ site.theme }}";

Add any custom CSS (or Sass, including imports) you'd like immediately after the @import line

Note: If you'd like to change the theme's Sass variables, you must set new values before the @import line in your stylesheet.

Layouts

If you'd like to change the theme's HTML layout:

1. For some changes such as a custom favicon, you can add custom files in your local _includes folder. The files provided with the theme provide a starting point and are included by the original layout template.
2. For more extensive changes, copy the original template from the theme's repository
   (Pro-tip: click "raw" to make copying easier)
3. Create a file called /_layouts/default.html in your site
4. Paste the default layout content copied in the first step
5. Customize the layout as you'd like

Customizing Google Analytics code

Google has released several iterations to their Google Analytics code over the years since this theme was first created. If you would like to take advantage of the latest code, paste it into _includes/head-custom-google-analytics.html in your Jekyll site.

Overriding GitHub-generated URLs

Templates often rely on URLs supplied by GitHub such as links to your repository or links to download your project. If you'd like to override one or more default URLs:

Look at the template source to determine the name of the variable. It will be in the form of {{ site.github.zip_url }}.

Specify the URL that you'd like the template to use in your site's _config.yml. For example, if the variable was site.github.url, you'd add the following:

github:
  zip_url: http://example.com/download.zip
  another_url: another value

When your site is built, Jekyll will use the URL you specified, rather than the default one provided by GitHub.

Note: You must remove the site. prefix, and each variable name (after the github.) should be indent with two space below github:.

For more information, see the Jekyll variables documentation.

Roadmap

See the open issues for a list of proposed features (and known issues).

Project philosophy

The Slate theme is intended to make it quick and easy for GitHub Pages users to create their first (or 100th) website. The theme should meet the vast majority of users' needs out of the box, erring on the side of simplicity rather than flexibility, and provide users the opportunity to opt-in to additional complexity if they have specific needs or wish to further customize their experience (such as adding custom CSS or modifying the default layout). It should also look great, but that goes without saying.

Contributing

Interested in contributing to Slate? We'd love your help. Slate is an open source project, built one contribution at a time by users like you. See the CONTRIBUTING file for instructions on how to contribute.

Previewing the theme locally

If you'd like to preview the theme locally (for example, in the process of proposing a change):

1. Clone down the theme's repository (git clone https://github.com/pages-themes/slate)
2. cd into the theme's directory
3. Run script/bootstrap to install the necessary dependencies
4. Run bundle exec jekyll serve to start the preview server
5. Visit localhost:4000 in your browser to preview the theme

Running tests

The theme contains a minimal test suite, to ensure a site with the theme would build successfully. To run the tests, simply run script/cibuild. You'll need to run script/bootstrap once before the test script will work.

Download Details:

Author: Pages-themes
Source Code: https://github.com/pages-themes/slate 
License: CC0-1.0 license

#jekyll #pages #theme #githubpages 

Kmeans_pytorch: Kmeans using Pytorch

K Means using PyTorch

PyTorch implementation of kmeans for utilizing GPU

Getting Started

import torch
import numpy as np
from kmeans_pytorch import kmeans

# data
data_size, dims, num_clusters = 1000, 2, 3
x = np.random.randn(data_size, dims) / 6
x = torch.from_numpy(x)

# kmeans
cluster_ids_x, cluster_centers = kmeans(
    X=x, num_clusters=num_clusters, distance='euclidean', device=torch.device('cuda:0')
)

see example.ipynb for a more elaborate example

Requirements

• PyTorch version >= 1.0.0
• Python version >= 3.6

Installation

install with pip:

pip install kmeans-pytorch

Installing from source

To install from source and develop locally:

git clone https://github.com/subhadarship/kmeans_pytorch
cd kmeans_pytorch
pip install --editable .

CPU vs GPU

see cpu_vs_gpu.ipynb for a comparison between CPU and GPU

Notes

• useful when clustering large number of samples
• utilizes GPU for faster matrix computations
• support euclidean and cosine distances (for now)

Credits

• This implementation closely follows the style of this
• Documentation is done using the awesome theme jekyllbook

Download Details:

Author: Subhadarship
Source Code: https://github.com/subhadarship/kmeans_pytorch 
License: MIT license

#jekyll #pytorch #githubpages #docs #gpu 

Neumorphism Designed Jekyll Theme for Personal Websites

Neumorphism

Neumorphism designed Jekyll theme for personal websites, portfolios and resumes.

• Featured on JAMstack Themes
• Featured on Jekyll Themes
• Featured on jekyllthemes

About The Project

This is a personal website built with Jekyll and hosted on Github Pages, which is based on the new Neumorphism design trend and was developed with a mobile-first approach. This can be used by developers, who want to showcase their resume and portfolio. If you want to use this for your own website, fork this repository and then refer to personalize and customize.

Built With

• Jekyll

Features

• Mobile-First Responsive Design
• Animated preloader animation
• Landing Page with animated background with particles.js, a Typing Carousel and animated social icons
• Dark Neumorphism Design on main content
• Animations On Scroll
• Filterable Skills word cloud
• Github's API automatically populating the Open Source Projects section
• Gulp dev workflow with BrowserSync, Autoprefixer and JS & SCSS minifying.
• Google Analytics

Getting Started

To get a local copy up and running follow these simple steps.

The commands and instructions I provide are for MacOS - please look up the specific commands for your OS on your own.

Prerequisites

• NodeJS

brew install node

If you need to switch between Node versions regurlarly, I would recommend to install Node via Node Version Manager.

• Jekyll

gem install bundler jekyll

For more information, refer to this.

• Yarn

npm install -g yarn

Installation

Recommended way: If you want to contribute to this theme or open issues due to problems implementing this on your own, I would recommend forking the repository directly. This makes it easier for me to solve open issues and questions or check pull requests.

1.1: Fork the repository (using the Fork button at the top) and then clone the repository

# Replace {YOUR_USERNAME} with your actual username
git clone https://github.com/{YOUR_USERNAME}/neumorphism.git

or

1.2: Create your own repository (using the green Use this template button at the top) and then clone the repository

# Replace {YOUR_USERNAME}, {YOUR_REPOSITORY} with the actual values
git clone https://github.com/{YOUR_USERNAME}/{YOUR_REPOSITORY}.git

2: Change directory into neumorphism

cd neumorphism

3: Install dependencies

yarn
bundle install

Usage

• Run and develop locally with live server at http://localhost:4000, this will also build production-ready JS and SCSS assets with every change

gulp

• After committing and pushing, see the Settings page of your repository to see where your site is published at via Github Pages.

Personalize and Customize

_config.yml

Edit _config.yml to personalize your site. For documentation, refer to docs/config.md.

Github Metadata Plugin

If you want to automatically have your Github repositories pulled for the Open Source Projects section, then you also need to authenticate yourself for the Github Metadata plugin to work.

You need to generate a new personal access token on GitHub:

• Go to the Github Token site
• Select the scope public_repository, and add a description.
• Confirm and save the settings. Copy the token you see on the page.
• Create a .env file inside your repository and add your generated JEKYLL_GITHUB_TOKEN:

JEKYLL_GITHUB_TOKEN=0YOUR0GENERATED0TOKEN0

To complete the configuration for the Github Metadata plugin, you also need to change the value of repository inside _config.yml. After this, you should the Github Metadata plugin should work properly.

For optimal results, you should make sure, that every Github project, you want included on this portfolio, has added following informations on Github:

• Description
• Homepage link, if there is a live version of it
• Topics

Example:

_data/*.yml

Edit files inside _data to add information to the portfolio. For documentation, refer to docs/data.md.

Particles.js

Edit assets/particles.json to customize the landing page backgorund animation. For more information, refer to this.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Acknowledgements

• Font Awesome
• Normalize.css
• Based Preloader on Codrin Pavel's version
• Typing Carousel by Gregory Schier
• Social Button Animation by Stéphane Lyver
• Adapted Damian Jankowski's color palette for the neumorphism design
• Based Timeline on Krishna Babu's version

Download Details:

Author: longpdo
Source Code: https://github.com/longpdo/neumorphism 
License: MIT license

#jekyll #theme #template #githubpages 

Reverie: A Ridiculously Elegant Jekyll Theme

Reverie

Reverie is a Jekyll-powered theme which is simple and opinionated. It's actually a fork of jekyll-now with some additional features and personal touches which I've implemented to suit my needs for my blog.

Theme demo

This is a plug-and-play Jekyll theme best suited to use on GitHub Pages (or Cloudflare Pages if you want to have your repository private) without even setting up a local environment.

Responsiveness	Search	Categories

Features overview

• Clean and minimal design
• Single column post layout
• Command-line free fork-first workflow, using GitHub.com to create, customize and post to your blog
• Fully responsive and mobile optimized theme
• Sass/Coffeescript support using Jekyll 2.0
• Free hosting on your GitHub Pages user site
• All the SEO goodies come built-in
• Markdown blogging
• Supports Pullquotes
• Syntax highlighting using Pygments
  • Dracula syntax theme included
• Disqus commenting
• Social media icons
• Google Analytics integration
• Supports Google Analytics 4
• Fuzzy search across blog posts
• Blog with pagination
• Categorize posts out-of-the box
• RSS Feed
• Built-in sitemap

Like this theme? If so, consider donating a small amount that will help my maintaining this project further.

You can support me via Paypal.

Using Reverie on GitHub Pages

Setting up Reverie on GitHub Pages is as simple as it gets!

1. Fork Reverie to your User Repository

Fork this repository, then rename the repository to yourgithubusername.github.io.

Alternatively, you can click the Use this template button if you want to create a repository with a clean commit history which will use Reverie as a template.

Your Jekyll blog will often be viewable immediately at https://yourgithubusername.github.io (if it's not, you can often force it to build by completing step 2).

2. Customize and view your site

Enter your site name, description, avatar and many other options by editing the _config.yml file. You can easily turn on Google Analytics tracking, Disqus commenting and social icons here.

Making a change to _config.yml (or any file in your repository) will force GitHub Pages to rebuild your site with Jekyll. Your rebuilt site will be viewable a few seconds later at https://yourgithubusername.github.io - if not, give it ten minutes as GitHub suggests and it'll appear soon.

3. Publish your first blog post

Delete all files from _postsdirectory and create a new file called /_posts/2019-2-13-Hello-World.md to publish your first blog post. That's all you need to do to publish your first blog post! This Markdown Cheatsheet might come in handy while writing the posts.

You can add additional posts in the browser on GitHub.com too! Just hit the Create new file button in /_posts/ to create new content. Just make sure to include the front-matter block at the top of each new blog post and make sure the post's filename is in this format: year-month-day-title.md

Using Categories in Reverie

You can categorize your content based on categories in Reverie. For this, you just need to add categories in front matter like below:

For adding single category:

categories: JavaScript

For adding multiple categories:

categories: [PHP, Laravel]

The categorized content can be shown over this URL: https://yourgithubusername.github.io/categories/

Pagination

Pagination of posts in Reverie works out-of-the-box. You only need to specify the number of posts you want on a single page in _config.yml and Reverie will take care of the rest.

paginate: 6

RSS

Reverie comes with a RSS feed in-built. The generated RSS Feed of your blog can be found at https://yourgithubusername.github.io/feed. You can see the example RSS feed over here.

Sitemap

The generated sitemap of your blog can be found at https://yourgithubusername.github.io/sitemap.xml. You can see the example sitemap feed over here.

Emailware

Reverie is an emailware. Meaning, if you liked using this theme or it has helped you in any way, I'd like you send me an email at bullredeyes@gmail.com about anything you'd want to say about this software. I'd really appreciate it!

The name?

reverie - a state of being pleasantly lost in one's thoughts; a daydream.
/ˈrɛv(ə)ri/

Support my work via Paypal • Would you be interested in Reverie Pro?

Download Details:

Author: Amitmerchant1990
Source Code: https://github.com/amitmerchant1990/reverie 
License: MIT license

#jekyll #blog #theme #githubpages 

Flexible-Jekyll: A Simple and Clean Theme for Jekyll

Flexible-Jekyll is a simple and clean theme for Jekyll

Demo

Check the theme in action Demo

The main page would look like this:

The post page would look like this:

Features

• Google Fonts
• Font Awesome
• Disqus
• Analytics
• Support Emoji

Installation:

Fork the master branch and follow the Jekyll Installation Documentation.

Download Details:

Author: Artemsheludko
Source Code: https://github.com/artemsheludko/flexible-jekyll 
License: GPL-3.0 license

#jekyll #theme #githubpages 

Type-on-Strap: Simplistic, responsive jekyll based open source theme

Type on Strap 🎨

A free and open-source Jekyll theme. Based on Rohan Chandra type-theme packed with extra features and easily customizable:

• Responsive design on all devices (🖥, 💻, 📱, ...)
• Portfolio 🗂, Gallery 🖼 pages for your projects
• Multi comments 💬 options
• Tags compatibility 🏷
• Handle Bootstrap'ed pages: Get Bootstrap
• 🔎 Search feature: Simple-Jekyll-Search
• Math Rendering : KateX
• Diagram Rendering: Mermaid-js
• 🖋 Nice fonts: Font Awesome, Source Sans Pro, Pacifico
• Seo Tags: Jekyll-seo-tag
• 🛠 Syntax Highlighting: Easily customisable Base16
• 💡 Light and dark theme supported
• Find free of rights images on pexels

Demo Site

Usage

As a ruby gem 💎

Check out this tutorial: Use as Ruby Gem

As a github page 📋

1. Fork and clone the Type on Strap repo: git clone https://github.com/Sylhare/Type-on-Strap.git
2. Install Jekyll: gem install jekyll, check #1 if you have a problem.
3. Install the theme's dependencies: bundle install
4. Customize the theme
   • GitHub Page: update _config.yml
5. Run the Jekyll server: bundle exec jekyll serve

Structure

Here are the main files of the template

Type-on-Strap
├── _includes                   # Theme includes
├── _layouts                   # Theme layouts (see below for details)
├── _portfolio                   # Collection of articles for the portfolio page
├── _posts                     # Blog posts
├── _sass                      # Sass partials (compiled into css at runtime)
├── assets
|  ├── js                   # JS compiled for distribution + raw sources
|  ├── css                     # CSS compiled for distribution
|  ├── fonts               # Font-Awesome, and other fonts
|  └── img               # Images used for the template
├── pages
|   ├── 404.md               # To be displayed when url is wrong
|   ├── about.md               # About example page
|   ├── gallery.md             # Gallery page for your photos
|   ├── portfolio.md           # Portfolio page for your projects
|   ├── search.md           # Search page
|   └── tags.md                # The tag page
├── _config.yml                # sample configuration
├── _data.yml
|  ├── authors.yml             # Update the post authors configurations 
|  ├── language.yml            # Localization configuration
|  ├── biblio.yml              # To create a reference bibliography
|  ├── social.yml              # Social configurations to share posts (RSS, shares, ...)
|  └── icons.yml               # Footer icons (Twitter, Github, Stackoverflow, ...)
└── index.html                 # sample home page (blog page paginated)

Configure Type on Strap 🛠

Open _config.yml in a text editor to change most of the blog's settings.

If a variable in this document is marked as "optional", disable the feature by removing all text from the variable.

Site configuration

Base url

Configure Jekyll as your own blog or with a "baseurl" in _config.yml:

Jekyll website without a "baseurl" (such as a GitHub Pages website with your username as the repository name):

baseurl: ""
url: "https://username.github.io"

Jekyll website with "baseurl" (like the Type on Strap demo page):

baseurl: "/sub-directory"
url: "https://username.github.io"

Jekyll blog configuration

And here is the basic information you will need in your _config.yml for it to work properly:

# BLOG CONFIGURATION
post_navigation: true
paginate: 10
paginate_path: "blog/page:num"
plugins: [jekyll-paginate, jekyll-seo-tag, jekyll-feed]

To configure the blog part and default plugins. Those plugins are validated by GitHub page.

Meta and Branding

Meta variables hold basic information about your Jekyll site which will be used throughout the site and as meta properties that are used for search engines, browsers, and the site's RSS feed.

Change these variables in _config.yml:

title: My Jekyll Blog                 # Name of website
avatar: assets/img/avatar.png         # Path of avatar image, to be displayed in the theme's header
description: My blog posts            # Short description, primarily used by search engines
favicon: assets/favicon.ico           # Icon displayed in the tab
color_theme: auto                     # color theme auto, dark or light

You can also customize the seo tags default option following the jekyll-seo-tag plugin documentation. The color theme can be set to dark or light (customize it in variables.scss). Using auto you'll have a tiny icon in the navbar allowing the use to manually switch from dark to light theme.

Theme customization 🎨

Footer and Header's text

Customize your site header/footer with these variables in _config.yml:

header_text: Welcome to my Jekyll blog
footer_text: Copyright 2017

If you don't want anything, replace the value by " ".

Header's image

The header's image (tested with 2480x1280) can be set as one image with header_feature_image but can also be responsive:

header_feature_image: assets/img/header/my-header-image.png
header_feature_image_responsive: true

By setting header_feature_image_responsive to true, it will look for images with suffix -small (620x320) and -medium (1240x640) to display on smaller screen.

Localisation string

Localization string is a way to quickly change the template language for text like Next Post or Follow on, ... You can find all the properties in _data/language.yml.

By default, it is in english, but you can easily add your own language.

Google Analytics

To enable Google Analytics, add your tracking ID to _config.yml like so:

google_analytics: UA-NNNNNNNN-N

Comments 💬

Disqus

If you have a Disqus account, you can show a comments section below each post.

To enable Disqus comments, add your Disqus shortname to your project's _config.yml file:

comments:
  disqus_shortname: my_disqus_shortname

Cusdis

Cusdis is an open source alternative to Disqus. You can read more about it in the documentation

To enable it, set your cusdis name in _config.yml:

comments:
  cusdis_app_id: my_data-app-id                                     

Utterances

Utterances is another open source alternative linked to one's GitHub account. It stores the comments as GitHub issues on a repository for each page.

Install the utterance app to your repo. After installing, add your info in the _config.yml:

comments:
  utterances:              # Enable by filling below information. For more info, go to https://utteranc.es
    repo:                  # your public comments repository (e.g. owner/repo)
    issue-term:            # Issue term (e.g. "comment" consider issues with this word in the title as comments)
    theme:                 # OPTIONAL: Take the `color_theme` by default, or set a custom one like github-dark-orange
    label:                 # OPTIONAL: Adds an issue label in the issue

Math typesetting with KateX

When KateX is set in _config.yml:

katex: true # to enable it

You can then wrap math expressions with $$ signs in your posts and make sure you have set the katex variable in _config.yml to true for math typesetting.

For inline math typesetting, type your math expression on the same line as your content. For example:

Type math within a sentence $$2x^2 + x + c$$ to display inline

For display math typesetting, type your math expression on a new line. For example:

$$
  \bar{y} = {1 \over n} \sum_{i = 1}^{n}y_i
$$

You can find a cheat sheet of the compatible LaTex symbols online.

Diagrams with Mermaid

Enable the mermaid-js diagram rendering by setting mermaid to true in the _config.yml. This will load and init the mermaid.min.js.

mermaid: default # Enable mermaid-js for diagrams, use theme: base, forest, dark, default, neutral

Find all the help you need on the official mermaid documentation. You can create with ease diagrams. Add your mermaid script inside two mermaid divs (default Kramdown does not yet support mermaid). With the class="mermaid" inside the <div>:

<div class="mermaid">
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
</div>

Social icons

In _data/social.yml you can customize the social icons that will be displayed in the post to share your post. You can also enable RSS. The site icons come from Font Awesome.

In _data/icons.yml you can set the footer icon that will appear at the bottom of the page. They will redirect the user on your profile on the other platform like Twitter, GitHub and so many more!

Cookie consent

You can add a cookie consent with a disclaimer if you use Google Analytics while respecting the GDPR. Set to true, there will be a banner at the bottom of the page with the disclaimer, and an approve button. Once the user clicks on "Approve" the cookies will be created for Google Analytics.

Share in article

The share icons are the one at the bottom of the blog page if enabled, to share the article on those platform.

Footer

Display icons in the footer. All icon variables should be your username enclosed in quotes (e.g. "username") in _data/icons.yml.

You can update the RSS settings in _data/social to change the default feed path (generated by jekyll-feel). To enable the share icons at the bottom of each article set to true the one you'd like under share in the _data/social.yml file.

Personalize your Blog Posts 📝

When writing a post, be sure in jekyll to:

• Put it in the _posts folder
• Name it with the date first like 2019-08-21-This-is-my-blog-post.md

Please refer to the Jekyll docs for writing posts.

Layout: Post

These are the basic features you can use with the post layout.

---
layout: post
title: Hello World                                # Title of the page
hide_title: true                                  # Hide the title when displaying the post, but shown in lists of posts
feature-img: "assets/img/sample.png"              # Add a feature-image to the post
thumbnail: "assets/img/thumbnails/sample-th.png"  # Add a thumbnail image on blog view
color: rgb(80,140,22)                             # Add the specified color as feature image, and change link colors in post
bootstrap: true                                   # Add bootstrap to the page
tags: [sample, markdown, html]
---

With thumbnail, you can add a smaller image than the feature-img. If you don't have a thumbnail you can still use the same image as the feature one. Or use the gulp task to create it.

The background used when color is set comes from lineart.png from xukimseven you can edit it in the config file (_config.yml > color_image). If you want another one, put it in /assets/img as well.

The bootstrap is not mandatory and is only useful if you want to add bootstrapped content in your page. It will respect the page and theme layout, mind the padding on the sides.

Post excerpt

The excerpt are the first lines of an article that is display on the blog page. The length of the excerpt has a default of around 250 characters or can be manually set in the post using:

in conflig.yml:

excerpt: true

Then in your post, add the excerpt separator:

---
layout: post
title: Sample Page
excerpt_separator: <!--more-->
---

some text in the excerpt
<!--more-->
... rest of the text not shown in the excerpt ...

The html is stripped out of the excerpt, so it only displays text.

Image aligner

To easily add align images side by side in your article using the aligner.html include:

{% include aligner.html images="path/to/img1.png,path/to/img2.png,path/to/img3.png" column=3 %}

Use it in any markdown file. There are two fields in the include you need to look into:

• images: Takes a string separated with , of all the images' path.
  • It by default look into assets/img/ so give the path from there.
• column: (OPTIONAL) Set the number of column you want your imaged displayed in.
  • default is 2 columns
  • column=3 set 3 columns
  • column="auto" makes as many columns as images

Code highlight

Like all CSS variables in the theme, you can edit the color of the code highlight in _sass > base > _variables.scss. The code highlighting works with base16 you can find existing example of your favourite highlight color scheme on this format.

Feature pages and layouts

All feature pages besides the "home" one are stored in the page folder, they will appear in the navigation bar unless you set Hide: true in the front matter.

Here are the documentation for the other feature pages that can be added through _config.yml.

Non-standard features are documented below.

Layout: Default

This layout includes the head, navigation bar and footer around your content. Unless you are making a custom layout you won't need it.

Layout: Home 🏡

This page is used as the home page of the template (in the index.html). It displays the list of articles in _posts. You can use this layout in another page (adding a title to it will make it appear in the navigation bar).

The recommended width and height for the home picture is width:2484px; and height:1280px which are the dimensions of the actual picture for it to be rolling down as you scroll the page.

If your posts are not displaying ensure that you have added the line paginate: 5 to _config.yml.

Layout: Page 📄

The page layout have a bit more features explained here.

---
layout: page
title: "About" 
subtitle: "This is a subtitle"   
feature-img: "assets/img/sample.png" 
permalink: /about/                   # Set a permalink your your page
hide: true                           # Prevent the page title to appear in the navbar
icon: "fa-search"                    # Will Display only the fontawesome icon (here: fa-search) and not the title
tags: [sample, markdown, html]
---

The hide only hides your page from the navigation bar, it is however still generated and can be access through its link.

Feature: Portfolio 🗂

Portfolio is a feature page that will take all the markdown/html files in the _portfolio folder to create a 3-columns image portfolio matrix.

To use the portfolio, simply create a portfolio.md with this information inside:

--- 
layout: page
title : Portfolio 
---

{% include default/portfolio.html %}

Portfolio posts

You can format the portfolio posts in the _portfolio folder using the post layout. Here are little explaination on some of the possible feature you can use and what they will do.

If you decide to use a date, please be sure to use one that can be parsed such as yyyy-mm-dd. You can see more format example on the demo posts that are available for the theme:

---
layout: post
title: Circus                       # Title of the portfolio post
feature-img: "assets/img/portfolio/cake.png"   # Will display the image in the post
img: "assets/img/portfolio/cake.png"           # Will display the image in the portfolio page
date: 2019-07-25                    # Not mandatory, however needs to be in date format to display the date
---

Portfolio in gem

Make sure your _config.yml contains the following if you are using the theme as a gem:

# PORTFOLIO
collections:
  portfolio:
    output: true
    permalink: /:collection/:name

This creates the collection for Jekyll, so it can find and display your portfolio posts.

Feature: Gallery 🖼

You can create a gallery using Masonry JS which will placing the pictures in optimal position based on available vertical space. You need to specify the gallery_path which will be used to find the pictures to render. It will take all the pictures under that directory. Then use the include to add it in your page.

---
layout: page
title: Gallery
gallery: "assets/img/pexels"
---

{% include default/gallery.html gallery_path=page.gallery %}

Feature: Search 🔍

The search feature is based on Simple-Jekyll-search there is a search.liquid file that will create a list of all the site posts, pages and portfolios.

Then there's a search.js displaying the formatted results in the "search page".

The search page can be hidden with the hide option. You can remove the icon by removing icon:

---
layout: search
title: Search
icon: "search"
---

Feature: Tags 🏷

Tags should be placed between [] in your post metadata. Separate each tag with a comma. Tags are recommended for posts and portfolio items.

For example:

---
layout: post
title: Markdown and HTML
tags: [sample, markdown, html]
---

Tags are case-sensitive Tag_nAme ≠ tag_name

All the tags will be listed the tags page with a link toward the pages or posts. The Tag page can be hidden with the hide option. You can remove the icon by removing icon (like for the search page).

Advanced

Liquid tags

Jekyll works with liquid tags usually represented by:

{{ liquid.tag | filter }}

These are useful to render your jekyll files. You can learn more about them on shopify's doc

Gulp toolbox

Requirements

Before you need to have node and npm installed:

• Windows: https://nodejs.org/
• Ubuntu/Debian: apt-get install nodejs npm libgl1 libxi6
• Fedora (dnf) / RHEL/CentOS (yum): dnf install node npm libglvnd-glx libXi

Then you need to install gulp-cli and its dependencies:

cd assets/
sudo npm install gulp-cli -g
npm install

Minimizing and optimizing: css, js and images

You can run the default task that will compress the js, css and images and create the thumbnails for the supported image formats:

cd assets/
gulp default
gulp thumbnails-all # to create all of the images thumbnails
gulp thumbnails     # to create thumbnails for the feature-img/ only
# tip: run a git status to see the changes
git status

You can find more about the gulp tasks in the gulpfile.js.

Create a post

To create a .md file in the _posts/ section with the jekyll format of today's date. Use this command with the title you'd like to create the very basic post.

gulp post -n 'title of the post'

A file will be created following the format yyyy-mm-dd-title-of-the-post.md with default post attributes inside. Nothing will happen if the file exists already.

Use as Ruby Gem 💎

You can use Type-on-strap as a gem.

Using the Ruby Gem Method. Add this line to your Jekyll site's Gemfile (or create one):

gem "type-on-strap"

Add this line to your Jekyll site's _config.yml file:

theme: type-on-strap

Then run Bundler to install the theme gem and dependencies:

bundle install

Then you can start adding content like:

• Add a index.html file
• Add the feature page you want. (ex: as it is already in pages)
• Add posts in _posts and _portfolio to be displayed

Remote Theme

Now you can use any theme gem with GitHub pages with 29/11/2017 Github Pages Broadcast. For that remove all theme: attributes from _config.yml and add instead:

remote_theme: sylhare/Type-on-Strap 

Download Details:

Author: Sylhare
Source Code: https://github.com/sylhare/Type-on-Strap 
License: MIT license

#jekyll #theme #githubpages 

Hacker: A Jekyll Theme for GitHub Pages

The Hacker theme

Hacker is a Jekyll theme for GitHub Pages. You can preview the theme to see what it looks like, or even use it today.

Usage

To use the Hacker theme:

Add the following to your site's _config.yml:

remote_theme: pages-themes/hacker@v0.2.0
plugins:
- jekyll-remote-theme # add this line to the plugins list if you already have one

Optionally, if you'd like to preview your site on your computer, add the following to your site's Gemfile:

gem "github-pages", group: :jekyll_plugins

Customizing

Configuration variables

Hacker will respect the following variables, if set in your site's _config.yml:

title: [The title of your site]
description: [A short description of your site's purpose]

Additionally, you may choose to set the following optional variables:

show_downloads: ["true" or "false" (unquoted) to indicate whether to provide a download URL]
google_analytics: [Your Google Analytics tracking ID]

Stylesheet

If you'd like to add your own custom styles:

Create a file called /assets/css/style.scss in your site

Add the following content to the top of the file, exactly as shown:

---
---

@import "{{ site.theme }}";

Add any custom CSS (or Sass, including imports) you'd like immediately after the @import line

Note: If you'd like to change the theme's Sass variables, you must set new values before the @import line in your stylesheet.

Layouts

If you'd like to change the theme's HTML layout:

1. For some changes such as a custom favicon, you can add custom files in your local _includes folder. The files provided with the theme provide a starting point and are included by the original layout template.
2. For more extensive changes, copy the original template from the theme's repository
   (Pro-tip: click "raw" to make copying easier)
3. Create a file called /_layouts/default.html in your site
4. Paste the default layout content copied in the first step
5. Customize the layout as you'd like

Customizing Google Analytics code

Google has released several iterations to their Google Analytics code over the years since this theme was first created. If you would like to take advantage of the latest code, paste it into _includes/head-custom-google-analytics.html in your Jekyll site.

Overriding GitHub-generated URLs

Templates often rely on URLs supplied by GitHub such as links to your repository or links to download your project. If you'd like to override one or more default URLs:

Look at the template source to determine the name of the variable. It will be in the form of {{ site.github.zip_url }}.

Specify the URL that you'd like the template to use in your site's _config.yml. For example, if the variable was site.github.url, you'd add the following:

github:
  zip_url: http://example.com/download.zip
  another_url: another value

When your site is built, Jekyll will use the URL you specified, rather than the default one provided by GitHub.

Note: You must remove the site. prefix, and each variable name (after the github.) should be indent with two space below github:.

For more information, see the Jekyll variables documentation.

Roadmap

See the open issues for a list of proposed features (and known issues).

Project philosophy

The Hacker theme is intended to make it quick and easy for GitHub Pages users to create their first (or 100th) website. The theme should meet the vast majority of users' needs out of the box, erring on the side of simplicity rather than flexibility, and provide users the opportunity to opt-in to additional complexity if they have specific needs or wish to further customize their experience (such as adding custom CSS or modifying the default layout). It should also look great, but that goes without saying.

Contributing

Interested in contributing to Hacker? We'd love your help. Hacker is an open source project, built one contribution at a time by users like you. See the CONTRIBUTING file for instructions on how to contribute.

Previewing the theme locally

If you'd like to preview the theme locally (for example, in the process of proposing a change):

1. Clone down the theme's repository (git clone https://github.com/pages-themes/hacker)
2. cd into the theme's directory
3. Run script/bootstrap to install the necessary dependencies
4. Run bundle exec jekyll serve to start the preview server
5. Visit localhost:4000 in your browser to preview the theme

Running tests

The theme contains a minimal test suite, to ensure a site with the theme would build successfully. To run the tests, simply run script/cibuild. You'll need to run script/bootstrap once before the test script will work.

Download Details:

Author: Pages-themes
Source Code: https://github.com/pages-themes/hacker 
License: CC0-1.0 license

#jekyll #theme #githubpages 

Jasper2: Full-featured Jekyll Port Of Ghost's Default Theme Casper V2

Jasper2

This is a full-featured port of Ghost's default theme Casper v2.1.9 for Jekyll / GitHub Pages.

Live Demo

Ghost's Casper // Jasper2

Features

• Out of the box support for multiple authors (via _data/authors.yml)
• Full author information including: picture, bio, website, twitter, facebook, etc.
• Tag description(s) and personalised covers (via _data/tags.yml)
• Related posts view at the bottom of each post
• All Ghost default pages: Author page(s), Tag page(s), About page(s), 404, etc.
• Pagination (infinite scrolling or standard pagination, i.e. posts across multiple pages)
• Atom Feeds by Jekyll-feed
• Toggleable subscribe button (requires an external service)
• Code Syntax Highlight with highlight.js
• Support for Google Analytics tracking
• Support for Disqus comments (not Ghost standard)

Getting Started

Deployment

There are several alternatives to building and deploying the site:

build the site with GitHub Actions which pushes the resulting files (the contents of _site/ or ../jasper2-pages/) to the gh-pages branch. This is the approach that is currently used. See jekyll_build.yml for more details.

generate the site locally (more details below) and push the resulting HTML to a Github repository, that GitHub Pages then host;

build the site with travis-ci (with goodies from jekyll-travis) automatically pushing the generated HTML files to a gh-pages branch.

deploy the static website with Jekyll-compatible hosters, such as https://www.netlify.com/, that allow for deployment from the Github repo and publish the website using CDNs. Netlify has a free starter offer.

For option 2) simply clone this repository (master branch), and then run bundle exec jekyll serve inside the directory. Upload the resulting _site/ (or ../jasper2-pages/) contents to your repository (master branch if uploading as your personal page (e.g. username.github.io) or gh-pages branch if uploading as a project page (as for the demo).

For option 3) you will need to set up travis-ci for your personal fork. Briefly all you need then is to change your details in _config.yml so that you can push to your github repo. You will also need to generate a secure key to add to your .travis.yml (you can find more info on how to do it in that file). Also make sure you read the documentation from jekyll-travis. This approach has clear advantages in that you simply push your file changes to GitHub and all the HTML files are generated for you and pushed to gh-pages. Also you get to know if everything is still fine with your site builds. Don't hesitate to contact me if you still have any issues (see below about issue tracking).

Author Pages

In order to properly generate author pages you need to rename the field author in the front matter of every post to match that of your each author's username as defined in the _data/authors.yml file. With the latest update, multiple author blogs are now supported out of the box.

Compiling Styles

Following on the way Casper styles are compiled as described here:

Jasper2 styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need Node and Gulp installed globally. After that, from the theme's root directory:

$ npm install
$ gulp

Now you can edit /assets/css/ files, which will be compiled to /assets/built/ automatically.

Issues and Contributing

This install builds well with Ruby v2.6.3 and Jekyll v3.9.0. If you run into any problems please log them on the issue tracker.

Feel free pull-request your patches and fixes.

Thanks

Many thanks to the Ghost team for all the design work. Also many thanks to all contributors, that help keeping the project alive and updated :smile:

Download Details:

Author: jekyllt
Source Code: https://github.com/jekyllt/jasper2 
License: MIT license

#jekyll #theme #githubpages 

Hosting a MkDocs-driven documentation site on GitHub Pages

Hosting a MkDocs-driven documentation site on GitHub Pages https://blog.elmah.io/hosting-a-mkdocs-driven-documentation-site-on-github-pages/ #mkdocs #githubpages

How to Host A Static Website for Free using Github Pages

In this video, we will learn how to host a static website for free using Github Pages.

We will also add our own custom domain to the website free of cost as well.

We will use Github pages to host our website to the internet.

Github is a software hosting platform and offers version control using GIT.

Recently it has introduced a new feature where 
users who already host their codebase with
Github can now host a static website for free.

So GitHub pages can only host static websites! what does that mean!

A Static website is a website that is made of 3 components
HTML files, CSS files and JAVASCRIPT files. 
These comprise together to produce beautiful web pages
which we can see on our browsers.

Github pages will not be able to host dynamic websites.
that is websites that are based on a backend technology
example, C#, and .NET, JAVA, PHP, RUBY, etc.

Now that we've understood what we can host, let's jump on to how we do it.

For this tutorial, I will host a portfolio website of a developer
like myself onto the internet

I created this beautiful responsive static website using 
HTML, CSS, and JAVASCRIPT and you can find the detailed youtube tutorial
https://www.youtube.com/watch?v=-_ubESj5vaI

We will start by adding our website code to a GITHUB repository.

For that Let's create a GITHUB account.
In your browser, browse to https://github.com/

And then go to the Signup link on the top and create an account for yourself.

If you have an account /Once you have signed up for an account, 
Please click on the Sign In link and login to GITHUB

Now it's time to install GIT on your computer
as GITHUB uses GIT which is an open source version control software

You might have GIT installed,
so let's check that first,

Open a command prompt window (Windows + R) then cmd

type 
git --version

If it comes up with 
- 'git' is not recognized as an internal or external command

that means git is not installed on your system.
If it comes with a version number, skip the installation part
and jump onto the configure git section of the video.

To Install Git, 
I will go to my browser and visit 
https://git-scm.com/downloads

Configure GIT
git config --global user.name "your_username"
git config --global user.email "your_email_address@example.com"

It's now time to create a new repository on GITHUB

After you have logged on to the Github website, 
we will click on the 'New" button

Now enter the repository name, 
for this example, I will give it "name"

After creating the repository we will clone our repo to the local computer using
git clone "copied https url"

This will create a new folder. Copy the files for the static website inside this new git folder.

Then do the following
git add .
git commit "message"
git push

Authenticate using the browser and refresh the page to see that the files are now in Github.

Now go to the Settings tab and under pages, use "Master" repository and root folder to publish the files.

Then browse the website using the Github URL.

Now you can add a custom domain in the box on the same page. 
You would have to add an ALIAS record in your registrar from where you bought the domain.

#githubpages  #websitehosting  #github 

4 Cách Triển Khai Ứng Dụng Front-End Lên Máy Chủ (Free)

4 cách DEPLOY ứng dụng Frontend (2021)

Công viêc cuối cùng mà chúng ta luôn phải làm sau khi hoàn thành xong bất kì một ứng dụng web nào đó là Deployment. Chúng ta sẽ cần Deploy ứng dụng web lên một máy chủ nào đó để người dùng có thể truy cập vào ứng dụng thông qua một tên miền.

Chúng ta sẽ cùng nhau tìm hiểu về 4 cách để deploy một ứng dụng FE:
- Netlify
- Firebase 
- Github Pages
- Digital Ocean

#deploy #deployfe #holetex #githubpages #netlify #firebase #digitalocean

How to Configure GitHub Pages Custom Domain? (Google Domains | Subdomain & Apex Domain)

In this video, I’ll show you how to configure GitHub Pages custom domain. Instead of using the default GitHub Pages domain that contains your username and repository, we will set up GitHub Pages custom domain that is hosted on Google Domains. This approach to configuring GitHub Pages custom domain will work with any DNS providers such as GoDaddy, Google Domains, etc…

Did I help you out?
☕ Buy Me a Coffe: https://www.buymeacoffee.com/antonputra
🔴 Add me on LinkedIn: https://www.linkedin.com/in/anton-putra

=========
⏱️TIMESTAMPS⏱️
0:00 Intro
0:40 Add Custom Domain to GitHub Repository Settings
1:47 Create A record for Apex Domain in Google Domains
3:05 Create CNAME record for www subdomain in Google Domains
5:24 Update React App with Custom Domain
6:05 Deploy Create React App to GitHub Pages
7:17 Test Custom Domain for GitHub Pages in the Browser

=========
Source Code
📚 - Instructions: https://antonputra.com/how-to-configure-github-pages-custom-domain/
🖥️ - GitHub: https://github.com/antonputra/tutorials/tree/main/lessons/052

=========
SOCIAL
🎙- Twitter: https://twitter.com/antonvputra
📨 - Email: me@antonputra.com

#GitHubPages #ReactJS #GoogleDomains

#githubpages #reactjs #github #react

How to Deploy Create React App to GitHub Pages?

Today we deploy Create React App to GitHub Pages. First, we will create GitHub public repository, then we generate a new React project using create-react-app. We going to use the npm package to deploy react app to GitHub Pages. GitHub Pages allow us to host React App for free.

Did I help you out?
☕ Buy Me a Coffe: https://www.buymeacoffee.com/antonputra
🔴 Add me on LinkedIn: https://www.linkedin.com/in/anton-putra

=========
⏱️TIMESTAMPS⏱️
0:00 Intro
0:22 Create Public Repository in GitHub
1:21 Install create-react-app Using Npm
1:40 Use create-react-app to Create Project
2:30 Add homepage to React App
3:09 Install gh-pages for React
4:27 Deploy React App to GitHub Pages

=========
Source Code
📚 - Instructions: https://antonputra.com/how-to-deploy-create-react-app-to-github-pages/
🖥️ - GitHub: https://github.com/antonputra/tutorials/tree/main/lessons/051

=========
SOCIAL
🎙- Twitter: https://twitter.com/antonvputra
📨 - Email: me@antonputra.com

#GitHubPages #ReactJS #CreateReactApp

#github #reactjs #githubpages #react

Use GitHub Pages for your projects!

Using GitHub Pages you can publish your personal webpage, software documentation, repository README, etc. It’s easy and fast to set up.

Follow me on Twitter 😊:
https://twitter.com/elilopezdev​

#EnterFlash​ #GitHubPages​ #OpenSource

#enterflash #githubpages #opensource #github