首页
前端开发
Typescript
Personal-Site-Gourav.io我的个人网站和博客使用NextJS、MDX和Tailwind构建

Personal-Site-Gourav.io我的个人网站和博客使用NextJS、MDX和Tailwind构建

0 次浏览 0 条评论
zip
zip

黑白风格的页面配上极简布局，Gourav Goyal 的这个个人站点看着就挺舒服的。用的是 NextJS 搭的架，性能表现还不错，首页加载快，对 SEO 也友好。你写博客的时候直接写 Markdown，再用 MDX 插点 React 组件进去，展示交互两不误，体验挺丝滑。

TailwindCSS 样式写起来比较快，基本不用出 CSS 文件，只要类名堆得对，效果就能直接跑出来。整体配色和排版也做得挺清爽的，不会眼花缭乱。页面里多模块都是用组件方式封装的，搭起来也方便。

TypeScript 加持后，代码结构更清晰，改起来也不容易出错，尤其适合想长期维护的项目。再加上 ReactJS 打底，组件复用、状态管理这类事儿都省心不少。

部署是放在 Vercel 上的，基本可以做到推代码就上线，适合想图省事的你。CDN 加速也集成好了，响应也快，访问稳定性还不错。

如果你打算做个人博客或作品集，或者想学学这些技术怎么组合在一起，不妨解压下 Personal-Site-Gourav.io-master 看看结构，动手跑一跑，理解会更快。

顺带一提，Nextjs-TailwindCSS-Storybook-TypeScript 前端架构模板 这篇也可以搭配看看，扩展性和组织结构会有更多思路。

zip
Personal-Site-Gourav_io-master.zip 预估大小：97个文件
folder
Personal-Site-Gourav.io-master 文件夹
file
.eslintrc.json 2KB
folder
pages 文件夹
file
index.tsx 7KB
file
blog.tsx 2KB
folder
clone-wars 文件夹
file
index.md 49KB
folder
img 文件夹
file
logo.svg 7KB
file
og.png 128KB
folder
notion-boost 文件夹
file
index.md 5KB
folder
img 文件夹
file
outline.gif 719KB
file
commenthide.gif 63KB
file
hideHiddenColumns.gif 193KB
file
header.jpg 91KB
file
logo.svg 3KB
file
og.png 121KB
file
showHoverText.gif 104KB
file
disableslashmenu.gif 389KB
file
scrollbtn.gif 1.48MB
file
logo.png 6KB
file
hideslash.gif 693KB
file
boldertext.gif 94KB
file
helpbtn.gif 60KB
file
leftAlignImage.gif 169KB
file
toggle.gif 223KB
file
whats-new.md 3KB
file
_document.tsx 1KB
folder
blog 文件夹
folder
setup-vscode-to-run-debug-c-cpp-code 文件夹
file
4.png 19KB
file
3.png 16KB
file
index.md 6KB
file
og.png 184KB
file
5.png 71KB
file
1.png 33KB
file
2.png 14KB
folder
first-donation-on-open-source-side-project 文件夹
file
4.png 109KB
file
3.png 21KB
file
index.md 3KB
file
hn.png 47KB
file
og.png 87KB
file
1.png 93KB
file
2.png 77KB
file
hn2.png 56KB
file
hn-mob.jpg 770KB
folder
api 文件夹
file
hello.ts 338B
file
_app.tsx 790B
folder
.github 文件夹
file
FUNDING.yml 681B
file
postcss.config.js 83B
folder
public 文件夹
file
twitter.svg 847B
file
gourav.png 150KB
file
feed.xml 2KB
file
sitemap.xml 1KB
file
safari-pinned-tab.svg 123KB
file
robots.txt 52B
file
twitter-light.svg 860B
file
favicon.ico 15KB
file
atom.xml 2KB
file
android-chrome-512x512.png 341KB
file
og.png 74KB
file
feed.json 2KB
file
android-chrome-192x192.png 59KB
file
site.webmanifest 426B
file
apple-touch-icon.png 32KB
file
favicon-32x32.png 3KB
file
mstile-150x150.png 29KB
file
bmc.png 12KB
file
favicon-16x16.png 1KB
file
browserconfig.xml 246B
file
og_old.jpg 107KB
file
yarn.lock 325KB
file
next-env.d.ts 75B
folder
styles 文件夹
file
tailwind.scss 1KB
folder
layouts 文件夹
file
projectLayout.tsx 1KB
file
postLayout.tsx 2KB
folder
css 文件夹
file
post.module.scss 6KB
file
project.module.scss 937B
file
next.config.js 3KB
file
tailwind.config.js 1KB
file
.prettierignore 57B
folder
.vscode 文件夹
file
launch.json 845B
file
settings.json 387B
folder
scripts 文件夹
file
generate-sitemap.js 2KB
file
generate-rss.js 2KB
folder
lib 文件夹
file
utils.ts 424B
file
getPost.tsx 2KB
file
gtag.ts 602B
file
vercel.json 41B
folder
components 文件夹
file
navbar.tsx 805B
file
tags.tsx 3KB
file
layout.tsx 515B
file
blocks.tsx 612B
file
notionBoost.tsx 5KB
folder
css 文件夹
file
tags.module.scss 459B
file
Header.tsx 3KB
folder
types 文件夹
file
types.tsx 11B
file
tsconfig.json 1KB
file
README.md 167B
file
.gitignore 385B
file
.eslintignore 227B
file
package-lock.json 279KB
file
package.json 2KB
...
zip 文件大小：6.88MB