My personal website built with Gatsby
This is my personal website/portfolio built using Gatsby, a modern static site generator for React.
- ✅ Fast performance with Gatsby
- ✅ Modern React-based architecture
- ✅ Responsive design
- ✅ Easy content management
- ✅ Image optimization with Gatsby Image
- ✅ Offline support with service workers
- Node.js >= 16.0.0
- npm >= 7.0.0
- Git
# Clone the repository git clone https://github.com/st3vk/website.git cd website # Install dependencies npm install
# Start development server npm run develop # or npm start
Your site will be available at http://localhost:8000
# Build optimized production bundle npm run build # Serve the production build locally npm run serve
The production-ready site will be in the public/ directory.
website/
├── src/ # Source files
│ ├── pages/ # Page components
│ │ ├── index.js # Home page
│ │ ├── 404.js # 404 page
│ │ └── ... # Other pages
│ ├── components/ # Reusable components
│ │ └── layout.css # Layout styles
│ └── images/ # Static images
├── gatsby-config.js # Gatsby configuration
├── gatsby-node.js # Gatsby Node APIs
├── gatsby-browser.js # Gatsby Browser APIs
├── gatsby-ssr.js # Gatsby SSR APIs
├── package.json # npm configuration
├── .gitignore # Git ignore rules
├── .prettierrc # Prettier configuration
├── .prettierignore # Prettier ignore rules
└── README.md # This file
- Create a new file in
src/pages/ - Export a React component as default
// src/pages/about.js import React from "react" const AboutPage = () => ( <div> <h1>About Me</h1> <p>This is my about page.</p> </div> ) export default AboutPage
- Add your image to
src/images/ - Import and use it in your component
import { graphql } from "gatsby" import Img from "gatsby-plugin-image" // In your component <Img image={data.file.childImageSharp.gatsbyImageData} alt="Description" /> // In your GraphQL query export const query = graphql` query { file(relativePath: { eq: "images/my-image.jpg" }) { childImageSharp { gatsbyImageData(width: 500) } } } `
Edit gatsby-config.js to update your site metadata:
module.exports = { siteMetadata: { title: `My Website`, description: `My personal website`, author: `Your Name`, siteUrl: `https://yourwebsite.com`, }, // ... }
- Global styles:
src/components/layout.css - Component-specific styles: Create
.module.cssfiles - Use CSS Modules for scoped styles
✅ Keep dependencies updated - Regularly run npm update and npm audit
✅ Environment variables - Use .env files for sensitive configuration
✅ HTTPS - Always deploy with HTTPS enabled
✅ Content Security Policy - Configure CSP headers in your hosting
✅ Input validation - Validate all user inputs and form submissions
npm run build
# Deploy the public folder to GitHub Pages- Connect your GitHub repository
- Set build command:
npm run build - Set publish directory:
public - Deploy!
# Install Vercel CLI npm install -g vercel # Deploy vercel
For the best Gatsby experience, use Gatsby Cloud.
This project is MIT licensed. See LICENSE for details.
This is a personal project, but contributions are welcome!
- Gatsby - Static site generator
- React - JavaScript library
- All contributors
✨ Happy coding! ✨