Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/claire-codes/hugo-blog

🐞✍️ Personal blog
https://github.com/claire-codes/hugo-blog

Last synced: about 2 months ago
JSON representation

🐞✍️ Personal blog

Awesome Lists containing this project

README 

        
# Blog



Claire's blog repo.



## What are all those emojis in your commits?



A random emoji is prefixed to every commit message I write as a pre-commit hook. The hook is installed by this amazing Ruby gem [emoji-commit](https://github.com/claireparker/emoji-commit) (that I wrote 😊). The emoji choice is random but often weirdly suited to the contents of the commit message ... 👽🔮



## Developing



Install hugo with `brew install hugo`. Install node packages with `npm i`.



Clone the `hugo-ted` theme repo in the themes folder.



Run `hugo server` locally and go to `http://localhost:1313/`. Push changes and Netlify takes care of the rest.



## Sass



Using Hugo pipes (see code in head.html partial) means we don't need to install JavaScript packages to compile Sass. However, as of version 0.54.0 and with deploying on Netlify, I still need to commit the `resources/` folder with all the compiled stuff in it.



## Theme



I use the [Ted](https://github.com/claireparker/hugo-ted) theme. I built the theme from scratch instead of overwriting an existing one. It's not in a state where it can be used yet because I need to move certain files out of the main blog and into the theme, but it's on the To-Do list.



The name comes from my beautiful ~~son~~ dog, Ted.



## Archetypes



Two templates for front matter (a.k.a. archetypes) exist: `blog` and `dev-diary`. To use them, create a new file like: `hugo new dev-diary/2018-10-02.md` or `hugo new blog/post.md`.



Ensure the file suffix matches the one used in the archetype, i.e. my archetypes are `.md` files, so if I did `hugo new blog/post.markdown` the archetype wouldn't be used.



I group my posts by years in the codebase, in order to make navigating the code easier because there are so many of them by now. No extra code is needed to output them on the page. Just add the folder name when creating a post and it will end up in the right place, e.g. `hugo new blog/2020/post.md`.



## Dev Diary



I post this once a week. To generate a new one, type `hugo new dev-diary/2019-02-05-dev-diary.markdown` at the command line, replacing the date in the title. The YAML should be `title`, `date` and `interests` (this field name is a hangover from when the page used to be called "Interesting" and it still sounds best to me). `interests` is a list (bullets are hyphens). Content of the post is posted at the top, followed by the `interests` list.



## SEO page title and descriptions.



Each page should have unique meta description tag content, i.e. ``, for SEO and appearing in search results. Additionally, each page has a `` tag which sets the title at the top of each tab in the browser. Since this is a small site, I've set this specifically on each page rather than putting it in the generic `head.html` template. Although the format is generally the same for each page, this allows you to customise it easily per page: if you want to hardcode a description or title, go ahead. If you want to use the site title, or the generic site description, you can do (`Site.Title` and `Site.Params.Description`). Since not every page has an associated content template either, the method of checking for parameters won't be the same. This method gives the most flexibility.