Coder Social home page Coder Social logo

rickcogley / rcc-hugo2015 Goto Github PK

View Code? Open in Web Editor NEW
18.0 5.0 8.0 130.36 MB

Rick Cogley's personal site, created in Hugo and based on Basscss.

Home Page: http://rick.cogley.info

License: MIT License

HTML 54.95% CSS 22.72% JavaScript 22.14% TypeScript 0.18%

rcc-hugo2015's Introduction

deploy

Rick Cogley Central

Please see the latest release notes for a quick summary of the absolute latest.


Latest iteration

As they say, we "stand on the shoulders of giants", and this site is certainly no exception.

Two previous iterations are still online here and here, having been built in Octopress 2 (with thanks to Paul Ser) and RapidWeaver, respectively. Ancient history, but my very first blog was on Radio Userland!

This iteration represents a major upgrade to my process and site. After a couple of years of getting used to the basics of git, github and front-end development, I finally took steps to implement a workflow based on node and npm, using gulp.js to optimize, minify and bundle my css and javascript, for use by Hugo.

Go Hugo

Hugo is a super fast Static Site Generator, which makes quick work of using html "templates" to merge your css, javascript, images and content written in the Markdown format, into a publishable website.

About Hugo, we learn:

Hugo is written for speed and performance. Great care has been taken to ensure that Hugo build time is as short as possible. We're talking milliseconds to build your entire site for most setups.

In fact, it takes far longer to upload the site to your web space, than it does for Hugo to generate it.

Hugo is downloadable as a single binary file, written in Go, which means it will run on just about any platform, just by running the file. There are no complex installations and dependencies to deal with.

Site Look

The look of this site comes from a couple of different components.

First, the stylistic base of the site comes from a fantastic and comprehensive css library called "Basscss". Basscss is:

A lightweight collection of base element styles and immutable utilities designed for speed, clarity, performance, and scalability.

It allows you to have consistency in your basic styles, responsiveness to support mobile users, and acts as a great starting point for any site.

As for Type Faces, I had been using the excellent and beautiful Alegreya, but changed to the Calluna Family and Freight Sans faces, because they support more of the OpenType features I wanted to take advantage of. They're served via Adobe Typekit, and you can see the Adobe Auto-generated Colophon for more info on these.

Custom styles for typography were implemented using Adobe's recommendations for OpenType, some techniques from Web Typography and, some css from Typeplate.

The icons you see here and there are from sets purchased via Icomoon library, and from Agne Alesiute's Origami Animals collection at The Noun Project. This time, I tried using all SVG icons. We'll see how that goes.

The photos on this site are mine, unless otherwise noted. I enjoy photography, and have a whole lot of photos I can use, so I though I would weave them throughout the site, featuring them in banners, accent squares and galleries. My galleries are being displayed by the slick javascript nanoGALLERY.

Hosting

This site is hosted on Deno Deploy using a github action.

Comments are hosted on Disqus.

DNS is hosted on Amazon Web Services Route53, a really robust and fast DNS service.

The repository for this site is hosted at Github.

Semantic Markup

Considering Semantic HTML, I'm using some now-well-accepted Microdata such as the Person Schema, and Microformats 2 such as h-card with some others sprinkled in.

To mark up my About page with the Person Schema, I'm now using the much-easier JSON-LD, because it's officially supported by Google. It lets you put the markup in a script tag, which you can simply include in the page. No more headaches from interspersed itemscope, itemtype or itemprop.

TL;DR Thanks!

Warm thanks and regards to:

Steve Francia (@spf13) and contributors for the giant amount of work in creating Hugo, and to the Go language team itself. Bjørn Erik Pedersen (@bep) has been a great help on the Hugo discussion forums).

@jaydenseric for "barebones" which taught me a skillful way to organize a site, and helped me modernize my front-end dev workflow.

@ai, @ben-eb, @moox and many others for the massive and important work on "postcss", "postcss-cssnext", "cssnano" and other various modules, helping me to use the latest css, and get that transformed and bundled, ready for production.

@jxnblk for the wonderful "basscss" css foundation library.

Jos Buivenga / Exljbris and Joshua Darden / Darden Studio, for the beautiful type faces.

Lastly, I even have a humans.txt file. Humans.txt is an attempt to standardize on a way of making a site colophon, in text format. If you click it, you'll see some of the same information as on this page, in a simple text format.

License

Text Content License

Unless otherwise noted, the text content on this site is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License, "CC-BY-SA". cc-by-sa-logo

Source License

Unless otherwise noted, the source content on this site is released under the MIT License.

The MIT License

Copyright © 2015 Rick Cogley

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

rcc-hugo2015's People

Contributors

rickcogley avatar npmcdn-to-unpkg-bot avatar

Stargazers

Roman avatar  avatar Yjie avatar Daniel F. Wehleit avatar Guillem CANAL avatar Abdülkadir ZEYBEK avatar  avatar Juan Carlos Pulido S avatar Ahmet ALMAZ avatar Nic avatar Christophe Dervieux avatar Kenold Beauplan avatar  avatar Abhishek Pandey avatar  avatar Kunal Kushwaha avatar  avatar Robert Willert avatar

Watchers

 avatar James Cloos avatar Abhishek Pandey avatar  avatar  avatar

rcc-hugo2015's Issues

How to make it work?

gulp.parallel is not a function
gulp.registry is not a function
gulp.series is not a function
etc.

How to fix it?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.