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
Pico ships with an fully configured example site. For a quick preview:
cd themes/pico/exampleSite/
hugo server --themesDir ../..
Then visit https://localhost:1313/ in your browser to view the example site.
- 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.
# 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 😄, you can start editing content files.
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.
Pico contains a default menu. If you want to override this, you can do so by editing the menu.main in config.toml.
Set googleAnalytics in config.toml to activate Hugo's internal Google Analytics template.
If you want to contribute to Pico to add a feature or improve the code contact me at [email protected], open an issue or make a pull request.
Please give a ⭐ if this project helped you!
MIT © Alexandre Negrel
