1
0
mirror of https://github.com/alanorth/hugo-theme-bootstrap4-blog.git synced 2024-09-28 19:04:17 +02:00
A blogging-centric Bootstrap v4 theme for the Hugo static site generator.
Go to file
Alan Orth 8ab05ae625
Add Schema.org implementation based on JSON-LD
This replaces the metadata that Hugo's own schema.html template had
been providing, but does so in JSON-LD notation rather than via the
use of <meta> tags (this is Google's currently recommended form of
specifying this markup). There are a few exceptions where I did not
follow the conventions used in Hugo's template, for example the use
of up to six images from a post's frontmatter, because Google's tool
only recognizes one image, as well as different logic for a post's
publish and modified dates (using enableGitInfo = true).

Using this new markup, Google's Structured Data Testing Tool is now
able to understand site metadata much better (before it was reading
none).

The implementation here is a mix of the elements and types from the
official Schema.org types—for example, Blog and BlogPosting—as well
as from Google's search documentation. Note that Google's docs are
geared towards AMP, where some metadata is required, while for non-
AMP pages the metadata is just recommended.

We will have to re-evaluate this in the future, for example to add
height and width information to image metadata.

See: https://schema.org/Blog
See: https://schema.org/BlogPosting
See: https://developers.google.com/search/docs/data-types/data-type-selector
See: https://search.google.com/structured-data/testing-tool
2017-01-20 15:58:30 +02:00
archetypes Add default archetype with some recommended options 2016-10-17 18:08:39 -04:00
build Add tooling to generate SRI hashes for assets 2017-01-11 10:32:43 +02:00
data Start using SRI hashes for CSS/JS assets 2017-01-11 10:42:49 +02:00
exampleSite Add Vim Modeline Comments to Files (#18) 2016-11-24 14:33:56 +02:00
i18n i18n/bg.yaml: Add translation for "links" 2017-01-09 17:25:13 +02:00
images Add screenshot and thumbnail for Hugo themes directory 2016-10-17 22:18:39 -04:00
layouts Add Schema.org implementation based on JSON-LD 2017-01-20 15:58:30 +02:00
source/scss Update margin around sharing icons for Bootstrap v4 Alpha 6 2017-01-09 16:54:20 +02:00
static static/css/style.css: Regenerate 2017-01-09 16:54:20 +02:00
.gitignore Revert ".gitignore: Add intermediate output from node-sass" 2016-09-26 10:08:53 +03:00
LICENSE.txt First commit with initial theme 2016-08-28 16:22:32 +03:00
package.json Add tooling to generate SRI hashes for assets 2017-01-11 10:32:43 +02:00
README.md README.md: Add GitHub flavored Markdown to code block 2017-01-09 13:25:54 +02:00
screenshot@2x.png Update screenshot 2016-09-26 09:06:21 +03:00
theme.toml theme.toml: Update minimum Hugo version to 0.18 2016-12-25 17:59:27 +02:00

Hugo Bootstrap v4 Blog

A simple Hugo theme based on the Bootstrap v4 blog example.

Screenshot

See picturingjordan.com for an example of this theme in use.

Features

  • Responsive design
  • Uses Bootstrap v4's native system fonts to load quickly and look good on all platforms
  • Basic OpenGraph and Twitter Card metadata support
  • robots.txt linking to XML sitemap (disabled by default, see Hugo docs)
  • Basic support for multi-lingual content (added in Hugo 0.17)
  • Supports Google, Bing, and Yandex site verification via meta tags
  • Supports Google Analytics (async version), see Hugo docs
  • Supports Disqus comments, see Hugo docs
  • Can show a message about cookie usage to the user, see exampleSite/config.toml
  • Allow addition of custom <head> code in site's layouts/partial/head-custom.html (see #17)

Usage

Clone the repository to your site's themes directory. Refer to exampleSite/config.toml for recommended configuration values.

Content Suggestions

A few suggestions to help you get a good looking site quickly:

  • Keep blog posts in the content/post directory, for example: content/post/my-first-post.md
  • Keep static pages in the content directory, for example: content/about.md
  • Keep media like images in the static directory, for example: static/2016/10/screenshot.png
  • If you want an image to be shown when you share a post on social media, specify at least one image in the post's front matter, for example: images: ["/2016/10/screenshot.png"]
  • Use the <!--more--> tag in posts to control how much of a post is shown on summary pages
  • Disable comments on a post by setting comments = false in its frontmatter

See the source code and structure of picturingjordan.com to get more ideas.

Building (For Developers)

This theme uses the Bootstrap framework. A static version of this is already included, but if you want to bump the version, tweak the style, etc, you'll need to rebuild the assets. Make sure you have NodeJS v4 or v6 installed, and then run the following from inside the theme's directory:

$ npm install
$ npm run build

Contributing

There are several ways to help with the development of the theme:

  • Open an issue on GitHub if you have problems or feature requests
  • Alternatively, tackle one of the existing issues on the issue tracker
  • Fork the repository on GitHub, add features on a "feature" branch like update-bootstrap, and then send a pull request with your changes

License

This repository contains the code of Bootstrap, which is licensed under the MIT license, and Font Awesome, which uses various licenses.

Otherwise, the contents are GPLv3.