tko.dev Site Base V2

Link Code

bulma node hugo gulp sass

Personal Project

This is the code base for v2 of my portfolio at tko.dev.

Full responsive. Using a heavily modified version of Bulma to define grid structure; it is CSS only, unopinionated, fast (<200KB!), yet supports all modern flexbox grid conventions. My Gulp build process then compiles SASS & SCSS, copies portfolio items from my local sources, builds it with Hugo, and renders real-time with BrowserSync for a live editing experience. I deploy using Git on DigitalOcean due to delta updates for all file types, which means builds deploy in seconds not hours.

Building for developers

  • Download and install dependencies

    1
    2
    3
    		 
    git clone https://github.com/tkodev/htko-site-base.git
    cd htko-site-base
    npm install

  • Build

    1
    2
    		 
    npm run server # local live editing
    npm run builder # remote live build (!)

  • (!) renders only for build confirmation. All linked elements point to tko.dev and load accordingly based on files there.

Project Criteria:

  • 100% HTKO design.
    • Gulp, Node.js task engine.
  • Style Structure: Custom lightweight base based on Bulma.
    • Gulp-Sass,Gulp-PostCSS,AutoPrefixer to compile sass & scss files to css.
  • Portfolio Support: Pull from all local sources.
    • JS-Yaml, Gray-Matter for front matter / build configuration processing.
    • Globby,Minimatch,FS-Extra for portfolio projects compilation.
  • Human ready: Linting, Sourcemapping, Live-editing.
    • JS-beautify for linting.
    • Hugo, BrowserSync for building and rendering.