DEV Community 👩‍💻👨‍💻

Max Niederman
Max Niederman

Posted on • Updated on

How anyone can make and deploy a modern website for free

Originally published on maxniederman.com

Making a website today is easier than ever. With tools like Squarespace and Wix you can easily create an appealing (if boring) website using no code at all.

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.

For the slightly more tech-savvy, there's a better solution anyone can do for free: using website templates you can host for free using services like GitHub Pages or Netlify.

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
Enter fullscreen mode Exit fullscreen mode

Using a Gatsby starter

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
Enter fullscreen mode Exit fullscreen mode

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:

gatsby develop
Enter fullscreen mode Exit fullscreen mode

to see your changes whenever you save. You don't even have to reload!

Modifying the starter

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.

Deploying

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!

Going Further

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.

Top comments (9)

Collapse
 
perpetual_education profile image
perpetual . education

We'd start with HTML! 😉

Collapse
 
maxniederman profile image
Max Niederman

Yeah the idea with this was mostly for people who don't want to learn much about web development, but have the skill to change some values in JSON or edit a Markdown file.

Collapse
 
perpetual_education profile image
perpetual . education

What we're seeing - is that - that skill... doesn't doesn't help people in the long run. Getting tangled up in Node, NPM, React, Gatsby, Netlify, Command line - etc... - just creates more insecure people. It's a black box... and - you're really just giving everyone in the world but YOU the power. However, we like your site... and we bet you'll be OK.

We tutor a lot of people who went to React boot camps and can't write some basic HTML and CSS... it's scary - because... these people are going to make the things that we deal with in our life!

dev.to/perpetual_education/enough-...

Thread Thread
 
maxniederman profile image
Max Niederman

I completely understand the value of learning HTML and CSS before web frameworks like React, but I think you're missing my point: this isn't what I'd recommend to someone who wanted to get started with web development, it's just an alternative to paying for a site builder for those who are comfortable with text-based editing.

Thread Thread
 
perpetual_education profile image
perpetual . education

We get it. We just also think that you over-estimate people / and underestimate the value of what a site can do | but hopefully people will dig it! But we get it. @sheriffderek wrote an article to "Build out Ember portfolio websites for beginners" a few years ago: codementor.io/@sheriffderek/less-t... - hahaha

Thread Thread
 
maxniederman profile image
Max Niederman

Yeah that's pretty much exactly what I was trying to go for, but much better... Oh well.

Collapse
 
adriangrigore profile image
Adrian Emil Grigore • Edited on

If you feel tired of JavaScript, you can also use my nojs static site generator mkws.sh. :p Also, for the more tech savy, you can get a free OpenBSD shell on tilde.institute.

Collapse
 
maxniederman profile image
Max Niederman

This looks really cool!

Collapse
 
adriangrigore profile image
Adrian Emil Grigore

Thanks! I also host some simple tools here adi.tilde.institute. Look at adi.tilde.institute/cbl for nojs analytics, they're WIP, might have to do some tinkering before you can use them. I think I'm not going to start another project until I get those in a better state. Maybe even create a web frontend for them afterwards.

Create an Account!

👀 Just want to lurk?

That's fine, you can still create an account and turn on features like 🌚 dark mode.