Posts tagged javascript

Deploying Gatsby to GitHub Pages


Create a repository on github If you don’t already have an account on GitHub, create one. For me, my username is jeffrafter. You can sign up for a free account and still host your blog. Note: by default, your username will be part of the URL for your blog. We can change that later. Next, create a new repository and name the repository . For me, I’ve named mine . Build and push Once you’ve created the repository you need to add it as an to your local copy: Again, using GitHub Desktop can simplify pushing code as it manages your login. Pull requests and branches Custom domains



“Look at all the things I’m not doing” Our plan is to build a website using Next.js. Out of the box, Next.js is built on top of Express. It supports server side rendering, hot module reloading, React and more. We’ll add TypeScript, Styled Components, Sessions, Authentication with GitHub, some basic security and a whole lot more. Getting started Now you have a . Let’s simplify it a bit: Now let’s add the basic packages: This is the basic setup for our application, but we want to actually setup folders and defaults for Typescript. If you have multiple local projects you might run into a conflict about which Node version should be used. Node Version Manager solves this problem. To control which version of Node should be used in your project, add an : nodemon.json Optional If you are using VSCode, it is useful to make sure all of the developers have a consistent experience. To do that you can keep a folder with the default settings: Create the folder: And make You might not be using VSCode. In that case you might want to opt for the more generic file (based on the format from Because we want to use TypeScript, we’ll need to run the code through Babel on build to create compatible JavaScript. Create a file: If you aren’t using eslint then you are likely using prettier. It is pretty safe to choose one or the other. If you choose prettier add a file: In general, eslint will be more powerful than prettier (though often overkill) — offering lots of plugins and rules. If you use eslint, add an : Additionally if you’ll want to ignore certain files for performance reasons, add a . From gatsby: From a next project (server/tsconfig.js: Configure next with From the example (): From gist-playground Testing with .env .env.test

Building a Static Gatsby-based Website with TypeScript


Creating a static website involves an almost infinite set of choices. I've upgraded several sites to Gatsby (including this one) finding a way to integrate TypeScript as part of the journey. Gatsby leverages React, JSX, CSS-in-JS, GraphQL and many other modern approaches to building sites.