Gatsby implementation of Start Bootstrap's Creative template.

Demo Website

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

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.

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!

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.

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.

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}.

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