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
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
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
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)
We'd start with HTML! 😉
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.
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-...
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.
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
Yeah that's pretty much exactly what I was trying to go for, but much better... Oh well.
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.
This looks really cool!
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.