DEV Community: Jose Calvario

The Power of AI in Website Creation: My Site Was Built by a Single Prompt

Jose Calvario — Tue, 23 May 2023 16:50:02 +0000

How Mixo is Empowering Anyone to Launch a Startup in Seconds

Introduction

In recent years, the world has seen a significant advancement in the field of artificial intelligence (AI). From virtual assistants to self-driving cars, the technology has become more sophisticated and powerful than ever before. However, the latest development in AI has taken the world by surprise – an AI prompt can now build entire websites!

A recent video posted on YouTube by the popular tech channel Matt Wolfe showcases an incredible AI experiment that has the power to revolutionize web development. According to the video, a single AI prompt was used to create the entire website. It is astounding how an AI system can perform complex tasks with only a few lines of input prompts.

The AI system showcased in the video is based on OpenAI's GPT-3 language model. The model has been trained on a vast amount of text input data, which enables it to generate output that can mimic human language with a high degree of accuracy. The AI program used in the experiment was asked to create a website design with specific parameters such as layout, color scheme, and font styles.

The result was beyond impressive. The AI system created a well-structured website design with a clear navigation menu, a homepage, and inner pages. The website also featured relevant images and a footer section, making it look like a professionally designed site.

This development is significant because it demonstrates the tremendous potential of AI in web development. While web designers will still be required for creating custom sites, this technology could significantly speed up the website creation process for businesses that don't require a high degree of customization.

The speed and accuracy of the AI system in creating a complete website using only a few prompts have opened up endless possibilities in website development. Moreover, it could be a game-changer for entrepreneurs and small business owners who are looking for cost-effective ways to get their business online fast.

Mixo.io - Launch a startup in seconds with AI

Have you ever wondered about starting your own business but were hesitant due to the amount of time, effort, and money it takes to get it off the ground?

Have you ever wanted to start a website but didn't know where to begin?

Luckily, there's a tool that can build an entire website and brand for you based off just one prompt. That tool is called Mixo.

Mixo is a web design tool that uses AI to launch start-ups in seconds. All users have to do is type in an idea for their start-up, and Mixo will generate an entire website with logos, images, page copy, testimonials, and more.

The best part? Users can get started for free.

Without reading the entire landing page, we dove right in and tried it out for ourselves.

It says you can launch a startup in seconds with AI and you can get started for free.

After typing in a random idea, for example:

Random Idea: "Our startup introduces a cutting-edge mobile application powered by artificial intelligence technology, designed to scour Twitter and identify pertinent inquiries that demand the brand's attention"

Note that: You don't have to have a name for your company yet you can just come here and describe the idea for a startup in a sentence.

Click Generate Site and then watch Mixo working behind the scenes to connect us to AI, it's going to go through all these steps while building our Landing Page.

Connecting to AI
Submitting description
Generating a Startup name
Designing a logo
Collecting site images
Crafting testimonials
Writing site copy
Generating site code
Adding social sharing
Improving page performance
Optimizing SEO
Enhancing mobile experience

In no time at all, we had a fully-functioning website built off of one simple prompt.

To Get Started to Customize your Website:

Just Click Save and Customize and register an account with your Google account details or any other E-mail if you prefer.

Then Click on Save and Customize your Site...

The tool comes with a freemium pricing model that allows users to access additional features and remove the Mixo branding from $9 a month. For users who want to launch up to 15 sites, the cost is $39 a month.

Click on continue with just the free plan under the pricing plans

But the customization options don't stop there. With Mixo, users can personalize and change everything about their website. They can change the brand name, the site title, and even change out the logo. Users can also play around with the color scheme and add or remove various site features, like the footer for example.

When you're happy with your site just Scroll up to the top and click on Publish. AI will perform some magic to build the entire site for us.

When our site is published and ready to go, we can click on the URL, you can see that it's my example site - IdeatePro.

It has my text and opt-in form, as well as our feature list. All of this was designed for us, and the only thing we typed in was a random idea.

Want to see if your idea has a market? Mixo is the perfect validation tool. Simply plug in your idea, create a quick landing page, and drive traffic to it. If people start opting in and joining waitlists, then you have successfully validated your product. This is especially useful for entrepreneurs who are looking to validate a concept for any sort of software or service they want to offer.

Key Takeaways

All in all, Mixo is a fantastic tool for anyone looking to create a website quickly and easily. It's AI capabilities and customization options make it a valuable tool for entrepreneurs and small businesses alike. So why not give it a try and see what it can do for you?

Conclusion

The AI system that created an entire website with only a few prompts is an extraordinary achievement in the field of AI and web development. The potential impact of this technology on businesses and entrepreneurs alike is huge. It is an efficient and cost-effective way to create a website while freeing up resources that can be allocated elsewhere in the business. As we continue to move toward an era of increasing reliance on automation and AI, it is incredible to see how technology can transform traditional practices to make them more efficient and accessible to all.

How to Enable Editor Branching with Cloudcannon Projects

Jose Calvario — Sat, 06 May 2023 10:40:12 +0000

Are you looking to make changes to your CloudCannon project but don't want them to affect your production site just yet? One solution is to create a branch where you can preview and share these changes before merging them into your main project.

Projects allow you to gather together many sites from the same repository. You may create a primary branch that editors can use to branch out their own sites and merge them back in later.

While we're currently utilizing the sites feature on GitHub Space for our sole site, we need to take things up a notch by creating a dedicated project for our site to live under.

Hands on Lab

Effort: 30 mins

This guide will walk through the steps required to get your Next.js site you previously built up and running with a branching workflow for content editing, allowing you to stage and publish new updates on a separate branch site and approve changes before merging into GitHub.

Objectives

After completing this reading, you will be able to:

Create a new CloudCannon project
Add a new site to enable branching workflows for content editing
Stage and publish new content updates on a new branch site
Approve changes before merging into GitHub

Prerequisites

If you intend to run this lab on your system, please ensure you have the following:

A Internet connection
A GitHub account.
The latest version of Visual Studio Code is installed on your machine.
The cloned demo website starter deployed to CloudCannon already up and running.

Note: This is a follow-up tutorial, it does require you to have created the previous Hands-on-Lab´s, (part 1 & part 2) as covered in the articles How to deploy Jamstack sites to cloudcannon and How to Configure cloudcannon collections to enable Post & Page content editing? to make the most out of it.

Let's get started!

Creating a new cloudcannon project

1 - To kick things off, simply click Create Your First Project.

We will name this GitHub Space as my Project name. We now have more set up options available, such as selecting a Git repository. Currently, we only have our CloudCannon app connected, which is the one we want to use. Our intended Main Branch is our production branch, named main. It is the existing site we have here and we want it to be exactly as it is.

Note: It is possible to view the Preview Details, but they are currently not necessary for our current objective.

2 - We're just going to hit Create Project.

We can see that's going to automatically update our new project with our existing site.

Now let's continue with the best part!

Adding a new site to enable branching workflows for content editing

After reloading the page for the Sites section, we'll notice that we can add a new site for enabling branching workflows in content editing! With this feature, we can create multiple sites, using our existing GitHub Space site as the main branch. Whenever we want to create a new branch, we'll simply create a new site for our Developer Branches or Changes Staged, thus facilitating easier sharing.

Before we get started, it's important to note that branching workflows are only available for team accounts. If you're working through this, make sure you're on the appropriate plan. See cloudcannon account plans for more details.

Note:You might get a warning saying Upgrade your plan to get access to Branching workflows

After you subscribe to one of the plans you will be able to add a new Branch.

Now once we reload the page for the site section we can see that we now have the ability to Add a new site.

1 - Adding a new site is a breeze - simply click on +Add new site.

2 - A new window will appear with two options: Edit with a Template or Build with your own files. Select Build with your own files.

3 - Enter your New site name, simply give it a name like: GitHub Space-Branch.

4 - Then at File source, choose the option GitHub repository

5 - Then select your Repository

6 - Now moving into the Branch setup just select Create a new Branch.

7 - Leave the Source branch just like it is main

8 - Enter a New branch name, the same as above: GitHub Space-Branch

9 - Finally click on the Create Site button at the bottom of the window.

After we click the button we can see that CloudCannon is already starting to work through our existing build configuration. It's aiming to build and deploy the new branch into a preview that will be available at a different URL.

10 - Once your site is set up, you'll have a new URL where you can stage and publish any new content changes on the branch.

Staging and publishing new content updates on a new branch site

CloudCannon's staging and publishing feature allows developers to seamlessly make changes to their website without affecting the live production site. With this feature, developers can create a branch site to work on new content changes and test them out in a safe and controlled environment. Once they are satisfied with the changes, they can easily publish the new content to the live site with just a few clicks. This efficient workflow saves time and eliminates the risk of making mistakes on the live site.

1 - Once your site is ready, we now have our URL: https://high-quetzal.cloudvent.net/. We'll open it in a new tab, and, it looks exactly like it did before.

2 - But this time if I wanted to go to our _pages section inside of our src folder.

3 - And edit our markdown file about.md again. Click over about.md to open up the File editor.

4 - After we open up our about.md file, we want to add another line with some text. Lets just write the name of our firts article on top:

How to install Git Bash for Windows to your local system?

5 - Click on Save. A new window will appear with Review your changes. We just hit Save once more.

This will commit the changes, just like before, but this time the changes will be committed to the branch that we just created, called GitHub Space-Branch.

6 - (Optional) If we choose to see the Build, we just need to hit Build Output, and close the window after it's done.

7 - If we look over on github we can see that separate branch github-space-branch.

8 - After selecting it, we can now view the recently published updated content. We notice a new line containing the text, 'How to install Git Bash for Windows to your local system?'.

9 - Going back to our CloudCannon Status summary page, we can open up our new branch URL https://high-quetzal.cloudvent.net/ site, to see the changes.

10 - We can go to our about page, and we can see that new line already visible online.

11 - If we navigate quickly back to our Sites, we have GitHub Space and GitHub Space-Branch visible -The main branch and the new branch.

12 - After selecting our original GitHub Space site we can open up our URL https://green-cassowary.cloudvent.net.

13 - And see on the about page that we still don't have those changes we did on our GitHub Space-Branch.

The importance of approving changes before merging into Git

CloudCannon's importance of approving changes before Merging into Git is a crucial aspect of any software development project.

The process involves reviewing code changes made by team members before merging them into the main branch of the code repository.

This ensures that all changes are thoroughly tested and do not disrupt the existing code and functionality.

Failing to approve changes can result in bugs, errors, and in some cases, complete system crashes.

By implementing a change approval process, developers can avoid these issues and ensure that their code is stable and reliable.

CloudCannon provides tools and a platform that automates this process, making it easy for teams to collaborate and approve changes quickly and efficiently.

Before merging changes in Git and deploying them to production, it's important to ensure that those changes have been approved. In the current scenario, to approve a change, we merge it and then choose to deploy it to the production environment. Once the changes are published, we can delete the unnecessary site. Another option is to publish to production and right after delete the branch that we don't need anymore with just a click.

Back to our Dashboard of our Branch site, under Actions we have the ability to now the Publish changes we did.

1 - We're going to click Publish changes, a new window will appear called Publishing, and then also delete the site since once it's published we don't really need that branch again. Click on Publish then delete site and Click again to confirm immediatly after.

2 - After making changes, publishing and deleting the branch, we can view the updated content of our main live site GitHub Space. Just click on the arrow button right next to our URL: https://green-cassowary.cloudvent.net and Voilá.

We can finally view the merged updated content. We notice a new line containing the text, 'How to install Git Bash for Windows to your local system?'.

3 - Furthermore, by checking the main branch on GitHub, we can verify that the new changes have been successfully incorporated into our main branch through the Merge branch commit.

Conclusion

In conclusion, the process of creating a new CloudCannon project and adding a new site to enable branching workflows for content editing is simple and straightforward.

This allows businesses to manage their content effectively and streamline their workflows.

Additionally, the ability to stage and publish new content updates on a new branch site ensures that any changes made are thoroughly tested before being merged into GitHub.

By having a system in place to approve changes, businesses can reduce the risk of errors and save time in the long run.

Overall, using CloudCannon for content management and collaboration can significantly improve productivity and efficiency for any organization.

Why you should use Cloudcannon

Upon discovering CloudCannon, I was amazed and realized that this is the ultimate answer to my long-awaited solution. As a result, I spend less time coding, launch websites swiftly, and alleviate my concerns regarding security and backups.

I develop websites on my local computer from severel different locations, but if a client needs urgent changes, I can easily log into CloudCannon from anywhere and make updates using their online code editor. My recent clients love using CloudCannon too, finding it simpler to make updates and work in sections of their site they previously couldn't.

Thanks to the CloudCannon team, any Developer is able to offer his clients a professional managed hosting solution with an online CMS, full version control, external hosting (if needed).

Working with CloudCannon makes everyone happy!

Thanks for the read! Now go practice & build something awesome!

How Next.js 13's CSS modules & Loading State Feature Can Improve User Experience

Jose Calvario — Thu, 27 Apr 2023 08:10:20 +0000

In this series, we’re continuing through the basics of learning the new features of the static site generator, Next.js 13.

Introduction

In the previous tutorials, we learned how we can construct pages and layouts in the new Next.js 13 app directory, and we'll also looked at some basic routing and Linking.

Today we'll dig deeper and look at how CSS modules is applied with this starter project we've been using. We also have a quick look at Loading state using Next.js 13.

Prerequisites

If you intend to follow along with this tutorial on your system, please ensure you have the following:

A basic understanding of working with the terminal.
A Laptop or PC with Windows installed
An Internet connection
Git is installed on your local machine (optional). For more details on accomplishing this, review Installing & Setting Up Git on Windows.
A GitHub account. For more details on accomplishing this, review How to get started with Git and GitHub
The latest version of Visual Studio Code is installed on your machine.
Basic knowledge of HTML, CSS, JavaScript, and React.

Note: This is a follow-up tutorial, it does require you to have created the second tutorial where we covered Routing, Layouts & Links, as covered in the article : Take Your Next.js 13 App to the Next Level with New Routing Enhancements, Dynamic Layouts, and Efficient Links to make the most of it.

Let’s get started!

Creating a Starter Project

You can see we've got Visual Studio Code open, where our completed code for the previous part nextjs-two of this beginner series is, which is essentially the modified starter project we've been doing for the last two tutorials.

Let's get started by making a copy of nextjs-two and renaming the file to nextjs-three inside our nextjs-series directory.

I'm going to open up this nextjs-three directory with Visual Studio Code and we can see everything that was installed from nextjs-two is over here in the file tree, but we need to change some of the contents of the package.json file,

and the packages.lock.json file as well.

Accessing the Development Site

So let's go ahead and open a terminal window once again, and I'm going to type in the following:

npm run dev

This will start our basic application. We can see it starting up, and we see all of this information here in the terminal, but here is the URL we can press control and then just mouse click to follow that click and Voilá! it's going to launch that in Chrome.

ready - started server on 0.0.0.0: 3000, url: http://localhost:3000

Once the development server is running, you will be able to browse to http://localhost:3000.

Here is our page, visible in the browser.

We have the full page that has started, and this was that page.tsx that we saw inside of the app directory —Now as cool as this looks, let's go ahead and make some more changes.

Let's just delete what's inside the <main> element down here:

And replace that with the following:

      <h1>Hello Welcome to Next.js 13</h1>
      <Link href="/about">Go to About Page</Link>

The page we just edited, page.tsx of the app directory will look like this:

If we can look at the application running on http://localhost:3000 we can see that now we have a different Homepage:

Note: Just underneath the Hello Welcome to Next.js 13 -our link that says: Go to About Page is at the right, but we can go ahead and click that, then it takes us to the about page that has the site Navbar, it has the About NavBar it still has the h1 that says About and Link to Home page so we can go back and forth now with links rather than using our back and forward buttons from the browser Tab.

CSS modules

CSS modules in Next.js 13 allows developers to write modular and scoped CSS by automatically generating unique class names and localizing CSS styles. It enables developers to define CSS classes in a single file and import them into the components where they are needed. This way, the CSS styles are scoped to the components, eliminating global styles and reducing the risk of style conflicts. Additionally, Next.js 13 now supports CSS modules for both client-side and server-side rendering, providing a consistent UI experience throughout the application.

So continuing with our follow-up tutorial, I previously mentioned that CSS is the reason this about link is down there.

Let's change that and briefly look at how some CSS is currently applied in this modified starter project.

Right now this class{styles.main} that we see in page.tsx of the app directory is applying that beginning CSS.

We can go ahead and remove that without removing the <main> element of course.

<main className={styles.main}>

After we save, that's definitely going to change what is applied in the home page but we can see what that starter project did and that is: import styles from "./page.module.css" so it made some Styles inside of this module -some CSS Styles specifically for this page.

And then there are also the file globals.css that's applied to the entire site.

We could also create some styles that are applied just to the layout for a specific level or path in the directory tree like our about path.

Continuing with the about directory, let's create a new file called: styles.module.css -we're creating a CSS module.

We're going to create a class called .main , and then inside of this main class we'll have the following styles:

.main {
    min-height: 100vh;
    display: grid;
    place-content: center;
    background-color: #333;
}

Let's apply this to the layout.tsx inside the about directory.

So any page, any component in the about path, what I mean is the about page but also any children would receive these Styles and to do this, we need to import Styles at the top.

import styles from "./styles.module.css";

And then after we've imported those we just need to apply those, and we can do that with this <main> element:

<main className={styles.main}>

The nice thing about these modules is you could have a main class with the same name inside of the page.module.css and then have essentially the same name at two levels, but they're not applied the same way because they're just applied to the component in that class, however, you would have to be careful if you were using globals and applied those.

Remember we removed the <main> element with a className just previously from the file page.tsx of the app directory.

Let's put it back again:

<main className={styles.main}>

Let's go ahead and see what was applied on our home page:

We can see that we have applied our <main> element with a class that is entirely different as it was before.

Now after we click on Go to About Page it shows a darker color, it's centered, our header and our link are together unlike the other main class that was applied to the parent.

We can see how the module CSS works and applies only to that level or that page, so this is at the page level when we have page.module.css we import that and apply it just to that page, now we did this differently for the about -we applied it to the layout.tsx

This would apply essentially to all {children}, because the children are nested inside of this <main> element that got the class.

Just so you understand the different levels we're talking about page level or we're talking about layout path level or of course, you go to the very top and you have also the global level that applies to all.

When we go back to the home page, the app.tsx and remove that main class -we can see the difference as well, now everything shifts to the top because those styles are no longer applied to our parent page.

Loading with React

A loading.js or loading.tsx file is a JavaScript file that is used to create instant loading states for web applications, built on top of the React library's suspense feature. The suspense feature in React allows developers to define components that can delay rendering until some data or resource is ready, which can help improve the user experience by showing loading indicators or placeholders while data is being fetched.

The loading.tsx file typically includes helper functions or components that can be easily used to create loading states for different parts of a web application. For example, it might include a component that shows a spinner animation while data is being fetched from a server, or a function that can be called to delay rendering a component until its data is ready.

By using the loading.tsx file, developers can easily implement efficient and user-friendly loading states in their web applications, without having to manually write complex code to manage asynchronous data fetching and rendering.

Now let's move on with Loading. We can add more files here that some you don't even see that weren't provided with the starter project but they can really help the project out and one of those is a loading state, so once again in the about directory let's create a new file and we just name it: loading.tsx.

Inside of this loading.tsx we'll type RFC and get our loading functional component. Once again make that a capital L for the name of the component and then we are returning a loading state, instead of what is currently being returned we're going to put a <h1> inside of this we just type the word Loading with some dots.

export default function Loading() {
  return <h1>Loading...</h1>;
}

Another great thing is the loading file can create instant loading states built on Suspense, under the hood.

We will be able to briefly see this loading message when we navigate between those two pages.

First to see this in action we'll open up our Dev tools -when we are on the Home page, we just right click with our mouse and choose ,.

Next under the Network Tab we have a option that says Slow 3G. We select that option to see the Loading state just changing more slowly.

Finally, we minimize the Dev tools then we'll go to the home page first and remember the home page doesn't have a loading state -go to the about page to see the loading message we did just briefly.

Click on Go to About Page and see it in action.

Conclusion

In this article, we learned how to use the CSS modules. We also saw how to apply react suspense and loading states.

The patterns and conventions we learned in this article are still experimental features that Next.js 13 is implementing while moving forward, however, they are already very useful, and we can already start using them in our projects.

Next.js 13 is constantly incrementing these new features and adding some new ones, so I'll try to cover those if they continue during this beginner series; however, I prefer to publish the new features rather than the previous ones, because this is the direction that Next.js 13 is headed in the future.

What's next?

During our upcoming part 4, we will delve into the topic of Error Boundaries. It is important to prioritize progress rather than perfection, as even small advancements made each day can lead to significant results.

Thanks for the read! Now go practice & build something awesome!

How to get hired as a Junior Web Developer?

Jose Calvario — Wed, 12 Apr 2023 14:33:47 +0000

A Step-by-Step Guide for Demonstrating Your Job Readiness!

Looking for your first job as a junior web developer can be a daunting experience. Despite the growing demand for web developers, competition is fierce, and standing out in a flooded job market can seem like an insurmountable obstacle. Fortunately, by following a few key steps and making a little extra effort, you can increase your chances of landing a position as a junior web developer. In this blog post, we'll guide you through the essential things you need to know when applying for junior web developer jobs. Whether you're just starting your career or are looking to switch fields, these tips will help you take your first steps toward a successful career in web development. In this blog post, we'll explore how to leverage LinkedIn to connect with industry professionals and hiring managers, and ultimately increase your chances of landing your dream job.

Introduction to LinkedIn

LinkedIn is a social network service specifically oriented toward employment and professional networking. It's similar to sites like Facebook, but user profiles feature professional accolades, work histories, resumes, and more employment-related content.

LinkedIn is not just a platform to chat about careers. It's a great way to find a job. Most technical job applications request your LinkedIn URL right alongside the standard cover letter, resume, and contact information. One of LinkedIn's recent Workforce Reports and their ongoing Statistics Page even detail that:

LinkedIn is used by professionals in 200 different countries worldwide
LinkedIn has around 900+ million members worldwide
Over 199 million American workers have LinkedIn profiles.
Over 236 million Europeans (including Turkey and Isreal) workers have LinkedIn profiles.
More than 30,000 U.S. companies specifically use it to recruit new hires.
30 million total companies are represented on the platform.
An estimated 3,000,000 jobs are posted on LinkedIn every month.
Over 90% of Fortune 500 companies use LinkedIn
49 million People using LinkedIn to search for jobs each week

Also read what matters to employees — and how employers are responding — is changing in a big way. In fact, company culture is having a watershed moment that’s redefining the relationship between employers and employees. You can read or listen to the full 2022 Global Talent Trends report for more in-depth data and insights.

We've even seen Web developer student's or self-taught's regular LinkedIn posts getting noticed by a friend's manager, by recruiters resulting in the manager or recruiter reaching out, interviewing, and hiring that student or self-taught!

Internship companies also request to preview student LinkedIn profiles during the matchmaking process. Because this tool is so widely used, we consider it necessary for your upcoming job search. So it's very important to create your LinkedIn profiles early in your Journey whether you're still in college, attending a Bootcamp or going through the self-taught road, and begin regularly using the platform. This will ensure you will have an active, well-rounded profile by the time internship hosts and employers see them.

Creating a LinkedIn Profile

If you don't already have one, create a free LinkedIn account. Then use the instructions below to complete your profile:

1 - Include a recent, high-quality photo that emphasizes your face. It doesn't have to be a professional-quality head shot, but it should be easily recognizable (no sunglasses, make sure your face is clearly visible), professional, and friendly. If you don't have a photo handy, ask a classmate, friend, or family member to take one.

2 - Include a high-quality cover photo. This is a great place to show off your personality, accomplishments, and interests.

3 - Edit your tagline. Taglines carry a lot of weight when it comes to being found by recruiters. Use them to sell your skills! Include keywords that recruiters will be looking for. For example, if you want a recruiter looking for a React developer to find you, use the word "React" in your tagline: "Junior Web Developer | Software Engineer | React and JavaScript Wiz"

4 - Create a custom easy-to-remember URL that includes your first and last name. Try to exclude, numbers and strange symbols, I recommend only using the dash (-), underscore (_), or the dot (.) between your names.

5 - Write a summary. Think of this as a space to showcase who you are. Incorporate relevant keywords so recruiters are more likely to find you.

Start with a statement that summarizes your experience.
Next, dive into what you're doing now (learning to code) or (building up your porfolio) and what relevant skills you bring from previous work, hobbies, and volunteer experience.
Finally, write a closing statement that describes what you're excited about working on in the future. If the perfect position fell into your lap tomorrow, what would it be? Your summary should be at least five sentences but don't limit yourself. Include what you think is most important for hiring managers to know about you. Don't be shy about getting lots of the relevant keywords in there.

6 - Add a Featured section to your page and add link to your GitHub profile as a piece of media. You can add this section by clicking Add Profile Section, selecting Recommended from the list, and clicking Featured.You can change the title of the link and write a short blurb about your coding portfolio! If you haven't already, update your GitHub's profile picture to something other than the default. If you have a personal portfolio website or blog, update this section to include links to those too.

7 - Add two or three of your best projects. You can add projects to the Projects section of LinkedIn.

To create this section, click Add Profile Section, select Additional from the list, and then click on Add Projects.
Include links to the GitHub repository or live site if possible.
Summarize what the projects do and what technologies and programming concepts were used. If you worked on the project with classmates, you can add each other as a contributor.

Note: contributor As you continue developing projects throughout your Web developer journey, update this section regularly so it always displays the work you're most proud of!

8 - List your previous jobs. Jobs should be listed under Experience. Each job should include a short description of what you did in that role.

Be specific and succinct. Use concrete numbers and examples such as "Responsible for onboarding and training ten new employees in 30 days" rather than vague statements like "Fulfilled management duties beyond expectations."
Think about the "why" for your descriptions. Why does a hiring manager care about this description and what does each point demonstrate about you, your skills, or achievements?
Include only the most recent jobs. You should only include your three or four most recent jobs unless earlier roles are relevant to the types of jobs you'll be applying for after graduation. For non-technical roles, focus on the specific responsibilities that could translate into a technical career.
Break down past experience descriptions into bullet points. You can easily do this by using the Alt-8 shortcut.

9 - Add your College, Bootcamp or Self-taught experience. This should be added to Education section, not the Experience section.

Write a brief summary of what you're learning and doing whatever path you're taking.
Don't write about what the College, the Bootcamp or the online tutorial is --- just write about your experience. For example, past students have written things like:

"I'm currently learning how to build web applications with JavaScript, React, HTML, and CSS. More importantly, I'm learning how to think more like a programmer, write good code, and pick up new languages and technologies." "At Bootcamp X, I've learned how to learn programming languages more than learning any one language for the sake of itself. I've learned how to work towards a programming goal on my own and with others until success happens. I've also learned how quickly I can process a tremendous amount of information that is new and uncomfortable at first, and have it feel comfortable like a worn pair of jeans by the end of a week!"

I recommend to not copying these examples. Come up with your own that describes your unique experience. Be unique!

10 - List the skills you've learned during your journey. In the Skills section, list skills and tools you've learned, especially those that are common keywords in job descriptions. Don't list only the names of the courses you've taken so far. Also include each major technology, skill, and concept you practiced in each course. For instance, at this point in the course, depending on your roadmap, you've likely learned some things like:

Algorithms
Data-structures
HTML
CSS
Sass
UI Design
JavaScript
jQuery
Typescript
Object-Oriented Programming
SQL
Git
Test-Driven Development
Pair Programming
React
API's
Responsive Design
Mobile-First Design

11 - Keep updating your skills section. Continue to update the Skills section as you learn more throughout the program. List out-of-ordinary skills that may apply to your future work, too, even non-technical skills.

12 - Always Include months and years for all dates.

13 - Check your profile in an incognito window. It doesn't matter which operating system you use (Windows, Linux, or Chrome OS: Press Ctrl + Shift + n | Mac: Press ⌘ + Shift + n) once you're done. This way, you can see exactly what your LinkedIn page looks like to others (instead of seeing what it looks like just for you).

14 - Search for examples of LinkedIn profiles. Search by your university, college, Bootcamp or Online Course on LinkedIn. You'll find countless profiles of past graduates. Use their profiles as inspiration or general guidelines but do not copy their content.

Making Connections and Building your Network with LinkedIn

Are you tired of scouring job boards and sending hundreds of applications, only to hear back from a few? Look no further than LinkedIn. LinkedIn is not only a great platform for showcasing your professional accomplishments and building your personal brand, it's also an excellent way to make connections and build your network while job hunting.

Connect with Classmates and College Alumni

Not only will it be helpful to see what your peers are posting, you'll also have a guaranteed way to stay in touch after graduation. You can also find past college, Bootcamp, or online course students and connect with them.

Help Recruiters Find You

Recruiters often find candidates through connections and endorsements. Add connections with all of your college, bootcamp or online course classmates and anybody else you know, even if they don't work in tech. The more connections you have, the more likely it is a recruiter will find you.

Once you're connected, ask your classmates and friends to endorse you for the skills you've listed on your profile. They can click the + button next to the skill. Having more endorsements for the skills recruiters are looking for will make it more likely they will find you.

Connect with people in your field

A great way to build your network is to connect with people on LinkedIn after meeting them at events or meetups. You can leverage these new connections for opportunities like informational interviews, which can potentially lead to jobs down the line.

When you connect with someone after an event, it's best practice to send them a personalized message. When asking for an informational interview, don't go into it expecting a job. This is a chance to build a new relationship in the industry and learn from someone with more experience. Use this as a time to find mentorship, ask for advice, and listen to an insider's perspective of the industry.

Here's an example approach:

"It was great meeting you at the event last week. I'd love to buy you coffee and pick your brain about working as a JavaScript senior dev with KatChat. When would you be available?"

Using LinkedIn Regularly

Creating your profile is a great first step. But it's important you also remain fairly active on the platform, especially before your eventual job search. Not sure where to start? Here are some ideas:

Follow hashtags on subjects that interest you.

Anytime someone uses the hashtag you follow, it will appear in your feed. If you really like the post, you can share it yourself or simply like the post. To follow hashtags, start in the search bar on LinkedIn and type the pound key '#' followed by any topic you're interested in. For example: #startups #remoteworkers #javascript #react

Join groups of people that have shared interests. Often people post jobs in these groups to focus their candidate search. Find groups by typing a subject in the search bar and wait for a dropdown to appear. You should see the subject in Groups the third option down.

Then click on Follow the "group" you're interested in.

Post, Share, Like, Comment

Regularly document your work. Next time you make a site you're proud of or tackle an interesting challenge, write a LinkedIn post about it! Make sure you update the Projects section to include your latest and greatest work examples.
Write a blog. Longer-form blog posts documenting your experience can communicate your enthusiasm, skills, interest, and personality to future employers. If you don't have a personal blog, you can post on sites like Dev or Hashnode which I use. Make sure to share them to your LinkedIn feed! You can even write articles directly on LinkedIn that will automatically be associated with your LinkedIn account and show up on your profile.
Find a helpful resource? Others will probably find it helpful too. Why not share it on your LinkedIn feed? Make sure to credit the original author.

Recommendations

Check in with potential references. Have you thought about who you'll use as references for a future job? Do your references include managers from past jobs or anyone you're not currently in touch with? Check if they're on LinkedIn and connect with them now. That way you don't have to scramble to find them later.
Write recommendations for your peers. If you've had great experiences working with fellow students, consider writing recommendations highlighting the technical and interpersonal skills that made them so great to work with. Preview recommendations left for others on LinkedIn (you can search your college, bootcamp or online course to see all kinds of past students) to get an idea of what these typically look like.

Remember always:

Regardless of how you use LinkedIn, make sure to keep your posts, comments, and interactions positive and professional.
Again, your LinkedIn profile acts as a resume and representation of yourself to future employers and coworkers.
Put your best foot forward while simultaneously showing off your investment in the industry, eagerness to learn, and interest in technical work.

Networking Without Letting Your Employer Know

Generally, keeping your LinkedIn profile information public is the easiest way to signal to employers and recruiters that you're looking for work. However, you may want to keep your profile more private if you are concerned your current employer will not support you in job seeking. In this case, let your advisor know so they can work with you on alternative networking options.

If you prefer to keep your profile more private, your general networking strategy should be to entice people in hiring positions to reach out to you to learn more about you.

Follow these steps to make your LinkedIn profile more private and to conceal activities that may indicate you are job seeking. If you prefer to keep your profile more public, you can still follow these steps. Just make sure the last step is set to the more public option.

Keep Your Connections Private

In the dropdown below your avatar in the upper right corner of the screen, click on Settings & Privacy.
In the left-hand pane, click on Visibility, then click on Visibility of your profile & network.
Click on Who can see your connections and select Only you.

Online LinkedIn Members Can View Your Profile

Go to Settings & Privacy.
In the left-hand pane, click on Visibility, then click on Visibility of your profile & network.
Click on Profile visibility off LinkedIn and select No.
Click on Edit your public profile. You can then change the visibility of anything on your public profile in the right-hand pane.

Hiding Update Activity from Other Users Viewing Your Profile

Go to Settings and Privacy.
Click on Visibility and then Visibility of your LinkedIn activity.
Select Share profile updates with your network and then select No.

View Other LinkedIn Profiles Anonymously

Go to Settings and Privacy.
Click on Visibility and then Visibility of your LinkedIn activity.
Select Profile viewing options and then select Private profile characteristics.

Recommendations for Job Hunting on Work Equipment

Use your personal computer for job hunting. Your work computer may be configured to notify your employer about the websites you visit.
If you use your work machine, use your browser in incognito mode. This prevents the web browser from saving your search history. Note that some work computers could still be configured to notify your employer about the websites you visit even in incognito mode.
Make sure you are logged out of LinkedIn at work.

Internships

Some internship host companies may offer to extend your internship or transition you to an employee.

Regardless, make sure you continue to build relationships with the mentors that you've been working with. Ask for their advice on job hunting (mentors love that!), and for suggestions and referrals for places to apply.

Track your Job Search

To help keep track of where you've applied, track your job search in a spreadsheet like this: Track your job search.

Note: You should apply to at least 10 positions a week and push code to Github at least 5 days a week, as this will give you the best chance of securing employment quickly.

Preparing to Apply for Jobs

Programming is fun, but job hunting sucks! Some of the best advice that we can offer you is:

You are awesome and you've come a really long way, and every one of you is on track to be a great junior developer.

If you're not feeling that way, you're not alone — being a junior developer can be intimidating, especially when you're putting yourself out there for jobs. Remember how far you've come since the beginning of your journey! You know a lot, and you'll be great at your job. No worries!

One thing to keep in mind as you're talking to employers is to not undervalue yourself or say negative things about yourself.

The worst thing you can do is say "I'm not very good at coding." If you've gotten this far in your journey, you are a great beginner!

Nobody's going to hire you for a senior-level job, but you will do great work at a junior-level position or internship. So don't offer up your weaknesses or paint yourself negatively.

The interviewer should know where you're coming from and can figure out your weaknesses on their own — it's your job to emphasize your strengths.

Be confident about what you know, and what you don't know.

Experienced developers often value junior developers because they are eager to learn and to be guided.

Be confident in that you know where you are at now, and you can help someone understand where the holes are in your experience.

If you enjoy programming but are interested in other sides of the industry, there are many awesome opportunities in QA, support, testing, project management, business development, and other roles that will make use of your various skill sets. Knowing how to code really makes you stand out for these types of positions.

Coding skills alone are not highly correlated with job success, but skills coupled with the number of jobs applied for and quality of applications, are.

Your goal when you are applying is to apply to 10 per week. It’s important as well to cast a wide net. It's better to apply to too many jobs than too few; you can always turn down a job offer, and each application is good practice.

Keep an open mind for other languages than what you studied. Diversified experience you gain in the industry will be extremely valuable years from now.

Once you're in job application mode, it's important to move quickly. Make sure you have a great cover letter ready to be edited to fit each job you apply for; if you wait to apply a job may be gone, or you'll be the lowest priority.

A huge factor in the job search is still luck; some people's job hunts will be longer than others. If you have your mind set on one particular technology or language, it can take longer.

Not all surprising interviews come true as job offers and not all job offers result in employment (I’ve seen start-ups dissolve between making an offer and the start date). Please keep searching and applying for positions until you’ve received an official offer and/or begun working.

Job Boards

Now that you're ready to apply for jobs, you need to know where to look!

If you have any friends or family who work in tech, you should ask them for advice, introductions and referrals, as personal connections are the best ways to get an in.

Mouth-to-mouth still works very effectively today.

But job boards are where you'll find the most job openings. As you look at job posts, don't take "requirements" too seriously: if a company asks for 2 years of experience, they're often open to considering someone with much less if the candidate fits the bill in other ways.

And if they're looking for a Python developer but you've done Ruby and JavaScript and can show them that you're capable of picking up Python quickly, it's very possible to get in the door.

For that matter, don't just limit yourself to only applying to jobs in languages with which you are familiar; because there are so many programming languages, most jobs will be in languages you haven't used — yet.

And don't limit yourself to developer roles — there are many great opportunities for career paths or even just getting your foot in the door in QA; Developer support; Project management; Front-end developer, Database developer; etc.

Also, not every job employers are hiring for is posted publicly, and a lot of companies have internal job boards or postings. Look on the employment or career pages of individual tech companies. If they have a senior position posted on a job board, you may find a more junior position on their website.

Search Terms

Here are some search terms to use on job boards, no matter where you look:

front-end
front end developer
junior
junior developer
javascript -sr -senior
ruby -sr -senior
c# -sr -senior
javascript
ruby
c#
qa
tester
technical support

And finally, here is a list of job boards that have tech jobs anywhere, and remote positions:

Remote or Anywhere

Google Jobs --- (aggregates jobs from across the web)
iCrunchData
Chick Tech
Tech Fetch
Campus Point (can email)
LinkedIn Jobs
AngelList
Indeed.com
Glassdoor
Hired
Dice
Monster
Geekwire
RubyNow
ITJobPro
TechCareers
CrunchBoard
Mashable
Stackoverflow
Kforce (staffing agency)
Firstjob
Jobs Radar
FlexJobs
We Work Remotely
Working Nomads
Staff.com
SkipTheDrive
VirtualVocations
Career Builder

Freelancing

Mailing Lists

Subscribing to mailing lists is a great way to stay updated on job opportunities. These lists are updated regularly, and they include job openings from various organizations.

By subscribing to these lists, you can be among the first to be notified about job openings. This gives you an advantage over other job seekers who may not be subscribed. You can apply for the open position early on and stand a better chance of being considered.

Another advantage of mailing lists is that they save you time and effort in job searching. Instead of manually checking job boards and company websites every day, you will receive notifications directly to your inbox. This makes it a convenient option for busy job seekers.

Wrapping up, subscribing to mailing lists is an effective way to stay updated on job openings. It is a convenient option that saves you time and effort while giving you an advantage in job searching. So, take advantage of this opportunity and subscribe to relevant mailing lists to enhance your job search.

Continuing to Code

It's important to keep coding while you look for work. It will keep your skills sharp and demonstrate to employers that you actually like coding. Avoid tutorials and picking up new languages, and instead focus on building out a project — it gives you more to talk about in your interviews and better demonstrates your coding abilities. Push everything you do to Github, regardless of whether it is complete or not.

Here are some ideas of things to work on:

Start or continue a personal project that you can add a lot of features and complexity to over time.
Contribute to an open source project, such as:
- github.com/calagator
- github.com/operationcode
- Anything on www.codemontage.com
- Here are some links for finding open source work geared towards new contributors:
- http://up-for-grabs.net/#/
- https://twitter.com/yourfirstpr
- https://github.com/search?utf8=✓&q=label%3Afirst-timers-only+is%3Aopen&type=Issues&ref=searchresults
If you want to apply for front-end HTML/CSS and Javascript focused positions, build a portfolio site. Make sure to test for cross-browser compatibility.

Sprucing Up GitHub

When you apply for a job or internship, employers will want to see code you've written so that they know what you're capable of doing. Spend some time getting your GitHub profile looking good. Check out my GitHub profile page so that you have an idea.

First, make private any repo that doesn't look great and that you don't want to spruce up. Don't make too many of your repositories private, as employers value being able to see the amount of work that you've done.
Next, pin a couple of your best projects to the "pinned repositories" section, so employers can more easily view the work you'd like them to see.

Finally go through all files in each repository and make sure that there aren't large sections of commented-out code, bad indentation, extra line breaks, or anything else that looks less than professional.

Recommende reading:

You might want to read this article on the importance of your GitHub profile to employers: Github is your resume now.

Keys to a well-written README

For every public repo, make sure it has a README file that:

Explains what the project does;
Explains how to set everything up, if someone clones it;
Provides information about the goals of the project. (What you were working on and what you were trying to learn);
Is well-organized with markdown headers;
Includes screenshots (prioritize for bigger projects like code reviews, group projects, capstone, etc);
Provides a link to the live site (GitHub Pages, Heroku, Vercel, Netlify, etc); and optionally,
Includes any known issues with the code, and a roadmap for features you'd like to build.

Have a look of a typical well-written README.md file.

Note: Explore GitHub's vast number of repositories to have a look at how Developers write their READMEs.

Additional Resources:

Conclusion

In conclusion, getting hired as a junior web developer requires a combination of technical skills, experience, and personal qualities. It is essential to have a strong foundation in programming languages, such as HTML, CSS, JavaScript, and others, as well as familiarity with development tools and frameworks. Building a well-rounded LinkedIn profile, a portfolio of projects and contributing to open-source projects can demonstrate coding skills and commitment to learning. Soft skills, such as communication, teamwork, and problem-solving, are highly valued by employers. It is necessary to network, attend conferences and meetups, and search for job opportunities actively. With dedication, persistence, and continuous learning, becoming a junior web developer can lead to a fulfilling career in the tech industry really quickly.

Remember to keep learning, stay creative, and continually build on your web development skills to remain relevant in the ever-changing industry.
Thanks!

Elevate your Next.js 13 application by utilizing improved routing features, flexible layout options, and optimized links

Jose Calvario — Tue, 04 Apr 2023 12:09:10 +0000

In this series, we’re continuing through the basics of learning the new features of the static site generator, Next.js 13.

Introduction

In the previous lesson, we learned how to start a new Next.js 13 project and reviewed all the files you get.

Today we'll dig deeper and look at how we can construct pages and layouts in the new Next.js 13 app directory, and we'll also look at some basic routing.

Prerequisites

If you intend to follow along with this tutorial on your system, please ensure you have the following:

A basic understanding of working with the terminal.
A Laptop or PC with Windows installed
An Internet connection
Git is installed on your local machine (optional). For more details on accomplishing this, review Installing & Setting Up Git on Windows.
A GitHub account. For more details on accomplishing this, review How to get started with Git and GitHub
The latest version of Visual Studio Code is installed on your machine.
Basic knowledge of HTML, CSS, JavaScript, and React.

Note: This is a follow-up tutorial, it does require you to have created the "1. Getting Started" tutorial, as covered in the article Getting Started with Next.js: A Comprehensive Guide to Building Your First Application to make the most of it.

Let’s get started!

Creating a Starter Project

You can see we've got Visual Studio Code open, where our completed code for the previous part nextjs-one of this beginner series is, which is essentially the starter project that you get after you install Next.js 13.

Let's get started by making a copy of nextjs-one and renaming the file to nextjs-two inside our nextjs-series directory.

I'm going to open up this nextjs-two directory with Visual Studio Code and we can see everything that was installed from nextjs-one is over here in the file tree, but we need to change some of the contents of the package.json file,

and the packages.lock.json file as well.

Routing between pages

Now, just to recap quickly, we changed the contents of the home page, the page.tsx file, the default page, and if you followed along with part one, that's in the new app directory for Next.js 13.

In this app directory, let's create another directory inside of it, and let's call this directory about. Inside the about directory let's create another page.tsx file.

To create a new page.tsx file here and put that inside a directory called about, rather than first creating the about directory and then creating the new file inside of that, we can just click the new file button and then type about/page.tsx and hit enter. We can see when that file within that directory was created.

If we type RFC for react functional component and see that choice right there, we're going to select that.

Note that's not part of Next.js 13 -that is an ES7 react Snippets extension that we can use, we just need to head over Extensions and we're going to search for VS Code ES7+ React/Redux/React-Native/JS snippets

This extension is very good with those snippets, so you can type those abbreviations and complete those functional components very easily.

If we go back to the project, we have our basic functional component for the page, but we could name it About with a capital letter.

import React from "react";

export default function About() {
  return <div>page</div>;
}

If we look back at the older page.tsx file notice they didn't name this page either; it's named Home so we want to name the functional component what it actually is, about however the page itself is named page.tsx. We go ahead and save the page.

This is how basic routing and pages are created in Next.js 13.

Accessing the Development Site

So let's go ahead and open a terminal window, and I'm going to type in the following:

npm run dev

In the meantime, when we want to have a different page that we could link to or navigate to, we want to create a directory for that page. Now, if we look at our page, you can see we're just returning a <div> that says: page.

We would go to http://localhost:3000 and then navigate to /about, and if we press enter, we have the word page displaying there (it's very small) at the top left corner.

We could change what we have in here; maybe we make it a little bit bigger, maybe even apply just some CSS, but we know we do have a second page now, and we can navigate to it with /about.

If we go back to the home page, we're going to make one simple change here, and that is to turn this <div> into a header <h1>, it's a little bit bigger and easier to see, and then we going to turn the word page into the word About, with capital letter ‘A’, so we know we're on the about page.

import React from "react";

export default function About() {
  return <h1>About</h1>;
}

Creating a root layout component

Let's look at the layout.tsx file that's in the parent app directory and for this layout.tsx applies to the entire site or the entire application, so anything we would put there, would be affected on every other page as well.

For example, we could add an <nav> element, not by creating a separate component but just inside the <body> here, and if we look better, the body returns all of the child components inside of the application, but then we could have a component above that we defined, so if we created a navbar element in a separate component, we could import that and that would work as well, but for now we're just going to use the <nav> element and then inside of the <nav> element we're going to add an h1 and with the text Navbar and save.

return (
  <html lang="en">
    <body>
      <nav>Navbar</nav>
      {children}
    </body>
  </html>
);

If we can look at the application running on http://localhost:3000 we have Navbar there at the top left corner of our Home page

but if we click forward to /about page, we also have that Navbar on the /about page, so this parent layout.tsx applies to all the pages on the application.

Creating a nested layout component

We want to create another layout, that will only apply to anything in the about folder or better yet, the about tree, which means it will only apply to any pages that start with the /about, and of course, we could have sub-directories and other pages that follow that path. For example, we could have a sub-page or directory in the about directory.

We're going to create another layout.tsx file inside of the about directory.

Let's start again by typing RFC, If we notice the function is not going to have the name layout, but that's not what we want, right?

Let's look back at what we were given from our earlier starter files, and we can see this was named RootLayout.

We're copying (Ctrl + C) from the beginning of the RootLayout and going down to the return with the parentheses included.

RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (

We head over to our newly created ´layout.tsx`, and we'll return something different, but we need the same types, and we'll need to change the name to AboutLayout.

Let's paste (Ctrl + V) the code we copied above in there and Rename it to AboutLayout.

export default function AboutLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return <div>layout</div>;
}

Notice in the return of the parent directory for app, that the starter file layout.tsx it has the <html lang="en">. We only want one of those per page, and really per site because this applies to everything. Anything we have below is considered a child {children} and it's right here in our HTML structure.

return (
<html lang="en">
  {/*
  <head />
  will contain the components returned by the nearest parent head.tsx. Find out
  more at https://beta.nextjs.org/docs/api-reference/file-conventions/head */}
  <head />
  <body>
    <nav>
      <h1>Navbar</h1>
    </nav>
    {children}
  </body>
</html>
)

Going back to our new layout.tsx inside the about directory, we could just start with a fragment.

export default function AboutLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    // FRAGMENT
    <></>
  );
}

Now we put a nav element and we can call this the About Navbar After this <nav>About Navbar</nav>, let's go ahead and put a <main></main> element inside. The <main></main> element is where we'll put the {children} for this AboutLayout.

To finish this, we'll go ahead and save that file.

The file layout.tsx will look like this:

export default function AboutLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <>
      <nav>About Navbar</nav>
      <main>{children}</main>
    </>
  );
}

In our browser again, looking at the home page, let's go to the URL and add /about.

http://localhost:3000/about

Now we have the Navbar that applies to the entire application, then we have the About Navbar under that, and lastly, we have the word About underneath.

Note: We can use the forward and back buttons to navigate between pages.

Adding links to pages

Let's go and add some links to our pages to navigate between the two as well, so I'll come back to Visual Studio Code. Let's visit the page inside of the about directory and we'll add a link there first, so at the top of the page I need to add:

import Link from "next/link";

If you're familiar with react-router, this is a lot like using react-router when we import a link there from that library.

After we add the import we're going to add a fragment here and put an <h> inside of that fragment.

<>
  <h1>About</h1>
</>

I'm just going to <Link> this back to the home page, so that's just the "/" for the root directory, and then we'll have a link to the home page just for the text.

<Link href="/">Link to Home Page</Link>

The about/page.tsx file should now look like the following:

import Link from "next/link";

export default function About() {
  return (
    <>
      <h1>About</h1>
      <Link href="/">Link to Home Page</Link>
    </>
  );
}

When we save the file, we can see in the browser if that link has been added, so we need to go forward to our /about, and there it says: Link to Home Page and yes, we get a pointer with our cursor, and when we click that, we go back to the home page.

Now let's do the same for the home page. When we come back to the page.tsx in the app directory app/page.tsx, notice not inside the about directory,

and here we can import a link as well.

import Link from "next/link";

Just underneath the Hello, welcome we'll put another link there.

<h1 className={inter.className}>Hello</h1>

<h2 className={inter.className}>Welcome to...</h2>

I am going to add a line break and type Go to About Page between Link and save the file.

<br />
<Link href="/about">Go to About Page</Link>

The app/page.tsx file should now look like the following:

After saving, we can see in the browser that the Go to About Page link has been added, so we need to go forward to our /about, and there it says: Link back to Home Page as we saw before, and yes, we also get a pointer with our cursor, and when we click that, we go forward to the about page.

Conclusion

In this article, we learned how to use the new experimental app directory in Next.js 13. We also saw how we create new pages within the app folder and how we create another folder within the app directory where we can create more pages, route them, and link to them.

What's next?

During our upcoming part 3, we will delve into the topics of CSS modules, adjustments with metadata, and loading. It is important to prioritize progress rather than perfection, as even small advancements made each day can lead to significant results.

Thanks for the read! Now go practice & build something awesome!

A Beginner's Guide to Building Your First Next.js Application: Step-by-Step Tutorial

Jose Calvario — Tue, 28 Mar 2023 12:46:52 +0000

Learn how to get Next.js version 13 set up and installed for the rest of the beginner tutorial series.

Getting Set Up in Next.js

In this series, we’re going through the basics of learning the static site generator, Next.js.

We’ll go through installing Next.js 13, create a few pages, and a blog, and finally take a look at the data files. Everything we do will be built from scratch, so, no previous Next.js knowledge is necessary only the basics of HTML, CSS, JavaScript, and React. By the end of this series, we’ll have the skills and knowledge to build our own Next.js projects from scratch.

Prerequisites

If you intend to follow along with this tutorial on your system, please ensure you have the following:

A basic understanding of working with the terminal.
A Laptop or PC with Windows installed
An Internet connection
Git is installed on your local machine (optional). For more details on accomplishing this, review Installing & Setting Up Git on Windows.
A GitHub account. For more details on accomplishing this, review How to get started with Git and GitHub
The latest version of Visual Studio Code is installed on your machine.
Basic knowledge of HTML, CSS, JavaScript, and React.

Let’s get started!

Why use Next.js?

Next.js is a popular open-source framework for building server-side rendered react applications. It offers a range of benefits that can make developments faster, more efficient, and more scalable.

Some key benefits of using Next.js are:

1 - Easy setup: Next.js provides a simple and easy setup process, with many features pre-configured for a variety of use cases.

2 - Wide community: Next.js has a large and active developer community, with many resources available for learning and troubleshooting.

3 - Server-Side Rendering: Next.js provides server-side rendering (SSR) out of the box, allowing for faster page loads and better search engine optimization (SEO). SSR also provides better accessibility for users with slower internet connections or limited device capabilities.

4 - Automatic Code Splitting: Next.js automatically code-splits pages, optimizing them for performance and minimizing the amount of JavaScript required to load each page.

5 - Built-in API Routes: Next.js includes API routes, allowing developers to easily create and manage server-side APIs without additional configuration.

6 - SEO optimization: With its server-side rendering capabilities, Next.js can improve SEO rankings and visibility.

7 - Static site generation: Next.js has a built-in static site generation feature, so we can generate static files that can be served from a CDN for faster loading times and improved SEO.

8 - Greater developer experience: Next.js has excellent developer experience, with features for hot reloading and building, debugging, and testing.

9 - TypeScript Support: Next.js has excellent TypeScript support, making it easier for developers to write safe and maintainable code.

10 - Extensible: Next.js provides a robust API that allows developers to extend its functionality, making it a versatile option for a wide range of projects.

11 - Hot Module Replacement (HMR): Next.js allows for HMR, which speeds up development time by allowing us to see code changes immediately without having to refresh the page.

12 - Automatic code splitting: By default, Next.js automatically splits up code chunks and only sends the code the user needs, which can improve website loading time.

14 - Automatic Image Optimization: Next.js optimizes images automatically to improve page performance and reduce load times.

15 - Customizable Server APIs: Next.js provides options to customize server-side APIs, which can be used to build more complex applications.

Overall Next.js can help improve website performance, streamline development, and offer a better experience for both developers and end users.

What is Pre-Rendering?

By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript, which is what React does.

React sends down this huge bundle of JavaScript, and then everything is rendered in the client, which is the browser. That's on the client side. Pre-rendering can result in better performance and SEO.

Each generated HTML page is associated with minimal JavaScript code (instead of a large bundle) code necessary for that page.

Hydration is the name given to the process in JavaScript frameworks to initialize the page in the browser after it has previously been server-rendered. While the server can produce the initial HTML we need to augment this output with event handlers and initialize our application state in a way that it can be interactive in the browser.

What is Static Site Generation (SSG)?

Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering. The difference is in when it generates the HTML for a page.

Static Generation: The HTML is generated at build time and will be reused on each request, this is what's recommended it's the most efficient it's built on the server and then it can be sent out and we're going to talk about CDN’s as well which is a Content Delivery Network and that's where the static generation becomes very useful.

What is Server side-rendering

Server-side Rendering: The HTML is generated on each request. Server-side rendering is also very useful but it's not as recommended as the static site generation, here the HTML is generated on each request it's still generated from the server not on the client side however both of these can be combined with client-side data fetching as well which lets us create a Hybrid Next.js app and we can kind of have the best of both worlds when that happens.

So why is this static generation so important? Let's look at what a CDN is.

What is a Content Delivery Network (CDN)?

A content delivery network (CDN) is a geographically distributed group of servers that caches content close to end users. A CDN allows the quick transfer of assets needed for loading Internet content, including HTML pages, JavaScript files, stylesheets, images, and videos.

How does a Content Delivery Network (CDN) work?

Now on Cloudflare how does a CDN work?

Again a Content delivery network is a network of servers linked together to deliver content as quickly cheaply reliably and securely as possible to improve speed and connectivity a CDN will place servers at exchange points between different networks so if we have generated our site statically our site can be cached at these different servers and ready to serve faster.

If we have a look at this map which tells us what's happening here, we have this origin server right there in orange color, but there are all of these CDN servers that is blue that we see there and the user just has to go to this CDN server. So if we've cached our site out at these other servers they don't have to go all the way here and get more performance, essentially faster load times.

Now that we've completed a quick discussion of the benefits of Next.js and really what separates it from a traditional React application because this React framework has many benefits for us.

Looking at Next.js 13 Documentation

If we look at the documentation, we can see it has a link that says: see the new beta docs. Now, this is an important note because Next.js 13 was recently released and there are some major changes, so any previous Next.js tutorials before Next.js 13 have changed things quite a bit, I must say.

One thing I like about Beta Docs is their dark mode.

Installing Node

The first thing that we need to have is node.js, and it's not that we have to know node.js already, but we do need it installed on our system. We can see that it says node.js 16.8 or later.

When we visit the node.js website, currently they're on version 18.14.0 LTS, which means for long-term support, so we could download and install that if we don't have it already because we're going to need at least node.js version 16.8 or later like we saw on the Next.js Beta Docs Page, we can see there is support for Mac OS Windows and Linux as well, so we should be fine there. Just make sure we have node.js up to date.

Creating a Next.js 13 project

If we scroll down to the Beta Docs page on the Installation tab, we see Automatic Installation. It has the --experimental-app at the end, but that's just because we're still in beta and the app directory and everything new about it is still considered experimental, however, they are moving forward with that, which is why we want to go ahead and copy this npx create-next-app@latest --experimental-app.

Click the following clipboard icon (or copy that with Ctrl C) to copy the code:

npx create-next-app@latest --experimental-app

1 - Let's open the terminal in our IDE environment (Visual Studio Code) by using the menu in the editor: Terminal > New Terminal.

2 - I'm going to open a project directory, for nextjs-series in the terminal window.

I'm going to just PASTE that code we copied before in.

npx create-next-app@latest --experimental-app

3 - Now press ENTER and this will install Next.js, but it's going to ask us a few questions, that we have to answer.

4 - First, I'm just going to refer to this nextjs-one as the tutorial lesson for our Next.js series.

5 - After that, it asks if we would like to use typescript, and we choose —YES (in the beta docs even the examples are in typescript) - just press —ENTER.

6 - The next question is about ESLint I'll go ahead and say —YES for that also.

7 - Another question is, if we would like to use the source directory —No I don't, because I want to use the new app directory we'll just say —NO to the question.

8 - The last question is about the import Alias we would like to configure. We just keep it that way, then we just going to press —ENTER and go with the DEFAULT.

9 - Now it's going to install the application.

Here is what these steps would look like:

Ok to proceed? (y) YES

Note: We could probably just do the y or Yes it works as well.

What is your project named? ... nextjs-one
Would you like to use TypeScript with this project? ... No / YES
Would you like to use ESLint with this project? ... No / YES
Would you like to use src/ directory with this project? ... NO / Yes
What import alias would you like configured? ... @/* ...Just hit ENTER
Installation starts...

10 - I'm going to drag this over so we have Visual Studio code in the full screen and go ahead and show that file tree once again because we'll want to look at all of the new files that we get, and now that we've created our application and we have the directory here, what I want to do is change directory cd into this here, but I'm just going to close this terminal.

11 - I'm going to go to the file menu, and I'm going to open that folder, which would be Ctrl + K + Ctrl + O.

12 - I'm going to open up this nextjs-series and there's our nextjs-one, we open that, and now we can see everything that was installed over here in the file tree.

Looking at Files and Folders

Let's quickly discuss what files and folders we have here.

There is a README.md file, a file with just some directions, like npm run dev to go ahead and start our application, it's going to be on http://localhost:3000 and you have more directions below as well.

We have a package.json file —notice we have some scripts. We're interested mostly in the "dev": "next dev", script, so we would type npm run dev when we want to start our development environment. The "build": "next build" and "start": "next start" scripts, are things that would be done on the server. There's also something for "lint": "next lint" as well, so we're only going to be using "dev": "next dev" for the purpose of this tutorial.

We can see the dependencies that were automatically added for us here, such as "typescript": "5.0.2" and "next": "13.2.4" and eslint": "8.36.0" and other dependencies:

 "dependencies": {
    "@types/node": "18.15.7",
    "@types/react": "18.0.29",
    "@types/react-dom": "18.0.11",
    "eslint": "8.36.0",
    "eslint-config-next": "13.2.4",
    "next": "13.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.0.2"
 }

Let's see another file: the package-lock.json —that's something we have probably seen before in other React projects as well.

Then there is a next.config file —I'll explain more about the file later on.

There is also a .eslintrc.json —a config file for a tool named ESLINT. ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

There's the tsconfig.json —that's something we have probably seen before if we've used typescript so really nothing new there.

We also have the .gitignore file, and that's, of course, related to Git and any file that we want to ignore when pushing to Github or any other version control option.

Finally, there's a grayed out file: next.env.t.ts and that's a file that we should not change, and it says:

// NOTE: This file should not be edited // see
https://nextjs.org/docs/basic-features/typescript for more information.

Note: This file should not be edited, we'll just leave it like that.

Let's talk about the public directory —this is where some images, some svgs, and an icon file are. This is where we would put any static resources that we would want, and images are a good example of that.

Then we have the node_modules folder, which we should be familiar with.

We can think of the node_modules folder as a cache for the external modules that our project depends on. When we npm install them, they are downloaded from the web and copied into the node_modules folder, and Node.js is trained to look for them there when we import them (without a specific path).

Because the node_modules folder can always be completely recreated from scratch by simply reinstalling all the dependent modules, I refer to it as a cache. (That should be listed in our project folders).

Important Note: The node_modules folder contains generated code. This is not code we've written, and we should never make any updates to the files inside node_modules because there's a pretty good chance they'll get overwritten the next time we install some modules.

Then the new app directory appears, and this is where we see our basic pages.

Here is where we have the basic page.tsx not an index.tsx and that's what we're using here for typescript 'tsx' files —Like I said this is the basic page.tsx that we'll see once we start our application.

Then there are some styling files, like here in a module page.module.css.

There are also some styles in the file globals.css that we have right here:

There is also a layout.tsx

Important Note: Next.js supports routing. With the react-app maybe we've used react-router before; we won't have to do that with Next.js, it's already built-in.

Accessing the Development Site

So let's go ahead and open a terminal window once again, and I'm going to type in the following:

npm run dev

This will start our basic application. We can see it starting up and we see all of this information here in the terminal but here is the URL we can press control and then just mouse click to follow that click and it's going to launch that in Chrome.

ready - started server on 0.0.0.0: 3000, url: http://localhost:3000

Once the development server is running, you will be able to browse to http://localhost:3000. or maybe http://localhost:3333.

Here is our basic page, visible in the browser.

We have the full page that has started, and this was that page.tsx that we saw inside of the app directory —Now as cool as this looks, let's go ahead and make some changes.

Let's just copy one of these headers down here:

<h2 className="{inter.className}">Docs <span>-&gt;</span></h2>

Then remove Docs <span>-></span> because we won't need this arrow.

Paste this code twice somewhere in Line 34 and Line 36:

<h1 className="{inter.className}">Hello</h1>

<h2 className="{inter.className}">Welcome to...</h2>

When we save this file, we should see that our development environment reloads the page quickly. Everything updates immediately, and now we have our Hello! and Welcome to... Next.js 13 page instead of what we previously had, and it happens that fast.

Conclusion

We've learned more about what Next.js is and why companies are using it and we've learned how to start the basic Next.js development environment and get our first app going.

What's next?

In our next lesson, we’ll create our first page and set up a layout.

Remember to keep striving for progress over perfection, and a little progress every day will go a very long way.
In this series, we’re going through the basics of learning the static site generator, Next.js.

Why Use Pre-Configured Cloudcannon Themes in Your Jamstack Project (and How to Install Them)?

Jose Calvario — Tue, 21 Mar 2023 12:11:36 +0000

As a website developer, you are always on the lookout for ways to create beautiful, functional websites quickly and efficiently. One way to do this is by using pre-configured Cloudcannon themes.

Intro

This guide will walk through the steps required to get your Next.js pre-built Cloudcannon site ready to configure and deploy to Cloudcannon.

Prerequisites

If you intend to run this lab on your system, please ensure you have the following:

A basic understanding of working with the terminal.
A Laptop or PC with Windows installed
A Internet connection
Git installed on your local machine (optional). For more details on accomplishing this, review Installing & Setting Up Git on Windows.
A GitHub account. For more details on accomplishing this, review How to get started with Git and GitHub
The latest version of Visual Studio Code is installed on your machine.

What this Guide Covers:

Benefits of using pre-configured Cloudcannon themes
Cloning a pre-built Website Template repository from GitHub
Setting up your Jamstack project using the Terminal
Instructions for running the project
Accessing the development site
The folder structure of the template
Editing the components and the overall theme
Deploying the project on Cloudcannon (external resource)

Benefits of using pre-configured Cloudcannon themes

Cloudcannon themes are pre-built website templates that come with all the necessary files and plugins to create a complete website. This means that you don't have to start from scratch every time you create a website. Instead, you can use a pre-configured Cloudcannon theme as a starting point.

Here are some benefits of using pre-configured Cloudcannon themes:

Saves Time and Effort

One of the biggest benefits of using pre-configured Cloudcannon themes is that it saves you time and effort. With a pre-built theme, you don't have to spend hours designing and coding a website from scratch. Instead, you can simply customize the theme to suit your needs.

Professional Design

Cloudcannon themes are designed by professional web designers, which means they are visually appealing and user-friendly. These themes are designed using best practices and are optimized for performance, which means your website will look great and load quickly.

Mobile-Friendly

More and more people are using mobile devices to browse the internet, which means your website needs to be mobile-friendly. Cloudcannon themes are designed to be responsive, which means they will look great on any device.

Easy to Customize

Another benefit of using pre-configured Cloudcannon themes is that they are easy to customize. You can customize the theme to match your branding, add your own content, and make any necessary changes.

Affordable

Creating a website from scratch can be expensive, especially if you hire a web designer or developer. Using a pre-configured Cloudcannon theme is much more affordable since the cost of the theme is much lower than hiring someone to create a website from scratch.

The pre-built Website Template "Justice"

The pre-built website template Justice provides an easy starting point for building a Law firm themed business template for Next.js. Browse through a live demo. Increase the web presence of a law firm or business with this configurable theme. You can also check out the live demo of this template.

Features

Contact form
Pre-built pages
Pre-styled components
Blog
Post category pages
Disqus comments for posts
Staff and author system
Configurable footer
Optimised for editing in CloudCannon
RSS/Atom feed
SEO tags
Google Analytics

Getting Started

Effort: 10 mins

To create a new project, we'll use the justice-nextjs-template from Cloudcannon's Github repository.

1 - Access Cloudcannon's justice-nextjs-template Github repository.

2 - Click Use this Template, then

3 - Click Create New Repository

A new Window will open.

4 - Enter a repository name. For example law-firm. Optionally, add a description of your repository & choose the Owner. That should be you!

Then click Create Repository from template.

This will generate a Repository on your Github account. You just become the owner of this template.

Clone the repository

A clone is a local copy of a remote repository. Before you can clone the repository, you first need its HTTPS URL, which provides secure access to it.

To clone the repository, complete the following steps:

1 - Click the button Code on the repository's main page.

2 - Click the clipboard icon to copy the URL. Make sure the HTTPS tab is active.

3 - Open the terminal in your IDE environment by using the menu in the editor: Terminal > New Terminal.

4 - Head over your Projects Directory in your Terminal

5 - Paste the following command with the HTTPS URL you copied earlier:

 git clone <your repository HTTPS URL>

For example: Click the clipboard icon to copy the code, but change the repository User.

 git clone https://github.com/Joshhortt/demo-website-starter.git

6 - Hit ENTER

7 - Now change cd into that directory and open up your project directory by typing the following commands:

cd law-firm
code .

Running the Project

Running the project in development is very straightforward. To run the project, head over to the ‘website’ folder and run the following commands:

1 - In your terminal, run yarn install or npm install which is going to install the dependencies.

npm install

2 - After that, run yarn dev or npm run dev which is going to start up a local development server, which you can open up in a new tab.

npm run dev

Accessing the Development Site

Once the development server is running, you will be able to browse to http://localhost:3000 or maybe http://localhost:3333

1 - Click on Follow Link which you can open up in a new tab. (url: localhost:3333).

2 - Once it's loaded, Voilá! you can see your new website, where you have a complete website with a home page, an about page, a services page, a contact page a blog page with some blog posts that you can edit and configure the way you want.

Now I am not going to dig too much into the code, but if you have a look at the Folder structure of this Ready Website you can see that this looks like a pretty awesome Business Website ready to use.

Folder Structure (Website)

This section provides you with a better understanding of the folder structure.

law-firm
|
|-- .cloudcannon
|   |-- initial-site-settings.json
|-- components
|   |-- layouts
|   |   |-- default.jsx
|   |   |-- page.jsx
|   |   |-- post.jsx
|   |-- icon.jsx
|   |-- staff-member.jsx
|   |-- post-summary.jsx 
|   |-- post-summary-details.jsx
|-- content
|   |-- pages
|   |   |-- about.md
|   |   |-- blog.md
|   |   |-- contact-success.md
|   |   |-- contact.md
|   |   |-- index.md
|   |   |-- services.md
|   |   |-- terms.md
|   |-- posts
|   |   |-- business-mergers.md
|   |   |-- real-estate-flipping.md
|   |-- staff-members
|   |   |-- jane-doe.md
|   |   |-- john-doe.md
|   |   |-- _defaults.md  
|-- data
|   |-- company.json
|   |-- footer.json
|   |-- seo.json
|   |-- site.json
|-- lib
|   |-- data.js
|   |-- rss.js
|-- pages
|   |-- blog
|   |   |-- [slug].jsx
|   |   |-- index.jsx
|   |-- 404.jsx
|   |-- [slug].jsx
|   |-- about.jsx
|   |-- contact.jsx
|   |-- index.jsx
|   |-- _app.jsx
|   |-- _document.jsx
|-- public
|   |-- uploads
|   |   |-- building.jpg
|   |-- apple-touch-icon.png
|   |-- favicon.png
|   |-- touch-icon.png
|-- styles
|   |-- forms.scss
|   |-- _layout.scss
|   |-- _typography.scss
|   |-- cloudcannon.scss
|   |-- main.scss
|-- .eslintrc.json
|-- .gitignore
|-- LICENSE
|-- README.md
|-- _screenshot.png
|-- cloudcannon.config.cjs
|-- next-sitemap.config.js
|-- next.config.js
|-- package-lock.json
|-- package.json
|-- siteicon.png

Folders & Files

.cloudcannon Initial config file

components This folder includes another folder called layouts and four files:

layouts
icon.jsx
staff-member.jsx
post-summary.jsx
post-summary-details.jsx

components/layouts - Within layouts, are three files. Where you can update the Call to action description, Navbar names, Footer links, Add the privacy policy link to your footer, update the posts author title and much more..

default.jsx
page.jsx
post.jsx

content - Within content, are three folders with markdown files.

pages
posts
staff-members

content/pages - These are all the Template pages.

about.md
blog.md
contact-success.md
contact.md
index.md
services.md
terms.md

content/posts These are the template Blog Posts.

business-mergers.md
real-estate-flipping.md

content/staff-members - These are the posts authors, But you can make them your Company team members If you prefer.

_defaults.md
jane-doe.md
john-doe.md

data - Within data, are four JSON files.

company.json - Where the company's details are.
footer.json - Where the Footers' pages links & social icons are.
seo.json - Where the site and author details are.
site.json - Where you can add your Google Analytics and Disqus.

lib - Within lib, are two files. Normally You don´t need to change anything on these files.

data.js
rss.js

pages Within pages, are one folder and seven files.

blog
404.jsx
[slug].jsx
_app.jsx
_document.jsx
about.jsx
contact.jsx
index.jsx

pages/blog - Within blog, are two files.

[slug].jsx
index.jsx

public - Within public, are one folder called uploads and three PNG files.

uploads
apple-touch-icon.png
favicon.png
touch-icon.png

public/uploads

building.jpg - This is the Home page Banner Image.

styles - Within styles, are five SCSS files.

forms.scss
_layout.scss
_typography.scss
cloudcannon.scss
main.scss

root directory - The other project file are:

.eslintrc.json
.gitignore
LICENSE
README.md
_screenshot.png
cloudcannon.config.cjs - Important Global configuration file
next-sitemap.config.js
next.config.js
package-lock.json
package.json
siteicon.png

Initial Setup

Add your site and author details in content/data/seo.json.
Add your Google Analytics and Disqus keys to content/data/site.json.
Get a workflow going to see your site's output (with CloudCannon or Next.js locally).

Editing the Template

Justice is already optimised for adding, updating and removing pages, staff, posts, company details and footer elements in CloudCannon.

Posts

Add, update or remove a post in the Posts collection.
The Staff Author field links to members in the Staff collection.
Change the defaults when new posts are created in content/posts/_defaults.md

Contact Form

Preconfigured to work with CloudCannon.
Sends email to the address listed in company details.

Staff

Reused around the site to save multiple editing locations.

Footer

Exposed as a data file to give clients better access.
Set in the Data / Footer section.

Company details

Reused around the site to save multiple editing locations. Set in the Data / Company section.

If you want to read my latest article explaining How to configure and Edit Jamstack sites on cloud cannon please click here.

Deploying the project to Cloudcannon

If you want to deploy this template or your own edited Website to cloudcannon, I'll explain in detail how you can achieve this step. Please read this article How to deploy Jamstack sites to cloudcannon

Need further assistance?

Ask the Cloudcannon team or leave a comment. I' 'll try to get back to you as soon as I can.

Conclusion

Using pre-configured Cloudcannon themes can save you time and effort, provide you with a professional design, ensure your website is mobile-friendly, and be easily customized to suit your needs – all while keeping your budget in check. So the next time you need to create a website, consider using a pre-configured Cloudcannon theme as a starting point.

What's Next?

If you want to follow along with more advanced stuff in the next article. I'll talk about How to add a new site to enable branching workflows on cloudcannon?

Thanks for the read! Now go practice & build something awesome!

How to Configure cloudcannon collections to enable Post & Page content editing?

Jose Calvario — Sat, 11 Mar 2023 17:29:03 +0000

Next.js is one of the most popular React-based SSGs. CloudCannon makes it easy to store your content in your Git Repository and have non-developers update it. Better yet, the editing is all done in context with minimal configuration.

Intro

This guide will walk through the steps required to get your Next.js site you previously built, editable, and living on CloudCannon.

Hands-on Lab:

Effort: 25 mins

Objectives

After completing this reading, you will be able to:

Edit your deployed Static Site within cloudcannon UI.
Configure cloudCannon collections locally to enable Posts content editing.
Configure cloudCannon collections locally to enable Pages content editing.
Make Git-based changes through the CloudCannon UI.

Prerequisites

If you intend to run this lab on your system, please ensure you have the following:

A basic understanding of working with the terminal.
A Laptop or PC with Windows installed
A Internet connection
Git installed on your local machine. For more details on accomplishing this, review Installing & Setting Up Git on Windows.
A GitHub account.
The latest version of Visual Studio Code is installed on your machine.
The cloned demo website starter deployed to cloudcannon already up and running.

Note: This is a follow-up tutorial, it does require you to have created the Hands-on-Lab, as covered in the article How to deploy Jamstack sites to cloudcannon to make the most out of it.

So let’s get started with another capability of cloudcannon that can give us the ability to actually manage and edit this content inside of our project.

We can actually go through and mainly find all the files here,

that we actually want to edit such as if we wanted to edit our homepage,

or the about page or any other page, we can edit the source right here:

But we have other options by using a configuration locally in our project so that cloudcannon can actually see what we define as our content.

If we head over to the cloudcannon documentation,what we ultimately want to do is Defining our collection, and we can do that by defining our collections Configuration along with all the other options that we're going to actually need, which we're going to walk through now.

Note: It's recommended to spend some time to read Cloudannon Documentation

I'm going to create a file in the root of my project called cloudcannon.config.js

Then I start by defining our collection configuration.

Let's walk through this new code:

1 - I start by defining a module exports. I'm going to set that to a new object.

2 - Then we want to add a key for our actual collection of content that we're about to set up, and we have two things that we want to eventually set up.

Our pages and our posts.

3 - Following that, I insert the following block of code into our Posts collection:

   posts: {
      name: "Posts",
      path: "src/_posts",
      parser: "frontmatter",
      output: true,
      url: "/posts/[slug]",
    },

Note: If we look inside of the pages directory & posts directory we have the setup that shows: /posts/[slug]

Note: When I add /posts/[slug] it's not going to be something that has to line up one-to-one with the actual name of that javascript file [postSlug].js. It's going to just be this slug in the brackets because that's what cloudcannon is going to understand as the slug. Now that we have our post finally set up, let's get this up to cloudcannon and see what happens this time after we commit these changes.

We save the file, and then we're going to commit and push these changes to Github.

$ git add .
$ git commit -m "Add Posts object to collection config"
$ git push -u origin main

Note: Cloudcannon automatically updates these changes for us.

We can actually see that under Files. We now have another src option where our posts are.

If we click on that we can now see all those different posts that we had locally as files.

If we click into one again we can see that we can open up one of these posts with a Content Editor,

A nice looking editor, not just the source of the code, where we can make changes to any of the content in our site, including all the frontmatter that belongs to each and every one of those markdown files that is visible on the left: Title, Date & Categories.

Now the cool thing is we can select this drop-down and we can see that we have a couple of different options for how we want to interact with this file particularly we still have this option to edit the source of it by clicking on the Source Editor.

If you're not familiar with the structure of markdown we have this frontmatter at the top which just defines a few data points which is what we saw on the left of the post we had opened with the Content Editor before. The rest of it, is going to be our content which is parsed inside of our project and then we can actually edit it as content, if we prefer right inside this Source editor.

Making Page content editable and making Git-based changes through the CloudCannon UI

But we also want to manage our pages like this right, so I'm going to go ahead and copy & paste this object and I'm going to rename everything instead of posts to pages. You can see the new updated block of code below:

pages: {
      name: 'Pages',
      path: 'src/_pages',
      parser: 'frontmatter',
      output: true,
      url: '/[slug]'
    },

Let's walk through this new code:

Just like I did with Posts before I'm going to make sure that the name is actually capitalized, and the biggest difference here is, we want to make sure that we're passing in the url as the appropriate url. Now, we don't actually have pages in front of the slug like this; if we look at the file inside of pages, it just exists at the root of the pages directory called [pageSlug].js. The way that works is if we don't manually define that file, it's going to fall back to that dynamic page slug and create it using that template, so we're going to leave this just as /[slug] where it's going to be able to create those files for us.

Here's the final javascript code of cloudcannon.config.js

module.exports = {
  collections_config: {
    posts: {
      name: "Posts",
      path: "src/_posts",
      parser: "frontmatter",
      output: true,
      url: "/posts/[slug]",
    },
    pages: {
      name: "Pages",
      path: "src/_pages",
      parser: "frontmatter",
      output: true,
      url: "/[slug]",
    },
  },
};

Just like before, once it is finished, we're going to commit and push these changes to Github.

$ git add .
$ git commit -m "Add Pages object to collection config"
$ git push -u origin main

Note: Just like before, Cloudcannon automatically updates these changes.

We can see now in our Dashboard that Github updated the cloudcannon.config.js file in just a matter of seconds.

We have the pages area:

Where we can select our about page and edit any of the content that we'd like.

Now in terms of actually editing content, we can do this right inside of this Content editor.

For instance, if I wanted to add a new sentence, "Please read the articles by order"

And I click save

What that's going to do is actually update that file inside of my Git project repository, since these files are Git based and then it's going to Redeploy which we saw just happened automatically.

If we look back at our GitHub project we can see that we have this new commit called updated source pages about via cloudcannon where it actually adds that change and removes the heading 2 from the first sentence.

And to prove that it works we can see once it's done we can actually head back to our Dashboard and see that the About page was just updated.

Now to see it in real-time, open up our site. We can navigate over to the about page and we see that the sentence is now added and live...

Summary

In addition to providing us with a great way to manage our content directly using the Content Editor, cloudcannon also allows us to edit and redeploy our production projects out to the web very quickly.

Are you a fan of the jamstack let me know in the comments and let me know what's your favorite part of building with the Jamstack.

What's Next?

If you want to follow along with more advanced stuff in the next article. I'll talk about How to add a new site to enable branching workflows on cloudcannon?

Thanks for the read! Now go practice & build something awesome!

How to deploy Jamstack sites to cloudcannon?

Jose Calvario — Sat, 04 Mar 2023 15:12:59 +0000

Intro

We're going to learn how we can easily deploy a Jamstack app and manage git-based Markdown content with cloudcannon. Cloudcannon gives you and your team awesome collaborative features with a great UX developer experience that generally allows you to deploy sites that are going to be performant for your user experience. If you want to learn more about all the awesome features cloudcannon provides on top of what we're going to work through, make sure you head over to cloudcannon where you can sign up for your account for a free trial...

Hands-on Lab:

Effort : 30 mins

Objectives

After completing this reading, you will be able to:

Clone project files from a remote repository using the command line.
Install Dependencies.
Create a new Repository on Github.
Signup for Cloudcannon.
Add a new site synced to a remote repository on Github.
Commit and push changes to a remote repository.
Deploy new site to cloudcannon.

Prerequisites

If you intend to run this lab on your system, please ensure you have the following:

A basic understanding of working with the terminal.
A Laptop or PC with Windows installed
A Internet connection
Git installed on your local machine. For more details on accomplishing this, review Installing & Setting Up Git on Windows.
A GitHub account.
The latest version of Visual Studio Code is installed on your machine.

Tools & Frameworks

If you're not familiar with the Jamstack, it's traditionally based on being able to provide users static sites where that first load isn't going to have to do any kind of rendering on the server, instead, we use our static site generator or framework of choice, which pulls in all of our content at compile time, where we then can publish that site basically wherever we want, such as an awesome provider like cloudcannon.

To see how this works, we're going to use the REACT framework and Nextjs which give us a ton of features out of the box, including routing and data fetching, and it just helps us get super productive with our apps.

Now if you're already familiar with Nextjs maybe you're wondering, doesn't it need a server? And while we do this at compile time, we can use tools like get static props and then statically export our site, which we'll see how we can do that, and then deliver a pure static HTML site with all the assets included.

Create a new app from a demo website starter

Now, particularly, we're going to use this demo website starter that I put together, which is just going to give us a simple blog website out of the box with some markdown capabilities that are generating the content for the site.

If you want to follow along, you can find the link to this starter right here

1 - So to get started, I'm going to go ahead and copy the following command:

 $ git clone https://github.com/Joshhortt/demo-website-starter.git

2 - I'm going to go ahead and paste that code into my terminal.

3 - I'm going to type cloudcannon-app after that URL because I want my app to have a nicer name.

It's going to clone down that project from GitHub to your chosen Local Directory

4 - I can now change cd into that directory.

I'm going to run yarn install or npm install which is going to install the dependencies.

4 - After that, I'm going to run yarn dev or npm run dev which is going to start up a local development server, which I can open up in a new tab. (url: http://localhost:3000)

5 - Once it's loaded, we can see our new website, where we just have some blog posts on our main page, an about page, and a newsletter page, and it's just some sample content that we have in there to get started with our new website.

Now we're not going to dig too much into the code, but if we go to pages and go to index.js we can see that for the most part, this looks like a pretty basic react application, but if we scroll down to the bottom, we see we have this function that we talked about earlier called get static props which is going to allow us to do, is get our data at compile time, meaning before we upload it and deploy it, that way we can save all that hard work for the network request for when it's getting built and we can grab all that post data and pass it in as props into our application and not make our user pay for that actual networking time but ultimately get this application up and deployed over to cloudcannon.

Set up a new site on CloudCannon

So let's see how we can do that now if this is our first time logging into cloudcannon

We'll see that we're going to start on our account summary and we don't have any sites yet so we want to click return to sites

It is going to show us this UI

Now we can hit add your first site

A new page opens up. We have a few options but we're going to choose to connect our own files

We can say whatever our site name is going to be. Let's call it cloudcannon-app or whatever you want your site to be called.

We can then choose our source, and in particular, we're going to use github for this walkthrough.

Note: We also have support for gitlab and bitbucket or even uploading a folder from our computer if we'd like to.

Click on Authenticate

After selecting github and authenticating, this webpage opens up for us to give cloudcannon permission to access our github repository.

Just click Authorize Cloudcannon

Then we're going to need to select our repository, this means we're going to need to get our site up to a github before we can move forward.

I'm going to go ahead and first create a new repository over on github.

I'm going to call that cloudcannon-app just like I did locally, and I'm also going to click New repository.

Now we have a few instructions on how we can get our local project up and running now because of the way that NEXTjs already initialized git for us, and it already has a main branch

A new window will pop up with some git instructions, which we should type into our terminal.

All we need to do is these last two steps.

$ git remote add origin https://github.com/YOUR-USER-NAME/cloudcannon-app.git
$ git push -u origin main

Note: Just in case git wasn't initialized follow all these commands below

$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -M main
$ git remote add origin https://github.com/YOUR-USER-NAME/cloudcannon-app.git
$ git push -u origin main

Now after we finish pushing all files to our newly created github remote repository, if I refresh the page, we can see that I have my new github repository with all those files.

Going back over cloudcannon, I'm going to refresh the page and then reselect my github repository file source, that way inside of this search for your repository once it collects all my repositories I can search for my cloudcannon-app

We can see that it will pop up right here, and we can see that I have an option for either using my existing branch or creating a new branch. Now, because I only have a main branch at this point, I'm just going to use that and select main as that'll be the default production branch.

Next, click sync files to keep moving this process forward.

Now we can see that cloudcannon has actually detected what kind of site we have, particularly in NEXTjs, but we can also see that we have the ability to define our build options where we have our preserved paths, ours is going to be node modules. That makes a lot of sense. Note that we don't have any environment variables at this time, but if you do, this would be the place to add them.

When we go further down to our install options, like our command line options, this has npm install by default. Because I'm using yarn locally, I'm just going to go ahead and use yarn install but you can keep npm install if you decide to use npx and npm for your project, and then also for the build command: yarn build or leave npm build.

Now the tricky thing for the build command is that when we're using NEXTjs, we want to make sure that we're statically compiling this, and we'll see in a second that what we want to do is not only yarn build this, but we also want to do something called next export which we don't currently have an option for in our project.

So we're going to leave this as yarn build for now, and we're going to set the output path to out because that's where the folder is going to get compiled to, but then we can scroll down and we can see that we have two other options where we have to use the beta integration version of the cloudcannon reader, which we're going to select to check because we want cloudcannon to try to read the information of our repository, and then finally we can just leave the include get folder off as we don't need that part of our system.

Finally, as I said, we can click build site and that's going to go through and run all the commands and try to deploy our site once cloudcannon gets through all those steps,

We can see that mine was deployed to the random name of green-cassowary

If I open that up in a new tab we can see that it's Page Not Found.

If we click over to the status tab inside cloudcannon and I look inside, I can see all the build logs. I'm going to particularly select NEXTjs, and if I look through, it says that it cannot find that out directory as it doesn't exist, and that's because we're only currently building our NEXTjs site and now we also need to export it, as I said a while back.

Statically export the NEXT.js app

Inside the project, I'm going to open up my package.json file, and we can see under scripts that we already have a few options, and particularly, we see our build script going on, where all it's doing is running next build and that's great, but we want to also export it, so I'm going to tack on two && (and) signs and I'm going to add also next export right after next build which is going to export it to static files for us, so we can even test locally.

Inside the terminal, run yarn build or npm run build, where we can already see that it ran next build && next export and we can see that as it goes through, it's going to first build the site, just as we'd expect, and then we can see how it's going to work when we try to export it.

We can see after it goes through the build process that we had a successful export.

And we can even look inside our project under the out directory, where we see all those HTML files, which are exactly what's going to get deployed out to cloudcannon.

I'm going to run the following commands to commit my changes:

$ git add .

$ git commit -m "updating build script"

$ git push

What's going to happen is that as soon as we push that out, we can see that cloudcannon is already building that new site with that new commit automatically without us having to trigger a new build. That way, we can always make sure that we're keeping our production branch nice and up-to-date.

Once it's complete, we can open up that URL again, and we can now see that our new site is deployed to cloudcannon.

Summary

Cloudcannon gives us a great way to deploy our projects to the web.

Are you a fan of the Jamstack? Let me know in the comments what's your favorite part of the building with the Jamstack is.

What's Next?

If you want to follow along with more advanced stuff in the next article I'll talk about Making Page content editable and making Git-based changes through the CloudCannon UI.

Thanks for the read! Now go practice & build something awesome!

How to use Reduce in JavaScript

Jose Calvario — Mon, 20 Feb 2023 11:00:12 +0000

The reduce function of an Array is one of the most versatile functions in JavaScript. With it you can accomplish a lot of the functions from the Array and Math objects. It's job is to start with an array, and reduce those elements into some other type of data... which sounds vague, but you could use it to convert from an array to an object, an array to another array, an array to a number or an array to a boolean. Understanding how it works opens up a world of possibilities.

A few of the Math/Array functions we will cover in this article:

Let's Recreate Reduce

Before we see all of reduce's flexibility, let's understand how it works! Reduce's job is to iterate over each element of an array, calling a function (callback), passing both the current element, and what is called an "accumulator" value. The callback's job is to take the accumulator and the array element, and return the new version of that accumulator.

This may mean taking an accumulator that is a number and returning its value + 1, or taking an accumulator which is an array and returning that array with an additional element on the end. It's up to you, depending what type of data you would like to reduce your array to.

We also need an initial value, which will be the first value our accumulator takes before the callback is ever called.

function reduce(array, callback, initial) {
  // start our accumulator off as the initial value
  let acc = initial;
  // iterate over each element in the array
  for (let i = 0; i < array.length; i++) {
    // pass the accumulator and current element to callback function
    // override the accumulator with the callback's response
    acc = callback(acc, array[i], i);
  }
  // return the final accumulator value
  return acc;
}

result = reduce([1, 2, 3], (acc, num) => acc + num, 0);

Learn 10 different use cases of reduce()

The JavaScript reduce() method is very versatile, with some really handy use cases, even though it is widely considered to be the most confusing of all JavaScript iterators.

Let's take a look at some use cases for the JavaScript reduce() method.

Counting Array Length

The data we are starting with is an array of objects which represent people:

const people = [
  { id: "1", name: "Leigh", age: 35 },
  { id: "2", name: "Jenny", age: 30 },
  { id: "3", name: "Heather", age: 28 },
];

Although people.length would be the more performant and better solution, we can count an array's length by using reduce. Our initial value is 0, and each iteration will add 1 to the previous accumulated value.

result = people.reduce((acc, person) => acc + 1, 0);

1. Sum Numbers

We can sum numbers using reduce. Much like the length example above, we can start with 0, and instead of adding 1 upon each iteration, we can add the person.age property to our accumulated value.

result = people.reduce((acc, person) => acc + person.age, 0);

2. Mapping with Reduce

Yup... you can map using reduce! In this case our initial value is an empty array, and upon each iteration we can return an array with its previous value, plus the newest value added to the end of our array.

result = people.reduce((acc, person) => [...acc, person.name], []);

3. Array to Object

This is a technique I use all the time when I have an array of some object with an id, and I want to easily access these objects by their ID, rather than having to find them in an array each time. By having an object with each person's ID as the key, I can access them using the ID's value.

result = people.reduce((acc, person) => {
  return { ...acc, [person.id]: person };
}, {});

4. Find Max Value

The Math.max() function can be immitated using reduce by checking if the current element's value is greater than the accumulator. If it is, that becomes (by returning the value) the new max value, otherwise the previous accumulator (current max value) is returned.

result = people.reduce((acc, person) => {
  if (acc === null || person.age > acc) return person.age;
  return acc;
}, null);

5. Find Min Value

The Math.min() function can be immitated using reduce by checking if the current element's value is less than the accumulator. If it is, that becomes (by returning the value) the new min value, otherwise the previous accumulator (current min value) is returned.

result = people.reduce((acc, person) => {
  if (acc === null || person.age < acc) return person.age;
  return acc;
}, null);

6. Find Matching Element

The reduce callback function when immitating Array.prototype.find() contains three possibilities:

The accumulator is not null, meaning we have already found the value, so let's return it.
The current array element meets our criteria, so let's return it.
By returning null we tell the next iteration that the value has not yet been found.

result = people.reduce((acc, person) => {
  if (acc !== null) return acc;
  if (person.name === "Leigh") return person;
  return null;
}, null);

7. Check If Every Value Matches

When checking if every value matches a specific criteria, we will start with the assumption that every value will match... very optimistic!! If the accumulator becomes false, our callback will continue to return false, since every value must match, and otherwise will return true or false for the current element.

result = people.reduce((acc, person) => {
  if (!acc) return false;
  return person.age > 18;
}, true);

8. Check If Some Value Matches

Checking if some value matches a condition in our array involves a bit of pessimism. We'll start off with the assumption of false, and our callback function will return true as soon as the accumulator is true for the first time, and otherwise will return true or false on the current element.

result = people.reduce((acc, person) => {
  if (acc) return true;
  return person.age > 18;
}, false);

9. Group and Count Occurrences

As we've seen in the "Array to Object" example above, we can convert an array to an object, but this time we are looking to count the occurrences for a given key, in this case the status. Our return value will take the existing accumulated object, adding 1 for the current key's value (or initializing it to 0 if this is the first occurrence).

const orders = [
  { id: "1", status: "pending" },
  { id: "2", status: "pending" },
  { id: "3", status: "cancelled" },
  { id: "4", status: "shipped" },
];

result = orders.reduce((acc, order) => {
  return { ...acc, [order.status]: (acc[order.status] || 0) + 1 };
}, {});

10. Flatten Nested Arrays

In this last example we will start with an array of nested arrays, and reduce it into a flattened array of values. Because we will need to recursively reduce (flatten) arrays, we'll need to give our callback function a name (so it can be called within itself).

If the current element is an Array, it means we must reduce it until we arrive at at an element that can be appended to the end of the array we are producing. The initial value of our inner reduce call is the current accumulator value.

const folders = [
  "index.js",
  ["flatten.js", "map.js"],
  ["any.js", ["all.js", "count.js"]],
];

function flatten(acc, element) {
  if (Array.isArray(element)) {
    return element.reduce(flatten, acc);
  }
  return [...acc, element];
}

result = folders.reduce(flatten, []);

Mistakes to Avoid

If you don’t pass in an initial value, reduce will assume the first item in your array is your initial value. This worked fine in the first few examples because we were adding up a list of numbers.

If you’re trying to tally up fruit, and you leave out the initial value then things get weird. Not entering an initial value is an easy mistake to make and one of the first things you should check when debugging.

Another common mistake is to forget to return the total. You must return something for the reduce function to work. Always double check and make sure that you’re actually returning the value you want.

Conclusion

Knowing the use cases of some built-in functions in JavaScript can help you to improve your coding skills. Learning the use cases can gain some insights for you. You can implement some functions elegantly.
The reduce() method in JavaScript is also a useful built-in function. If you know how to use it, it is powerful. It helps you to write a smaller number of code lines, as in the example of summing numbers and so on.

Tools, Tips & References

Everything in this post came from a fantastic video on Youtube "Reduce: 10 Different Examples". I give Leigh Halliday full credit and I am grateful to him for everything I now know about using the Reduce Method In JavaScript. I have tried to rewrite much of what he explains in my own words as an exercise to better understand each concept. Also, it’s easier for me to reference an article, as opposed to a video, when I need to remember how to do something.
The MDN Reduce documentation labels what I called a total the accumulator. It is important to know this because most people will refer to it as an accumulator if you read about it online. Some people call it prev as in previous value. It all refers to the same thing. I found it easier to think of a total when I was learning reduce.
If you would like to practice using reduce I recommend signing up to freeCodeCamp and completing as many of the intermediate algorithms as you can using the reduce javascript method.

Thanks for the read! Now go practice & build something awesome!

How to install Git Bash for Windows to your local system?

Jose Calvario — Mon, 13 Feb 2023 19:54:53 +0000

What is Git Bash?

Git Bash for Windows is simply a package that includes both Git and Bash.

Git is an open-source version control system for tracking source code changes when developing software. It keeps a commit history that allows you to revert to a stable state in case you make errors in your code. Git also enables multiple developers to collaborate on the same code base.

Bash is a Unix command-line shell. The name is an acronym for Bourne-Again Shell. It comes with useful Unix commands like cat, ssh, SCP, etc., which are not usually found on Windows.

Objectives

After completing this reading, you will be able to Install Git Bash to your Local Computer.

Prerequisites

If you intend to run this lab on your system, please ensure you have the following:

A Laptop or PC with Windows installed
A Internet connection

Installing Git Bash for Windows

Estimated time: 10 minutes

To install Git Bash for Windows to your local system, complete the following steps:

1 - Go to the Git download image 1. Click Download [version number] for Windows, as shown in the following image:

You will be redirected to a new page and the download will start.

Note: If the download doesn't start, click Click here to download manually.

2 - Go to the folder where you saved the file and double-click to open it. Click Run to begin the installation.

3 - A GNU General Public License information window will open. Now Click Next to begin the installation.

4 - Select the location where you want to install Git Bash.

Note: It's recommended that you simply install to the default location. Click Next.

5 - Choose the components you want to install, or simply leave the default options selected. Click Next.

6 - You can change the name of the start menu folder or simply leave the default name Git as is. Click Next.

7 - Select the default editor for Git to use.

Note: You can use VIM, VSCode, etc. Just choose clicking the Dropdown Arrow to choose your preferred one. Click Next.

8 - Choose how you want to use Git from the command line. Click Next.

9 - Select Use the OpenSSL library. Click Next.

10 - Configure your line ending conversions for Windows by selecting the default option, Checkout Windows-style, commit Unix-style line endings. Click Next.

11 - Configure your terminal emulator to use with Git Bash by selecting the default option, Use MinTTY(the default terminal of MSYS2). Click Next.

12 - Configure the default behavior for a git pull by selecting Default (fast-forward or merge). Click Next.

13 - Select any additional options you want to install. (The default option is sufficient to use Git Bash successfully.) Click Next.

14 - You can enable experimental options if you choose to. By enabling these options, you will be able to try newer features that are still being developed. However, you do not have to select any experimental options to use Git Bash. Click Install to complete the installation with the options you have chosen. The installation runs and when complete, a Completing the Git Setup Wizard window opens.

15 -Leave the checkboxes selected and click Next.

The Git Bash terminal opens. You are now able to enter Git and Bash commands.

Summary

Congratulations, you have now successfully installed and launched Git Bash for Windows.

Download this Git commands cheat sheet to have all Git commands in one place for future use.

Thanks for the read! Now go practice & build something awesome!

How to Generate and add an SSH key to GitHub

Jose Calvario — Mon, 06 Feb 2023 18:49:55 +0000

Introduction

When dealing with a GitHub repository using commands, you will frequently need to identify yourself with your username and password. Instead, you can use an SSH key to authenticate yourself. As a result, entering the email and password will no longer be necessary.

SSH keys come in pairs, with a public key shared with services such as GitHub and a private key held solely on your machine. You will be allowed access if the keys match.

What is an SSH key?

An SSH key is an access credential in the SSH protocol. Its function is similar to that of user names and passwords, but the keys are primarily used for automated processes.

Hands-on Lab:

Effort : 30 mins

Objectives

After completing this reading, you will be able to:

Generate an SSH key
Adding an SSH key to GitHub

Prerequisites

If you intend to run this lab on your system, please ensure you have the following:

A basic understanding of working with the bash terminal
A Laptop or PC with Windows installed
A Internet connection
Git installed on your local machine. For more details on accomplishing this, review Installing & Setting Up Git on Windows.
A GitHub account.
The latest version of Visual Studio Code is installed on your machine.

1. Creating a GitHub account (optional)

To create an account in GitHub, complete the following steps:

1 - Go to the Join GitHub page and signup and create an account.

Note: If you already have a GitHub account, log in now.

2 - For more details on accomplishing this, review:
How to get started with git and github

2. Generating an SSH key

To generate an SSH key, complete the following steps:

1 - Launch a terminal. If you are using Windows, launch Git Bash.

2 - Type the following command in your terminal, replacing your email address with the email address that is linked to your GitHub account. When you have typed the command, press Enter.

ssh-keygen -t rsa -b 4096 -C "your email address"

A new SSH key is generated.

3 - You will be prompted to enter a directory to save the key. You can simply press Enter to accept the default location, which is a .ssh folder in the home directory. This means you will be able to locate the key in ~/.ssh/id_rsa.

4 - You will be prompted to choose a passphrase. You also have the option not to create a passphrase. To skip the passphrase, press Enter twice to confirm that the passphrase is empty.

5 - Optional: To navigate to the .ssh directory, and check the contents of the directory, run the following commands in the terminal:

cd ~/.ssh

and then,

ls

When you list the contents of the .ssh directory, you should see id_rsa and id_rsa.pub in the list of contents, where id_rsa is the private version of your key and id_rsa.pub is the public version of your key.

6 - You now need to add the SSH key to the ssh-agent, which helps with the authentication process. To start the ssh-agent, run the following command in the terminal:

eval "$(ssh-agent -s)"

7 - To add the key to the agent, run the following command in the terminal:

ssh-add ~/.ssh/id_rsa

3. Adding an SSH key to GitHub

To add an SSH key to GitHub, you need to copy the SSH key that you generated in the previous lab. Open a terminal and then complete the following steps:

1 - In the terminal, run the following command:

cat ~/.ssh/id_rsa.pub | clip

Note: If clip doesn't work, run cat ~/.ssh/id_rsa.pub in the command line and copy the output.

2 - Sign in to GitHub. At the top right, click the drop-down menu on your profile image and select Settings.

3 - From the "Personal settings" menu, select SSH and GPG keys, as shown in the following image:

4 - Click New SSH key.

5 - Enter a title for the new SSH key.

5.2 - In the Key field, paste the key that you copied in step 2. Genarating an SSH key, above.

Note: The pasted key should include Your email address at the end.

5.3 - Hit the button Add SSH key

6 - Click Add SSH Key. The SSH key is added to your account.

Summary

Congratulations! You have now learned how to generate the SSH key and add an SSH key to GitHub.

Git and GitHub learning resources

There are a lot of helpful Git and GitHub learning resources on the web. This is a short list of my favorites!

GitHub Skills
Learn how to use GitHub with interactive courses designed for beginners.
GitHub Blog
Pro Git book
Git command list
GitHub Training Guides (Youtube channel)
Introduction to GitHub
GitHub Live Training, with a hands-on, project-based approach for those who love the command line and those who don't.
Code School: Git Real. Learn basic concepts of Git version control. Explore staging, cloning, branching, and collaborating with Git.
Atlassian | Bitbucket | Git basics

Conclusion

Now you know more about generating and adding an SSH key to Github, Feel free to these steps to make sure you understand how they work.

Download this Git commands cheat sheet to have all Git commands in one place for future use.

What's Next?

If you want to follow along with more advanced stuff in the next article I'll talk about GitBash Installation on your Desktop.

Thanks for the read! Now go practice & build something awesome!