Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/scottgriv/business-website
🦉 💼 A versatile static business website built with Gatsby and hosted on Netlify, featuring multiple menus and an integrated product/app landing page.
https://github.com/scottgriv/business-website
app-website business-website css gatsby html landing-page netlify netlify-deployment react
Last synced: 11 days ago
JSON representation
🦉 💼 A versatile static business website built with Gatsby and hosted on Netlify, featuring multiple menus and an integrated product/app landing page.
- Host: GitHub
- URL: https://github.com/scottgriv/business-website
- Owner: scottgriv
- License: mit
- Created: 2023-10-29T00:19:29.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-23T01:51:26.000Z (about 1 month ago)
- Last Synced: 2024-12-08T16:46:42.986Z (17 days ago)
- Topics: app-website, business-website, css, gatsby, html, landing-page, netlify, netlify-deployment, react
- Language: JavaScript
- Homepage: https://nightowllabs.io
- Size: 32.5 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: .github/SECURITY.md
- Support: .github/SUPPORT.md
Awesome Lists containing this project
README
[](https://nightowllabs.io)
---------------
🦉 💼 Business Website
A dynamic and versatile static business website, expertly crafted using Gatsby for optimal performance and hosted on Netlify for reliability. This website comes with a multitude of menu options and features, catering to diverse business needs. Additionally, it includes a dedicated section for a product or app landing page, perfect for showcasing new releases, features, and driving user engagement.
- Visit the application to see it in action [here](https://nightowllabs.io).
Fully customizable business website.
Optionally, you can also use it as a product or app landing page.
Easily change the color scheme to match your brand.
Create custom website pages to showcase your company or product.
---------------
## Table of Contents
- [Features](#features)
- [Background Story](#background-story)
- [Getting Started](#getting-started)
- [Installation & Set Up](#installation--set-up)
- [Building and Running for Production](#building-and-running-for-production)
- [Configuration](#configuration)
- [Customization](#customization)
- [What's Inside?](#whats-inside)
- [Closing](#closing)
- [What's Next?](#whats-next)
- [Project](#project)
- [Guidelines for Forking This Project](#guidelines-for-forking-this-project)
- [Contributing](#contributing)
- [Resources](#resources)
- [License](#license)
- [Credit](#credit)
## Features
- [x] Fully customizable
- [x] Display a product or app landing page
- [x] Mobile friendly
- [x] Easy navigation
- [x] Up arrow for easy page scrolling
- [x] Free to host and deploy using Netlify and GitHub
## Background Story
I wanted to create a **Business Website** that was easy to setup and use, while also being fully customizable, and I think I've done just that. This project is a culmination of my experience as a software developer and my passion for creating useful applications.
## Getting Started
### Installation & Set Up
1. Install the Gatsby CLI
```sh
npm install -g gatsby-cli
```
2. Run the development server
```sh
gastby develop
```
3. View the website at `http://localhost:8000`
### Building and Running for Production
1. Generate a full static production build
```sh
gatsby build
```
2. Preview the site as it will appear once deployed
```sh
gatsby serve
```
3. View the website at `http://localhost:9000`
4. Commit to GitHub
5. Create a new site on Netlify
6. Connect your GitHub account
7. Select your repository
8. Click `Deploy Site`
9. View your website at `https://.netlify.app`
10. Optionally, you can also setup a custom domain name for your website
### Configuration
You can easily configure this website to your liking by following the steps below, changing it from a full website to a preview landing page for your product or app:
1. Open the `src/components/config.js` file
2. Update the `config` object with your information
```js
export const CONFIG = {
showLandingPage: false, // Set to false to hide the landing page
showHeader: true, // Set to false to hide the header
showFooter: true, // Set to false to hide the footer
};
```
3. If you decide to use the app landing page, open the `src/components/landing.js` file to edit it and use the `static/images/landing` directory to store your images.
4. Optionally, you can also adjust the amount of time the up arrow is displayed before fading out by adjusting the `newTimeout` value in the `src/components/layout.js` file.
```js
// Set a new timeout
const newTimeout = setTimeout(() => {
setShowScroll(false)
}, 7000) // Hide button 7 seconds after scrolling stops
setScrollTimeout(newTimeout)
```
### Customization
Below is a list of the main files you can customize to your liking:
1. `config.js` contains the site configuration (see above).
2. `src/components/layout.js` contains the site layout. This is where the header, footer, and up arrow are displayed.
3. `src/components/layout.css` contains the site layout CSS. This is where you can customize the styles and colors of the site.
4. `src/components/seo.js` contains the site SEO. You can easily customize the SEO by editing the `siteMetadata` tree.
5. `src/components/header.js` contains the site header and navigation menu. You can easily customize the menu items by editing the `menutabs` tree.
6. `src/components/footer.js` contains the site footer. You can easily customize the footer items by editing the `pagefoot` tree.
7. `src/images` directory contains the `icon.png` used for the site favicon and other places a small icon is needed.
8. `src/pages` directory contains the site pages. You can easily add, remove, or edit pages here.
- Make sure you also update the `src/components/header.js` file to include your new pages in the navigation menu.
9. In the root directory, you can also edit the `gatsby-config.js` file to change the site metadata and other settings.
10. Also in the root directory, you will find another directory called `static`. This directory contains the `fonts` and `images` folders. You can use the `fonts` folder to store your custom fonts and the `images` folder to store your custom images used throughout the site.
> [!IMPORTANT]
> Please follow the [Guidelines for Forking This Project](#guidelines-for-forking-this-project) below if you plan on forking and using this project for your own purposes.
## What's Inside?
Below is a list of the main files and folders in this repository and their specific purposes:
```bash
Business-Website
├─ src # Source folder
│ ├─ components # Components folder
│ │ ├─ config.js # Configuration file
│ │ ├─ footer.js # Footer component
│ │ ├─ header.js # Header component
│ │ ├─ index.module.css # Index module CSS file
│ │ ├─ layout.css # Layout CSS file
│ │ ├─ layout.js # Layout component
│ │ └─ seo.js # Search Engine Optimization component
│ ├─ images # Images folder
│ │ └─ icon.png # Icon image
│ ├─ pages # Pages folder
│ │ ├─ 404.js # 404 page
│ │ ├─ about.js # About page
│ │ ├─ company.js # Company page
│ │ ├─ contact.js # Contact page
│ │ ├─ faq.js # FAQ page
│ │ ├─ home.js # Home page
│ │ ├─ index.js # Index page
│ │ ├─ landing-page.js # Landing page
│ │ ├─ products.js # Products page
│ │ ├─ projects.js # Projects page
│ │ ├─ services.js # Services page
│ │ └─ using-ssr.js # Using SSR page
│ ├─ templates # Templates folder
│ │ └─ using-dsg.js # Using DSG template
│ ├─ static # Static folder
│ │ ├─ fonts # Fonts folder
│ │ └─ images # Images folder
│ │ ├─ about # About images folder
│ │ ├─ company # Company images folder
│ │ ├─ landing # Landing images folder
│ │ ├─ products # Products images folder
│ │ └─ projects # Using SSR images folder
│ │ ├─ banners # App Banners images folder
│ │ └─ icons # App Icons images folder
│ ├─ styles # Styles folder
├─ .gitignore # Git ignore file
├─ .github # GitHub folder
├─ .prettierignore # Prettier ignore file
├─ .prettierrc # Prettier configuration file
├─ gatsby-browser.js # Gatsby browser file
├─ gatsby-config.js # Gatsby configuration file
├─ gatsby-node.js # Gatsby node file
├─ gatsby-ssr.js # Gatsby SSR file
├─ package.json # Package file
├─ PRG.md # PRG Connection File
├─ LICENSE # License file
└─ README # This file
```
## Closing
Thank you for taking the time to read through this document and I hope you find it useful!
If you have any questions or suggestions, please feel free to reach out to me.
> Please reference the [SUPPORT](.github/SUPPORT.md) file in this repository for more details
## What's Next?
I'm looking forward to seeing how this project evolves over time and how it can help others with their GitHub Portfolio.
> Please reference the [CHANGELOG](.github/CHANGELOG.md) file in this repository for more details.
## Project
Please reference the [GitHub Project](https://github.com/users/scottgriv/projects/10) tab inside this repository to get a good understanding of where I'm currently at with the overall project.
- Issues and Enhancements will also be tracked there as well.
## Guidelines for Forking This Project
If you fork this project, please adhere to the following guidelines:
- **Rename the Products**: Please change any references to [Your Product Name] to a name of your choosing that does not include the projects referenced on this website.
- **Change Company Information**: If your fork includes references to [Your Company Name], please replace these with your own information or generic placeholders. Do not reference "Night Owl Labs, LLC."
- **Change the Copyright Information**: Be sure to change the copyright reference to "Night Owl Labs, LLC." in the `footer.js` file.
- **Change Designs and Logos**: Be sure to change the logos and designs that originally referenced Night Owl Labs.
- **Change Site Metadata**: Change the website meta data in the `siteMetadata` tree located in the `seo.js` file to fit your company or product.
- **Change Contact Information**: Change any contact email references to `@nightowllabs.io` or hyperlinks to Night Owl Labs.
- **Utilize Search in your IDE**: Do a mass search for "Night Owl Labs" and its products to ensure you have removed any references.
- **Compare Your Website with the Original**: The site is actively being hosted at [nightowllabs.io](https://nightowllabs.io). After you deploy your website, check it against the original website to ensure nothing looks similar. Your site should be structured the same but be almost completely different content wise.
This project serves as a great template for a business and/or product page, but it is important to do the work in order to update it and remove the original references to the original company/product/author.
I did not design this site to be a boilerplate template but I did design it to be dynamic so people can fork it and easily use it for their own purposes - as long as you change the original content and nothing is missed before you deploy it to production.
These guidelines are in place to prevent confusion between the original project and derivative works. We appreciate your cooperation!
## Contributing
Feel free to submit a pull request if you find any issues or have any suggestions on how to improve this project. You can also open an issue with the tag "bug" or "enhancement".
- How to contribute:
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/Business-Website`)
3. Commit your Changes (`git commit -m 'Add new feature'`)
4. Push to the Branch (`git push origin feature/Business-Website`)
5. Open a Pull Request
> Please reference the [CONTRIBUTING](.github/CONTRIBUTING.md) file in this repository for more details.
## Resources
- [Gatsby](https://www.gatsbyjs.com/)
- [Netlify](https://www.netlify.com/)
- [React](https://reactjs.org/)
- [Font Awesome](https://fontawesome.com/)
## License
This project is released under the terms of the **MIT License**, which permits use, modification, and distribution of the code, subject to the conditions outlined in the license.
- The [MIT License](https://choosealicense.com/licenses/mit/) provides certain freedoms while preserving rights of attribution to the original creators.
- For more details and to understand all requirements and conditions, see the [LICENSE](LICENSE) file in this repository.
## Credits
**Author:** [Scott Grivner](https://github.com/scottgriv)
**Email:** [[email protected]](mailto:[email protected])
**Website:** [scottgrivner.dev](https://www.scottgrivner.dev)
**Reference:** [Main Branch](https://github.com/scottgriv/Business-Website)
**Author:** [Night Owl Labs, LLC.](https://github.com/Night-Owl-Labs)
**Email:** [[email protected]](mailto:[email protected])
**Website:** [nightowllabs.io](https://www.nightowllabs.io)
---------------
