{"id":13761794,"url":"https://github.com/tinialabs/next-starter-novela","last_synced_at":"2025-07-23T01:34:42.119Z","repository":{"id":119035427,"uuid":"332532105","full_name":"tinialabs/next-starter-novela","owner":"tinialabs","description":"Novela — A ready to deploy starter of the Novela blog theme for Next.js","archived":false,"fork":false,"pushed_at":"2021-01-31T13:59:48.000Z","size":7043,"stargazers_count":10,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-07T10:46:07.185Z","etag":null,"topics":["nextjs","nextjs-example","nextjs-starter","nextjs-template","novela-theme"],"latest_commit_sha":null,"homepage":"https://novela.tinia.vercel.app","language":"TypeScript","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/tinialabs.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}},"created_at":"2021-01-24T19:04:42.000Z","updated_at":"2023-03-28T07:55:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"fe9a8658-a1e2-4990-8ecd-4a3f353232a1","html_url":"https://github.com/tinialabs/next-starter-novela","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tinialabs/next-starter-novela","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinialabs%2Fnext-starter-novela","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinialabs%2Fnext-starter-novela/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinialabs%2Fnext-starter-novela/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinialabs%2Fnext-starter-novela/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tinialabs","download_url":"https://codeload.github.com/tinialabs/next-starter-novela/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinialabs%2Fnext-starter-novela/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266602820,"owners_count":23954696,"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","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["nextjs","nextjs-example","nextjs-starter","nextjs-template","novela-theme"],"created_at":"2024-08-03T14:00:28.908Z","updated_at":"2025-07-23T01:34:42.098Z","avatar_url":"https://github.com/tinialabs.png","language":"TypeScript","funding_links":[],"categories":["Nextjs Templates"],"sub_categories":[],"readme":"\u003ca href=\"https://novela.tinia.vercel.app/\" target=\"_blank\"\u003e\n\u003cimg src=\"https://github.com/tinialabs/next-theme-novela/blob/main/.github/static/nextjs-theme-novela-hero-emotion.jpg?raw=true\" alt=\"gatsby-novela-theme hero image\" /\u003e\n\u003c/a\u003e\n\n\u003cbr/\u003e\n\n# Novela — A blog theme for Next.js\n\nThe beautiful blog theme from Narative adapted by Tinia Labs for Next.js with blazing fast performance.\n\nWith minimal styling and maximum features — including multiple homepage layouts, built-in social sharing and dark mode — Novela makes it easy to start publishing beautiful articles and stories with Next.js.\n\nNovela is built by the team at [Narative](https://www.narative.co), updated by [Tinia Labs](https://tinia.org) to work on Next.js, and built for everyone that loves the web.\n\nSpecial thanks to [@jpvalery](https://github.com/jpvalery) for helping maintain the original Gatsby version of Novela.\n\nSee [tinialabs/next-theme-novela](https://github.com/tinialabs/next-theme-novela) for the actual theme files.  This repository containers a starter kit that includes the theme files.\n\n\u003cdiv\u003e\n\u003ca href=\"https://novela.tinia.vercel.app/\" target=\"_blank\"\u003e\n\u003cimg src=\"https://github.com/tinialabs/next-theme-novela/blob/main/.github/static/nextjs-theme-novela-cta-demo.jpg?raw=true\" alt=\"gatsby-novela-theme live demo\" width=\"295px\" /\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\nFeatures specific to Next.js over others Next.js examples\n- **Favicon generator** Uses the `favicons` package to generate favicons and manifests on all required platforms\n- **Yaml config** Put all your site config in one place in a site.yml file in your content folder\n- **All content colocated** All content including images and markdown are colocated in the `content` folders\n- **No CMS required** Keep all your blog articles and images under version control in Github or similar\n- **Image optimization** Use Next.js runtime image optimization without needing to know the height and width of each image\n- **Image lazy loading and LQIP** Use blurred image placeholders (similar to Medium) without an extra server roundtrip;  lazy laod images when the images are ready to be shown in the viewport\n- **Fast performance** Much faster build times than Gatsby for the exact same blog content and layout;  \u003e95 lighthouse scores in every category currently\n- **Simpler project structure** Instead of multiple gatsby hooks, use Next.js intuitive /pages structure for a better developer experience\n\n## Lighthouse scores (January 2021, Next.js version running on Vercel)\n\n\u003cimg src=\"https://github.com/tinialabs/next-theme-novela/blob/main/.github/static/lighthouse-scores-january-2021.png?raw=true\" alt=\"Lighthouse 100-97-100-100\"  /\u003e\n\n## Dependencies\n\nSee [tinialabs/next-theme-novela](https://github.com/tinialabs/next-theme-novela) for the actual theme files.  This repository containers a starter kit that includes the theme files.\n\nSee [tinialabs/next-lib-content](https://github.com/tinialabs/next-lib-content) for logic that generates the blog articles from markdown and yaml files on disk. \n\nTwo Next.js plugins [tinialabs/next-favicon-loader](https://github.com/tinialabs/next-favicon-loader) and [tinialabs/next-meta-image-loader](https://github.com/tinialabs/next-meta-image-loader) were hand-written to provide some of the Gatsby functionality in the original Novela theme and can now be used in any Next.js site.\n\n\n### Step 1: Starter installation\n\n##### With `create-next-app`:\n\n```sh\nnpx create-next-app -e https://github.com/tinialabs/next-starter-novela\n```\n\n##### With `git clone`:\n\n```sh\ngit clone git@github.com:tinialabs/next-starter-novela.git novela-site\n\ncd novela-site\n\nyarn\n```\n\n### Step 2: Develop \u0026 Build\n\nOnce installed or cloned locally and all packages are installed you can begin developing your site.\n\n```sh\n# Run localhost\nyarn dev\n\n# Build your Next.js site\nyarn build\n```\n\nTo learn more about adding Authors, Posts, and Site Metadata see:\n\n- [Adding an Author](#step-4-adding-an-author)\n- [Adding a Post](#step-5-adding-a-post)\n- [Configuring Site Metadata](#step-6-configuring-sitemetadata)\n\n# Getting Started from scratch\n\nThis guide will take you through adding Novela to a new project. You do not require any Next.js starters or similar, but you can add Novela to an existing Next.js project.\n\nYou can also view the completed [example repository](https://github.com/tinialabs/next-starter-novela).\n\n### Step 1: Installation\n\n```sh\n# Create an empty directory and go into it\nmkdir novela-site \u0026\u0026 cd novela-site\n\n# Add all required dependencies\nyarn add react react-dom next next-theme-novela\n```\n\n### Step 2: Folder structure\n\nOnce you've installed React, Next.js, and Novela you'll want to add your first Author and Post.\n\nThe recommended project structure for your content and site looks like this:\n\n```\n  novela-site\n    ├── .config\n    │ ├── .mdx-plugins.js\n    │ └── .next-sitemap.js\n    ├── content\n    │ ├── authors\n    │ │   ├── avatars\n    │ │   │    └── avatar.jpg\n    │ │   └── authors.yml\n    │ └── posts\n    │ │   └── 2020-01-01-my-first-novela-post\n    │ │       ├── images\n    │ │       │   └── novela-hero.jpg\n    │ │       └── index.mdx\n    │ ├── theme\n    │     ├── favicon.png\n    │     └── site.yml\n    ├── .meta\n    ├── node_modules\n    ├── next-config.js\n    ├── package.json\n    ├── pages\n    ├── public\n    └── tsconfg.json\n```\n\n### Step 3: Using `next-theme-novela`\n\nYou must add `next-theme-novela` and `next-lib-content` as package.json dependencies or .meta sub-projects.  We\nuse the latter in all examples\n\nWe also require `next-favicon-loader` and `next-image-meta-loader` as next.js plugins, and use `next-compose-plugins` to\nadd these to your next-config.js file.   These generate the favicons/site manifest, as well as provide the ability to\nimport images directly from the `content` tree  right next to the assocated markdown, instead of the Next.js default of \nhaving to put them in the `public` folder.\n\n```js\n// next-config.js\n\nconst { withPlugins } = require('next-compose-plugins');\n\nmodule.exports = withPlugins(\n  [\n    require('next-favicon-loader'),\n    require('next-image-meta-loader'),\n  ],\n  {\n    webpack: (config, { defaultLoaders }) =\u003e {\n      defaultLoaders.babel.options.plugins = [\n        require.resolve('@emotion/babel-plugin')\n      ]\n\n      return config\n    }\n  }\n)\n```\n\n---\n\nOnce you've setup the plugins in `next-config.js` and installed the theme proects you can start creating your first Posts. In order to create a Post you also need at least one Author.\n\n### Step 4: Adding an Author\n\nIn [step 2](#step-2-folder-structure) we created the folder structure of our project. We can now add an Author by populating `/content/authors/authors.yml`:\n\n```\n  novela-site\n  └── content\n    └── authors\n        ├── avatars\n        │    └── brotzky-avatar.jpg\n        └── authors.yml\n```\n\nIn `authors.yml` add an Author. There **must** be at least one `featured` Author.\n\n`/content/authors/authors.yml`:\n\n```yml\n- name: Dennis Brotzky\n  bio: |\n    Written by Dennis Brotzky who lives and works in Vancouver building useful things.\n    You should follow him on Twitter.\n  avatar: ./avatars/brotzky-avatar.jpg\n  featured: true\n  social:\n    - url: https://unsplash.com\n    - url: https://stackoverflow.com\n    - url: https://github.com\n```\n\n### Step 5: Adding a Post\n\nOnce you have at least one Author defined in `authors.yml` you can add your first Post.\n\nStart by creating a new folder in `content/posts`. You can name it anything you like but we recommend including the date at the front to organize your posts. Once you've created your folder you can add an `index.mdx` file and an `images` folder.\n\n`/content/posts/2020-01-01/index.mdx`\n\n```yml\n---\ntitle: Why Narative loves Next.js\nauthor: Dennis Brotzky\ndate: 2019-04-27\nhero: ./images/narative-gatsby-hero.jpg\nexcerpt: This is a love story about Narative and Next.js\n---\n# And then under the heading YML you can insert any MDX you like\n# like headings, links, code, images, etc\n# This will show up in the body of your post\n# ...\n```\n\n### Step 6: Configuring siteMetadata\n\nIn order to configure the theme to properly generate the pages and meta tags you must add specific data to `siteMetadata`.\n\nThe fields that are unique to Novela are `hero.heading`, `hero.maxWidth`, and `social`.\n\nAdd your Site Metadata to the `site.yml` file.\n\n```yaml\n// site.yml\n---\ntitle: Novela by Tinia Labs\nname: Tinia Labs \u0026 Narative\nsiteUrl: https://novela.tinia.vercel.app/\ndescription: This is my description that will be used in the meta tags and\n  important for search results\nhero:\n  heading: Welcome to Novela, the simplest way to start publishing with Next.js.\n  maxWidth: 652\nsocial:\n  - name: twitter\n    url: https://twitter.com/narative\n  - name: github\n    url: https://github.com/narative\n  - name: instagram\n    url: https://instagram.com/narative.co\n  - name: linkedin\n    url: https://www.linkedin.com/company/narative/\n  - name: dribbble\n    url: https://dribbble.com/narativestudio\nblog:\n  copyrightYear: 2021\n  contentPosts: content/posts\n  contentAuthors: content/authors\n  basePath: /\n  authorsPage: true\n  pathPosts: 'a'\n  pathAuthors: 'authors'\n  pageLength: 6\n  sources:\n    local: true\n    contentful: false\nmanifest:\n  appName: Novela by Narative\n  appShortName: Novela\n  appDescription: Novela by Narative\n  start_url: /\n  background: \"#fff\"\n  theme_color: \"#fff\"   \n  display: standalone\n  alwaysEmitFull: false\ngoogleAnalytics:\n  trackingId: UA-118232427-3\n```\n\n### You can now run your site\n\nOnce all steps have been completed you can run your site. In the root of your project run `yarn dev`.\n\nIf you ran into problems you can reference the [example repository](https://github.com/tinialabs/next-starter-novela) or create an issue.\n\n\u003cbr /\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinialabs%2Fnext-starter-novela","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftinialabs%2Fnext-starter-novela","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinialabs%2Fnext-starter-novela/lists"}