Code Monkey home page Code Monkey logo

hugo-theme-basic's Introduction

hugo-theme-basic

Basic personal site theme styled with minimal tachyons, syntax highlighting, and blog series configuration.

Demo

https://hugo-theme-basic.netlify.app/

Screenshot

Features

  • โœจ Basic โ€” HTML with a dash of style + emoji
  • ๐ŸŒฏ Extensible โ€” Easily leverage tachyons to add more spice
  • ๐Ÿ—ž๏ธ series taxonomy - Automatically group posts and display within an isolated taxonomy type
  • ๐Ÿฅ‘ Syntax Highlighting - It's there when you need it

Installation

Run this command from the root of your Hugo directory (Git needs to be installed):

$ git clone https://github.com/siegerts/hugo-theme-basic.git

Or, if your Hugo site is already in git, you can include this repository as a git submodule. This makes it easier to update this theme (and for some deployment options i.e. Netlify).

$ git submodule add https://github.com/siegerts/hugo-theme-basic.git themes/hugo-theme-basic

Alternatively, if you are not familiar with git, you can download the theme as a .zip file, unzip the theme contents, and then move the unzipped source into your themes directory.

For more information, read the official documentation of Hugo.

Run example site

From the root of themes/hugo-theme-basic/exampleSite:

hugo server --themesDir ../..

Configuration

Check out the sample config.tomlfile located in the exampleSite directory. Copy the config.toml to the root directory of your Hugo site, then edit as desired.

Content Types

Type Description Command
Post Used for blog posts. Posts are listed on the /post page. hugo new post/<post-name>.md
Page Used for site pages. hugo new <page-name>.md
Project Used for project pages. Extend project list by customizing /layouts/section/project.html. hugo new project/<project-name>.md

Blog post series

An extra taxonomy, series, is added to allow for the grouping of blog posts. A Read More section shows at the bottom of each post within the series when two or more posts are grouped.

[taxonomies]
  category = "categories"
  series = "series"
  tag = "tags"

Series read more

.Params.Menu

Menu links are specified, in order, in the theme configuration.

For example:

[[params.menu]]
  name = "blog"
  url = "blog/"

[[params.menu]]
  name = "post series"
  url = "series/"

[[params.menu]]
  name = "about"
  url = "about/"

Syntax highlighting

Syntax highlighting is provided by highlight.js. The color theme can be changed by modifying the highlight.js stylesheet in layouts/partials/head_includes.html.

Acknowledgments

License

The code is available under the MIT license.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.