Hugo Themes

Pico

Pico is an elegent theme inspired by Medium & The New York Times.

Author: Alexandre NEGREL
GitHub Stars: 126
Updated: 2023-07-12
License: MIT
Tags: Blog Dark Landing Light Multilingual Personal Responsive

: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 5 languages (fr, en, it, es, de). 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.

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!