- Published on
Introduction to my dev blog
- Authors
- Name
- Baijnath Kumar
- @BeingBkum
- Clone the repo
npx degit 'bkum/baijnath.dev'
- Personalize
siteMetadata.js
(site related information) - Modify the content security policy in
next.config.js
if you want to use other analytics provider or a commenting solution other than giscus. - Personalize
authors/default.md
(main author) - Modify
projectsData.ts
- Modify
headerNavLinks.ts
to customize navigation links - Add blog posts
- Deploy on Vercel
Installation
yarn
Please note, that if you are using Windows, you may need to run:
$env:PWD = $(Get-Location).Path
Development
First, run the development server:
yarn dev
Open 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.
contentlayer.config.ts
- configuration for Contentlayer, including definition of content sources and MDX plugins used. See Contentlayer documentation 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.
layouts
- main templates used in pages:
- There are currently 3 post layouts available:
PostLayout
,PostSimple
andPostBanner
.PostLayout
is the default 2 column layout with meta and author information.PostSimple
is a simplified version ofPostLayout
, whilePostBanner
features a banner image. - There are 2 blog listing layouts:
ListLayout
, the layout used in version 1 of the template with a search bar andListLayoutWithTags
, 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 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, which allows you to define your own content schema and use it to generate typed content objects. See Contentlayer documentation for more information.
Frontmatter
Frontmatter follows Hugo's standards.
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
---
A sample post with markdown.
Inline Highlighting
Sample of inline highlighting sum = parseInt(num1) + parseInt(num2)
Code Blocks
Some Javascript code
var num1, num2, sum
num1 = prompt('Enter first number')
num2 = prompt('Enter second number')
sum = parseInt(num1) + parseInt(num2) // "+" means "add"
alert('Sum = ' + sum) // "+" means combine into a string
Some Python code 🐍
def fib():
a, b = 0, 1
while True: # First iteration:
yield a # yield 0 to start with and then
a, b = b, a + b # a will now be 1, and b will also be 1, (0 + 1)
for index, fibonacci_number in zip(range(10), fib()):
print('{i:3}: {f:3}'.format(i=index, f=fibonacci_number))