Skip to content
My blog at https://writings.sh
CSS HTML Ruby JavaScript Shell Makefile
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_includes
_layouts
_posts
assets
.gitignore
.htaccess
404.html
Caddyfile
Gemfile
Gemfile.lock
Makefile
README.md
_config.yml
_redirects
about.md
deploy.sh
fix-lazyload-in-feed.sh
fix-mathjax-in-feed.sh
gulpfile.js
index.md
package.json
posts.md
sqip-images.sh
status.md

README.md

writings.sh

Source for my personal blog writings.sh.

Fork Notice

Please create your own design if you fork this.

About This Site

This site is powered by jekyll, and the theme is self-created and self-maintained.

Hosting:

  1. Thanks to greate Netlify, it's a super-easy, super-cool page hosting service, with lots of free features such as free cdn, free cert-allocations, css&js minify, image optimization, and the most-featured deployment (much like CD) etc. However, because of the well-known reason, netlify and cloudfront sometimes perform slow when visited from China mainland, so requests from china are forwarded to Hostker (via dns).

Images:

  1. Post-related images are managed under directory assets/images/posts/<post-identifier>.
  2. Images in the posts should be optimized for smaller size, otherwise pages will be slow to load. Two tools to make image size smaller: tinypng and ImageOptim.
  3. SVG based image placeholders with blur effects are generated by SQIP. I wrote a tiny shell script for batch processing purpose. What's more, each post owns a main-heading-large image, its placeholder is an inline svg which is hand-written in the post meta, here's a tool to encode the inline code from svg source.
  4. Image zooming effects are handled by a javascript library named medium-zoom.
  5. Image lazy loading for better page loading experience: lozad.

Fonts:

  1. Thanks to Google fonts: Arvo as the main font for paragraphs, texts, aka the main font. Roboto (mono) as the font for code.
  2. Thanks to Icomoon, which is a wonderful and helpful icon application website, all icons in this site comes from icomoon's free plan, libraries used: Feather, designed by Cole Bemis.

Math:

  1. Thanks to greate MathJax, which is easy to setup, works everywhere and looks beautiful.

Feed:

  1. The old old old feedburner.
  2. There's an annoying problem that MathJax won't render on RSS readers, because almost all RSS readers don't run javascript there. So the trick I'm using is to use images, detail introduction here: Displaying Math in RSS feeds, which introduces a solution on the top of CODECOGS - a service that gives us an image by inputing a latex equation. In my workflow, the latex-to-image replacement will be done after jekyll build completes.

Others:

  1. Anchor headings solution: jekyll-anchor-headings. Which helps to create a clickable anchor link inside text headings.
  2. The Drop-Cap effect, making the first larger helps readers to find the begining of our texts easily.
  3. Website monitor, the great free uptime-robot monitor service.
  4. A heavy heavy javascript library: Turbolinks, but indeed pretty cool. Which makes navigating the site faster, visiting a site taked care by turbolinks are as of visiting a single-page application.

License

Copyright (c) Chao Wang (hit9[at]icloud.com), All rights reserved.

You can’t perform that action at this time.