{"id":13558434,"url":"https://github.com/zerostaticthemes/hugo-serif-theme","last_synced_at":"2025-12-15T23:12:28.896Z","repository":{"id":36971566,"uuid":"159459907","full_name":"zerostaticthemes/hugo-serif-theme","owner":"zerostaticthemes","description":"Serif is a modern business theme for Hugo.","archived":false,"fork":false,"pushed_at":"2024-11-24T06:15:39.000Z","size":6552,"stargazers_count":461,"open_issues_count":2,"forks_count":239,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-14T08:09:53.672Z","etag":null,"topics":["gohugo","hugo","hugo-theme","jamstack","scss","static-site-generator","theme"],"latest_commit_sha":null,"homepage":"https://hugo-serif.netlify.app","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zerostaticthemes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-28T07:14:22.000Z","updated_at":"2025-04-12T18:36:27.000Z","dependencies_parsed_at":"2023-11-26T06:19:31.303Z","dependency_job_id":"143fbce1-9d5c-42b5-8090-d94a304395c4","html_url":"https://github.com/zerostaticthemes/hugo-serif-theme","commit_stats":{"total_commits":145,"total_committers":21,"mean_commits":6.904761904761905,"dds":"0.32413793103448274","last_synced_commit":"4abfc966ff5459041863d941682fe516d7af98cc"},"previous_names":["jugglerx/hugo-serif-theme"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerostaticthemes%2Fhugo-serif-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerostaticthemes%2Fhugo-serif-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerostaticthemes%2Fhugo-serif-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerostaticthemes%2Fhugo-serif-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zerostaticthemes","download_url":"https://codeload.github.com/zerostaticthemes/hugo-serif-theme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254276447,"owners_count":22043867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gohugo","hugo","hugo-theme","jamstack","scss","static-site-generator","theme"],"created_at":"2024-08-01T12:04:57.138Z","updated_at":"2025-12-15T23:12:23.290Z","avatar_url":"https://github.com/zerostaticthemes.png","language":"SCSS","funding_links":[],"categories":["SCSS","others"],"sub_categories":[],"readme":"# Hugo Serif Theme\n\nSerif is a modern business theme for Hugo. It contains multiple content types and pages. The theme is fully responsive, blazing fast and artfully illustrated.\n\n[Live Demo](https://hugo-serif.netlify.app/) |\n[Zerostatic Themes](https://www.zerostatic.io/)\n\n![Hugo Serif Theme screenshot](https://www.zerostatic.io/theme/hugo-serif/hugo-serif-screenshot.png)\n\n## Features\n\n**Content Types**\n\n- Services (Markdown)\n- Team (Markdown)\n- Features (Data)\n\n**CSS**\n\n- SCSS (Hugo Pipelines)\n- Fully Responsive design\n- Bootstrap 4 grid and media queries only\n- Uncomment `@import 'bootstrap/bootstrap';` in `style.scss` to use the entire Bootstrap framework\n- Configure Google fonts from `config.toml`\n- Configure primary theme colors from `config.toml`\n- Examples of using Params from the `config.toml` as SCSS variables\n\n**Speed**\n\n- 100/100 Google Lighthouse speed score\n- Under 50KB without images or 80KB with images and illustrations ⚡\n- No jQuery, only a tiny bit of vanilla Javascript for the mobile menu.\n\n**SEO**\n\n- 100/100 Google Lighthouse SEO score\n- 100/100 Google Lighthouse accessibility score\n- Configure Google Analytics in `config.toml`\n- Configure Google Analytics using env variable `HUGO_GOOGLE_ANALYTICS_ID` compatible with Netlify.\n- Configure meta tags and OG meta tags for the homepage in `config.toml`\n- Override any meta tags on a per page basis\n- Semantic HTML document structure\n\n**Menu**\n\n- Responsive menu managed in `config.toml`\n- Animated hamburger menu on mobile\n\n**Content**\n\n- Robust example content included\n- Royalty free illustrations included\n\n**Code**\n\n- No hardcoded content in the layouts\n- Plenty of examples of using `range` and `where` to loop over various sections/content types\n- Examples of `range` by Param\n- Examples of using data content _(`data/contact.yaml` and `data/features.json`)_\n- Example of passing .Site . (context) and custom variables to partials - see `layouts/page/contact.html` - `{{ partial \"call.html\" (dict \"site\" .Site \"context\" . \"show_button\" \"false\") }}`\n- Examples of injecting javascript files on a per page basis (see `services/single.html`)\n- Set `body` classes from individual layouts - useful for CSS styling.\n- Example of using Hugo custom `layout` for the contact page\n\n## Installation\n\n**1. Install Hugo**\n\nTo use this theme you will first need to have Hugo installed. Please follow the official [installation guide](https://gohugo.io/getting-started/installing/)\n\n⚠️ **Note:** Check your Hugo version - **Hugo Extended** is required!\n\nThis theme uses [Hugo Pipes](https://gohugo.io/hugo-pipes/scss-sass/) to compile SCSS and minify assets which means if you not using the Hugo extended version this theme will not work. To check your version of Hugo, run `hugo version`. Make sure you see **/extended** after the version number, for example _Hugo Static Site Generator v0.51/extended darwin/amd64 BuildDate: unknown_ You do not need to use version v0.51 specifically, it just needs to have the _/extended_ part.\n\n**2. Create a new Hugo site**\n\nThis will create a fresh Hugo site in the folder `mynewsite`.\n\n```\nhugo new site mynewsite\n```\n\n**3. Install the theme**\n\nDownload or git clone this theme into the sites themes folder `mynewsite/themes`. You should end up with the following folder structure `mynewsite/themes/hugo-serif-theme`\n\n```\ncd mynewsite\ngit clone https://github.com/zerostaticthemes/hugo-serif-theme.git themes/hugo-serif-theme\n```\n\n**4. Copy the example content**\n\nCopy the entire contents of the `mynewsite/themes/hugo-serif-theme/exampleSite/` folder to root folder of your Hugo site, ie `mynewsite/`. To copy the files using terminal, make sure you are still in the projects root, ie the `mynewsite` folder.\n\n```\ncp -a themes/hugo-serif-theme/exampleSite/. .\n```\n\n**5. Run Hugo**\n\nAfter installing the theme for the first time, generate the Hugo site.\n\nYou run this command from the root folder of your Hugo site ie `mynewsite/`\n\n```\nhugo\n```\n\nFor local development run Hugo's built-in local server.\n\n```\nhugo server\n```\n\nNow enter [`localhost:1313`](http://localhost:1313) in the address bar of your browser.\n\n## Deployment\n\n### Netlify\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/zerostaticthemes/hugo-serif-theme)\n\nThis theme includes a `netlify.toml` which is [configured to deploy to Netlify](https://discourse.gohugo.io/t/deploy-your-theme-to-netlify/15508) from the `exampleSite` folder. If you have installed this theme into a new Hugo site and the exampleSite folder was copied or removed, you should delete the `netlify.toml` file.\n\n### Localhost inside exampleSite\n\nYou can run this site without installing it as a hugo theme using the following command. I use this for theme development.\n\n```\nhugo server --source=exampleSite --theme=../..\n```\n\n## Configuring Theme\n\n### Logo\n\nYou can edit the logo from the `config.toml`\n\n```toml\n# config.toml\n\n  [params.logo]\n    mobile = \"images/logo/logo-mobile.svg\"\n    mobile_height = \"36px\"\n    desktop = \"images/logo/logo.svg\"\n    desktop_height = \"36px\"\n    alt = \"Serif - A Hugo Business Theme\"\n```\n### Favicon\n\nYou can edit the favicon from the `config.toml`\n\n```toml\n# config.toml\n\n[params]\n  google_analytics_id = \"UA-XXX-1\"\n  google_tag_manager_id = \"\"\n  favicon = \"favicon-32x32.svg\"\n```\n\n### Fonts\n\nThis theme uses Google fonts. You can change the google font in the `config.toml` - These fonts are injected into the `style.scss` as SCSS variables.\n\n```toml\n# config.toml\n\n  [params.fonts]\n    # sets the google font link in layouts/partials/google-fonts.html\n    google_fonts = 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600\u0026family=Source+Sans+Pro:wght@400;700\u0026display=swap'\n    heading = \"Playfair Display\"\n    base = \"Source Sans Pro\"\n```\n\n### Colors\n\nYou can edit the themes main colors in the `config.toml`. These colors are injected into the `style.scss` as SCSS variables.\n\n```toml\n#config.toml\n\n  [params.colors]\n    primary = \"#f24088\"\n    black = \"#2f2f41\"\n    white = \"#ffffff\"\n    white_offset = \"#f6f7ff\"\n    grey = \"#5C5A5A\"\n```\n\n### Intro Image\n\nList pages such as the homepage, services and team can have a Intro image.\n\n```yml\n# content/_index.md\n---\nintro_image: \"https://source.unsplash.com/wOGhHamMqLc\"\nintro_image_absolute: false\nintro_image_hide_on_mobile: true\n---\n```\n\nWhile this themes default content uses illustrations, its easy to change the image to a photo and it will still look great.\n\nthe front-matter field `intro_image_absolute: true` let's illustrations \"break out\" (in CSS terms, it uses `position: absolute`) of the grid and is an intended stylistic effect. When using photos or normal images it's recommended to set this field to false and the photo will align with the grid. See `content/team/_index.md` for an example.\n\n### Google Analytics\n\nPut your Google Analytics ID in the `google_analytics_id` field in the `config.toml` - Also supports Google Tag Manager. When your site is running locally using `hugo server` the GA tag is not injected. This prevents polluting your real data.\n\n```toml\n# config.toml\n\n[params]\n  google_analytics_id = \"UA-XXX-1\"\n  google_tag_manager_id = \"\"\n```\n\nYou can also set the Google Analytics ID using a [Netlify environment variable](https://docs.netlify.com/configure-builds/environment-variables/) `HUGO_GOOGLE_ANALYTICS_ID`\n\n### Meta tags\n\nA pages `\u003ctitle\u003e` is generated from the front-matter `meta_title` else it will use the `title` property. This allows you to have a different heading on the page to what is shown in the SEO title. See `content/_index.md` for an example.\n\nThe meta description field is generated from the front-matter `description`\n\nOG meta data for Facebook and Twitter is also generated on a per page basis. The `image` field is used for the og:image for Twitter and Facebook.\n\nYou can configure og meta data global settings in the config.\n\n```toml\n# config.toml\n\n  [params.seo]\n    meta_twitter_site = \"@zerostaticio\"\n    meta_twitter_creator = \"@zerostaticio\"\n    meta_og_image = \"https://www.zerostatic.io/theme/hugo-serif/hugo-serif-screenshot.png\"\n```\n\n## License\n\n- Don't create ports of this theme without asking me\n- You can't re-distribute or re-sell this theme as your own template\n\n## Credits\n\n- Beautiful royalty free Illustrations by Icons8 - https://icons8.com/illustrations/style--pixeltrue\n- Stock images by Unsplash - https://unsplash.com/\n- Feature icons by Noun Project - https://thenounproject.com/\n\n**More Hugo Themes by Zerostatic**\n\n- [Hugo Hero](https://github.com/zerostaticthemes/hugo-hero-theme) - Open-source business theme\n- [Hugo Whisper](https://github.com/zerostaticthemes/hugo-whisper-theme) - Open-source documentation theme\n- [Hugo Serif](https://github.com/zerostaticthemes/hugo-serif-theme) - Open-source business theme\n- [Hugo Winston](https://github.com/zerostaticthemes/hugo-winston-theme) - Open-source blog theme\n- [Hugo Advance](https://www.zerostatic.io/theme/hugo-advance/) - Premium advanced multi page business \u0026 marketing theme\n- [Hugo Paradigm](https://www.zerostatic.io/theme/hugo-paradigm/) - Premium landing page + site builder theme\n- [Hugo Lever](https://www.zerostatic.io/theme/hugo-lever/) - Premium personal / bio theme\n- [Hugo Shard](https://www.zerostatic.io/theme/hugo-lever/) - Premium SAAS / landing page theme\n\n**Find hundreds more Hugo themes on Built At Lightspeed**\n\n[\u003cimg alt=\"Built At Lightspeed Hugo themes directory screenshot\" width=\"400px\" src=\"https://www.zerostatic.io/images/builtatlightspeed-hugo-themes.jpg\" /\u003e](https://builtatlightspeed.com/category/hugo)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzerostaticthemes%2Fhugo-serif-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzerostaticthemes%2Fhugo-serif-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzerostaticthemes%2Fhugo-serif-theme/lists"}