This is personal website hosted here built with Next.js, Tailwind CSS and hosted with Vercel.
-
Clone this repository
git clone https://github.com/ugistelmokaitis/charm.git
-
Change directories
cd charm
-
Install dependencies
yarn install
-
Create a .env.local and following the example input some environment variables so that can run normally.
NEXT_PUBLIC_SITE_URL= NEXT_PUBLIC_PRISMIC_ENDPOINT="" NEXT_PUBLIC_PRISMIC_ACCESS_TOKEN="" NEXT_PUBLIC_EMAIL_PASSWORD="" NEXT_PUBLIC_EMAIL_ADDRESS="" TWITTER_BEARER_TOKEN=""
-
Verify acc in terminal
prismic login
-
See Customization Prismic section
-
Generate a full static production build
yarn run dev
-
Preview the site as it will appear once deployed
yarn dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx
. The page auto-updates as you edit the file.
- Access Prismic Slicemachine
yarn run slicemachine
Open http://localhost:9999 with your browser to see the result.
More details What is prismic slice machine?
- Settings - Header, Footer & Theme customization.
- About - pages/about
- Blog - pages/blog
- Home - pages/index.tsx
- Gear - pages/gear
- Extensions - pages/extensions
- Contact - pages/contact
- Privacy - pages/privacy
- Terms - pages/terms
- Server error - pages/500.tsx
- NotFound - pages/404.tsx
! Create blog posts on prismic - green button on right hand side "Create New"
-
public/manifest.json
- specify basic metadata about your extension such as the name... -
public/*
- replace all png files which contains my logo with your own logo. -
fonts
- ensure you have the license for the fonts I use for this website. The font I use find here. -
components/layout.tsx
- update: name, username, type: to your personal information . -
pages/_app.tsx
- update meta information content section. -
public/
- store assets such as images and favicons. -
components/externalLink.tsx
- change link to your own website link. -
tailwind.config.js
andstyles/*
- contain the tailwind stylesheet which can be modified to change the overall look and feel of the site if needed. -
pages
- 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. -
utils/gtag.ts
- add your own google tagexport const GA_TRACKING_ID = ".....";
Tool | Link |
---|---|
Framework | Next.js |
CMS | Prismic |
Deployment | Vercel |
CSS Framework | Tailwindcss |
Favicon | realfavicongenerator |
Vercel
The easiest way to deploy the template is to use the Vercel Platform from the creators of Next.js. Check out the Next.js deployment documentation for more details.
! Also ensure that Environment Variables are appropriately copied and saved from .env.local file to vercel before deploying.
Note that most of website icons belongs to ยฉ Copyright 2022-2099 Bonnie Hong