Posts on Brendan Quinn

Simple Linting using SCSSlint, ESlint, and Gulp in Atom

Mon, 22 Feb 2016 22:46:42 -0500

On small projects it is important to be mindful of your development process, but it is also important to make light work out of setting up a development environment. For me, while working on a Wordpress project for a friend, this means making quick use of npm, gulp, scss-lint, and eslint. For simplicity’s sake, the use-case will be creating a child theme in Wordpress, writing our CSS in SCSS, writing our javaScript in ES6 standards, and doing this all the the Atom text editor.

File Structure

wp-content/
  |
  + plugins/
  |
  - themes/
    |
    - child-theme/
      |
      + css/
      |
      + js/
      |
      + node_modules/
      |
      - src/
        |
        - scss/
          |
          - main.scss
        |
        - js/
          |
          - main.js
      |
      - .eslintrc
      |
      - gulpfile.js
      |
      - package.json
      |
      - style.css
    |
    + parent-theme/
  |
  - index.php

Atom Packages and Linting

Now let’s get Atom where it needs to be, if you don’t already install both the linter-eslint and linter-scss-lint packages and enable them. This much will begin lintig your .scss files. To lint our javaScript files need a .eslintrc file. With the mindset of keeping it simple, I utilize Airbnb’s lint rules. Their code styles are well documented and it is easy to install. My .eslintrc is this simple.

{
  "extends": "airbnb/base",
}

The linter won’t be functional until the supporting node packages are installed. Run npm install –save-dev eslint-config-airbnb eslint (Thank you, good documentation).

Great, now SCSS and ES6 javaScript files will lint. Once, gulpfile.js is setup we’ll be on our way.

Setting up Gulp

Several node packages are needed in our gulp file. Running this single command in your terminal will take care of all our needs:

npm install --save-dev  gulp gulp-autoprefixer gulp-babel
                        gulp-concat gulp-cssnano gulp-rename
                        gulp-ruby-sass gulp-sourcemaps
                        babel-preset-es2015

Boom. Given the file structure above, I want to take .scss files from …/src/scss and .js files from …src/js and map them to css and js, respectively. This gulp file will do that for us, while watching for changes in the source files.

const gulp = require('gulp');
const sass = require('gulp-ruby-sass');
const autoprefixer = require('gulp-autoprefixer');
const minifycss = require('gulp-minify-css');
const rename = require('gulp-rename');
const sourcemaps = require('gulp-sourcemaps');
const babel = require('gulp-babel');
const concat = require('gulp-concat');

gulp.task('babel', () =>
    gulp.src('src/js/**/*.js')
      .pipe(sourcemaps.init())
      .pipe(babel({
        presets: ['es2015'],
      }))
      .pipe(concat('main.js'))
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest('js'))
);

gulp.task('sass', () =>
  sass('src/scss/main.scss', { style: 'expanded' })
    .pipe(gulp.dest('css'))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
    .pipe(gulp.dest('css'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('css'))
);

gulp.task('watch', () => {
  gulp.watch('src/scss/**/*.scss', ['sass']);
  gulp.watch('src/js/**/*.js', ['babel']);
});


gulp.task('default', ['sass', 'babel', 'watch'], () => {});

There you have it. While in the child-theme directory, run the gulp command to see it all compile and watch for changes.

I hope this was helpful. Feel free to comment if you have any questions.

All the Best,

Brendan

Working with Hugo's Internal Partial Templates: Facebook and Open Graph

Fri, 12 Feb 2016 03:01:40 -0500

Hugo’s internal templates are a thoughtful idea, as I discussed earlier, but it is important to check out the source code in order to be cognizant that you are making the most out of the helper-template. In supplementing the theme this blog is built on, I saw my meta data wasn’t filling out or seemed to have some missing chunks. After investigating the source code, part of the issue was that I wasn’t defining my config files correctly. Once updated, they got me a bit farther.

<!-- config.toml -->
...
[params]
  author = "Brendan Quinn"
  description = "Hey there, I'm Brendan Quinn, an energetic introvert with a love of family, walking/hiking, listening, teaching, and code."
  site_description = "Hey there, I'm Brendan Quinn, an energetic introvert with a love of family, walking/hiking, listening, teaching, and code."
  images = ["http://brendan-quinn.xyz/css/images/Brendan-Quinn-seo.jpg"]
...
[social]
...
  facebook        = "quinn.197"
  facebook_admin  = ""
  facebook_app_id = "<!-- Get from the FB Dev Page -->"
...

<!-- content/post/using-html5-responsive-images.md -->
+++
banner = "css/images/banners/responsive-images-landscape.jpg"
categories = ["Responsive Design"]
date = "2016-02-09T16:30:47-05:00"
description = "Using &lt;picture&gt; &lt;source&gt; and &lt;img&gt; HTML5 elements combined with the \"media\", \"srcset\", and \"size\" attributes, it is possible and even necessary to make responsive images for your users."
images = ["http://brendan-quinn.xyz/css/images/banners/responsive-images-landscape-seo.jpg"]
menu = ""
tags = ["CSS", "HTML5"]
title = "Using HTML5 and Media Queries for Responsive Images"

[params]
  bannerLg = "css/images/banners/responsive-images-landscape-lg.jpg"
  bannerMd = "css/images/banners/responsive-images-landscape-md.jpg"
  bannerSm = "css/images/banners/responsive-images-landscape-sm.jpg"
+++

While this filled out some more fields one compiled, this didn’t get me all the way there. So I made a supplemental partial template for facebook and open graph meta elements.

<!-- the old -->

  <!-- themes/theme/layouts/partials/head.html -->
  {{ template "_internal/opengraph.html" . }}
  {{ template "_internal/google_news.html" . }}
  {{ template "_internal/schema.html" . }}
  {{ template "_internal/twitter_cards.html" . }}

  <!-- internal partial -->
  <meta property="og:title" content="{{ .Title }}" />
  <meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
  <meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
  <meta property="og:url" content="{{ .Permalink }}" />
  {{ with .Params.images }}
    {{ range first 6 . }}
      <meta property="og:image" content="{{ . | absURL }}" />
    {{ end }}
  {{ end }}
  {{ if not .Date.IsZero }}
    <meta property="og:updated_time" content="{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}"/>
  {{ end }}
  {{ with .Params.audio }}
    <meta property="og:audio" content="{{ . }}" />
  {{ end }}
  {{ with .Params.locale }}
    <meta property="og:locale" content="{{ . }}" />
  {{ end }}
  {{ with .Site.Params.title }}
    <meta property="og:site_name" content="{{ . }}" />
  {{ end }}
  {{ with .Params.videos }}
    {{ range .Params.videos }}
      <meta property="og:video" content="{{ . | absURL }}" />
    {{ end }}
  {{ end }}
  <!-- If it is part of a series, link to related articles -->
  {{ $permalink := .Permalink }}
  {{ $siteSeries := .Site.Taxonomies.series }}
    {{ with .Params.series }}
      {{ range $name := . }}
        {{ $series := index $siteSeries $name }}
          {{ range $page := first 6 $series.Pages }}
            {{ if ne $page.Permalink $permalink }}
              <meta property="og:see_also" content="{{ $page.Permalink }}" />
            {{ end }}
          {{ end }}
        {{ end }}
      {{ end }}
      {{ if .IsPage }}
        {{ range .Site.Authors }}
          {{ with .Social.facebook }}
            <meta property="article:author" content="https://www.facebook.com/{{ . }}" />
          {{ end }}
          {{ with .Site.Social.facebook }}
            <meta property="article:publisher" content="https://www.facebook.com/{{ . }}" />
          {{ end }}
          <meta property="article:published_time" content="{{ .PublishDate }}" />
          <meta property="article:modified_time" content="{{ .Date }}" />
          <meta property="article:section" content="{{ .Section }}" />
          {{ with .Params.tags }}
            {{ range first 6 . }}
              <meta property="article:tag" content="{{ . }}" />
            {{ end }}
          {{ end }}
        {{ end }}
      {{ end }}
      <!-- Facebook Page Admin ID for Domain Insights -->
      {{ with .Site.Social.facebook_admin }}
        <meta property="fb:admins" content="{{ . }}" />
      {{ end }}

<!-- the new -->
  <!-- layouts/partials/head.html -->
  {{ partial "seo/og.html" . }}
  {{ template "_internal/google_news.html" . }}
  {{ template "_internal/schema.html" . }}
  {{ template "_internal/twitter_cards.html" . }}

  <!-- layouts/partials/seo/og.html -->
  <meta property="og:title" content="{{ .Title }}" />
  <meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
  <meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
  <meta property="og:url" content="{{ .Permalink }}" />
  {{ if .IsPage }}
    {{ with .Params.images }}
      {{ range first 6 . }}
        <meta property="og:image" content="{{ . | absURL }}" />
      {{ end }}
    {{ end }}
  {{ else }}
    {{ with .Site.Params.images }}
      {{ range first 6 . }}
        <meta property="og:image" content="{{ . | absURL }}" />
      {{ end }}
    {{ end }}
  {{ end }}
  {{ if not .Date.IsZero }}
    <meta property="og:updated_time" content="{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}"/>
  {{ end }}
  {{ with .Params.audio }}
    <meta property="og:audio" content="{{ . }}" />
  {{ end }}
  {{ with .Params.locale }}
    <meta property="og:locale" content="{{ . }}" />
  {{ end }}
  {{ with .Site.Params.title }}
    <meta property="og:site_name" content="{{ . }}" />
  {{ end }}
  {{ with .Params.videos }}
    {{ range .Params.videos }}
      <meta property="og:video" content="{{ . | absURL }}" />
    {{ end }}
  {{ end }}
  <!-- If it is part of a series, link to related articles -->
  {{ $permalink := .Permalink }}
  {{ $siteSeries := .Site.Taxonomies.series }}
  {{ with .Params.series }}
    {{ range $name := . }}
      {{ $series := index $siteSeries $name }}
        {{ range $page := first 6 $series.Pages }}
          {{ if ne $page.Permalink $permalink }}
            <meta property="og:see_also" content="{{ $page.Permalink }}" />
          {{ end }}
        {{ end }}
      {{ end }}
    {{ end }}
    {{ if .IsPage }}
      {{ range .Site.Authors }}
        {{ with .Social.facebook }}
          <meta property="article:author" content="https://www.facebook.com/{{ . }}" />
        {{ end }}
        {{ with .Site.Social.facebook }}
          <meta property="article:publisher" content="https://www.facebook.com/{{ . }}" />
        {{ end }}
        <meta property="article:published_time" content="{{ .PublishDate }}" />
        <meta property="article:modified_time" content="{{ .Date }}" />
        <meta property="article:section" content="{{ .Section }}" />
        {{ with .Params.tags }}
          {{ range first 6 . }}
            <meta property="article:tag" content="{{ . }}" />
          {{ end }}
        {{ end }}
      {{ end }}
    {{ end }}
    <!-- Facebook Page Admin ID for Domain Insights -->
    {{ with .Site.Social.facebook_admin }}
      <meta property="fb:admins" content="{{ . }}" />
    {{ end }}
    {{ with .Site.Social.facebook_app_id }}
      <meta property="fb:app_id" content="{{ . }}" />
    {{ end }}

As you can see I still have some work to do here. Even after cleaning it up and making some small changes to og:image I still think this is one {{ end }} tag away from complete. But, hey, during testing it worked out, so I will continue to play and update this post if any new information comes to light.

Oh, and as always, don’t forget to test your meta data with facebook’s Open Graph Object Debugger!

All the Best,

Brendan

Working with Hugo's Internal Partial Templates: twitter-cards

Fri, 12 Feb 2016 03:01:40 -0500

Hugo’s internal templates are neat and helpful. They are templates that live within hugo and can be referenced similar to other templates.

{{ template "_internal/opengraph.html" . }}
{{ template "_internal/google_news.html" . }}
{{ template "_internal/schema.html" . }}
{{ template "_internal/twitter_cards.html" . }}

As I developed this blog with Hugo’s help, I needed to dive into the _internal/twitter_cards.html template to make sure I had my config.toml set up correctly. That search led me here. While helpful, I think it is still in alpha.

{{ if .IsPage }}
  {{ with .Params.images }}
    <!-- Twitter summary card with large image must be at least 280x150px -->
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:image:src" content="{{ index . 0 | absURL }}"/>
{{ else }}
  <meta name="twitter:card" content="summary"/>
{{ end }}
  <!-- Twitter Card data -->
  <meta name="twitter:title" content="{{ .Title }}"/>
  <meta name="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}"/>
  {{ with .Site.Social.twitter }}
    <meta name="twitter:site" content="@{{ . }}"/>
  {{ end }}
  {{ with .Site.Social.twitter_domain }}
    <meta name="twitter:domain" content="{{ . }}"/>
  {{ end }}
  {{ range .Site.Authors }}
    {{ with .twitter }}
      <meta name="twitter:creator" content="@{{ . }}"/>
    {{ end }}
  {{ end }}
{{ end }}

I’m still new to Go templating, but it seems to me that the {{ with }} statement on the second line is missing an {{ end }} tag. If true, and once fixed, that would leave the index page without a <meta name=“twitter:image” content=“{{ index . 0 | absURL }}”/> tag. To fix this I ceated a partial template: ROOT/layouts/seo/twitter.html. Here’s where my adjustments brought me:

<!-- layouts/partials/head.html -->
{{ template "_internal/opengraph.html" . }}
{{ template "_internal/google_news.html" . }}
{{ template "_internal/schema.html" . }}
{{ partial "seo/twitter.html" . }}

<!-- layouts/partials/seo/twitter.html -->
{{ if .IsPage }}
  {{ with .Params.images }}
  <!-- Twitter summary card with large image must be at least 280x150px -->
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:image:src" content="{{ index . 0 | absURL }}"/>
    <meta name="twitter:card" content="summary"/>
  {{ end }}
  <!-- Twitter Card data -->
  <meta name="twitter:title" content="{{ .Title }}"/>
  <meta name="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}"/>
  {{ with .Site.Social.twitter }}
    <meta name="twitter:site" content="@{{ . }}"/>
  {{ end }}
  {{ with .Site.Social.twitter_domain }}
    <meta name="twitter:domain" content="{{ . }}"/>
  {{ end }}
  {{ range .Site.Authors }}
    {{ with .twitter }}
      <meta name="twitter:creator" content="@{{ . }}"/>
    {{ end }}
  {{ end }}
{{ else }}
  <meta name="twitter:card" content="summary" />
  {{ with .Site.Social.twitter }}
    <meta name="twitter:site" content="@{{ . }}"/>
  {{ end }}
  <meta name="twitter:title" content="{{ .Title }}"/>
  <meta name="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}"/>
  {{ with .Site.Params.images }}
    {{ range first 6 . }}
      <meta name="twitter:image" content="{{ . | absURL }}" />
    {{ end }}
  {{ end }}
{{ end }}

If you choose to do the same or make our own modifications, don’t hesitate to test them with Twitter’s card validator. Hopefully it turns out beautifully.

All the Best,

Brendan

Using HTML5 and Media Queries for Responsive Images

Tue, 09 Feb 2016 16:30:47 -0500

Using <picture> <source> and <img> HTML5 elements combined with the media, srcset, and size attributes, it is possible and even necessary to make responsive images for your users. Doing so will minimize the size of your images, make it your site load faster, and therefore create a better UX. There are two approaches. To decide, ask:

Q: Do I want to take into account device orientation and/or screen resolution?

Answer 1: ‘No.’

Thats cool. This approach is simpler, which makes sense. It is for a simpler use-case. Heres an example of an HTML5 responsive <img /> element.

/* CSS */
@media only screen and (max-width: 799px) {
  img {
    width: 50%;
  }
}

@media only screen and (min-width: 800px) and (max-width: 1419px) {
  img {
    width: 75%;
  }
}

@media only screen and (min-width: 1240px) {
  img {
    width: 100%;
  }
}

<!--  HTML -->
<img sizes="(min-width: 1240px) 100vw,
    (min-width: 800px) 75vw,
    (min-width: 0px) 50vw"
  srcset="http://brendan-quinn.xyz/css/images/responsive-images-portrait-sm-2x.jpg 200w,
    http://brendan-quinn.xyz/css/images/responsive-images-portrait-sm-2x.jpg 400w,
    http://brendan-quinn.xyz/css/images/responsive-images-portrait-md.jpg 528w,
    http://brendan-quinn.xyz/css/images/responsive-images-portrait-lg.jpg 1000w,
    http://brendan-quinn.xyz/css/images/responsive-images-portrait-md-2x.jpg 1046w,
    http://brendan-quinn.xyz/css/images/responsive-images-portrait-lg-1.5x.jpg 1500w,
    http://brendan-quinn.xyz/css/images/responsive-images-portrait-lg-2x.jpg 2000w"
  src="http://brendan-quinn.xyz/css/images/responsive-images-portrait-sm.jpg"
  alt="Icelandic Landscape View" />

Sizes takes a inequality using min-width or max-width and the size of the image at each viewport size. (min-width: 800px) 75vw, coincide with the css width of the image: @media only screen and (min-width: 800px) and (max-width: 1419px) { img {width: 75%;} }. This helps the browser calculate the size of the image that it can then search through srcset and find the appropriate image. If, for example, a user were browsing on a device which had a viewport size of 910px, the second media statement would be satisfied. It would then calculate 910 * .75 = 675, and look for the appropriate image in srcset.

Srcset contains a comma delimited list of identical images of different scale and their width. for example, http://brendan-quinn.xyz/css/images/responsive-images-portrait-md-2x.jpg 1046w, tells us that image responsive-images-portrait-md-2x.jpg is 1046px wide. The best image for the use-case given of a viewport of width 910px and therefore and image width of 675px would then be http://brendan-quinn.xyz/css/images/responsive-images-portrait-lg.jpg 1000w, since it is the smallest image that will not distort to fit the space.

Here it is live:

See the Pen Responsive HTML5 Image Element by Brendan Quinn (@Mathdrquinn) on CodePen.

Answer 2: ‘Yes. Resolution and orientation are important.’

Double Cool. This approach introduces two additional elements: picture and source. Here’s the structure:

<picture>
  <source srcset="<!-- url for a device pixel ratio of 1 --> 1x,
      <!-- url for a device pixel ratio of 1.5 --> 1.5x,
      <!-- url for a device pixel ratio of 2 --> 2x"
    media="<!-- Media conditions here-->" />
  <source srcset="<!-- url for a device pixel ratio of 1 --> 1x,
      <!-- url for a device pixel ratio of 1.5 --> 1.5x,
      <!-- url for a device pixel ratio of 2 --> 2x"
    media="-- Media conditions here--" />
  <img src="<!-- default url -->" alt="" />
</picture>

Similar to both answer 1 and a switch statement, the browser will load the first source whose media condition evaluates to true with the correct url to match the pixel ratio of the device.

Because media is separated out into its own attribute, we have available to us all of the options we would in CSS. Here is a more flushed out example with media queries that consider orientation.

<picture>
  <source srcset="http://brendan-quinn.xyz/css/images/responsive-images-landscape-lg.jpg 1x,
      http://brendan-quinn.xyz/css/images/responsive-images-landscape-lg-1.5x.jpg 1.5x,
      http://brendan-quinn.xyz/css/images/responsive-images-landscape-lg-2x.jpg 2x"
    media="only screen and (min-width: 1240px)">
  <source srcset="http://brendan-quinn.xyz/css/images/responsive-images-landscape-md.jpg 1x,
      http://brendan-quinn.xyz/css/images/responsive-images-landscape-md-1.5x.jpg 1.5x,
      http://brendan-quinn.xyz/css/images/responsive-images-landscape-md-2x.jpg 2x"
    media="only screen and (min-width: 800px)">
  <source srcset="http://brendan-quinn.xyz/css/images/responsive-images-landscape-sm.jpg 1x,
      http://brendan-quinn.xyz/css/images/responsive-images-landscape-sm-1.5x.jpg 1.5x,
      http://brendan-quinn.xyz/css/images/responsive-images-landscape-sm-2x.jpg 2x"
    media="only screen and (min-width: 0px) and (orientation: landscape)">
  <source srcset="http://brendan-quinn.xyz/css/images/responsive-images-portrait-sm.jpg 1x,
      http://brendan-quinn.xyz/css/images/responsive-images-portrait-sm-1.5x.jpg 1.5x,
      http://brendan-quinn.xyz/css/images/responsive-images-portrait-sm-2x.jpg 2x"
    media="all and (min-width: 0px) and (orientation: portrait)">
  <img src="http://brendan-quinn.xyz/css/images/responsive-images-landscape-sm-2x.jpg" alt="Icelandic Landscape" />
</picture>

Live:

See the Pen Responsive HTML5 Images by Brendan Quinn (@Mathdrquinn) on CodePen.

While I enjoy the flexibility of this method, it is verbose, and while orientation changing works well on my desktop, I’m having issue getting orientation to work on mobile. I’m still looking for a solution and will add the details if I find an answer.

As always, if you’re looking for much more detail on these elements and attributes, visit the W3C specifications and pour over them. While this post just skims the topic of responsive images, it would have been a poor one had I not consulted it.

All the Best,

Brendan

Pointing Hover Domain to Your Heroku App

Wed, 03 Feb 2016 09:12:34 -0500

Hosting static sites for free on Github’s Pages is fantastic, but it might be more preferable to ru your own server. My go-to for that is Heroku. This post will not go into how to host on Heroku (I will assume you already are hosting there), but how to point your purchased hover domain to your Heroku-hosted web-app. The process has a few more nuances than my previous post on pointing to gh-pages.

For the following directions I’ll use in place of your Heroku URL and as your purchased hover URL.

On hover click through your desired domain (https://hover.com/domain/). Under the initial “Domain Details” tab, edit the “Forward This Domain” value and enter .
Still on hover, move over to the “DNS” tab. Click “ADD NEW”. Enter the following values:
- Hostname: www, Record Type: CNAME, Value: And Save. Your screen should look like this:
Within your Heroku dashboard, open your app and go to the settings tab (the URL should resemble https://dashboard.heroku.com/apps/
/settings). Scroll down to the Domains section and click “Add domain” and enter the following values:
- Domain Name: , DNS Target: .
Boom goes the dynomite. Give it a few minutes to settle (it took mine 10-15 min) and you’re off and ready! If you have any trouble, I used hover’s chat to talk with a super helpful guy named Ryan. While you might not get Ryan, hover’s service is top-notch and they’ll help you out and send you, in my opinion, a few too many emails assuring your issue was resolved.

All the Best,

Brendan

Pointing Hover Domain to Github Pages

Tue, 02 Feb 2016 09:49:50 -0500

I was introduced to hover by being an info nerd with 99% Invisible. Many people still use Go Daddy because it is the industry standard and, for the most part, it is cheaper. I prefer good customer service and a simple UX, hence my hover preference. It seems there is still a small lack of resources on integrating hosting services with hover, so I’d like to put my findings here. This process was made a lot easier with help from Michael Deeb, though my explanation aims to be more visual and ELI5. This post assumes you’re familiar with Github and the git cli. If you’re not familiar, begin here.

This static blog is hosted using Github’s Pages (which only handles static sites), which is awesome because it completely free if you don’t mind your code being public. Then spend a couple of dollars your domain of choice from hover and lets begin.

For the following directions I’ll use in place of your Github Pages URL and as your purchased hover URL.

Within your hover account, click your desired domain and traverse to the DNS tab.
Delete all DNS records with a “Records” value of “A”.
Add new records with the following values:
- Hostname: @, Record Type: A, Value: 192.30.252.153
- Hostname: @, Record Type: A, Value: 192.30.252.154
- Hostname: www, Record Type: CNAME, Value: When complete, your screen should look something like:
Go to your Github repo’s root directory. To the right of the green “New pull request” button, click “New file”. Give this file the exact name “CNAME” (UPPERCASE!!) and enter on line one with no other content and commit the file. If you prefer to use your favorite editor to create the file and then push it up, be my guest. The CNAME file should resemble this:
Thats it! But be patient. The redirect can take up to 10 min to settle, although usually it happens in much less time.

All the Best,

Brendan