While writing my own blogging site does not sound that exciting, there were still some fun learning experiences, so let's go meta and write an article about writing articles! I won't focus on HTML and CSS, but more on the initial steps and some info on writing my own code snippets.
First off: hosting. Since I'm cheap, I went with
GitHub Pages, which
you probably noticed with the github.io in the URL.
Aside from free hosting, it is also just very easy to work with as it's
just a standard git repository I can push to. GitHub Pages provides
built-in support for
Jekyll,
but I felt adventurous and went for my own handwritten HTML and CSS.
While Jekyll might have been easier, it wouldn't have been as interesting,
and it's also not in the spirit of discovering and gaining experience
with fundamental concepts.
If you want to read the sourcecode, you can check it out at my GitHub
repo:
github.com/BWindey/BWindey.github.io.
The site is structured with an index.html as entry point,
a single style.css file that's included in all html files,
a folder articles/ with all articles as html files and a
folder fonts/PixelCode/ which hosts the font used for
code-snippets; more on that below.
$ tree . ├── articles/ │ ├── ... │ └── creating_this_site.html ├── favicon.png ├── fonts/ │ └── PixelCode/ │ ├── LICENSE │ ├── PixelCode-Bold-Italic.mini.woff2 │ ├── PixelCode-Bold.mini.woff2 │ ├── PixelCode-Italic.mini.woff2 │ └── PixelCode.mini.woff2 ├── index.html └── style.css
Some codesnippets used on this site need syntax-highlighting. Doing so
manually would be a big task, as you need to wrap each differently
coloured string of text inside something like a span with
a CSS class that will apply the right styles.
Luckily my favourite editor
neovim has the great
:TOhtml command (actually this originates
from vim itself).
This command produces an html file that perfectly represents the current
buffer (which usually just shows the file you're editing) with all
styles applied already.
To use it here, I copy-paste the html and replace the generated
classes with my own more generic solutions:
"GruvboxOrange" -> "orange", "String" -> "green" etc.
You can use 'inspect element' on the following snippet to see how it is written:
def main(): print("Hello, World!")
I'm a big fan of the
PixelCode font.
Originally I used it for the whole site, but that felt a bit too busy
and makes it harder for the reader to set their own font.
For codeblocks however I wanted to still leave my mark, and decided to
"force" the PixelCode font instead of only specifying monospace.
Most users probably do not have PixelCode installed on their system, so
I need to distribute it. This is where the fun began. Downloading the font
from the website gave a zip of over 600 kilobytes. That made me think,
is there a way to not send that many bytes to the reader?
Luckily those 600 kilobytes are split over multiple variations of the
font, and your browser is smart enough to only request the used variants.
But still, each variant is around 30 kilobytes - quite a lot in my opinion -
as each variant contains over 1500 glyphs, way more than needed!
As I write the code-snippets myself, I know that only the standard
7-bit ASCII characters
will be used, so if there only was a way to extract a subset of glyphs
from a .woff2 file...
To extract the ascii-subset I used pyftsubset from fonttools:
$ pyftsubset PixelCode.woff2 \ --output-file="PixelCode.mini.woff2" \ --flavor=woff2 \ --layout-features="" \ --unicodes="U+0000-007E"This disables all special features like ligatures, and extracts the
00-127 ASCII-range.
The result of extracting this subset is that the mini-variant only uses
2 kilobytes of data. You can check this yourself in the network tab of
your browser's dev tools.
I had not expected that writing my own "blog-infrastructure" would yield this kind of interesting problems, but it has been fun! If you have any ideas, suggestions, improvements, ... feel free to leave them in an Issue or a Discussion on GitHub.