
1 - Create a file ./scripts/generate-sitemap.js

```js
import prettier from "prettier";
import { globby } from "globby";
import { writeFileSync } from "fs";

async function generate() {
  const prettierConfig = await prettier.resolveConfig("./.prettierrc.js");

  const pages = await globby([
    "pages/*.tsx",
    "!pages/_*.tsx",
    "!pages/api",
    "!pages/404.tsx",
  ]);

  const blogPosts = await globby(["contents/blog/**/index.mdx"]);

  const sitemap = `
    <?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        ${pages
          .map((page) => {
            const path = page
              .replace("pages", "")
              .replace("data", "")
              .replace(".tsx", "")
              .replace(".mdx", "");

            const route = path === "/index" ? "" : path;

            return `
              <url>
                  <loc>${`https://selahattinunlu.com${route}`}</loc>
              </url>
            `;
          })
          .join("")}

          ${blogPosts
            .map((post) => {
              const path = post
                .replace("contents/blog/", "")
                .replace("/index.mdx", "");

              return `
              <url>
                  <loc>${`https://selahattinunlu.com/blog/${path}`}</loc>
              </url>
            `;
            })
            .join("")}
    </urlset>
    `;

  const formatted = prettier.format(sitemap, {
    ...prettierConfig,
    parser: "html",
  });

  // eslint-disable-next-line no-sync
  writeFileSync("public/sitemap.xml", formatted);
}

generate();
```

2 - update package.json

```json
{
  "scripts": {
    "build": "next build",
    "postbuild": "npm run generate-sitemap",
    "generate-sitemap": "npx node ./scripts/generate-sitemap.mjs"
  }
}
```

3 - add robots.txt in public

```txt
User-agent: *
Allow: /
Disallow: /api

Sitemap: https://selahattinunlu.com/sitemap.xml
```

#### Useful Links

- https://www.sitemaps.org/protocol.html
- https://leerob.io/blog/nextjs-sitemap-robots
- https://developers.google.com/search/docs/advanced/robots/intro
- https://developers.google.com/search/docs/advanced/sitemaps/build-sitemap
- https://developers.google.com/search/docs/advanced/crawling/block-indexing


How to create a sitemap in Nextjs?


This blog post will be updated as I learn new stuff.

### Head Tags

Do not forget to set head tags correctly for each page.

- meta title
- meta description
- meta keywords
- meta image
- meta open graph tags (og)
- meta twitter share tags
- meta color-scheme
- meta theme-color
- link favicon with different sizes (16x16, 32x32)
- link apple-touch-icon
- link canonical
- link manifest

### Image optimization

- Don't load image which has big file sizes on mobile.
- Use lazy loading
- Use placeholder (for example blur)

### User Preferences

- dark mode support
- reduce motion support

### Browser Compability

You should pay attention to support at least major browsers

- Known css bugs and browser engines' issues
- caniuse.com
- polyfills

### Mobile Compability

Come on!

### Performance

Don't forget to optimize website. You can use:

- Lighthouse
- page speed insights

### Security

- ...

### Analytics

- Microanalytics.io
- Google Analytics

### SEO

- add meta tags
- add your website to search engines (https://search.google.com/search-console)
- create sitemap of the website
- add robots.txt and set your sitemap (https://www.cloudflare.com/learning/bots/what-is-robots.txt/)

### Misc

- webmanifest file

#### Links to learn more

- https://web.dev/learn


Things to consider while building a website


I found a blog post about it and it shares 30+ expression to use.

https://www.joincake.com/blog/youre-welcome/

---

Here is the my favorites:

- Don't mention it!
- It's my pleasure!
- Glad to help!
- No need at all!
- That's what good [friends|colleagues] do!
- Any time!
- I know you’d do the same for me.
- You deserve it.

Also there are some funny ones:

- You'll get my bill in the morning. :)
- I'll count on your vote in the next election! :)


What can i use instead of saying 'You are welcome'?


Some users can prefer to use dark mode or reduce motion on their computer. So, how we can respect their preferences
on our website?

For example if you use dark mode on your computer, you'll realize that my website will be dark too.
Or if you use reduce motion on your computer, you'll realize that my website will reduce the animations on home page.

In order to do that, we can use css media queries.

Example for dark mode:

```css
.day {
  background: #eee;
  color: black;
}
.night {
  background: #333;
  color: white;
}

@media (prefers-color-scheme: dark) {
  .day.dark-scheme {
    background: #333;
    color: white;
  }
  .night.dark-scheme {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme {
    background: white;
    color: #555;
  }
  .night.light-scheme {
    background: #eee;
    color: black;
  }
}

.day,
.night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}
```

Example for reduce motion:

```css
/*
  If the user has expressed their preference for
  reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use animations
  on buttons.
*/
@media (prefers-reduced-motion: no-preference) {
  button {
    /* `vibrate` keyframes are defined elsewhere */
    animation: vibrate 0.3s linear infinite both;
  }
}
```

#### Resources

- https://web.dev/prefers-reduced-motion/
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme


Respect Preferences: Reduce Motion and Change Appearance


Sometimes I want to try some basic stuffs without installing gigabytes of node modules in my computer.
This why I just started to looking for what options I have outhere.

### Glitch

https://glitch.com

### Codesandbox

https://codesandbox.io

### Codepen.io

https://codepen.io

### Replit

https://replit.com

### Codesphere

https://codesphere.com/
