Gatsby x Start Bootstrap Creative

Gatsby implementation of Start Bootstrap's Creative template.

Demo Website

✨ Features

• React Bootstrap
• Start Bootstrap Creative
• GitHub Actions
• React Scrollspy

👀 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

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.