Step 1

Log into Github and press the "+" icon. Select "New Repository"

Step 2

Name your repository "username".github.io.

NOTE: The repository name MUST contain lower case letters only, dont repeat my mistake!

The rest of the settings can be left unchanged. Now press "Create Repository".

Add your key to Github account

Once you have copied your public SSH key, it must be added to your Github account.
Navigate to "SSH and GPG keys", and press New SSH key .

Name the key something that relates it to your computer, paste in the key, and press New SSH key .

Step 1

Navigate to the frontpage of your repository, under "Quick setup" press the SSH button, and copy the link.

Step 2

Open a terminal and navigate into the folder where you want your project to be located.
Then paste in this command, replace the link with the one from your repository.
You can ignore the warning about cloning an empty respository.

              git clone git@github.com:GauteGFTest/gautegftest.github.io.git
              

Create a next.js app

Open a terminal and navigate into your cloned repository (should be a folder named "username".github.io).

Use the npx command to create a new Next.js project in the current directory.npx is a tool that comes with npm and allows you to run commands from packages without globally installing them.

              npx create-next-app@latest .
              

You will then be prompted to choose some configurations for you new app. If you know what you're doing, choose to your liking. If not, I recommend these options:

I wont go into detail about what these configs are, but here is a short overview:

• Typescript: This is essentially Javascript, or at least it builds on it. Unlike Javascript, Typescript lets you define types for variables, function parameters, and return values. This will help you catch errors at compile-time rather than runtime, which is very useful for debugging.
• ESLint: This is a tool for consistent formatting of code throughout your application. Especially nice to have on group projects.
• Tailwind CSS: CSS is for styling your web app. Tailwind CSS is a utility-focused framework for CSS that comes with pre-defined classes that you can use directly on HTML objects to style them. CSS can also do this, but Tailwind does it smoother and more compact (though I will argue way less readable as well). As we plan to use a component library for this project, you won't really have need of Tailwind, but nice to have in case.
• /src: If you say yes to this, all the main application files of the website will be placed here. It's just an extra layer in your file system, and it separates your source code from your config files, gitignored stuff, and other extra resources. I like to have this option enabled.
• App Router: This setting uses the newest next.js routing features, for referencing files throughout your filesystem. For example, in a normal React project you would put all the pages that you want to render inside a /pages folder, but with this system you can put your rendered pages anywhere as long as you call the file page.tsx. You can then reference that page with the folder it is placed in. Here is an example:

              /app
                ├── dashboard/
                │   └── page.tsx     # Renders at /dashboard
                ├── profile/
                │   └── page.tsx     # Renders at /profile
                └── layout.tsx       # Shared layout for all routes
              

• Import alias:An alias defines how you can reference other files, for exmaple when you want to import something from them. By default if you want to acces other files from a nested component, you would have to reference backwards like this "../../..", but with custom alias you can avoid this by setting up some rules. This is actually super useful, but I have chosen to not include it now because we need to focus on the important stuff first. Also, this can easily be configured after the project is made!

Finishing touches

Your now have a next.js project! The first thing you should do is to open the project in your code editor. Then make an initial commit to your repository. This is done by adding all files to the staging area, committing them, and pushing them.

Now you have to install the dependencies of the project. Make sure you are in the root of the project and run this command:

              npm install
              

This will install all the libraries and packages that the project needs to run locally on your pc, into a folder called node_modules.

You should now be able to see your project at you github pages url. It may only display the readme page, but we will fix that later.

Using the deployed website under development is impractical, as it takes a while to update. Instead, we want to start a development server with hot refresh so we can see all our changes in real time.
To start the development server, run this command, and then navigate to localhost:3000 in your browser.

              npm run dev
              

The file structure

For now lets focus on the files you need to know about:

• /src: This is where you place your main application files. Inside it you will find the app folder, which contains the layout and pages of your website. Inside /src you can put your components, styles, and other folders/files that you want to use in your project.
• /app: This is where you place your rendered pages. If you want to render a page at /about, you should place it in a folder named "about" and name the file page.tsx. This is the new routing system I talked about earlier. NOTE: the file MUST be named page.tsx to be rendered.
• /app/page.tsx: This is the landing page of your website. You can edit this file to change the content of the page.
• /app/layout.tsx: This is the layout of your website. The code in this file will be rendered on every page of your website. This is where you want to put a navbar, footer, or other elements that should be on every page. You can also make more layout file for folders deeper into your project. The layouts will then be nested, so you can have a layout for the whole website, and a layout for a specific section of the website.
• /public: This is where you store static files, like images, that you want to use in your project. They will not be optimized when you build the project, so an alternative is to create an "assets" folder in the /src folder.

These are the most important files for now. You can read more about the file structure by googling.

Adding a navbar

I like to create a "components" folder in the /src folder, and place all my components in there. This keeps the project clean and organized. I then make a "navbar.tsx" file in the components folder, and add the code for the navbar.

I googled "Material UI navbar", found a component named Basic App Bar, and copied the code into my navbar.tsx file. I then customized it to my liking.
To render your navbar on every page, you need to import it into the layout.tsx file (line 4). You can then add it to the layout component like this (line 21):

Automatic deployment

Navigate into your repository, and click "Settings".
In the "Code and automation" section of the sidebar, click "Pages"
Under "Build and deployment", select "Github Actions", and then select "Configure"

You are now about to create a yml file that will automatically deploy your project to Github Pages. Press the green "Commit changes" button in the top right corner, and when a window pops up, press "Commit changes" again.

Now you need to pull this change to your local repository. From now on, when you push changes to the repository, the updated project will automatically be deployed to Github Pages.

Test this by making a small change to page.tsx, commiting it, and pushing it to the repository.
Go into the actions tab on guthub and see if the deployment is successful. It should look something like this: