# README #
This README would normally document whatever steps are necessary to get your application up and running.
### What is this repository for? ###
* Quick Summary
This repository holds the Jekyll code, both static and non-static, for the patdel.com website.
This is based upon a fork of a [Balzac](https://github.com/ColeTownsend/Balzac-for-Jekyll) which was forked off of [minimal mistakes](http://mademistakes.com).
* Version - No Versioning, Versioning Tracked by Bitbucket
* [Learn Markdown](https://bitbucket.org/tutorials/markdowndemo)
### How do I get set up? ###
* Summary of Set Up
This requires jekyll and all relevant gems to be able to host locally.
1. Ensure to [upgrade jekyll](https://jekyllrb.com/docs/upgrading/).
2. Perform ``bundle exec jekyll serve`` in the main repo
3. Browse to ``http://localhost:4000``
* Database configuration
This is a static site generator, designed to principally be hosted on a location such as S3.
You may need to ensure that your host includes a policy or setting so that it remains public.
On S3, you can set a permanently public policy, by adding this:
```
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::example.com/*"
]
}
]
}
```
In addition to this, you need to ensure that the bucket or site is set up for static website hosting.
Following [these instructions](https://docs.aws.amazon.com/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html) you will also need to set up a separate www.domain.com redirect bucket. In the case of AWS S3.
```
Step 4: Configure your subdomain bucket for website redirect
After you configure your root domain bucket for website hosting, you can configure your subdomain bucket to redirect all requests to the domain. In this example, all requests for www.example.com are redirected to example.com.
To configure a redirect request
On the Amazon S3 console, in the Buckets list, choose your subdomain bucket ( www.example.com in this example).
* Choose Properties.
* Choose Static website hosting.
* Choose Redirect requests.
* In the Target bucket or domain box, enter your domain (for example, example.com).
* In the Protocol box, enter http.
* Choose Save.
```
### Deployment instructions
* Push to "production," which then runs a pipeline on Bitbucket which pushes to the S3 bucket.
* The S3 bucket is hosted [here](http://patdel.com.s3-website-us-east-1.amazonaws.com/).
* Once you have a bucket deployed how you need it, you can then point a domain name to the bucket.
* To do this, on your nameserver, create CNAME records for
* www and point to www.bucketname.s3... (the aws bucket for redirect requests)
* @ and point them at the main hosting bucket
After the global web cache has time to propagate, the domain should point to your bucket.
### Ruby Versioning
* As of December 2020, Bitbucket pipelines upgraded the, "latest" Ruby to version 3.0, making several dependencies not work. If there are ever any problems with deploying through a pipeline based upon a default Ruby version, simply run things with an earlier version of Ruby temporarily to make it work.
* In our case we modified the bitbucket-pipelines.yml file to:
* image: ruby:2.7.2
* Temporarily, at least, until we can figure out dependencies.
### Adding SSL
* If you're using AWS, then you can use a service called "Certificate Manager" to request an SSL certificate and have it automatically point to the domain.
1. Add your domain within Certificate Manager.
2. Choose DNS Validation
3. Create a CNAME record (or records) on your DNS, per the instructions.
4. Wait for Validation
### Automatic SSL Renewal
* AWS Certificate Manager does automatic certificate renewal.
* https://aws.amazon.com/certificate-manager/faqs/
### Where is the Production Server Located?
Production server is on the AWS S3 Bucket [here](http://patdel.com.s3-website-us-east-1.amazonaws.com/).
### Other Notes and Features
#### Navbar configuration
* Navbar is configured in the _config.yml file.
#### Differences Between Layout types
* There are two main layout types, Articles and Posts. Articles are for main Pages, Posts are for blogs.
#### home.html (Article)
Home contains:
* Search box
* Post Listings
#### about.html (Article)
About contains:
* Featured image, if one included on the page markdown file.
* If no image, uses smalloverlay specified in CSS.
* Uses avatar in header
* Site bio, specified in config file.
* Content
* Share button
* Disqus account
#### page.html (Articles)
* The layout difference between, "page," and "post," is basically that posts include the description on the page while pages do not.
* Pages do not get indexed as posts while posts do get indexed as posts.
* About is different than page in that it includes structured information about the site user.
Page.html contains:
* Featured image, if one included for this page. Otherwise, article pad top.
* Wrap post
* Do not include post description on the page.
* Include Date
* Content
* Share Button
#### post.html
* Featured image, if one included for this page. Otherwise, article pad top.
* Wrap post
* Include post description teaser on the page.
* Include Date
* Content
* Share Button
#### post-no-feature.html
* Do not post feature image even if there is one.
* Wrap post
* Include post description teaser on the page.
* Include Date
* Content
* Share Button
#### post-light-feature.html
* Same as post, but if no image included, uses a dark overlay at the top.
#### post-index.html
* Index all posts
#### Jekyll SEO Tag
[jekyll-seo-tag](https://github.com/jekyll/jekyll-seo-tag) is designed to include metadata within each page in order to be able to post to different social media sites using OpenGraph.
It includes:
* Page title, with site title or description appended
* Page description
* Canonical URL
* Next and previous URLs on paginated pages
* JSON-LD Site and post metadata for richer indexing
* Open Graph title, description, site title, and URL (for Facebook, LinkedIn, etc.)
* Twitter Summary Card metadata
More documentation on usage is found [here](https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md).
The SEO tag will respect the following YAML front matter if included in a post, page, or document:
* title - The title of the post, page, or document
* description - A short description of the page's content
* image - URL to an image associated with the post, page, or document (e.g., /assets/page-pic.jpg)
* author - Page-, post-, or document-specific author information (see Advanced usage)
* locale - Page-, post-, or document-specific locale information. Takes priority over existing front matter attribute lang.
The SEO tag will respect any of the following if included in your site's _config.yml (and simply not include them if they're not defined):
* title - Your site's title (e.g., Ben's Awesome Site, The GitHub Blog, etc.), used as part of the title tag like Home | Ben's Awesome Site.
* tagline - A short description (e.g., A blog dedicated to reviewing cat gifs), used as part of the title tag like Ben's Awesome Site | A blog dedicated to reviewing cat gifs instead of Ben's Awesome Site | Long description about a blog dedicated to reviewing cat gifs that would be used when page.title is not defined.
* description - A longer description used for the description meta tag. Also used as fallback for pages that don't provide their own description, and also as part of the page's title tag if neither page.title nor site.tagline has been defined.
* url - The full URL to your site. Note: site.github.url will be used by default.
* author - global author information (see Advanced usage)
* twitter - The following properties are available:
* twitter:card - The site's default card type
* twitter:username - The site's Twitter handle.
* Webmaster verifications are within the _config.yml file, they help make the site discoverable by search engines.
* webmaster_verifications:
# google: 1234
# bing: 1234
# alexa: 1234
# yandex: 1234
# baidu: 1234
##### Properties
* There are multiple settings within the config.yml page which can be set to optimize the site for SEO purposes. This includes: title, tagline, description, url, author, twitter:card, twitter:username, facebook meta info, sitewide logo, social media profiles, google site verification, and other webmaster verifications for bing, alexa, yandex, baidu, etc.
* For post-specific metadata, evidently the first image in each individual post is posted as the site specific image.
##### Adding a Different Image in the Meta Tag
* If for example you wanted to display the following image in the meta part of the website, so that it shows up earlier in the page, meaning it gets shared in open graph, there is a feature built in to allow you to do this on a page by page basis, discussed [here](https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/advanced-usage.md#customizing-image-output).
```
---
layout: post-no-feature
title: "The Future of 'IoT' as a Term"
image:
path: /assets/images/202008/iot-as-a-marketing-term.png
categories:
tags:
- IoT
- Market Analysis
---
```
##### Implementing 'target="_blank"' in Markdown
The version of markdown that this theme uses allows the implementation of the equivalent of HTML's target="_blank" which opens up a new tab when a link is clicked.
The way to run this is the following syntax:
[text](link){:target="_blank"}
##### Tags and Formatting
https://mmistakes.github.io/minimal-mistakes/markup/markup-html-tags-and-formatting/
##### Post with Gallery
https://mmistakes.github.io/minimal-mistakes/post%20formats/post-gallery/
##### Bootstrap Included
http://startbootstrap.com
* Agency Theme
https://github.com/startbootstrap/startbootstrap-agency
##### Using Plotly on a Post
* Make sure to add following line in the post frontmatter
```
---
plotly: true
---
```
##### Google Tag manager
* There is the option to add Google Tag Manager.
##### Editable Layout Types
* home
* page
* Post - Feature
* Post - No Features
* About
##### Table of Content Feature in CSS
* Unidentified.
##### icons
* Icons were generated from: https://icomoon.io/app/#/select
Using download from: https://github.com/danielbruce/entypo/tree/master/font
Example:
Options:
.icon-directions
.icon-paperplane
.icon-mail
.icon-feather
.icon-pencil
.icon-user
.icon-heart
.icon-location
.icon-chat
.icon-quote
.icon-bolt
.icon-credit-card
.icon-list
.icon-twitter
.icon-facebook
.icon-github
.icon-dribbble
.icon-rdio
.icon-spotify
.icon-rss
.icon-folder
.icon-tag
.icon-linkedin
### Features
Create captions for figures.
```