⧉ Infominer

⧉ Infominer

GitHub Pages-Starter Pack

Github makes it easy to get started, with the click of a button, you can have a web-page live, requiring only markdown skills (that anyone can learn on the go).

Each feature you want to enable requires a little more learning, and GitHub Pages is set up so that if you decide to, you can gradually progress from content creator to web-developer.

If you don’t want to think about web-development, and simply want your markdown files to look beautiful once published, github pages can help you do that too.

I first started playing around with GitHub to make an awesome-list, last fall. The number of technical subjects I’ve begun to learn, thanks to github pages is incredible. It gives you something tangible to show off, and getting visitors really drives motivation to improve and learn more advanced techniques.

Introduction

I’m just a newb that created this resource to help myself. It does take a lot of work to create bigger projects like this website, however it’s really simple to create a blog, or a homepage.

Corrections, suggestions, tips, and links would be all appreciated.

Github pages runs Jekyll, which runs Kramdown, which can transform yaml, markdown, and a number of other related languages into proper html.

Github pages can be used, like, 4 different ways. It’s versitile, but can be confusing.

The simplest way to use pages is to choose one of the official GitHub pages themes. Just go into your repository settings:

All you really need to do is select a branch and it will begin publishing your repository. Then choose a method to publish. Brand-newbs go with the theme chooser.

The first repository for your web-page must be named like so: username.github.io. For example, the repository for my personal page is called infominer33.github.io. Simply create a new repository, and if your github username is @awesomesauce then you would create a new directory named awesomesauce.github.io.

Every other repository you own can also be made into its own web-page, that will published off of your user page, with the same name following your domain. So if you have a repository called, /Dynomite and you go into settings select pages to publish from the master branch, then that page will be found at https://awesomesauce.github.io/Dynomite.

so github.com/infominer33/DIDecentralized is published at infominer.id/DIDecentralized, because I have a custom domain. Otherwise it would be found at, infominer33.github.io/DIDecentralized.

Getting Started

If you used the theme chooser, all you need to do is edit README.md, and your page is built instantly when you save a commit to the repository.

Create an index.md

Although pages will build an index.html from your readme.md, pages will not behave as expected if you try to do any configuration or additional optimization with only readme.md.

in that index.md you need to include front matter:

---
layout: default
---

There is a plugin that builds index files from all the readme.md files of your repository.. but it has trouble creating an index.html from your repositories primary README.md.

Besides the Theme Chooser

There are other ways that pages can work too. You should be able to run any theme that is set up to support remote themes. However, you have to pay attention to the themes and find ones that are in active development.

You can also run any Gem based theme from your page too. Basically Gem files are packages that contain all of the files necessary for building your site, and keep your repository directory un-cluttered. Then, if you want to change a file that’s in the gem, you just create the directory and pur the file where it goes, and configure as you wish.

I’m still a bit confused about that part, but gems do help you build pages locally to test features before deploying them….

Q: How can I get started with gem-packaged themes? / Do I need to package my theme into a gem?

Gem-packaged themes are just an advanced option and in addition they are in development for (real world) experiments (e.g. think v0.1 as stated by the Ben Balter - the lead designer / manager / dev at GitHub).

Thus, to conclude do NOT read too much into the official themes docs e.g. as the only or “right” way to design a theme. Just (continue to) use “classic” themes - there are hundreds to learn from and once you have mastered “classic” themes you can “graduate” to the master class, that is, using gem-packaged themes. -github.com/planetjekyll/awesome-jekyll-themes

I understand what they’re saying, but I feel kind of the opposite. I used the theme chooser and remote\gem themes to begin learning. Then again, I didn’t really understand my options when I started.

These classic themes are just files and folders, everything where you can see it (and should be forkable to create working websites)

According to planetjekyll, these are all “classic” themes: https://drjekyllthemes.github.io

  • Using A Static Site Generator other than Jekyll

Fundamentals

  • GitHub Learning Lab

Markdown

  • Kramdown - QuickRef Guide
  • Mastering Markdown
  • Markdown Cheet-Sheet

Github Pages

  • Github Pages Community Forum
  • https://pages.github.com/versions/ - These plugins can be used via gh-pages.
  • Configuring a Publishing Source for GitHub Pages
  • help.github.com - User, Organization, and Project Pages
  • http://ragupappu.com/2015/04/22/setup-website-using-github-pages-and-jekyll/
  • Setting up You GitHub Pages Site Locally with Jekyll
    • – Local development with GitHub Pages
  • Getting started with GitHub Pages: Part 4 – Customizing your Pages site
  • Adding Jekyll Plugins to a GitHub Pages Site - help.github.com
  • Creating Custom 404 page
  • Clearing Up Confusion around Baseurl
  • automate-github-pages-ifttt-glitch.html
  • Implemented the “Edit this page” feature. jekyll#3495
  • Jekyll Redirect Plugin

Use redirect_from: internal/url to change the location you are publishing, but keep old links. Use redirect_to: https://external.url to send visitors somewhere else (perhaps you want it to live on another site, but not lose your valuable links :)

Jekyll

  • planetjekyll
    • planetjekyll/awesome-jekyll
    • planetjekyll/awesome-jekyll-plugins
  • Jekyll - Cheat Sheet
  • Jekyll Community Forum
  • /jekyll/jekyll/blob/master/README.markdown
  • jekyllrb.com/docs/plugins/installation/
  • Jekyll - Pagination Docs
  • Jekyll - Navigation Tutorial
  • https://wiredcraft.com/blog/make-jekyll-fast
  • Jekyll - Static Site Generator | Tutorial

    This course covers the basics of using Jekyll - Static Site Generator. Work your way through the videos and we’ll teach you everything you need to know to create a professional and scalable website or blog!

  • Run a Specific Version of Bundler
    • Older themes will work if you use the right verion of bundler (found in gemfile.lock).
  • mmistakes/jekyll-theme-unit-test

Front Matter

  • Front Matter
  • YAML front matter in Jekyll
  • YAML tutorial in the context of Jekyll

Collections

  • https://jekyllrb.com/docs/collections/
  • http://stories.upthebuzzard.com/jekyll_notes/
    • using-jekyll-collections.html
    • prev-and-next-within-a-jekyll-collection.html
    • sort-order-of-jekyll-collections.html
    • accessing-jekyll-collection-details-from-a-post.html

Themes

I’ll say now, if you are new to web-development, best to start off trying out a few of the Github Pages official themes. Once installed, I cloned those repos locally so its easier to see how everything works. Then, if I want to configure a file that’s not in my repository, I have a copy nearby. You can grab the _layouts/default.html, put it in your repo, and get a feel for how configuring that template shapes your entire site. But then you configure individual pages, and categories, perhaphs, to display differently.

  • indieweb/blank-gh-site
  • pages.github.com/themes/ - official
  • drjekyllthemes.github.io (classic ‘files and folders’)
  • planetjekyll/awesome-jekyll-themes (gem-based)
  • github.blog/2017-11-29-use-any-theme-with-github-pages/ -Howto Remote themes.
  • http://themes.jekyllrc.org/
  • ChristopherA/simplest-github-page
  • projectpages.github.io/project-pages/
  • prose/starter
  • forked.yannick.io - Find maintained forks of your favorite GitHub repos.
  • https://github.com/kinlane/beforeeighteen (template for presentation style pages.)
  • bradleytaunt/lightspeed

Hydejack

  • /qwtel/hydejack/
  • /qwtel/hydejack-starter-kit
  • Hydejack Print Documentation
  • Hydejack Documentation.pdf
  • Hydejack Advanced

If you don’t want to think too much about web-development, try Hydejack. It’s build with everything you need to create a beatiful responsive web-page, with plenty of options and configurations supported. It’s a free version of a more robust commercial option. But it’s easy to set up, and works great.

The only problem is that it is not open source. So it’s not 100% customizable. Then again, that keeps you from getting in and screwing things up. –>

Minimal Mistakes

Minimal Mistakes is the most popular theme for Github Pages, and with good cause. It creates gorgeous web-sites right out the box, and with some fine tuning is beautiful indeed. You can find pretty much everything you need to run Minimal Mistakes in the Quickstart Guide, Sample Posts and Collections, along with their corresponding files on Github.

  • minimal-mistakes/docs/quick-start-guide
  • Sample Posts
  • Sample Collections
  • mmistakes/minimal-mistakes
    • Minimal Mistakes remote theme starter
    • mmistakes/minimal-mistakes-algolia-search - reference if you have problems enabling search.

Other themes by @mmistakes:

I’ve just listed what repositories most fit my use cases, you might want to browse through his github portfolio, yourself.

Made Mistakes

  • mademistakes.com -Michael Rose’s Homepage
    • mmistakes/made-mistakes-jekyll

So Simple

  • So Simple Theme
    • mmistakes/so-simple-theme

Basically Basic

  • Basically Basic
    • mmistakes/jekyll-theme-basically-basic
    • mmistakes/jekyll-theme-basically-basic-algolia-search

Skinny Bones

  • Skinny Bones
    • mmistakes/skinny-bones-jekyll

Hpstr

  • Hpstr
    • mmistakes/hpstr-jekyll-theme

MkDocs

MkDocs is not a jekyll theme. Meaning you have to install the software and build your pages locally (or set up a 3rd pary integration) before github pages can publish it. MkDocs has built in search, and in some ways simpler than publishing w jekyll.

MkDocs really caught my eye when I saw it running at EthHub

  • https://www.mkdocs.org/
  • /mkdocs/mkdocs/wiki/MkDocs-Plugins
  • MkDocs Material Components - Cheat Sheet
  • mkdocs.readthedocs.io
  • mkdocs/mkdocs/wiki/MkDocs-Plugins
  • mkdocs-awesome-pages-plugin
  • mkdocs.plugins/
  • metadata-for-markdown-mkdocs/
  • https://gristlabs.github.io/mkdocs-windmill/
    • gristlabs/mkdocs-windmill
  • https://python-markdown.github.io/extensions/
    • Python-Markdown/markdown/wiki/Third-Party-Extensions
  • https://python-markdown.github.io/extensions/smarty/

Because MkDocs builds with python, that opens up a whole universe of tools at your disposal. The python markdown extensions are a prime example.

However, basically none of the regular jekyll plugins work with mkdocs, it’s a whole universe to its own w Python.

Resources

Jekyll-SEO-Tag

  • Search Engine Optimization for Github Pages - help.github.com
  • /jekyll/jekyll-seo-tag
  • /pmarsceill/jekyll-seo-gem
  • Override default jekyll-seo-tag template
  • Tips to Optimize Jekyll SEO
  • blog.webjeda.com/optimize-jekyll-seo/#6-open-graph-and-twitter-cards-in-jekyll

Open Graph - Favicons and More

  • Open Graph Tags, Twitter Cards, Rich Pins
  • A basic tutorial on “How to get the most out of embeds?” for a discord-friendly website! (supports og values)
    • discordapp.com/developers/docs/resources/channel#embed-limits
  • https://iframely.com/debug
  • realfavicongenerator.net

    The strict minimum for the master picture is 70x70. Your picture is 225x225, which is ok. However, it is recommended to use a picture of at least 260x260. If you still want to use your picture, some of the derivated favicons will not be generated, such as the high resolution tile for Windows 8 / IE 11.

  • ogp.me - Open Graph Webpage (really good resource for Facebook and beyond. great links at bottom.)
  • developers.google.com - Breadcrumbs
  • Googles guide to enhancing your site’s metadata

Twitter

  • Twitter Card Validator
  • About Cards - developer.twitter.com
  • https://github.com/jekyll/jekyll-mentions/

Comments

  • Github Issues for Blog Comments
  • A repo you can use to work-around GH issue comment request limmits.
  • Various ways you can add comments to your static site
  • Add comments to your jekyll powered blog
  • Setting up Staticman Server
    • new feature! added comments to this static website
  • https://mademistakes.com/articles/jekyll-static-comments/
    • https://mademistakes.com/articles/improving-jekyll-static-comments/
  • Elasticsearch for Jekyll
  • Adding Custom Google Search
  • github.com/algolia/jekyll-algolia
  • community.algolia.com/jekyll-algolia/blog.html
  • https://www.algolia.com/doc/

Other Customizations

  • digitaldrummerj.me/categories/jekyll
  • Social Media Share Bar
  • Validating Links and Images
  • Jekyll-Target-Blank
  • https://github.com/jekyll/jekyll-mentions/
  • Github Flavored Emoji for Jekyll
  • longqian.me/ -Metamask Donation Button.
  • https://superdevresources.com/share-buttons-jekyll/
  • How to Create an Open-Source Directory on GitHub Pages
  • Embed files from a github repository onto your page.
  • idleberg/Creative-Commons-Markdown
  • Redirecting GitHub Pages after a repository move
  • gjtorikian/html-proofer - you got broken links bruh
  • hacking-routing-component-jekyll/
  • How-to-build-a-lowtech-website

Make a cool portfolio page like this:

  • levalicious.github.io/work/

I made a gist about how to do that based upon his code.

Content Creation

Here’s some tools to make content creation a little easier.

  • nacyot/awesome-opensource-documents
  • neutraltone/awesome-stock-resources
  • shime/creative-commons-media
  • Canva Infographic Creator
  • easel.ly - free create infographics
  • Amara - create captions for YouTube videos.
  • Content Strategy Tool - Find inspiration for your content marketing topics
  • Copyscape - track if your content is being plagiarized.
  • Google Public Data - content research, infographics, and more.
  • Google SERP Snippet Optimization Tool - see how your snippet may appear in search results.
  • infogr.am - create infographics and data visualizations
  • Text Cleaner - cleans up all kinds of text formatting when copying and pasting between applications.
  • wordle - word cloud generator
  • Yahoo Pipes combines feeds “into content and other magical creations”.
  • Piktochart - visualization generator.
  • Wistia - SEO-friendly video hosting.
  • https://www.pcjs.org
  • https://www341.lunapic.com/editor/
  • What You Can Do With Gists on Github?
  • https://polyglot.untra.io/ - multi-lingual publishing.
  • https://konpa.github.io/devicon/
  • Color Tool

Editors

  • Visual Studio Code Where I build webpages.

https://imgur.com/eqWiJ8I.png

This thing has extensions for all your coding needs… It has seamless git integration, and all kind of great features for working with gh-pages repositories (search and replace, etc.).

HackMD - Collaborative Markdown Editor

  • https://hackmd.io - Collaborative markdown editor (where I write everything else).
    • Getting started
    • Tutorial
    • How to Create a Book
    • YAML Metadata

Advance

HTML - CSS

  • htmldog.com - HTML5 and CSS Beginner Tutorials
  • /w3css/w3css_sidebar.asp
  • The_web_standards_model_-_HTML_CSS_and_JavaScript
  • Learn web development - developer.mozilla.org
  • Flat CSS Sidebar
  • The Head - Metadata in HTML
  • https://metatags.io
  • https://htmlcolorcodes.com/color-chart/
  • rtable
  • unicode-table.com/#miscellaneous-symbols-and-pictographs
  • katex
  • Viewport and Media Queries

Kramdown

  • kramdown.gettalong.org
  • Kramdown - Syntax

Liquid

  • shopify.github.io/liquid/tags/control-flow/
  • Jekyll Variables and Liquid Template Tags-Cheatsheet
  • Introduction to Liquid for Jekyll
  • https://blog.webjeda.com/jekyll-liquid/

Git

  • davfre/git_cheat-sheet.md
  • education.github.com - GIT CHEAT SHEET
  • Writing Effective Commits
  • www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow
  • Git CheetSheet
  • Working with Remotes
  • managing-commit-signature-verification
  • mnyrop/swc-materials/blob/master/git.md
  • Git-Tools-Submodules - so you can pull other git repos into your project

SSH

  • Connecting to GitHub with SSH
  • Generating a new SSH key and adding it to the SSH agent
  • Adding a new SSH key to your GitHub Account
  • How to manage multiple GitHub accounts on a single machine with SSH keys

Data

  • https://mademistakes.com/notes/static-files/
  • jekyllrb.com/docs/datafiles/
  • https://github.com/ashmaroli/jekyll-data
  • how-to-easily-use-airtable-data-in-jekyll
  • mnyrop/pagemaster
  • https://minicomp.github.io/wax/reuse/
  • http://marii.info/wax_docs/
  • http://marii.info/annotate/
  • project-management/jupyter-notebook-on-jekyll/
  • managing-data-with-jekyll/
  • 18F/jekyll-get
  • how-i-created-a-simple-dbms-using-github-jekyll-prose-and-heroku/
  • contrafabulists-lessons.github.io/google-sheet-to-github-website/
  • execute-millions-of-sql-statements-in-milliseconds-in-the-browser-with-webassembly-and-web-workers
  • https://github.blog/2012-06-12-github-data-challenge-winners/

JSON

  • A JSON content feed for Jekyll
  • Counting and JSON output in Jekyll
  • Jekyll — Convert Full YAML Front-matter to XML/JSON
  • Inlining JSON in a Jekyll Liquid Template
  • Jekyll JSON API
  • JSON Feed Viewer

Automation

  • alternativeto.net/software/heroku/?license=free
  • integrating-autogenerated-content-into-your-documentation-site-using-swagger-and-jekyll
  • benbalter/jekyllbot - Listens for GitHub post-recieve service hooks messages, runs jekyll, and pushes the results back to GitHub.

Archive

  • Web Archive for WayBack Machine
  • iipc/awesome-web-archiving
  • webapps.stackexchange.com - how-to-archive-the-whole-website
  • httrack.com

API Evangelist

Not sure how much of this is useful, but I’ll save for further examination.

  • simple-apis-with-jekyll-and-github-with-data-manag
  • providing-yaml-driven-xml-json-and-atom-using-jekyll-and-github
  • google-spreadsheet-to-yaml-on-jekyll/
  • using-github-repos-and-jekyll-as-a-data-store/
  • kinlane.github.io/github-micro-tool/
  • openapi.toolbox.apievangelist.com/documentation/
  • kinlane.github.io/what-is-openapi/
  • d3js-visualizations-using-yaml-and-jekyll/
  • https://github.com/kinlane/OpenAPI-Specification

Data Visualization

  • rendering-data-as-graphs
  • Creating a dynamic d3 visualization from the GitHub API
  • Visualize GitHub Code Contribution using APP Link
  • Data Visualization for All - Modify and Host Code with GitHub by Jack Dougherty & Ilya Ilyankou

    In the first half of this book, we explored free web services that offer easy drag-and-drop tools to create interactive charts and maps, such as Google Sheets, Google My Maps, BatchGeo, Carto, and Tableau Public. But these web services have limited options for designing and customizing your visualizations, and also make you dependent on their web servers to host your work. In this second half of the book, we’ll explore how to copy, edit, and host code templates, meaning pre-written software instructions to create visualizations. With templates, no prior coding skills are necessary. You will learn how to make simple edits to insert your data, customize its appearance, and display it on the web on a site you control.

  • tools-visualize-github-profile/

IndieWeb

  • Implementing the Indieweb on a static website
    • Tweaking Frontmatter for sent Webmentions
  • https://indieweb.org
  • indieweb/blank-gh-site

Now Dev

I don’t even know… but it seems pretty dope.

  • https://zeit.co/blog/now-dev
  • https://zeit.co/docs/v2/deployments/concepts/lambdas

Keybase

Just sayin’… keybase has 250 gigs of free storage you can use to host a website…

you could build gem based sites locally, and keybase will automatically sync the data.

see: