https://github.com/prabalchhatkuli/greenircnepal
Official Website for Green Innovation Research Center (GIRC) Nepal. Website adopted from gatsby-netlify-cms.netlify.app/
https://github.com/prabalchhatkuli/greenircnepal
cms gatsby gatsby-netlify-cms gatsby-starter netlify
Last synced: 2 months ago
JSON representation
Official Website for Green Innovation Research Center (GIRC) Nepal. Website adopted from gatsby-netlify-cms.netlify.app/
- Host: GitHub
- URL: https://github.com/prabalchhatkuli/greenircnepal
- Owner: prabalchhatkuli
- License: mit
- Created: 2021-08-27T01:40:56.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2025-06-29T05:25:15.000Z (about 1 year ago)
- Last Synced: 2025-06-29T05:25:41.301Z (about 1 year ago)
- Topics: cms, gatsby, gatsby-netlify-cms, gatsby-starter, netlify
- Language: JavaScript
- Homepage: https://greenircnepal.org/
- Size: 10.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Green Innovative Research Center Nepal (GIRC Nepal)
[](https://app.netlify.com/sites/agitated-jang-846559/deploys)
Official website for Green Innovative Research Center Nepal - an environmental research organization dedicated to fostering sustainable development through innovative research, community engagement, and environmental conservation initiatives.
## 🌿 About
Green Innovative Research Center Nepal (GIRC Nepal) is committed to:
- Environmental research and conservation
- Sustainable development initiatives
- Community empowerment and engagement
- Climate change research and advocacy
- Biodiversity conservation
- Natural resource management
## 🚀 Tech Stack
- **Framework**: [Gatsby 5](https://www.gatsbyjs.org/) with React 18
- **CMS**: [Netlify CMS](https://www.netlifycms.org) for content management
- **Styling**: [Bulma CSS](https://bulma.io/) with custom SASS modules
- **Hosting**: [Netlify](https://www.netlify.com) with continuous deployment
- **Architecture**: JAMstack (Git as source of truth, CDN distribution)
## ✨ Features
### Content Management
- **Netlify CMS Integration**: Easy content editing without touching code
- **Pages**: Home, About, Services, Gallery, Blog, Contact
- **Blog System**: Full-featured blog with categories, tags, and featured posts
- **Photo Gallery**: Image gallery with filtering, sorting, and modal lightbox
- **Contact Forms**: Netlify Forms integration with form validation
### Design & UX
- **Dark Mode Support**: System-aware theme with manual toggle
- **Responsive Design**: Mobile-first approach with optimized breakpoints (375px, 480px, 768px, 1024px, 1216px)
- **Animations**: Fade-in, slide-in, and gradient shift animations
- **Gradient Backgrounds**: CSS-based gradients for Gallery and Contact pages
- **Accessibility**: WCAG AAA compliant contrast ratios, keyboard navigation, ARIA labels
### Performance
- **Optimized Images**: Gatsby Image for lazy loading and responsive images
- **PurgeCSS**: Reduces Bulma CSS from ~170KB to ~17KB (90% reduction)
- **Code Splitting**: Automatic JS chunk loading
- **Pre-rendered HTML**: Static site generation for blazing fast loads
- **Perfect Lighthouse Scores**: SEO, Accessibility, and Performance optimized
### Developer Experience
- **Component Architecture**: Modular React components
- **Custom SASS Modules**: Organized styles with variables and mixins
- **Hot Reload**: Fast development with Gatsby's hot module replacement
- **Netlify Functions**: Serverless function support in `/lambda` folder
- **Git-based Workflow**: Version control for all content and code
## 📋 Prerequisites
- **Node.js**: v18.0.0 or higher (v20.x recommended)
- **npm**: v9.0.0 or higher
- **Git**: For version control
### Version Check
```bash
node --version # Should be >= 18.0.0
npm --version # Should be >= 9.0.0
```
### Upgrade Node.js (if needed)
- **Using nvm** (recommended):
```bash
nvm install 20 && nvm use 20
```
- **Direct download**: https://nodejs.org/
## 🛠️ Local Development
### 1. Clone the Repository
```bash
git clone https://github.com/[YOUR_USERNAME]/greenircnepal.git
cd greenircnepal
```
### 2. Install Dependencies
```bash
npm install
```
### 3. Start Development Server
```bash
npm start
# or
gatsby develop
```
The site will be available at `http://localhost:8000`
### 4. Access the CMS
To access Netlify CMS locally:
```bash
npm run build
npx netlify-cms-proxy-server
```
Then in another terminal:
```bash
gatsby develop
```
Navigate to `http://localhost:8000/admin`
## 🏗️ Build & Deploy
### Production Build
```bash
npm run build
```
### Serve Production Build Locally
```bash
npm run serve
```
### Deploy to Netlify
Pushes to the `master` branch automatically deploy to Netlify via continuous deployment.
## 📁 Project Structure
```
greenircnepal/
├── src/
│ ├── components/ # React components
│ │ ├── Layout.js # Main layout wrapper
│ │ ├── Navbar.js # Navigation bar
│ │ ├── Footer.js # Footer component
│ │ ├── PageHeader.js # Reusable page headers
│ │ ├── Features.js # Feature cards with carousel
│ │ └── ...
│ ├── pages/ # Page components
│ │ ├── index.md # Home page content
│ │ ├── about/ # About page
│ │ ├── gallery/ # Photo gallery
│ │ ├── blog/ # Blog index
│ │ └── contact/ # Contact page
│ ├── templates/ # Templates for dynamic pages
│ │ ├── blog-post.js # Blog post template
│ │ └── gallery-image.js # Gallery image template
│ ├── style/ # SASS stylesheets
│ │ ├── bulma-custom.sass # Theme variables
│ │ ├── layout/ # Layout styles
│ │ ├── components/ # Component styles
│ │ └── utilities/ # Utility classes
│ ├── cms/ # Netlify CMS configuration
│ └── img/ # Static images
├── static/ # Static files
│ └── admin/ # Netlify CMS admin
├── lambda/ # Netlify functions
└── gatsby-config.js # Gatsby configuration
```
## 🎨 Customization
### Theme Colors
Edit color variables in `src/style/bulma-custom.sass`:
```sass
:root
--primary-color: #48c774
--navbar-bg: rgba(255, 255, 255, 0.95)
--text-color: #363636
// ... more variables
[data-theme="dark"]
--primary-color: #48c774
--navbar-bg: rgba(26, 26, 26, 0.95)
--text-color: #e2e8f0
// ... dark mode overrides
```
### Adding New Pages
1. Create markdown file in `src/pages/` or `static/`
2. Add frontmatter with `templateKey`
3. Configure in Netlify CMS at `static/admin/config.yml`
### Modifying Components
Component styles are in `src/style/components/` - edit corresponding SASS files.
## 📝 Content Management
### Access the CMS
- **Production**: `https://[your-site].netlify.app/admin`
- **Local**: `http://localhost:8000/admin`
### Content Types
- **Pages**: Home, About, Services
- **Blog Posts**: Articles, research publications
- **Gallery Images**: Photo gallery items with categories
- **Site Settings**: Logo, navigation, social links
## 🔧 Configuration Files
- `gatsby-config.js` - Gatsby plugins and site metadata
- `static/admin/config.yml` - Netlify CMS configuration
- `netlify.toml` - Netlify build settings
- `package.json` - Dependencies and scripts
## 🐛 Troubleshooting
### Windows Users
If you encounter `node-gyp` errors:
```bash
npm config set python python2.7
npm install --global --production windows-build-tools
```
[More details](https://www.npmjs.com/package/node-gyp)
### macOS Users
For node-gyp issues, check [node-gyp documentation](https://github.com/nodejs/node-gyp). We recommend using the latest stable Node.js version.
### Clear Gatsby Cache
If you encounter build issues:
```bash
gatsby clean
npm install
gatsby develop
```
## 📦 Dependencies
### Core
- `gatsby` - Static site generator
- `react` & `react-dom` - UI library
- `netlify-cms-app` - Content management system
### Styling
- `bulma` - CSS framework
- `sass` - CSS preprocessor
- `gatsby-plugin-purgecss` - Unused CSS removal
### Images & Media
- `gatsby-plugin-image` - Optimized images
- `gatsby-plugin-sharp` - Image processing
- `gatsby-transformer-sharp` - Image transformations
### Content
- `gatsby-transformer-remark` - Markdown processing
- `remark-html` - HTML conversion
## 🤝 Contributing
Contributions are welcome! Please read our [Code of Conduct](CODE_OF_CONDUCT.md) before contributing.
### Development Workflow
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## 📄 License
This project is built on the [Gatsby Starter Netlify CMS](https://github.com/netlify-templates/gatsby-starter-netlify-cms) template.
## 📞 Contact
**Green Innovative Research Center Nepal**
- **Location**: Kathmandu, Nepal
- **Phone**: +977-9851095763
- **Email**: [Contact via website](https://[your-site].netlify.app/contact)
## 🙏 Acknowledgments
- Built with [Gatsby](https://www.gatsbyjs.org/)
- CMS powered by [Netlify CMS](https://www.netlifycms.org)
- Styled with [Bulma](https://bulma.io/)
- Hosted on [Netlify](https://www.netlify.com)
- Icons from [Font Awesome](https://fontawesome.com)
---
**Made with 💚 for environmental research and conservation**