Skip to content

devhints

The devhints site offers a number of cheatsheets :

visit

Though not all of them but the layout is almost exactly how i want it, so if you need to make cheatsheets try to do it with this format.

installation

You can spend a LOT of time staring at the same error if you don't install it exactly like described here.

Error

Unable to resolve dependency: user requested 'did_you_mean'

Never mind using yarn, it just seems to hang forever, npm can do this better.

install
1
2
3
4
5
6
7
8
9
git clone https://github.com/rstacruz/cheatsheets.git
cd cheatsheets
npm install -g npm # optional latest version
npm install
npm audit fix --force # optional 
sudo gem update
sudo gem install bundler
bundle update --bundler # need to sudo halfway (so maybe directly sudo ?)
npm run dev  # open your browser at  http://127.0.0.1:3000

This helped when the bundler got into an error installing :

fresh install
1
2
3
4
5
6
7
$ su
# apt install rbenv
# rbenv global
# gem install bundler
# rbenv rehash
# gem clean
$ bundle install

jekyll

Now you got that running, maybe it is better to skip right top the base of this site : jekyll.

visit

Jekyll is a ruby website framework to

Important

Transform your plain text into static websites and blogs

Which of course sounds like music in my ears.

bundler
1
gem install bundler jekyll

editing and adding content

I have stripped down the devhints source tree and now only serve 'own' topics since you can see the others on the real devhints.io page. However there are large gaps between editing sessions so here is a small work instruction for adding content.

running the dev server

We use jekyll but it is started by node, so :

dev server
1
2
npm run dev
# edit package.json to see the commands

adding content

Decide on the category for you new topic and place it in the header :

category
1
2
3
4
5
6
7
8
---
title: docker
category: Devops
layout: 2017/sheet
prism_languages: [yaml]
weight: -1
updated: 2020-01-01
---

The category has to exist or it just won't show up !. See next chapter if you need a new category.

Note the prism_languages, you need to provide which languages you use inside the script. See next chapter.

syntax highlighting

Jekyll/devhints.io uses prism : visit

A simple way to provide highlighting and syntax-coloring in code is creating a piece of code like this :

syntax coloring
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// counter_controller.js
import { Controller } from 'stimulus'
import StimulusReflex from 'stimulus_reflex'

export default class extends Controller {
    connect() {
        StimulusReflex.register(this)
    }

    increment(event) {
        event.preventDefault()
        this.stimulate('Counter#increment', 1)
    }
}

The data-line highlights the given lines if you want to. However this is not enough because you have to specify the languages you use in the md file for the coloring to show. It is done in the header :

specify languages
1
2
3
4
5
6
7
8
9
---
title: Go
layout: 2017/sheet
prism_languages: [go, bash, javascript]
weight: -3
tags: [Featured]
category: C-like
updated: 2020-06-21
---

categories

The categories are in _data/categories.yml. It is a plain yaml array that get's traversed at compile time so Add it where you want it to appear, if there are no topics using this category it will still show as empty:

categories.yaml
1
2
3
4
5
6
enabled: true
names:
    - CLI
    - Databases
    - My new category
    - Devops

I tried it... you can use spaces !

home

The home page is inside the _layouts/2017 directory, you can see the building of the main page there in home.html.

  • It starts with the title {{site.data.content.home.title}} , which can be found in _data/content.yml.
  • Then the tagline change that as well.
  • Then there is the search line, also the prefix can be changed in content.yml
  • Below that is a loop that displays all featured_pages, which is defined in the same page at the top : all pages which page.tags contains 'Featured'

That last one one shows how to get a topic displayed as a 'block' at the top :

featured
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
---
title: Bash scripting
category: CLI
layout: 2017/sheet
tags: [Featured]
updated: 2020-07-05
keywords:
    - Variables
    - Functions
---

In the beginning we only have a couple or so cheatsheets, so add this tag to all of them !

deployment

To be done.. it will be a docker file, look inside package.json for a production or build option !

troubleshooting

development refresh

When you start in dev mode jekyll starts in watch mode and you can see it recompile on every file change :

developer mode
1
2
3
4
5
6
7
8
9
npm run dev
...
...
[jekyll:watch         ]     Server address: http://0.0.0.0:3000
[jekyll:watch         ]   Server running... press ctrl-c to stop.
[jekyll:watch         ]       Regenerating: 1 file(s) changed at 2020-12-17 10:11:33
[jekyll:watch         ]                     docker-compose.md
[jekyll:watch         ]                     ...done in 5.552697087 seconds.
[jekyll:watch         ]

neat...

But this works only for source files, and not if you change for instance the categories, or if you add a file. However you can force it to reread by editing index.md and just writing it !