Minimal personal theme for Hugo.
- Responsive Design
- Google Analytics
- PrismJS - Code Highlighting
- BEM CSS
Try Minimist on: minimist.netlify.com
How to Install, Override & Update
Install: To install Minimist on your Hugo website run the following command one-by-one in your website working directory.
git init git submodule add https://github.com/mshjri/minimist.git themes/minimist # copy the default config file (don't forget the dot): cp themes/minimist/exampleSite/config.toml .
And start adding your content.
Override: To override CSS or JS rules, you can add your own rules to
custom.js inside the
Update: To take advantage of the latest released features, update Minimist by running the following commands one-by-one in your website working directory.
cd themes/minimist git checkout master git pull
Make sure to remove your browser's cache before testing.
How to create a main page (example.com/mypage)
To create an 'About' page or any main page (accessible from navigation), create a .md file in your 'content' directory by running the following
hugo new about.md
How to create a section (list) page (example.com/blog)
To create a new section (list page) with descendant content pages, create .md files inside a folder with your section name, Or run the following command
hugo new tweets/mytweet.md
This will generate a
example.com/tweets section and
How to add figures
Check theme demo
This is an example of the
config.toml used in Minimist:
If you find a bug, or have a feature request, feel free to open an issue or fork and contribute.
Development environment setup
npm start: To launch a Hugo server using the theme along with the exampleSite content. Thus, Any edits can be performed on the theme root directory.
npm test: Runs 'hugo' to build the /public directory and serves it on localhost using Browsersync. Beneficial for testing changes on mobile devices.
Check project board.
The navigation bar uses a simple array that is manually edited in
config.toml. I originally made it this way to keep it flexible in case of adding external links (subdomains, ..etc). However, this makes more overhead, so it would change in the next releases with better implementation.
BEM: CSS following a mix of BEM and ABEM, except (2-3 specificity levels) on article body elements to give the user more flexibility (eg. writing HTML in markdown files)
Responsive: Minimist follows mobile-first design methodology. Thus, everything was designed to look better on mobile screens first, then media queries specify the changes for larger screens.
- min-height 400px & landscape orientation: mobile on landscape with small height
- min-width 600px: iPhone landscape and iPad portrait
- min-width 960px: iPad landscape, laptop, desktop screens
- min-width 1600px: Larger desktop screens
Minimist was influenced by Hugo-Coder theme.
Minimist is licensed under the MIT License. Check the LICENSE file for details.