Skip to content

πŸ“š Openblog is an elegant, simple, and user-friendly blog. Focused on accessibility, SEO and performance.

License

Notifications You must be signed in to change notification settings

danielcgilibert/blog-template

Repository files navigation

Screenshot

⭐ Leave a star if you like this project! ⭐️

Deploy with Vercel Deploy to Netlify

πŸ“Œ Table Of Contents

  1. Demo
  2. CMS
  3. Features
  4. Roadmap
  5. Stack
  6. Running locally
  7. Configure
  8. Categories
  9. Posts
  10. Draft
  11. FrontMatter
  12. CLI
  13. Contributors

πŸ’» Demo

Check out the Demo, hosted on Vercel

demo.mp4

πŸ¦™ Tina CMS

By default, this template comes pre-configured with Tina CMS.

Now you can create your posts directly from the CMS without the need to do it manually.

If you decide to use Tina, it's not necessary to add any properties to the Markdown files, Tina does it automatically.

Example:

tina.mp4

The documentation for Tina CMS can be found here

Tina is completely optional, and you can remove it, and it will still function in the same way.

πŸ’ͺ Features:

openblog Lighthouse Score

  • βœ… Minimal styling
  • βœ… Mobile responsive
  • βœ… 100/100 Lighthouse performance
  • βœ… SEO-friendly with canonical URLs and OpenGraph data
  • βœ… Sitemap support
  • βœ… RSS Feed support
  • βœ… Markdown & MDX support
  • βœ… Syntax highlighting
  • βœ… Image optimization
  • βœ… Table of contents
  • βœ… Dark mode
  • βœ… Reading Time
  • βœ… Pagefind static search library integration
  • βœ… Related posts
  • βœ… Share posts (Linkedin, twitter)
  • βœ… Draft mode
  • βœ… Copy code block
  • βœ… CMS in the repository (Tina CMS)
  • βœ… Pagination
  • βœ… ViewTransition (new)
  • βœ… Disqus comments (new)

πŸ›£οΈ Roadmap

  • ❌ Add post author
  • ❌ Add customization with colors
  • ❌ Add filters for reading time, date...
  • ❌ More sharing options
  • ❌ Internationalization (i18n)

βš™οΈ Stack

πŸ‘¨πŸ»β€πŸ’» Running Locally

Recommended extensions for VSCode:

  1. Clone or fork the repository:
[email protected]:danielcgilibert/blog-template.git
  1. Install dependencies:
pnpm install
  1. Run the development server:
pnpm dev

πŸ“ Configure

  • Edit the configuration file src/data/site.config.ts for the basic blog metadata.
  • Update the astro.config.mjs file at the root of the project with your own domain.
  • Modify the files in the /public folder:
    • favicon
    • robots.txt -> update the Sitemap url to your own domain
    • open-graph -> the open-graph is the image that will be displayed when sharing the blog link. For posts, the preview image is the post cover.
  • Edit the social networks in the Header component - src/components/Header.astro, change the URL to your social network.

πŸ—‚οΈ Adding a category

To add a new category to your blog, simply go to the src/data/categories.ts file and add it to the array.

Example:

export  const  CATEGORIES  =  [
'JavaScript',
'React',
'new category here'  <---
]  as  const

🚨 Zod checks whether the category is not correctly written or does not exist in the properties of the markdown document. It will throw an error when building the application. 🚨

πŸ“„ Adding a post

Adding a post is as simple as adding a .md or .mdx file to the blog folder at the path src/content/blog. The filename will be used to create the slug/URL of the page.

For example, if you have a file named jsx-and-react.md, it will be transformed into: http://yourdomain.com/post/jsx-and-react/

πŸ“ Activating draft mode

To activate draft mode, add the property draft: true to the file, and it will no longer be displayed on the blog.

Example :

title: MacBook Pro 2022
description: 'The new MacBook Pro 2022 is here. With the Apple M2 chip, a new design, and more, the new MacBook Pro is the best laptop Apple has ever made.'
pubDate: 'Jul 02 2022'
heroImage: '../../assets/bg.jpg'
category: 'Category 1'
tags: ['JavaScript', 'css', 'HTML5', 'GitHub']
draft: true <---

⚑️ Frontmatter

Required properties:

  • Title
  • Description
  • pubDate
  • heroImage (post cover)
  • category (Choose a category from src/data/categories.ts)

Optional properties:

  • draft (no need to include it, by default it's false)
  • tags

The schema for posts is located at src/content/config.ts. You can modify any parameter, for example, by adding a maximum of 80 characters for titles: title: z.string().max(80). For more information, refer to the zod documentation.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command Action
pnpm install Installs dependencies
pnpm run dev Starts local dev server at localhost:3000
pnpm run build Build your production site to ./dist/
pnpm run preview Preview your build locally, before deploying
pnpm run format:check Check code format with Prettier
pnpm run format Format codes with Prettier
pnpm run sync Generates TypeScript types for all Astro modules. Learn more.
pnpm run lint Lint with ESLint

πŸ‘‹ Contributors