Awesome
<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"><a href="https://musing.vercel.app/" target="blank" ></a> <a href="https://github.com/pycoder2000/blog/issues/new?assignees=&labels=bug&template=bug_report.md&title="></a> <a href="https://github.com/pycoder2000/blog/issues/new?assignees=&labels=&template=feature_request.md&title="></a> <a href="https://github.com/pycoder2000/blog/fork"></a> <img src="https://img.shields.io/github/stars/pycoder2000/blog?color=darkgreen&style=for-the-badge">
</div> <div align="center"></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 indata/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
andcss/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 inindex.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
<img src="https://img.shields.io/website?down_color=red&down_message=offline&style=for-the-badge&up_color=green&up_message=online&url=https%3A%2F%2Fmusings.vercel.app"> <img src="https://img.shields.io/github/repo-size/pycoder2000/blog?style=for-the-badge&color=darkgreen" /> <img src="https://img.shields.io/github/languages/top/pycoder2000/blog?style=for-the-badge" /> <img src="https://img.shields.io/github/commit-activity/m/pycoder2000/blog?style=for-the-badge&color=orange" /> <img src="https://img.shields.io/github/deployments/pycoder2000/blog/Preview%20ā%20blog?style=for-the-badge" /> <a href="https://tech-blogs.dev" target="_blank" ></a> <a href="https://makeapullrequest.com" target="blank" ></a>
šŖ 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
š 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, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
-
Fork the Project
-
Commit your Changes
git commit -m 'Add some Feature'
-
Push to the Branch
git push origin main
-
Open a Pull Request
<a href="https://makeapullrequest.com" target="blank" ></a>
</div>