:black_circle: Pico

This theme aims to be minimalist, readable, responsive, light and beautiful. Inspired by Medium and The New York Times, Pico try to provide the best experience for the reader while having an awesome design. It can be configured as a single page, or as a full-featured site with multiple sections. It is multilingual, responsive, and includes a light and dark theme.

You can check the example site.

Features :

• Multilingual - supports side-by-side content in different language versions
• Syntax highlighting (“one dark” theme)
• Styled Markdown throughout, including post titles
• Customizable pages with widget or TailwindCSS
• Straightforward customization via config.toml
• Projects and Blog sections
• Light, CSS bundle is purged and minified thanks to PostCSS
• Light & Dark theme

Developer-friendly :

• Sass files included with instant compiling to CSS thanks to Hugo Pipes and PostCSS
• TailwindCSS for rapidly building custom design

Preview the theme

Pico ships with an fully configured example site. For a quick preview:

cd themes/pico/exampleSite/
hugo server --themesDir ../..

Then visit http://localhost:1313/ in your browser to view the example site.

Getting started

Requirements

• Extended version of Hugo (latest version recommended)
  Some NPM packages :
• postcss-cli
• postcss-import
• autoprefixer
• @fullhuman/postcss-purgecss
• tailwindcss

Learn how to install and use npm here.

Get the theme

# Clone the repository
git clone https://github.com/negrel/hugo-theme-pico.git pico

# Copy the example site
mkdir my_website
cp -r pico/exampleSite/* my_website

# You can delete the cloned repository
rm -rf pico

# Navigate to your website
cd my_website

# Install the node modules and the theme via the script
./setup.sh

# OR manually
# Installing node modules
npm install

# Adding the theme as a submodule (better maintenance than a clone)
# NOTE: my_website/ must be a git repository
git submodule add -f https://github.com/negrel/hugo-theme-pico.git ./themes/pico

# Start the dev server
hugo server

Your website is running :smile:, you can start editing content files.

Multilingual

Pico currently ships with support for 4 languages (fr, en, it, es). Contributions for other language translations are welcome. To create a new language translation, add the .toml file to the i18n/ folder. See the existing files for the necessary fields. See the hugo documentation for more details.

Menu

Pico contains a default menu. If you want to override this, you can do so by editing the menu.main in config.toml.

Google Analytics

Set googleAnalytics in config.toml to activate Hugo’s internal Google Analytics template.

Contributing

If you want to contribute to Pico to add a feature or improve the code contact me at negrel.dev@protonmail.com, open an issue or make a pull request.

:stars: Show your support

Please give a :star: if this project helped you!

:scroll: License

MIT © Alexandre Negrel

See Also

• Academic
• Academia Hugo
• Academic
• Introduction
• Anubis