Originally published on maxniederman.com
This is a great solution for most; however, it comes with some disadvantages:
- Cost: Most site builders will cost you at least $10 per month.
- Lack of Customization: Services like Squarespace provide numerous themes. These are good, but Site Builders usually lack granular control over your site.
- Dynamic Content & Functionality: Site Builders like these won't allow you to add custom functionality to your site or give you the ability to serve dynamic content.
I'll be demonstrating how you can quickly and easily setup and host a website using Gatsby, a static site generator which pre-renders React components, along with Netlify for hosting. It's popular for simple static websites and has an extensive template library which we'll be taking advantage of. There are many other alternatives you could use, like Jekyll.
First, we'll need to install the Gatsby CLI:
npm install -g gatsby
Now, we'll need to find a Gatsby template from the Starter Library. I'll be using Leko Arts' Cara Theme. Each starter will have different instructions for modifying their content, so you should follow the instructions for your starter. I'll show the process for the Cara theme.
Then, download your starter:
gatsby new my-awesome-website https://github.com/LekoArts/gatsby-starter-portfolio-cara
The next part will be different depending on your template, but generally you'll need to modify some files with your content. Most starters will have instructions to modify the content. Run:
to see your changes whenever you save. You don't even have to reload!
Templates are great, but sometimes you need to tweak the template to fit your needs. Thankfully, Gatsby makes this super easy with Shadowing! Shadowing allows you to overwrite files from your theme. You can read the full guide here but essentially you create a directory inside
src/ with the name of your theme. For my template, it would be
src/@lekoarts/gatsby-theme-cara/. Any file you put there will shadow (overwrite) the theme's source code.
Once you're happy with your site you'll need to host it. Thankfully, Netlify has made this process a breeze.
First, upload your site to GitHub or GitLab. This isn't a requirement but it'll make deployment much simpler. Then, you'll need to create a free Netlify account here. On your Netlify dashboard, you'll see a button to create a new site from Git. Click that and select the repository you uploaded.
Click "Deploy site" and you're done!
You can create your own Gatsby site from scratch, by adding React components in the
src/pages/ directory. If you want to serve dynamic content without rebuilding, you'll need to use a different React site generator like Next.js or if you don't care about server-side rendering, Create React App.