Ivan Li
16d5d1f32e
Some checks reported errors
continuous-integration/drone/push Build encountered an error
111 lines
3.8 KiB
Markdown
111 lines
3.8 KiB
Markdown
|
|
|
|
# Ivan Li's Blog
|
|
|
|
[](https://ci.ivanli.cc/Ivan/tailwind-nextjs-blog)
|
|
[](https://ivanli.cc)
|
|
|
|
Ivan Li's Blog, base [timlrx/tailwind-nextjs-starter-blog](https://github.com/timlrx/tailwind-nextjs-starter-blog)
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
pnpm install
|
|
```
|
|
|
|
## Development
|
|
|
|
First, run the development server:
|
|
|
|
```bash
|
|
pnpm start
|
|
```
|
|
|
|
or
|
|
|
|
```bash
|
|
pnpm run dev
|
|
```
|
|
|
|
Open [http://localhost:3000](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.
|
|
|
|
## 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` - 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](https://github.com/PrismJS/prism-themes).
|
|
|
|
`components/social-icons` - to add other icons, simply copy an svg file from [Simple Icons](https://simpleicons.org/) and map them in `index.js`. Other icons use [heroicons](https://heroicons.com/).
|
|
|
|
`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](https://nextjs.org/docs) 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
|
|
|
|
### Frontmatter
|
|
|
|
Frontmatter follows [Hugo's standards](https://gohugo.io/content-management/front-matter/).
|
|
|
|
Currently 7 fields are supported.
|
|
|
|
```
|
|
title (required)
|
|
date (required)
|
|
tags (required, can be empty array)
|
|
lastmod (optional)
|
|
draft (optional)
|
|
summary (optional)
|
|
images (optional, if none provided defaults to socialBanner in siteMetadata config)
|
|
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
|
|
---
|
|
```
|
|
|
|
### Compose
|
|
|
|
Run `node ./scripts/compose.js` to bootstrap a new post.
|
|
|
|
Follow the interactive prompt to generate a post with pre-filled front matter.
|
|
|
|
## Deploy
|
|
|
|
Drone CI.
|