Hugo

Once your Hugo site is ready to be deployed, simply set up npm with a package.json in your root dir.

• Test the local server is working correctly:

$ npm run-script start

• Build your public directory:

$ npm run-script build

• Copy the contents of the newly created public directory into your s3 bucket

• Navigate to your s3 bucket url and see your Hugo site.

Create a new s3 Bucket

Create Bucket

https://console.aws.amazon.com/console/home

Console > Login > Services > S3 > Create

• Name: lib.selenasmall.com

Hint: When naming your bucket, use exactly the url you want to use for your website. This will make it easier to manage subdomains later 

• Region: Asia Pacific

Upload the contents

• Click on the bucket:
• Upload the contents of Hugo Site’s public directory

Bucket properties

• Static Website Hosting
• Use this bucket to host a website
  • index.html
  • 404.html

Permissions

• Bucket Policy

{
	"Version": "2012-10-17”,
	"Statement": [{
		"Sid": "PublicReadGetObject",
		"Effect": "Allow",
		"Principal": "*",
		"Action": "s3:GetObject",
		"Resource": "arn:aws:s3:::lib.selenasmall.com/*"
	}]
}

Check the Bucket is Serving Data

Check that your s3 bucket is serving data correctly at the url provided in “properties”

http://webgeek.selenasmall.com.s3-website-ap-southeast-2.amazonaws.com

Configure your DNS

Services > Route 53 > Hosted Zones

• New Record
• lib.selenasmall.com CNAME pointing to http://selena-hugo-bucket.s3-website-ap-southeast-2.amazonaws.com

** This may take a few moments to propagate

** If this does not work you may need to try something else…

• Take a look at https://www.site24x7.com/find-ip-address-of-web-site.html
• Find the IP address of your new subdomain. It should come back saying that it is pointed to an s3 bucket and provide you the IP of that bucket.
• Back in the Console, change your record to an A-IP4 address and point it to your IP
• This should now work in the browser

Gulp Pipeline

Create a src directory to store your precompiled assets in.

$ mkdir -p src/{scss,js,images}

Initialise NPM

$ npm init -y

Add node_modules into your .gitignore - You won’t want to store that in your repository

Install Gulp and Gulp-sass npm packages

You will now see a new directory in your project root called node_modules containing those modules

You will also see those files included under devDependencies in your package.json

$ npm install –save-dev gulp gulp-sass gulp-autoprefixer

Install gulp-cli globally to make it available from the command line > $ npm install –global gulp-cli

You can optionally add scripts to your package.json:

"scripts": {
	"gulp": "gulp",
	"minify": "gulp minify"
}

Create gulp file in your project root

$ touch gulpfile.js

In the file, require your gulp dependencies and write the build tasks:

var gulp = require('gulp');
var sass = require('gulp-sass');

var input = './themes/docs-hg/src/scss/**/*.scss';
var output = './themes/docs-hg/static/styles';

// Compile scss into css
gulp.task('scss', function() {
  return gulp
    // Find all `.scss` files from the `stylesheets/` folder
    .src(input)
    // Run Sass on those files
    .pipe(sass())
    // Write the resulting CSS in the output folder
    .pipe(gulp.dest(output));
});

// Watch scss directory
gulp.task('watch', ['scss'], function() {
    gulp.watch('./themes/docs-hg/src/scss/**/*', ['scss'])
});

// Set watch as default task
gulp.task('default', ['watch']);

Check that it worked

Write a style in your src/scss/main.scss

$black: #000;
body {
  background: $black;
}

Run your gulp sass function to see your css compiled in a new main.css file

$ gulp css

Ensure it’s being loaded correctly by running the Hugo server

$ Hugo server

NB: One Key thing to remember after this is that you will need to compile your styles before deploying any updates to s3

Hash Manifests

Build hash manifests

In gulpfile.js

$ npm install –save-dev gulp-hash del

var hash = require('gulp-hash');
var del = require('del');

// Compile scss into css
gulp.task('scss', function() {
  del(['./hugo/themes/docs-hg/static/styles/**/*'])
    // Find all `.scss` files from the `styles/` folder
  gulp.src(input)
    // Run Sass on those files
    .pipe(sass({ outputStyle: 'compressed' }))
    .pipe(autoprefixer({ browsers: ["last 20 versions"] }))
    .pipe(hash())
    // Write the resulting CSS in the output folder
    .pipe(gulp.dest(output))
    // Build css hash manifest
    .pipe(hash.manifest('hash.json', {
      deleteOld: true,
      sourceDir: './hugo/themes/docs-hg/static/styles'
    })) // Switch to the manifest file 
    .pipe(gulp.dest('./hugo/data/css')); // Write the manifest file 
});

Using hash manifests

Index is a Go built-in function that accepts a map and an index and returns the value of the map with the given index. So here we are asking Hugo to give us the value in .Site.Data.css.hash that has the index “main.css”… which of course is the filename of the hashed asset file.

So in our layouts, instead of directly referencing the file /css/main.css we need to do a lookup…

The css link tag originally looked like this…

<link rel="stylesheet" href=“/styles/main.css" />

Will now look like this…

<link rel="stylesheet" href='/styles/{{ index .Site.Data.css.hash "main.css" }}' type="text/css" />

To continue development on this small static application:

Ensure you have Hugo installed locally, clone this app into your Sites directory by running

$ git clone git@github.com:SelenaSmall/hugo-selena.git

Start the server and browse to localhost:1313

$ hugo server

Heres how I built this example and deloyed it on Netlify

GO HUGO

1. Download and generate and new site Go path already configured, simply download the generator with homebrew:

$ brew update && brew install hugo

2. In your Sites directory, generate a new site:

$ hugo new site {site_name}

3. Add a theme to your project by moving into he theme directory and cloning hugo’s robust theme:

$ git clone https://github.com/tomanistor/osprey.git

http://themes.gohugo.io/osprey/

4. Move into your new site’s root directory and generate some content - this theme allows for the generation of a new post:

$ hugo new blog/post-title.md

5. And also, the generation of a new portfolio entry:

$ hugo new gallery/image-title.md

Be sure to configure this new file and ensure the image you have linked to is available in your static/images path

6. Run hugo’s built in server form the root directory, ensuring the theme and buildDrafts flags are specified:

$ hugo server —theme=osprey —buildDrafts

The above —buildDrafts flag specifies that articles are currently draft versions and not public. To make these **publicly available, simply updraft the content:

$ hugo updraft content/post/good-to-great.md

Then, you can start the server without in the buildDrafts option:

$ hugo server —theme=osprey

Configure your Osprey theme

Update your config.toml options as per the instructions in the theme’s directory, in particular ensuring that you include the theme:

title = "Osprey Example Site"
baseURL = "https://tomanistor.com"
tags = ["portfolio", "web design", "blog"]
languageCode = "en-US"
config = "config.toml"
theme = "osprey"
canonifyURLS = true
googleAnalytics = ""

[Params]
    author = "Toma Nistor"
    description = "Full-stack web developer and UI/UX enthusiast based in San Diego, CA."
    logoBig = "/images/osprey-logo.png"
    logoSmall = "/images/osprey-logo.png"
    favicon = "favicon.ico"
    opengraphImage = "/images/osprey.png"
    twitter = "TomaNistor"
    linkedin = "tomanistor"
    github = "tomanistor"
    email = ""
    googleTagManger = ""
    highlightJS = true
    copyright = true
    credit = true

[[menu.main]]
    name = "Work"
    url  = "/#work"
    weight = 1
[[menu.main]]
    name = "Blog"
    url  = "/#blog"
    weight = 2
[[menu.main]]
    name = "Contact"
    url  = "/#contact"
    weight = 3

If it worked, you should be able to run the default server:

$ hugo server

You can now view your new Hugo site by directing your browser to the following address:

localhost:1313

Store site on GitHub

Create a new repo on Github

$ git init $ git add —all $ git commit -m ‘first commit’ $ git add remote origin {origin} $ git push -u master

Git Modules

Create a .gitmodules file like this:

$ touch .gitmodules

And add your theme in there:

$ git submodule add https://github.com/tomanistor/osprey.git

It should look like this:

[submodule "themes/osprey"]
path = themes/osprey
url = https://github.com/tomanistor/osprey.git

Create a netlify configuration file in your project root called netlify.toml and add the Hugo version to your production environment context as follows:

[context.production.environment]
  HUGO_VERSION = "0.20"

Deploy site on Netlify

Sign up with Netlify if you haven’t already done so at: https://www.netlify.com/

Create a new project and configure your deploy settings for continuous deployment:

Repository: GitHub repo Branch: master Build Command: hugo Publish Directory: public