Learn how I built my own site with React Hooks using Gatsby, Netlify, Vercel, and advanced CSS techniques with Styled Components.
NOTE: This repository is under construction.
Gatsby is a framework built on top of React with essential features such as pages, templates, search engine optimization, etc. Think of it as a Wordpress for React where you can easily pick pre-made templates and plugins if you choose to. It has useful plugins for Contentful and Netlify.
We'll use Gatsby mainly for its performance, routing and SEO. To install, type this command in the terminal.
npm install -g gatsby-cli
React is by far the most popular javascript framework for modern web development. Hooks make React even simpler by allowing you to create functional components using states without writing complex classes. Think of Hooks as plugins, where you can update your states with a single line of code. The main ones provided are useState and useEffect for controlling the lifecycle of your component, replacing the componentDidMount and componentDidUpdate altogether.
CSS by itself is the simplest way to create layouts. But with the components approach where you want things to be reusable and adaptive, it becomes hard not to rely on frameworks like Sass and javascript inline styling. That's where Styled Components come in. With it, you can write cleaner, reusable CSS, without extremely long class names or a dedicated css file for each component, and with the power of nesting in Sass and scripting with React Props.
CMS stands for Content Management System. This platform allows you to easily manage content and create websites. A website without a CMS would have a lot of hard-coded data as you can see in the previous section.
There's a few reasons why you would need this platform:
- If your website has multiple pages and needs to be updated often. The website will automatically update when you change the data in the CMS, rather than changing the code every time. Someone in your team can update the content without any coding knowledge.
- Easier teamwork. You can manage and update the content faster and more efficient. You can also have multiple collaborators working on the project at the same time.
- Integration, supports tons of third-party services.
- Makes testing phase really fast and easy.
- Start developing
Navigate into your new site’s directory and start it up.
cd joaocarlosmag-website/
gatsby develop
-
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
my-default-starterdirectory in your code editor of choice and editsrc/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.