Static Web Design

Back


Static Site

Why

There are many Problem with cms some due to security others dues to infrastructure dependency, database or running a server Allows us to separate layout from content.
Produces HTML which is easy to host and share.

Dynamic vs static

Static Site

A static site is one that does not change once the content is set.

  • plain old html site
  • redbrick

Dynamic Site

A dynamic is one that is generated every time you load it.

  • WordPress
  • Facebook
  • twitter

Hugo

Written in go, so runs on anything
Uses markdown and yaml to store setting and contents

Using Hugo

Hugo is already installed on pygmalion, so everyone just needs to SSH there to use it

1
ssh username@pygmalion.redbrick.dcu.ie

Creating your first site

To generate your first site you can type the command:

1
$ hugo new site ~/my-website

Jump into your new site and have a look around at the files

1
2
$ cd ~/my-website
$ ls -F

Open up the config.yaml file to change the configuration of your website

1
$ nano config.yaml

Edit the content/index.md with what ever you want to say

1
$ nano content/index.md

Making it your own

Changing images

To get started you will want to add your own pictures for your avatar, banner and about photos. To change these you will need to add these to your /static/img/ folder.

  • avatar.jpg
  • banner.jpg
  • about.jpg

Customising pages

  • Change the baseURL baseURL: "http://www.redbrick.dcu.ie/~username/" to inclue your username
  • Change title: A Redbrick users site to the title of your main page
  • You can also add your social media links in here after link: '#'

Adding new pages

1
$ hugo new about.md
  • This will generate a new page with some metadata all ready in it Take a look at this new file with
    1
    $ nano content/about.md

Building the Site

To build your site we type the command

1
$ hugo

This will output all the code into the public folder.
Note: Hugo can be weird if you don’t delete your public before you generate every time
Warning: rm -rf is sometimes dangerous. Don’t run in sudo unless you know what you are doing

1
$ rm -rf public

This will perminantly delete the public folder
You can also achieve the same thing by running

1
$ hugo --cleanDestinationDir

Looking at the site locally

If you wanna look at your site before you go and deploy it (recommended)

1
$ hugo server

This will generate a site on localhost:1313

Why is my static site really slow to load?

Images

Don’t use high-res
scale them down and compress them

  • thumbnails 200px
  • banners 800px

(These are rough estimates every page is different) Compression removes details but makes them smaller

Minification

Minification removes white spaces reducing the size of the file allowing you to load your site faster. You can minify html, css, or js.
Tools for minification:

  • Gulp
  • Grunt
  • Webpack

Blog

hugo can be used for a blog. You’ll need a theme that supports blog posts. Just run hugo new post/my-post-name.md