Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creating and Deploying Static Sites with Hugo

94 views

Published on

Most web sites don’t have data that changes, so why power them with a database and take the performance hit? In this talk we’ll explore static site generation using Hugo, an open-source static site generator. You’ll learn how to make a master layout for all pages, and how to use Markdown to create your content pages quickly.

Then we’ll explore how to deploy the site we made to production. We’ll automate the entire process. When you’re done, you’ll be able to build and deploy static web sites quickly with minimal tooling.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Creating and Deploying Static Sites with Hugo

  1. 1. Creating and Deploying Static Sites with Hugo Brian P. Hogan @bphogan
  2. 2. Hi. I'm Brian! — Editorial Manager at DigitalOcean — Programmer (http://github.com/napcs) — Author (http://bphogan.com/publications) — Musician (http://soundcloud.com/bphogan) — Teacher
  3. 3. Shameless Plug Small Sharp Software Tools https://pragprog.com/titles/ bhcldev
  4. 4. Today we'll — Build a small site with Hugo — Create a theme — Create some content — Build and test the site — Deploy the site with Docker and Docker-machine
  5. 5. Disclosure and Disclaimer I am using DigitalOcean in this talk. I work for them so my demo servers are free. Want $10 of credit? https://m.do.co/c/1239feef68ae Also we're hiring and we are remote-friendly. https:// do.co/careers
  6. 6. Other such disclaimers... — This is an experiment. It may or may not be suitable for production. — This is based on my experience. Yours may vary. — Questions welcome and encouraged. Happy to argue a!er if you buy the beer. — I go fast, but all notes are available a!er the session so you can play on your own.
  7. 7. Static Sites vs Dynamic Sites — Web servers excel at serving text files. — Traditional content systems (WordPress, Ghost) use databases for content and build pages on the fly. — Caching becomes more difficult. — Most content sites don't have frequent content changes. — Static sites are easier than ever to deploy.
  8. 8. What is Hugo — Static Site Generator — Uses Go Templates — Supports Markdown — Generates files quickly — Good development flow
  9. 9. Install Hugo Mac: $ brew install hugo Elsewhere: Download release for your OS at https://github.com/ gohugoio/hugo/releases
  10. 10. Create your site $ hugo new site portfolio Congratulations! Your new Hugo site is created in /Users/brianhogan/presentations/2018_hugo_docker/code/portfolio. Just a few more steps and you're ready to go: 1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/, or create your own with the "hugo new theme <THEMENAME>" command. 2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>". 3. Start the built-in live server via "hugo server". Visit https://gohugo.io/ for quickstart guide and full documentation.
  11. 11. Site structure !"" portfolio #"" archetypes #"" config.toml #"" content #"" data #"" layouts #"" resources #"" static !"" themes
  12. 12. Hugo Themes — Many themes available. — Generate your own $ hugo new theme basic
  13. 13. Theme structure themes/basic/ !"" LICENSE !"" archetypes #   $"" default.md !"" layouts #   !"" 404.html #   !"" _default #   !"" index.html #   $"" partials !"" static #   !"" css #   $"" js $"" theme.toml
  14. 14. Configure Hugo config.toml baseURL = "http://example.org/" languageCode = "en-us" -title = "My New Hugo Site" +title = "Portfolio" +theme = "basic"
  15. 15. Layouts — The "wrapper" for content — Can create additional layout files and associate them with content. — index.html is the homepage layout — single.html is the layout for a content page — list.html is the layout for a content listing page
  16. 16. Partials — Pieces of a layout — Sharable components — Header — Footer — Sidebar — Reduces duplication
  17. 17. Header partial File: themes/basic/layouts/partials/header.html <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <title>{{ .Site.Title }}</title> </head> <body> <div class="content"> <header> <h1>{{ .Site.Title }}</h1> </header> <main>
  18. 18. Footer partial File: themes/basic/layouts/partials/footer.html </main> <footer> <small>Copyright 2018 Me.</small> </footer> </div> </body> </html>
  19. 19. Create the Home Page Template File: themes/basic/layouts/index.html {{ partial "header.html" . }} <h2>{{.Title}}</h2> {{.Content}} {{ partial "footer.html" . }}
  20. 20. Create Home Page Content The content/_index.md file holds the content for the home page $ hugo new _index.md
  21. 21. Add Home Page Content File: content/_index.md --- title: "Welcome" date: 2018-11-08T22:52:21-06:00 draft: false --- Welcome to my portfolio site.
  22. 22. Run the Server $ hugo server ... Watching for changes in /Users/brianhogan/dev/hugo_docker/portfolio/{content,data,layouts,static,themes} Watching for config changes in /Users/brianhogan/dev/hugo_docker/portfolio/config.toml Serving pages from memory Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) Press Ctrl+C to stop
  23. 23. Demo — Create the site — Create the theme — Create home page content — Generate the site
  24. 24. Adding Content — Create content templates (archetypes) — Generate content in Markdown or HTML — Create a layout for the content — Create a layout to display a list of content
  25. 25. Creating a Projects archetype File: archetypes/projects.md --- title: "{{ replace .Name "-" " " | title }}" type: project --- ---- ![alt](//via.placeholder.com/640x150) Description... ## Tech used * item * item * item
  26. 26. Create content $ hugo new projects/awesomesauce.md $ hugo new projects/jabberwocky.md $ hugo new projects/linkitivity.md
  27. 27. Modify the page File: content/projects/awesomesauce.md --- title: "Awesomesauce" type: project --- ![alt](//via.placeholder.com/150) I made Awesomesauce. It's the most amazing project ever! ## Tech Used * Hugo
  28. 28. Create the Single Display template for the content File: themes/basic/layouts/_default/single.html {{ partial "header.html" . }} <h1>{{ .Title }}</h1> {{ .Content }} {{ partial "footer.html" . }}
  29. 29. Create a listing page for content File: themes/basic/layouts/_default/list.html {{ partial "header.html" . }} <h1>{{ .Title }}</h1> <ul> {{ range .Pages }} <li><a href="{{ .URL }}">{{ .Title }}</a></li> {{ end }} </ul> {{ partial "footer.html" . }}
  30. 30. Demo — Create new archetype — Create content pages — Create a list template
  31. 31. Add Supporting Pages — Generate pages using default archetype — Create a navbar in the header partial — A little CSS
  32. 32. Create pages $ hugo new content/about.md $ hugo new content/resume.md
  33. 33. Add Navbar File: themes/basic/layouts/index.html <header> <h1>My Site</h1> </header> + <nav class="navbar"> + <a href="/about">About</a> + <a href="/resume">Resume</a> + <a href="/projects">Projects</a> + </nav>
  34. 34. Add CSS File: themes/basic/layouts/index.html <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <title>My Blog</title> + <link rel="stylesheet" href="/css/style.css">
  35. 35. Create CSS file File: themes/basic/static/css/style.css .container { margin: 0 auto; width: 80%; } nav, footer { background-color: #333; color: #fff; } footer { text-align: center; } nav {display: flex; } nav > a { flex: 1; text-align: center; color: #fff; }
  36. 36. Build the site Generates static HTML pages in public $ hugo | EN +------------------+----+ Pages | 14 Paginator pages | 0 Non-page files | 0 Static files | 1 Processed images | 0 Aliases | 0 Sitemaps | 1 Cleaned | 0 Total in 11 ms
  37. 37. Demo — Create support pages — Make a navbar — Add CSS — Build files
  38. 38. Deployment — Traditional method: — Get a shared host, or VPS / Cloud server with a web server — Upload public folder contents to the web server's webroot — Use Containers — Create Docker image with Nginx and content — Create container from image and deploy
  39. 39. Docker and Docker Machine — Container is a bundle of so!ware for your application — Docker is a set of tools for managing containers — Docker Hosts are places where Docker Containers run — Docker Machine is a tool for creating and working with Docker Hosts
  40. 40. Provision a Cloud Server with Docker Machine $ docker-machine create --driver digitalocean --digitalocean-access-token $DOTOKEN mysite-01 — Docker Machine can create VMs or cloud instances. — DigitalOcean driver requires a DigitalOcean access token associated with your account.
  41. 41. Create a Container Image $ touch Dockerfile FROM nginx:latest EXPOSE 80 COPY ./public /usr/share/nginx/html $ docker build -t mysite .
  42. 42. Deploy the app $ eval $(docker-machine env mysite-01) $ docker build -t mysite . $ docker run -d --name mysite -p 80:80 --restart unless-stopped mysite — Switch to the remote Docker host — Rebuild the image on the host — Run the container using the image, restarting if it fails, run on port 80
  43. 43. View the app $ docker-machine ip mysite-01 $ curl $(docker-machine ip mysite-01)
  44. 44. Make a change — Change your code — Rebuild the site — Rebuild the image — Replace running container
  45. 45. Change code File: themes/basic/layouts/partials/footer.html </main> <footer> - <small>Copyright 2018 Me.</small> + <small>Copyright 2018 Brian Hogan</small> </footer> </div> </body> </html>
  46. 46. Rebuild and Redeploy $ hugo $ eval $(docker-machine env mysite-01) $ docker build -t mysite . $ docker stop mysite && docker rm mysite $ docker run -d --name mysite -p 80:80 --restart unless-stopped mysite
  47. 47. Create a deploy script $ touch deploy && chmod +x deploy #!/usr/bin/env bash hugo eval $(docker-machine env mysite-01) docker build -t mysite . docker stop mysite docker rm mysite docker run -d --name mysite -p 80:80 --restart unless-stopped mysite eval $(docker-machine env -u)
  48. 48. Demo — Create image — Launch container — Make code change — Redeploy
  49. 49. Further Exploration: Deploy Automatically — Deploy via hooks — post-commit (good for simple things) — post-receive (if you run your own Git repository) — Webhook (GitHub) — Deploy via script to server or CDN — Deploy via CI/CD pipeline — Push to Kubernetes cluster — Offload interactions with
  50. 50. Wrapping Up — Static sites are fast — Easier than ever to build — Graphical editors available for content contributors — Deployment without a database
  51. 51. Thanks — Link: https://bphogan.com/presentations/ 2018_hugo — Twitter: @bphogan

×