Gab

How to make a website

Introduction

Hey! I've been wanting to write an article for a looong time. But it's so easy to just push back and put excuses. Personally, it came down to fear that I don't know enough about a subject to actually write about it. But this might actually be the best place to start - whatever method you used to teach yourself, will probably be helpful for someone else.

Picking the tech

A friend recently built a website for himself, and mentioned Vercel was really easy and free. Vercel is a platform which lets frontend developers easily deploy their apps hosted on git sites like GitHub or Bitbucket, without having to worry about hosting. It's also free to use for hobbyists, so no brainer.

To deploy on Vercel you need to have an app built in a supported framework. They support React and Python among others, as well as their in house Next.js.

Next.js is a React framework which abstracts away a couple of things like bundling, routing and CSS support to help developers ship React faster. I picked Next.js because while initially it might take a little to learn the ins and outs of a React blog, it seemed like a fun challenge to learn a new framework.

Favourite Next.js features

The official Next.js guide is fantastic. Really recommend following the whole tutorial. A couple of Next.js features really stuck out:

Routing

  1. Routing could not be simpler. To add a page to the site, just add a React page to the pages folder. The name and location of the file will be the path of that page.
/pages
 index.js        --> renders at root.com
  about.js       --> renders at root.com/about
  portfolio/
  art.js         --> renders at root.com/portfolio/art
  posts/
    [post].js    --> renders at root.com/posts/title-of-post
  1. A dynamic route is a route that isn't specifically programmed. Eg. Instagram doesn't have an endpoint for each profiles, it has an endpoint for all profiles, which is why the profile route is dynamic. Pages that begin and end with [] eg. [profiles].js are dynamic routes in Next.js. The available slugs are generated by getStaticPaths.
  2. Prefetch for faster links. When on a page, Next.js will fetch all the links in the background, so that if you decide to click through to a link, the load time will be faster. Prefetching only happens on production.

Rendering

Prerender for faster page loads. To get the first paint out fast, only the most necessary resources are loaded. Resources like js are loaded after in the background.

Caching

The difference between server-side rendering and static generation is that server-side rendering is per request (as in specific for each user), while static generation is on build (the same for everyone). You can decide which pre-render method you want for each page.

getStaticProps is a function that runs before the pre-render. It lives on a page (if at all), and hosts all the data fetches and other logic needed for the initial render. This will run at build phase, so it's part of the static generation flow. (Prod: runs on build, Dev: runs on request).

getServerSideProps is similar to getStaticProps but it's meant for server-side rendering. Note that it's preferable use getStaticProps unless context specific data is needed as getServerSideProps will slow down every request.

useSWR is the next step of slowness, and will render all JS on the client. This is meant for heavy dashboards hidden behind logins, where SEO can't see how slow we're being.

Components

  1. <Link>: Snappier <a> replacement. Pages on the same site usually share a lot of resources. With <Link>, Next.js only fetches the resources not yet downloaded. This is called code-splitting.
  2. <Image>: Lazy loads and resizes images for smaller screens.
  3. <Head>: Portal to <head>. Elements in here are added to the <head> of the HTML.
  4. <App>: Hidden root component to launch pages and sort out routing. Can be overwritten to have styles, components, and state which persists between page changes

Publishing

Their guide also guides you through the steps of publishing articles. With the final product you'll have a /posts/ directory where you can drop your articles in markdown, and the app will create a page for that article.

The final product

The final blog's really simple but it works. It was really easy to follow the Next.js docs, and the hardest bit was probably writing this article. First time though, so will become easier over time.

Learnings

I learnt a lot about Next.js and how to publish a website. The main take away was that learning Next.js was not necessary. I could have done it in Python, and it would've taken a lot less time. The goal was to deploy.

← Back to home
;