Getting things started

So it finally happened. Everything seems to be in place, workflows no longer throws errors and cache is being purged upon publish.

Main goals and what is this for?

For the last couple of years I’ve been finding my self more and more in situations were I’m quite sure I’ve solved a problem before. However I never seem to able to find any notes or even related code to it. So in order to fix this for my self I thought a small blog about my adventures within IT and related subjects should be sufficient.

I do not aim for this to become popular or easy to read for others. My primary goal will always be documenting things I’ve found a solution for, or documentation on steps to achieve something (like deploying a certain type of software upon a VPS).

This post will also act as a way to display supported capability for my current setup (see examples below), such as headers, tables and such. In the future I will put together a post about how everything has been put together and how I would set this up again for other projects or similar sites.

Basically all the components are:

  • Hugo, for static file generation and simplify themes and styles
  • Github pages for hosting
  • Cloudflare for cache an delivery optimization

Once I find my self in a more motivated state, there will be a post about it. However rest of this post will be a showcase of what Hugo (with current theme) is capable of displaying. All of this has been copied from Binario - Basic elements post.

Enjoy!

Headings

Let’s start with all possible headings. The HTML <h1>—<h6> elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

According to the HTML5 specification by W3C, HTML documents consist of a tree of elements and text. Each element is denoted in the source by a start tag, such as <body>, and an end tag, such as </body>. (Certain start tags and end tags can in certain cases be omitted and are implied by other tags.)

Elements can have attributes, which control how the elements work. For example, hyperlink are formed using the a element and its href attribute.

List Types

Ordered List

  1. First item
  2. Second item
  3. Third item

Unordered List

  • List item
  • Another item
  • And another item

Nested list

  • First item
  • Second item
    • Second item First subitem
    • Second item second subitem
      • Second item Second subitem First sub-subitem
      • Second item Second subitem Second sub-subitem
      • Second item Second subitem Third sub-subitem
    • Second item Third subitem
      1. Second item Third subitem First sub-subitem
      2. Second item Third subitem Second sub-subitem
      3. Second item Third subitem Third sub-subitem
  • Third item

Definition List

HTML also supports definition lists.

Blanco tequila
The purest form of the blue agave spirit...
Reposado tequila
Typically aged in wooden barrels for between two and eleven months...

Blockquotes

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Quoted text. This line is part of the same quote. Also you can put Markdown into a blockquote.

Blockquote with a citation.

My goal wasn't to make a ton of money. It was to build good computers. I only started the company when I realized I could be an engineer forever.

— Steve Wozniak

According to Mozilla’s website, Firefox 1.0 was released in 2004 and became a big success.

Tables

Tables aren’t part of the core Markdown spec, but Hugo supports them.

ID Make Model Year
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010

Colons can be used to align columns.

Tables Are Cool
align: left align: center align: right
align: left align: center align: right
align: left align: center align: right

You can also use inline Markdown.

Inline Markdown In Table
italics bold strikethrough code

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

Highlighted Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

Other stuff — abbr, sub, sup, kbd, etc.

GIF is a bitmap image format.

H2O

C6H12O6

Xn + Yn = Zn

Press X to win. Or press CTRL+ALT+F to show FPS counter.

As a unit of information in information theory, the bit has alternatively been called a shannon, named after Claude Shannon, the founder of field of information theory.