Code Monkey home page Code Monkey logo

silver-parakeet's Introduction

Hugo Theme: Shell

Terminal-like theme with selectable color schemes.

Screenshot

Demo site

Features

  • Terminal-like portfolio

    • Selectable color schemes
      • monokai monokai

      • powershell powershell

      • gruvbox_light gruvbox_light

      • gruvbox_dark gruvbox_dark

      • solarized_light solarized_light

      • solarized_dark solarized_dark

      • ubuntu ubuntu

      • retro retro

  • Minimal design

  • Responsive

  • MathJax: Beautiful and accessible math in all browsers

Requirements

  • Hugo Version 0.85.0 or higher
    • Hugo extended version is required.

Installation

Create a new website from scratch

hugo new site myportfolio
cd myportfolio
git init
git submodule add https://github.com/Yukuro/hugo-theme-shell.git themes/hugo-theme-shell
hugo server -t hugo-theme-shell -w -D

Apply to an existing site

cd myportfolio
git submodule add https://github.com/Yukuro/hugo-theme-shell.git themes/hugo-theme-shell
hugo server -t hugo-theme-shell -w -D

How to use Goph theme

hugo-theme-shell supports the Goph theme by using goph-to-stylesheet

  1. Choose a Goph theme : you can choose a theme here.
  2. Use goph-to-stylesheet to convert to scss file
goph-to-stylesheet -t THEME_YOU_CHOSE -i template/shell.scss -o goph.scss
  1. Copy goph.scss to assets/sass/goph.scss
  2. Configure your config.toml as follows
[Params.Terminal]
schema = "goph"

Configuration

in config.toml

[Params]
  # Note: This is for the meta description, which is different from the "description" displayed in the terminal.
  description = "Jane Doe's Portfolio!"
  [Params.Terminal]
  # Note: color schema
  # Note: You can choose between
  # Note: ["monokai", "powershell", "gruvbox_light", "gruvbox_dark", "solarized_light", "solarized_dark", "ubuntu", "retro"]
  # Note: If you want to use the Goph theme, set it to "goph" (See README.md)
  schema = "monokai"

  # Note: in terminal
  # [userName]@[pcName]:~/$ cd [workDir]
  # [userName]@[pcName]:~/[workDir]$ cat [profile]
  #
  # [description]
  #
  # Note: if you set Params.Tree > use = true
  # [userName]@[pcName]:~/[workDir]$ tree ./[folderName]/
  # ./[folderName]/
  # ...
  # Note: result of the tree command
  userName = "jane"
  pcName = "laptop"
  workDir = "mydir"
  profile = "profile.txt"

  # Note: speed at which text is displayed on the terminal
  # Note: if set to 0, typing animation will be disabled
  # Note:
  # Note: If you want to enable Mathjax, you need to set it to 0
  # Note: and set "math: true" at front matter in your Markdown file
  terminalDelay = 20

  # Note: speed at which text is displayed on the activity pages
  # Note: if set to 0, typing animation will be disabled
  # Note: 
  # Note: If you want to enable Mathjax, you need to set it to 0
  # Note: and set "math: true" at front matter in your Markdown file
  activityDelay = 5

  description = """
  Hi I am Jane Doe!
  Nice to meet you!

  """

  # Note: If you want to use a Markdown file, you can use the following
  # description = "/description.md"
  # Note: and put the description.md in /content/description.md

  [Params.Tree]
  use = true
  folderName = "my_activity"
  # Note: ["ACTIVITY", "URL or PATH TO YOUR MARKDOWN FILE"]
  files = [ 
    ["C/C++", "https://www.example.com/"],
    ["Python", "https://www.example.com/"],
    ["Go", "https://golang.org/"],
    ["Hugo", "/post/some-activity.md"],
    ["Docker", "/post/some-activity.md"],
  ]

trouble shooting

  • Hugo build fails
    • What is the version of your Hugo?
    • Shell theme requires Hugo version 0.85.0 or higher and extended version
  • Post does not show up (return 404 not found)
    • There are two possible causes for this.
      1. Forgot to add -D (--buildDrafts) as an argument to the hugo command
      2. The front matter of the post's .md file has "draft: true" set.

Contributing

Contributions are always welcome!

silver-parakeet's People

Contributors

gmark4212 avatar

Watchers

 avatar

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.