https://github.com/datocms/hugo-portfolio
Example portfolio built with Hugo and DatoCMS
https://github.com/datocms/hugo-portfolio
datocms hugo
Last synced: about 1 year ago
JSON representation
Example portfolio built with Hugo and DatoCMS
- Host: GitHub
- URL: https://github.com/datocms/hugo-portfolio
- Owner: datocms
- License: mit
- Created: 2016-12-08T12:59:03.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2025-02-06T08:11:50.000Z (over 1 year ago)
- Last Synced: 2025-04-04T20:51:27.751Z (about 1 year ago)
- Topics: datocms, hugo
- Language: Sass
- Homepage: https://portfolio-datocms-hugo.netlify.com/
- Size: 751 KB
- Stars: 4
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
👉 [Visit the DatoCMS homepage](https://www.datocms.com) or see [What is DatoCMS?](#what-is-datocms)
---
# Hugo Portfolio Website
This repo contains a working static website written with [Hugo](http://gohugo.io/), integrated with content coming from DatoCMS.
You can check the [live version deployed on Netlify](https://portfolio-datocms-hugo.netlify.com/), that looks like this:
or you can deploy your own, together with the administrative area, with this button:
[](https://dashboard.datocms.com/projects/new-from-template/static-website/hugo-portfolio)
## Usage
First, install the dependencies of this project:
```
npm install
```
Add an `.env` file containing the read-only API token of your DatoCMS site:
```
echo 'DATO_API_TOKEN=abc123' >> .env
```
Then, to run this website in development mode (with live-reload):
```
npm start
```
To build the final, production ready static website:
```
npm run build
```
The final result will be saved in the `public` directory.
## About
The goal of this project is to show how easily you can create static sites using the content (text, images, links, etc.) stored on [DatoCMS](https://www.datocms.com). This project is configured to fetch data from a specific administrative area using [the API DatoCMS provides](https://www.datocms.com/docs/content-management-api).
This websites uses:
* [Yarn](https://yarnpkg.com/) as package manager;
* [Webpack](https://webpack.github.io/) to compile and bundle assets (Sass/ES2015 JS);
* [datocms-client](https://github.com/datocms/js-datocms-client) to integrate the website with DatoCMS.
## The `dato.config.js` file
To convert the content stored on DatoCMS into local Markdown files that can be digested by Hugo, the datocms-client plugin requires an explicit mapping file called [`dato.config.js`](https://github.com/datocms/hugo-portfolio/blob/master/dato.config.js). You can read more about the commands available in this file [in the official documentation](https://docs.datocms.com/hugo/overview.html).
---
# What is DatoCMS?
[DatoCMS](https://www.datocms.com/) is the REST & GraphQL Headless CMS for the modern web.
Trusted by over 25,000 enterprise businesses, agencies, and individuals across the world, DatoCMS users create online content at scale from a central hub and distribute it via API. We ❤️ our [developers](https://www.datocms.com/team/best-cms-for-developers), [content editors](https://www.datocms.com/team/content-creators) and [marketers](https://www.datocms.com/team/cms-digital-marketing)!
**Why DatoCMS?**
- **API-First Architecture**: Built for both REST and GraphQL, enabling flexible content delivery
- **Just Enough Features**: We believe in keeping things simple, and giving you [the right feature-set tools](https://www.datocms.com/features) to get the job done
- **Developer Experience**: First-class TypeScript support with powerful developer tools
**Getting Started:**
- ⚡️ [Create Free Account](https://dashboard.datocms.com/signup) - Get started with DatoCMS in minutes
- 🔖 [Documentation](https://www.datocms.com/docs) - Comprehensive guides and API references
- ⚙️ [Community Support](https://community.datocms.com/) - Get help from our team and community
- 🆕 [Changelog](https://www.datocms.com/product-updates) - Latest features and improvements
**Official Libraries:**
- [**Content Delivery Client**](https://github.com/datocms/cda-client) - TypeScript GraphQL client for content fetching
- [**REST API Clients**](https://github.com/datocms/js-rest-api-clients) - Node.js/Browser clients for content management
- [**CLI Tools**](https://github.com/datocms/cli) - Command-line utilities for schema migrations (includes [Contentful](https://github.com/datocms/cli/tree/main/packages/cli-plugin-contentful) and [WordPress](https://github.com/datocms/cli/tree/main/packages/cli-plugin-wordpress) importers)
**Official Framework Integrations**
Helpers to manage SEO, images, video and Structured Text coming from your DatoCMS projects:
- [**React Components**](https://github.com/datocms/react-datocms)
- [**Vue Components**](https://github.com/datocms/vue-datocms)
- [**Svelte Components**](https://github.com/datocms/datocms-svelte)
- [**Astro Components**](https://github.com/datocms/astro-datocms)
**Additional Resources:**
- [**Plugin Examples**](https://github.com/datocms/plugins) - Example plugins we've made that extend the editor/admin dashboard
- [**Starter Projects**](https://www.datocms.com/marketplace/starters) - Example website implementations for popular frameworks
- [**All Public Repositories**](https://github.com/orgs/datocms/repositories?q=&type=public&language=&sort=stargazers)