Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/negrel/hugo-theme-pico
:black_circle: Pico is a minimalist, readable, responsive, light and beautiful Hugo theme.
https://github.com/negrel/hugo-theme-pico
blog hugo postcss sass theme
Last synced: 3 months ago
JSON representation
:black_circle: Pico is a minimalist, readable, responsive, light and beautiful Hugo theme.
- Host: GitHub
- URL: https://github.com/negrel/hugo-theme-pico
- Owner: negrel
- License: mit
- Archived: true
- Created: 2020-05-07T21:34:09.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-07-31T21:52:05.000Z (over 1 year ago)
- Last Synced: 2024-08-02T16:50:28.169Z (6 months ago)
- Topics: blog, hugo, postcss, sass, theme
- Language: HTML
- Homepage: https://sponge-bob.netlify.app/
- Size: 10.8 MB
- Stars: 130
- Watchers: 3
- Forks: 60
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-github-stars - negrel/hugo-theme-pico - :black_circle: Pico is a minimalist, readable, responsive, light and beautiful Hugo theme. (HTML)
- awesome-starred - negrel/hugo-theme-pico - :black_circle: Pico is a minimalist, readable, responsive, light and beautiful Hugo theme. (sass)
README
# :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**](https://sponge-bob.netlify.app/).
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](https://tailwindcss.com/)
- 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](https://tailwindcss.com/) 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](https://gohugo.io/getting-started/installing/) (latest version recommended)
Some [NPM](https://npmjs.org) packages :
- [postcss-cli](https://www.npmjs.com/package/postcss-cli)
- [postcss-import](https://www.npmjs.com/package/postcss-import)
- [autoprefixer](https://www.npmjs.com/package/autoprefixer)
- [@fullhuman/postcss-purgecss](https://www.npmjs.com/package/@fullhuman/postcss-purgecss)
- [tailwindcss](https://www.npmjs.com/package/tailwindcss)
Learn how to install and use npm [here](https://www.npmjs.com/get-npm).
### 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](https://gohugo.io/content-management/multilingual/) 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](https://gohugo.io/templates/internal/#google-analytics).
### Contributing
If you want to contribute to Pico to add a feature or improve the code contact me at [[email protected]](mailto:[email protected]), open an [issue](https://github.com/negrel/pico-hugo-theme/issues) or make a [pull request](https://github.com/negrel/pico-hugo-theme/pulls).
## :stars: Show your support
Please give a :star: if this project helped you!
[](https://www.buymeacoffee.com/negrel)
#### :scroll: License
MIT © [Alexandre Negrel](https://www.negrel.dev)
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fnegrel%2Fhugo-theme-pico?ref=badge_large)