Data

Tools

Indexes

Applications

Experiments

Awesome

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

https://github.com/cub3y0nd/tailwind-nextjs-starter-blog

This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
https://github.com/cub3y0nd/tailwind-nextjs-starter-blog

blogging demo-blog mdx nextjs portfolio publishing reactjs tailwind-css

Last synced: 6 days ago
JSON representation

This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.

Awesome Lists containing this project

README 

        
# CuB3y0nd's Portfolio



[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/CuB3y0nd/cubeyond.net)



## Motivation



I started this blog as a way to document and share the things I have learned and found useful in my journey as a cyber security.



Writing and noting things down is a great way for me to solidify my understanding of new concepts and technologies, and I hope that my blog can be a helpful resource for others who are interested in development, cyber security , and related technologies.



I would be highly appreciated if you could leave your comments and thoughts on what I have written 🍻



## Quick Start Guide



1. Clone the repo



```bash

git clone https://github.com/CuB3y0nd/cubeyond.net.git

```



2. Personalize `siteMetadata.js` (site related information)

3. Modify the content security policy in `next.config.js` if you want to use

   other analytics provider or a commenting solution other than giscus.

4. Personalize `authors/default.md` (main author)

5. Modify `projectsData.ts`

6. Modify `headerNavLinks.ts` to customize navigation links

7. Add blog posts

8. Deploy on Vercel



## Installation



```bash

yarn

```



Please note, that if you are using Windows, you may need to run:



```bash

$env:PWD = $(Get-Location).Path

```



## Development



First, run the development server:



```bash

yarn dev

```



Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.



Edit the layout in `app` or content in `data`. With live reloading, the pages auto-updates as you edit them.



## 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

---

```



## Deploy



**Vercel**

The easiest way to deploy the template is to deploy on [Vercel](https://vercel.com). Check out the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.



**Netlify**

[Netlify](https://www.netlify.com/)’s Next.js runtime configures enables key Next.js functionality on your website without the need for additional configurations. Netlify generates serverless functions that will handle Next.js functionalities such as server-side rendered (SSR) pages, incremental static regeneration (ISR), `next/images`, etc.



See [Next.js on Netlify](https://docs.netlify.com/integrations/frameworks/next-js/overview/#next-js-runtime) for suggested configuration values and more details.



**Static hosting services / GitHub Pages / S3 / Firebase etc.**



1. Add `output: 'export'` in `next.config.js`. See [static exports documentation](https://nextjs.org/docs/app/building-your-application/deploying/static-exports#configuration) for more information.

2. Comment out `headers()` from `next.config.js`.

3. Add `unoptimized: true` to the `images` key in `next.config.js`:



   Alternatively, to continue using `next/image`, you can use an alternative image optimization provider such as Imgix, Cloudinary or Akamai. See [image optimization documentation](https://nextjs.org/docs/app/building-your-application/deploying/static-exports#image-optimization) for more details.



4. Remove `api` folder and components which call the server-side function such as the Newsletter component. Not technically required and the site will build successfully, but the APIs cannot be used as they are server-side functions.

5. Run `yarn build`. The generated static content is in the `out` folder.

6. Deploy the `out` folder to your hosting service of choice or run `npx serve out` to view the website locally.



**Note**: Deploying on Github pages require addition modifications to the base path. Please refer to the FAQ for more information.



## License



[MIT](https://github.com/CuB3y0nd/cubeyond.net/blob/master/LICENSE) © [CuB3y0nd](https://www.cubeyond.net)