Lotse

Minimalistic dark mode blogging and portfolio template made using NextJS

Author marpeand
Github Stars 12
Last Commit Aug 30, 2024
Lotse screenshot

Lotse

Minimalistic dark mode blogging and portfolio template made using NextJS

Demo: https://lotse.vercel.app

Features

  • Employs Contentlayer for mdx compilation
  • Boasts an ultra-minimalistic design for a clean user experience
  • Developed with NextJS & TailwindCSS
  • Achieves nearly perfect scores in Page Speed Insights
  • Implements Katex for mathematical equation displays
  • Optimized for SEO, enhancing visibility and accessibility

Quick start guide

  1. Fork this repo
  2. Modify the blog.config.js with your own site data
const CONFIG = {
    title: "Your site title",
    baseURL: "URL of your site",
    darkBackground: "#1a1a1a", // background color
};
module.exports = CONFIG;
  1. Replace the app/favicon.ico using your own icon
  2. Write your about in content/about.mdx
  3. To deploy you can use Vercel or Netlify. import the repo and deploy.

Post & Project structure

Check the contentlayer.config.js to see or modify all fields.

Creating a Post

To create a post, simply generate a .mdx file in the content/posts directory. Ensure the file name is user-friendly, such as securing-your-web-applications-best-practices-in-web-security.mdx.

---
title: "The title of your post (required)"
date: date of your post (YYYY-MM-DD format, also required)
draft: 'false' or 'true' (required)
---

The title should be between " " to prevent conflicts, an example of this:

---
title: "Automation with Bash Streamlining Repetitive Tasks"
date: 2023-11-11
draft: false
---

For projects, the structure involves only the title. Create a .mdx file in the content/projects directory.

---
title: "The title of your project (required)"
---

Contributing

Contributions of any kind are appreciated. Feel free to fork the project and submit a pull request.

License

This project is licensed under the MIT License