Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/clintonbrito/blog-and-portfolio


https://github.com/clintonbrito/blog-and-portfolio

Last synced: about 2 months ago
JSON representation

Awesome Lists containing this project

README 

        
![tailwind-nextjs-banner](/public/static/images/homepage.png)



# My Blog and Portfolio



This is a fork of the [Tailwind Nextjs Starter Blog](https://github.com/timlrx/tailwind-nextjs-starter-blog) template. I have made some modifications to the original template to suit my needs.



## Motivation



I wanted to create a blog and portfolio website that is easy to maintain and customize. I wanted to use Next.js and Tailwind CSS because I have experience with them and I like them. I also wanted to use Contentlayer to manage the content logic. I found the Tailwind Nextjs Starter Blog template and I thought it was a good starting point. I have made some modifications to the original template to suit my needs.



## Features



- Next.js with Typescript

- [Contentlayer](https://www.contentlayer.dev/) to manage content logic

- Easy styling customization with [Tailwind 3.0](https://tailwindcss.com/blog/tailwindcss-v3) and primary color attribute

- [MDX - write JSX in markdown documents!](https://mdxjs.com/)

- Lightweight and minimal for optimal performance

- Mobile-friendly view

- Light and dark theme

- Font optimization with [next/font](https://nextjs.org/docs/app/api-reference/components/font)

- [Github alerts](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) via [remark-github-blockquote-alert](https://github.com/jaywcjlove/remark-github-blockquote-alert)

- Automatic image optimization via [next/image](https://nextjs.org/docs/basic-features/image-optimization)

- Support for tags - each unique tag will be its own page

- Support for multiple authors

- 3 different blog layouts

- 2 different blog listing layouts

- Support for nested routing of blog posts

- Projects page

- Preconfigured security headers

- SEO friendly with RSS feed, sitemaps and more!



## Extend / 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` - tailwind configuration and 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](https://github.com/PrismJS/prism-themes).



`contentlayer.config.ts` - configuration for Contentlayer, including definition of content sources and MDX plugins used. See [Contentlayer documentation](https://www.contentlayer.dev/docs/getting-started) for more information.



`components/MDXComponents.js` - pass your own JSX code or React component by specifying it over here. You can then use them directly in the `.mdx` or `.md` file. By default, a custom link, `next/image` component, table of contents component and Newsletter form are passed down. Note that the components should be default exported to avoid [existing issues with Next.js](https://github.com/vercel/next.js/issues/51593).



`layouts` - main templates used in pages:



- There are currently 3 post layouts available: `PostLayout`, `PostSimple` and `PostBanner`. `PostLayout` is the default 2 column layout with meta and author information. `PostSimple` is a simplified version of `PostLayout`, while `PostBanner` features a banner image.

- There are 2 blog listing layouts: `ListLayout`, the layout used in version 1 of the template with a search bar and `ListLayoutWithTags`, currently used in version 2, which omits the search bar but includes a sidebar with information on the tags.



`app` - pages to route to. Read the [Next.js documentation](https://nextjs.org/docs/app) 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.



## Post



Content is modelled using [Contentlayer](https://www.contentlayer.dev/), which allows you to define your own content schema and use it to generate typed content objects. See [Contentlayer documentation](https://www.contentlayer.dev/docs/getting-started) for more information.



### Frontmatter



Frontmatter follows [Hugo's standards](https://gohugo.io/content-management/front-matter/).



Please refer to `contentlayer.config.ts` for an up to date list of supported fields. The following fields are supported:



```

title (required)

date (required)

tags (optional)

lastmod (optional)

draft (optional)

summary (optional)

images (optional)

authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)

layout (optional list which should correspond to the file names in `data/layouts`)

canonicalUrl (optional, canonical url for the post for SEO)

```



Here's an example of a post's frontmatter:



```

---

title: 'Introducing Tailwind Nexjs Starter Blog'

date: '2021-01-12'

lastmod: '2021-01-18'

tags: ['next-js', 'tailwind', 'guide']

draft: false

summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'

images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']

authors: ['default', 'sparrowhawk']

layout: PostLayout

canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog

---

```



## Licence



[MIT](https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/main/LICENSE) © [Timothy Lin](https://www.timlrx.com)