Skip to content

Latest commit

 

History

History
179 lines (124 loc) · 7.2 KB

README.md

File metadata and controls

179 lines (124 loc) · 7.2 KB
Raw

Digital Magazine Starter Kit

Live demo: https://magazine-starter.vercel.app

This starter allows you to clone and deploy a fully customizable Digital Magazine in just a few clicks.

Features

  • Great performance and Accessibility
  • SEO and Social Media friendly (Open Graph and JSON-LD)
  • Responsive
  • UI Components
  • Dark and light theme
  • Offline support
  • Save articles to read offline
  • PWA Optimized (installable)
  • Preview unpublished content.
  • Search module and hooks.
  • Static Site Generated with Next.js
  • Dynamically generated sitemap
  • Content creation and managment from Strapi CMS (No code necessary).
  • Google Analytics

Built with:

Integrations

This project integrates out-of-the-box with Strapi Magazine Template and Heroku Magazine Strapi CMS.

Check out all the other Strapi starters

Getting started

Use the create-strapi-starter CLI to create your project.

# Using Yarn
yarn create strapi-starter my-project edgarlr/next-magazine
# Or using NPM
npx create-strapi-starter my-project edgarlr/next-magazine

The CLI will create a monorepo, install dependencies, and run your project automatically.

The Next frontend app will run on http://localhost:3000

The Strapi backend server will run on http://localhost:1337

If it doesn't work make shure that:

  • You've added sample data to Strapi (Contributors, categories and articles are necessary)
  • You've set the Roles & Permissions to findon Contributors, Categories, articles and pages. (More info on Magazine Strapi CMS running locally instructions.)
  • You've set the status of each article and page to be published

Preview mode

To try it, create another post but before you set the status to published:

  • Set each variable from the .env.example into a new file called .env.local:
    • PREVIEW_SECRET: can be any string (avoiding spaces). You're are gonna use it later on your CMS too.
    • API_URL: should be set as http://localhost:1337(no trailing slash).
  • On your Strapi admin panel go to "Settings" > "Preview Content"
  • Fill the input with your info, the URL should look like this. http://localhost:1337/api/:contentType-preview?secret=<your-secret>&id=:id
  • Last, go to any article or page and click the "Preview" button

Google Analytics

The projects is pre-configured to track the page views with google analytics. Read more on Page views | Google Analytics

You only need to set the GA_MEASUREMENT_ID env variable with your measurement ID.

Finding your Measurement ID

  1. Sing in to your Analytics Account
  2. Go to Admin and select the property you want to track from the property column.
  3. Under Property click on Streams
  4. Select or create a new stream
  5. Your measurement id will be displayed at the top of the page.

Removing Google Analytics

If you prefer not to use Google Analytics, you can easily remove it.

The tracker consist on two main sections, the initial loading of the scripts on _document.tsx and the onRouterChange handler on `_app.tsx.

Removing the initial loader

In _document.tsx, remove the two scripts inside the HEAD component. Make sure not to remove the entire component. The code after removing them should look like this.

class MyDocument extends Document {
  // ...
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Removing the onRouterChange handler

In _app.tsx you can comment or remove all the code before the return. Remember to remove the useEffect and useRouter imports as well. The component after removing it should look like this.

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <UIProvider>
      <ListProvider>
        <Head />
        <Component {...pageProps} />
      </ListProvider>
    </UIProvider>
  );
}

NOTE If you're trying to deploy to vercel the GA_MEASUREMENT_ID variable will still be needed, but since you have removed all the code that will use it, you can simply fill the field with dummy text.

Deployment

You'll need to deploy your Strapi CMS first and have your api URL.

Click this button below to clone and deploy this project on vercel.

Deploy with Vercel

Or you can take a look at the docs to deploy Next.js.

Don't forget to update your environment variables:

  • PREVIEW_SECRET: Can be any string (avoiding spaces). It must be same as on your CMS.
  • API_URL: URL of your strapi backend. (No trailing slash).

Customize

Constants and default SEO

lib/constants.ts contains a list of variables you should customize

Icons and favicon

public/static/favicon contains all the icons and favicons. I generated the icons on https://realfavicongenerator.net. Generate your own and replace the old ones.

You need to generate the dark mode icons too and name them as dark-16x16.png and dark-32x32.png

Sitemap

The sitemap will be generated dynamically using the lib/constants info but you need to also configure the site URL on public/robots.txt

Search caveats

Due heroku sleep problem the search hook is really slow. If you're gonna deploy the strapi cms to any platform other than heroku you can uncomment the seach hook and it should work fine. Otherwise, to prevent a slow search, the page will be statically genarated with ALL the published articles and run a local search instead.

License

MIT License.