Giter VIP home page Giter VIP logo

blog's Introduction

Netlify Status

Blog

Tech Stack

Node powered blog using Static Site. Hosted with Netlify.

Topics

I'll write about front-end-development, art, design, and maps.

Frontmatter

---
title: Title of the Post
date: 2013-11-15
description: Description of the article
template: _templates/article.html
thumbnail: thumbnail.svg
twitter_image: thumbnail.jpg
background: background.jpg
feature: feature.png
canvas: navy
spot: green
js:
  - file1
  - file2
css:
  - file1
  - file2
---
Option Definition
title Title of the post
date YYYY-MM-DD formatted date
template Layout file to use _templates/article.html or _templates/layout.html
description Description of the article. Recommended 1 sentence.
background Image in the background of hero area.
feature Featured image that goes in the hero area. If provided, title and date will go below hero area in main post.
thumbnail Small image to use on homepage.
twitter_image Twitter cards can't render svg, so export a jpg for large summary cards
canvas Either navy or tan for background color.
spot The spot color for the article. Choose from yellow, orange, red, magenta, violet, blue, cyan, and green.
js List of js files needed for post (without js at end).
css List of css files specific to post (without css at end).

Install

npm install

Development

npm start

Deploy

Deployments occur automatically based on the master branch via continuous deployment.

License

Words, content, and design are mine (©Paul C Pederson, 2019), but the tech is yours (ISC).

blog's People

Contributors

dependabot[bot] avatar paulcpederson avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

blog's Issues

Make site into a PWA

  • Current page does not respond with a 200 when offline
  • Does not register a service worker that controls page and start_url
  • No usable web app manifest found on page.
  • Is not configured for a custom splash screen
  • Does not set an address-bar theme color
  • Does not provide a valid apple-touch-icon

Link to feed

Currently there is an rss feed at paulcpederson.com/feed.xml but no link to the feed. I still subscribe to rss feeds, maybe other people do too?

Add Feed

Previous version of blog had an rss feed at /feed.xml
Got lost in rewrite.

Minify images

Images are like 90% of load time currently and it's ridiculous. At least minify...

Refactor Sass

  • move to inline-block-grid
  • move to scss utils
  • eliminate extra sass
  • try to abstract common styles
  • remove unused sass

Move away from Wintersmith?

I'd sort of like to use something that did a bit less for you? Acetate is one option when that is ready. Maybe metalsmith? Something custom?

Add open graph data

tags for facebook and twitter in the head just in case somebody someday shares an article.

Update Dokku article with most recent version/workflow

Looks like there is now a setup for dokku that needs a .env and .static file pointing to a static buildpack with the most recent version of dokku.

I should update the article on this for people like this guy: https://twitter.com/mxstbr/status/623030717342216192

There is a static example in the dokku tests here: https://github.com/progrium/dokku/tree/master/tests/apps/static

Run through the process again on a new droplet and update anything that has changed.

404 Page

Should probably create some awesome 404 just for giggles.

License?

Hi Paul - found your repo from the Wintersmith showcase. The design of your blog is wonderful! Was this your own design? I'd like to use it as a beginning point to extend on my own site but didn't want to assume, just because it's available on github, that it was freely available. Thanks in advance....

Tooling

A little house cleaning is in order:

  • Move away from Wintersmith
  • Drop grunt for npm
  • Set up continuous deployment to Dokku with Travis
  • Node-Sass
  • Remove all Jade templates because they are a nightmare.

Use time element for post date

To be semantic, the HTML5 time element should be used to add the date of a post:

<time datetime="2015-04-08" class="time">4.8.2015</time>

Woff2

Use Google's woff2 tool and add woff2 version of fonts to type stylesheet

Fix twitter cards

At some point this got broken. Use the teitter card validator to troubleshoot.

Update Dokku version on Digital Ocean droplet

Currently using v0.2.3 current version is v0.3.21 there is some added functionality. I think that static buildpacks were actually removed though...

At some point it might be interesting to just push everything to cloudfront and use a cdn to host the site. There isn't anything dynamic, so it wouldn't really matter.

Set up https

HTTPS is now a search engine ranking factor. Multiple browsers mark http as insecure.

Move to Nitti?

Nitti is now available as a web font for €59.00 (Max 50,000 visitors per month).

https://www.boldmonday.com/typeface/nitti/

Thinking about using Nitti for everything on the blog. I'd probably need to buy the italic and medium for bold so they don't look terrible when the browser tries to use them.

Played around in the browser with this:

screen shot 2015-06-17 at 10 47 40 am

vs:

screen shot 2015-06-17 at 10 47 47 am

Make code full width

Code should act the same as a full width image, extending past the article. Especially on mobile, this will make code blocks more readable.

Create a homepage

Current homepage should be at /articles/. Home page should be more of an introduction to who I am.

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.