My 🏠 on the ☁️

My personal over-engineering site on the cloud.

Changes from parent project

+ gallery

+ add places to your gallery category, like Indonesia, beach or something. up to you

- snippets

- language changer

+ manual sitemap

+ flag indonesia

+ dashboard

Tech stack

This blog is hosted on Vercel, built with Next.js and Tailwind CSS using Tailwind Nextjs Starter Blog.

A huge thanks to Leo for the minimal, lightweight, and super easy-to-customize blog template.

Assets

The images in this blog are from Unsplash, gifs from GIPHY, and illustrations are from Storyset.

Thanks for the free resources 🙏

Installation

Lack of documentation makes this hard for newbie like us. I hope this will help.

Run the website in localhost

npm run dev

Open http://localhost:3000 with your browser to see the result.

FAQ

'PORT' is not recognized as an internal

If you got this error, then

'PORT' is not recognized as an internal or external command, operable program or batch file.

Open package.json and add "set" in front of PORT

"start": "set PORT=3434 next-remote-watch ./data",

How to change the text in the website?

Open public\locales\en\common.json, just look at whats inside, you will know what to do.

How to config the website?

Open data\siteMetadata.ts, just look at whats inside, you will know what to do.

How to config spotify?

Open spotify dev

1. Login

2. Click on ‘Create an app’.

3. Pick an ‘App name’ and ‘App description’ of your choice and mark the checkboxes.

4. After creation, you see your ‘Client Id’ and you can click on ‘Show client secret` to unhide your ’Client secret’. Click your app, that u have made

5. Then click settings, Voila!

6. Use your ‘Client id’ and ‘Client secret’ to retrieve a token from the Spotify API.

How to get spotify refresh token?

1. Get your Spotify client_id and client_secret

2. Get your access code Visit the following URL after replacing $CLIENT_ID, $SCOPE, and $REDIRECT_URI with the information you noted in Step 1. Make sure the $REDIRECT_URI is URL encoded.

   https://accounts.spotify.com/authorize?response_type=code&client_id=$CLIENT_ID&scope=$SCOPE&redirect_uri=$REDIRECT_URI
   

   It will look like this

   https://accounts.spotify.com/authorize?response_type=code&client_id=$CLIENT_ID&scope=user-read-currently-playing&redirect_uri=https%3A%2F%2Fshizuka.my.id%2F
   

   You need to convert your website to URL Format for REDIRECT_URI, you can use this tool convert

3. Get code from the redirect URL I was redirected to the following URL because my redirect URI was set to https://shizuka.my.id. In place of $CODE there was a very long string of characters. Copy that string and note it down for use in Step 4.

https://shizuka.my.id/?code=$CODE

4. Get the refresh token Running the following CURL command will result in a JSON string that contains the refresh token, in addition to other useful data. Again, either replace or export the following variables in your shell $CILENT_ID, $CLIENT_SECRET, $CODE, and $REDIRECT_URI.

   curl -d client_id=$CLIENT_ID -d client_secret=$CLIENT_SECRET -d grant_type=authorization_code -d code=$CODE -d redirect_uri=$REDIRECT_URI https://accounts.spotify.com/api/token
   

   The result will be a JSON string similar to the following. Take the refresh_token and save that in a safe, private place. This token will last for a very long time and can be used to generate a fresh access_token whenever it is needed.

   {
    "access_token": "$ACCESS_TOKEN",
    "token_type": "Bearer",
    "expires_in": 3600,
    "refresh_token": "$REFRESH_TOKEN",
    "scope": "user-read-currently-playing"
    }

How to edit navbar?

Open data\headerNavLinks.ts, just look at whats inside, you will know what to do.

How to turn on/off the language option?

Open components\Header.tsx line 53, just look at whats inside, you will know what to do.

How to CRUD blog, snippets?

Open data\en\blog and data\en\snippets just look at whats inside, you will know what to do.

Where to put the picture u are using?

Just put in public\static\images

How to CRUD projects?

Open data\en\projectsData.ts, just look at whats inside, you will know what to do. Same as gallery

If you have any question, feel free to email me at Shizuka

Copyright (c) 2024 Shizuka - Alrights reserved.