Socially aware Hugo blog starter kit, with modular CSS gulp.js workflow

• Git
• Node & npm
• Basic understanding of the command line

1. Click the big button above
2. In a terminal, git clone your new repository to your local machine
3. Add your details to config.yml
4. Change directory, run hugo serve
5. In new terminal, cd themes/starter/
6. Run npm install
7. Run gulp. A Browserync window should open.
8. Add content. Design your theme. The world is your oyster 🐚

Full Hugo documentation at gohugo.io and Indiego documenation at www.indiego.org.uk

• To create new blog post, from command line in top level directory, run hugo new blog/your-blog-post-name.md
• To create new status post, run hugo new status/yourstatuspostname.md
  • So that I can search status posts by date, I add a 6-digit datestamp eg 180803-shorttitle
  • Status posts use the date as the <h1>, they don’t really have a title as such
• To create a new page, pop a Markdown file in the content directory. Use the about.md page to crib the Frontmatter

Full documentation is on the Hugo website.

• The Indiego theme is called starter. As you can see, it is incredibly minimal.
• The organisation is based on ITCSS (Inverted Triangle CSS). All CSS, JavaScript and images are organised by modules in the starter/src directory, from general to specific:
  1. Variables
  2. Base CSS
  3. Objects (site wide patterns)
  4. Components
  5. Utilities (trumping !important)
  6. Shameful
• A simple Gulp taskrunner concatenates the individual modules into app.css, app.js and assets in the starter/static directory. These are then copied to public when you run hugo serve
• Set your own base settings in starter/src/assets/css/settings
• Create your own modules in starter/src/modules
• Keep gulp running in one terminal and hugo serve in another to preview changes automatically.

• If you originally used the Deploy to Netlify button, then every time you git push, your website will be automatically deployed. Magic 🙂