<div align="center"> <img alt="Logo" src="https://github.com/pycoder2000/blog/raw/master/public/static/images/logo.png" width="100" /> </div> <h1 align="center"> Personal Blog - <em>Mere Musings</em> </h1> <p align="center"> This is my personal portfolio blog hosted <a href="https://musing.vercel.app/" target="_blank">here</a> built with <a href="https://nextjs.org/" target="_blank">Next.js</a>, <a href="https://tailwindcss.com/" target="_blank">Tailwind CSS</a> and hosted with <a href="https://www.vercel.com/" target="_blank">Vercel</a>. </p> <p align="center"> The original template is designed by <a href="https://github.com/timlrx" target="_blank">Timothy Lin</a> and can be found <a href="https://github.com/timlrx/tailwind-nextjs-starter-blog" target="_blank">here</a>. The demo for the same can be found <a href="https://tailwind-nextjs-starter-blog.vercel.app/" target="_blank">here</a>. </p> <div align="center">

</div>

demo

</div>

🛠 Installation & Set Up

Clone this repository
```
gh repo fork repository --clone=true
```
Change directories
```
cd blog
```
Install and use the correct version of Node using NVM
```
nvm install
```
Install dependencies
```
npm install
```
Start the development server
```
npm start
```

Create a .env.local and following the .env.example input some environment variables so that can run normally.

NEXT_PUBLIC_GISCUS_REPO=
NEXT_PUBLIC_GISCUS_REPOSITORY_ID=
NEXT_PUBLIC_GISCUS_CATEGORY=
NEXT_PUBLIC_GISCUS_CATEGORY_ID=
EMAILOCTOPUS_API_URL=
EMAILOCTOPUS_API_KEY=
EMAILOCTOPUS_LIST_ID=
DATABASE_URL=
OAUTH_CLIENT_KEY=
OAUTH_CLIENT_SECRET=
NEXTAUTH_URL=
SECRET=
TWITTER_API_KEY=
TWITTER_BEARER_TOKEN=
SPOTIFY_CLIENT_ID =
SPOTIFY_CLIENT_SECRET =
SPOTIFY_REFRESH_TOKEN =

🏗️ Building and Running for Production

Generate a full static production build
```
npm run dev
```
Preview the site as it will appear once deployed
```
npm run serve
```

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

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

👨‍🎨️ Customization

Personalize siteMetadata.js (site related information)
Modify the content security policy in next.config.js if you want to use any analytics provider or a commenting solution other than giscus.
Personalize authors/default.md (main author)
Modify projectsData.js
Modify headerNavLinks.js to customize navigation links
Add blog posts

📝 Files to customize

data/siteMetadata.js - contains most of the site related information which should be modified for a user's need.
data/authors/default.md - default author information (required). Additional authors can be added as files in data/authors.
data/projectsData.js - data used to generate styled card on the projects page.
data/headerNavLinks.js - navigation links.
data/logo.svg - replace with your own logo.
data/blog - replace with your own blog posts.
public/static - store assets such as images and favicons.
tailwind.config.js and css/tailwind.css - contain the tailwind stylesheet which can be modified to change the overall look and feel of the site.
css/prism.css - controls the styles associated with the code blocks. Feel free to customize it and use your preferred prismjs theme e.g. prism themes.
components/social-icons - to add other icons, simply copy an svg file from Simple Icons and map them in index.js. Other icons use heroicons.
components/MDXComponents.js - pass your own JSX code or React component by specifying it over here. You can then call them directly in the .mdx or .md file. By default, a custom link and image component is passed.
layouts - main templates used in pages.
pages - pages to route to. Read the Next.js documentation for more information.
next.config.js - configuration related to Next.js. You need to adapt the Content Security Policy if you want to load scripts, images etc. from other domains.

🔨 Compose

Run node ./scripts/compose.js to bootstrap a new post.

Follow the interactive prompt to generate a post with pre-filled front matter.

📚 Tech Stack

| Tool | Link | | -------------- | --------------------------------------------------------- | | Framework | Next.js | | ORM | Prisma | | Database | PlanetScale | | Authentication | NextAuth.js | | Deployment | Vercel | | Styling | Tailwindcss | | Comment | Tailwindcss | | Newsletter | Email Octopus | | Favicon | realfavicongenerator | | Content | MDX |

📈 Stats

🪜 Project structure

📦 root
├── 🗂️ components             # React files to customize the components for the site
├── 🗂️ css                    # Tailwind and Prisma CSS files
├── 🗂️ data                   # Files to change the content of pages
│ ├── 🗂️ authors              # Markdown files for authors of blog
│ ├── 🗂️ blog                 # Markdown files for blog posts
│ └── 🗂️ snippets             # Markdown files for code snippets
├── 🗂️ layouts                # Templates for pages
├── 🗂️ lib                    # Non-react modules
├── 🗂️ pages                  # Page files for website
├── 🗂️ public                 # Static files for images, rss, and assets
│ ├── 🗂️ static               # Holds images, favicons, and other assets
│ │ ├── 🗂️ favicon            # Favicon files
│ │ └── 🗂️ images             # Image Files
│ ├── 📝 feed.xml             # RSS feed
│ ├── 📝 robots.txt           # Helps crawlers to crawl your site
│ └── 📝 sitemap.xml          # Sitemap
├── 🗂️ scripts                # Scripts to run for different tasks
├── 📝 tailwind.config.js     # Contains tailwind stylesheet to change the look
└── 📝 next.config.js         # configuration related to Next.js

📊 Google Lighthouse Performance Metrics

Google Lighthouse Performance Metrics

🚀 Deploy

Vercel
The easiest way to deploy the template is to use the Vercel Platform from the creators of Next.js. Check out the Next.js deployment documentation for more details.

🍰 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, a

Blog

Install / Use

README