Create a GitHub Pages site with nothing but markdown files and make it look great with Neat CSS as a template for your pages. Neat CSS is a minimalist CSS framework.
Jekyll is built-in to GitHub Pages so you don’t need a build step—the markdown files will be processed automatically. You can also read more about How I Use GitHub as my Blogging Platform.
_layouts
directorydefault.html
fileassets
directoryassets/neat.css
fileassets/custom.css
fileThe layouts directory goes in the root if you’re serving GitHub Pages from the root of a branch. If you’re serving from the docs
directory then it goes in docs/_layouts
.
Here’s an example of the default.html
file that goes in the _layouts
directory. You can use this as-is or you can tweak it to your own taste.
<!DOCTYPE html>
<head>
<title>Using Neat CSS on GitHub Pages</title>
<link rel="stylesheet" type="text/css" href="assets/neat.css">
<link rel="stylesheet" type="text/css" href="assets/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body>
<a class="home" href="/">↖</a>
<h1 id="using-awk-to-prepend-or-append-data-to-each-line">Using AWK to Prepend or Append Data to Each Line</h1>
<p><em>Awk</em> is a tool that is included in Unix and most Unix variants such as Linux and Mac OS X. Using <em>Awk</em>, you can prepend or append data to the beginning or end of every line in a text file. Here’s an example:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cat input.csv | awk '{ print "12345," $0; }'
</code></pre></div></div>
<p>This command will take every line from <em>input.csv</em>, pipe it through <em>Awk</em> and echo it to stdout. <em>Awk</em> in turn, will print <code class="language-plaintext highlighter-rouge">12345,</code> at the beginning of each of those lines. The <em>$0</em> value means the rest of the line we passed to <em>Awk</em> from <em>input.csv</em>.</p>
<p>If you wanted to output that data to a new file, just use the typical greater than sign to redirect to a new file (<em>output.csv</em> in the following example).</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cat input.csv | awk '{ print "12345," $0; }' > output.csv
</code></pre></div></div>
</body>
</html>
You can download the neat.css file with the following curl command.
curl -O https://neat.joeldare.com/neat.css
Create a custom.css
file to put any custom CSS in. This way you can update the neat.css
file, in the future, without blowing up your custom changes. The following command will create a blank file for you.
touch custom.css
Written by Joel Dare on March 19, 2024 and updated on April 15, 2024.