Skip to content

kutyepov/britishkittiesnyc

Repository files navigation

Gatsby

Gatsby x Start Bootstrap Creative

Gatsby implementation of Start Bootstrap's Creative template.

Demo Website

✨ Features

👀 Template Differences

Efforts have been made to keep the implementation as close to the source template as possible, however in adapting from jQuery to React there have been some changes.

  • Scrolling to page sections uses the browser scrollTo function rather than a jQuery animation. This means that browsers which do not support scrollTo are not animated.
  • The portfolio carousel uses React Bootstrap functionality for modal and carousel rather than Magnific Popup.

🚀 Getting Started

  1. Create a Gatsby site.

    Use the Gatsby CLI to create a new site, specifying the starter project.

    gatsby new project-name https://github.com/JohnJKerr/gatsby-creative
  2. Start developing.

    Navigate into your new site’s directory and start it up.

    cd project-name
    gatsby develop
  3. Open the source code and start editing!

    Your site is now running at http://localhost:8000!

    Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

    Open the project-name directory in your code editor of choice and edit src/pages/index.js. Save your changes and the browser will update in real time!

🎓 Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

  • For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.

  • To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.

💫 Deploy

Deploy to Netlify

GitHub Actions x GitHub Pages

This project also contains an example of GitHub Actions deployment to GitHub Pages. View the deploy.yml for the build definition.

The build process deploys to a folder rather than the root, and therefore uses the --pages-prefix flag in the build step and pathPrefix: '/gatsby-creative' in gatsby-config.js.

Access Token

If you wish to use the GitHub Actions workflow to deploy to GitHub Pages you will need to add an ACCESS_TOKEN secret to your repository

Go to https://github.com/settings/tokens to generate a Personal Access Token and add it to your account. The token will need the following permissions:

  • repo
  • read:packages
  • write:packages

Make a copy of your token as you will not be able to access it again.

Return to your repository, go to settings and add a secret with the name ACCESS_TOKEN.

The Action will then deploy your site to {your-github-pages-url}/{your-repository}.

Not Using GitHub Pages?

If you do not wish to use GitHub Pages, simply remove the /.github/workflows/deploy.yml file.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published