还在用Hexo吗？来试试Gatsby搭建一个网站吧！

本文首发于个人博客网站：http://www.blog.lekshome.top/2024/08/20/shi-yong-gatsby-da-jian-ge-ren-wang-zhan/
由于CSDN并不是本人主要的内容输出平台，所以大多数博客直接由md文档导入且缺少审查和维护，如果存在图片或其他格式错误可以前往上述网站进行查看
CSDN留言不一定能够及时回复，请前往本人博客中进行留言
您的留言和点赞是对我的最大支持！

Gatsby 是一个基于 React 的、免费开源的、用于搭建静态站点的框架。

官网：https://www.gatsbyjs.com/docs/

前言

最近发现了一个好看的个人主页模板，是用Gatsby搭建的，之前没听说过这个框架，也没有React经验，所以踩了很多坑，为了加一个不蒜子功能整了两天才整明白……但是gatsby的官方文档我觉得写得是很好的，最终结果也是令我比较满意的，所以跟着我的脚步避开这些坑开始愉快的Gatsby体验吧！

最终结果可以去我的个人网站看下：http://www.lekshome.top/

开源地址：https://github.com/LeKZzzz/lekshome
在这里插入图片描述

1. 配置

我的环境如下：

Ubuntu 20.04
Node.js v20.9.0
Gatsby-CLI 5.13.3

环境配置
1. Node.js（Gatsby v5需要Node.js v18 或更高版本，但低于 v21）
```
sudo apt-get install curl
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
nvm install 20.9.0
```
2. Git
  
  这部分网上很多，就不演示了
3. Gatsby CLI
```
npm install -g gatsby-cli
```
  可以运行gatsby --version检查版本是否正确
网站模板

这部分我用的是https://github.com/bchiang7/v4的网站模板，接下来也会以此为演示。
1. clone模板
  
  可以先创建一个独立文件夹然后再clone
```
mkdir website
cd website
git clone https://github.com/bchiang7/v4.git
cd v4
```
2. 下载必要模块
  
  请先删除yarn.lock文件
```
rm yarn.lock
npm install gatsby-plugin-robots-txt@1.6.14
npm install
```
配置socket.io的端口环境变量

端口可以自行设定，但是请确保这个端口在防火墙是放开的

https://www.reddit.com/r/gatsbyjs/comments/krifvb/gatsby_randomize_socketio_port_breaking_vagrant/
```
vim ~/.bashrc# 文件末尾添加
export INTERNAL_STATUS_PORT=1234source ~/.bashrc
```
验证是否可以正常启动
```
gatsby develop --host=0.0.0.0
```
出现这些输出同时可以在浏览器中可以访问则说明环境配置正确

2. DIY网站

基本配置

gatsby-config.js

这里可以修改你的网站title、网站描述、siteUrl等
src/config.js

这里可以修改你的邮箱、社交媒体账号、添加nav导航的元素等
static/resume.pdf

可以将这个文件替换为你的简历
src/images/me.jpg

可以将这个文件替换为你的个人照片
src/components/sections/about.js

在这个文件中可以修改个人介绍
src/components/sections/contact.js

在这个文件中可以修改邮件联系文本
src/components/sections/hero.js

在这个文件中可以修改开屏介绍文本

logo配置

默认logo是英文字母B，如果我们需要改成我们自己的首字母则需要花费一点功夫。

首先需要去figma绘制一个首字母的文本，我的设置如下：
然后导出为svg
修改src/components/icons/loader.js

用刚刚导出的svg的path标签的d属性修改loader.js文件中path标签的d属性，然后修改g标签中的transform属性，transform属性需要根据实际结果手动调整为合适数值
修改src/components/icons/logo.js

将修改过后的src/components/icons/loader.js文件中的<g>标签及其子标签复制替换src/components/icons/logo.js中的<path>标签及其子标签
修改src/images/logo.png

这个是标签栏上的logo，可以参考他原有的图片，将代码生成的logo截图再裁剪得到

由于手头没有修图软件，我是用PPT裁剪的huh:)

footer配置(不蒜子)

在这里插入图片描述

footer文本

这部分可以根据个人喜好进行修改，我的修改如下

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Icon } from '@components/icons';
import { socialMedia } from '@config';const StyledFooter = styled.footer`${({ theme }) => theme.mixins.flexCenter};flex-direction: column;height: auto;min-height: 70px;padding: 15px;text-align: center;
`;const StyledSocialLinks = styled.div`display: none;@media (max-width: 768px) {display: block;width: 100%;max-width: 270px;margin: 0 auto 10px;color: var(--light-slate);}ul {${({ theme }) => theme.mixins.flexBetween};padding: 0;margin: 0;list-style: none;a {padding: 10px;svg {width: 20px;height: 20px;}}}
`;const StyledCredit = styled.div`color: var(--light-slate);font-family: var(--font-mono);font-size: var(--fz-xxs);line-height: 1;a {padding: 10px;}.github-stats {margin-top: 10px;& > span {display: inline-flex;align-items: center;margin: 0 7px;}svg {display: inline-block;margin-right: 5px;width: 14px;height: 14px;}}
`;const StyledSecond = styled.div`color: var(--light-slate);font-family: var(--font-mono);font-size: var(--fz-xxs);line-height: 1;a {padding: 10px;}a:hover{cursor:default;}.github-stats {margin-top: 10px;& > span {display: inline-flex;align-items: center;margin: 0 7px;}svg {display: inline-block;margin-right: 5px;width: 14px;height: 14px;}}
`;const Footer = () => {const [githubInfo, setGitHubInfo] = useState({stars: null,forks: null,});const [githubInfo2, setGitHubInfo2] = useState({stars: 0,forks: 0,});useEffect(() => {const fetchGitHubData = async () => {try {await Promise.all([fetch('https://api.github.com/repos/bchiang7/v4').then(response => response.json()).then(data => {setGitHubInfo({stars: data.stargazers_count,forks: data.forks_count,});}),fetch('https://api.github.com/repos/LeKZzzz/lekshome').then(response => response.json()).then(data => {setGitHubInfo2({stars: data.stargazers_count,forks: data.forks_count,});})]);} catch (e) {console.error('获取 GitHub 仓库信息时出错:', e);}};fetchGitHubData();// buusanziconst script = document.createElement('script');script.async = true;script.src = "https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js";document.head.appendChild(script);}, []);return (<StyledFooter><StyledSocialLinks><ul>{socialMedia &&socialMedia.map(({ name, url }, i) => (<li key={i}><a href={url} aria-label={name}><Icon name={name} /></a></li>))}</ul></StyledSocialLinks><StyledCredit tabindex="-1"><a href="https://github.com/bchiang7/v4"><div>Built by Brittany Chiang |</div>{githubInfo.stars && githubInfo.forks && (<div className="github-stats"><span><Icon name="Star" /><span>{githubInfo.stars.toLocaleString()}</span></span><span><Icon name="Fork" /><span>{githubInfo.forks.toLocaleString()}</span></span></div>)}</a><a href="https://github.com/LeKZzzz/lekshome"><div>| Customized by LeK</div>{githubInfo.stars && githubInfo.forks && (<div className="github-stats"><span><Icon name="Star" /><span>{githubInfo2.stars.toLocaleString()}</span></span><span><Icon name="Fork" /><span>{githubInfo2.forks.toLocaleString()}</span></span></div>)}</a></StyledCredit><StyledSecond tabindex="-1"><a><div>Last update on 2024/08/15 |</div></a><a><div>| Total visits <span id="busuanzi_value_site_pv"></span> times</div></a></StyledSecond><StyledCredit tabindex="-1"><div align="center"><a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2022018241号</a></div></StyledCredit></StyledFooter>);
};Footer.propTypes = {githubInfo: PropTypes.object,
};export default Footer;

不蒜子

我应该是国内第一个在这个模板里集成不蒜子的，这个功能折磨了我三天，不蒜子的一般使用方法是使用一个<script>标签，但是由于这个模板完全右js构建，所以普通的方法是无法正确访问不蒜子的；而且由于网页元素是js动态写入的，所以不能通过导入的方式导入不蒜子；我发现只能从useEffect入手，然后仔细看了代码发现模板原有的star和fork获取是没有展示出来的，于是又多了个要改的地方……为此我还专门提了个issue，提完的下午发现是NODE_ENV没有正确配置而提前return了，导致后面的代码都没有执行……export NODE_ENV之后再运行，结果gatsby报错无法正常启动……最后还是选择把这个环境判断给注释掉，后面footer就能正常使用了。但是后面还遇到了异步问题，就不多赘述了。唉，花了三天时间来找问题和debug。

工作经历配置

修改content/jobs中的文件夹

每个工作经历要新建一个文件夹
进入文件夹，添加index.md文件
配置index.md文件，如下例
```
---
date: '2024-07-10'
title: 'Software Development Intern'
company: 'CSAIR'
location: 'Guangzhou, China'
range: 'July - August 2024'
url: 'https://www.csairgroup.cn/cn/'
---
```
- date：决定jobs展示时的先后顺序
- title：职位
- company：公司
- location：工作地点
- range：工作开始时间和结束时间
- url：公司官网链接

个人作品配置

修改content/featured文件夹

这个文件夹是关于个人作品最上方展示Featured Project的，添加方式为在featured文件夹中新建文件夹再新建一个index.md

---
date: '1'
title: 'Wholz'
cover: './wholz.png'
github: 'https://github.com/LeKZzzz/wholz'
external: 'https://github.com/LeKZzzz/wholz'
tech:- Java- Python- HTML- CSS- Vue- Unity3D- MySQL
---Using VR virtual reality as a carrier, an immersive learning environment is created. Teaching videos are combined with 3D models to realize the visualization of mind map nodes. Users can interact with the LLM to realize real-time question and answer, making the learning content more vivid and intuitive.

date：决定展示顺序，越小优先级越高
title：project的名字
cover：project图片
github：指向github地址
external：跳转链接
cta：使用cta则使用“learn more”按钮来跳转链接
tech：标签

修改content/projects文件夹

以原有文章为例
```
---
date: '2019-11-12'
title: 'Moms Demand Action Mobile App'
github: ''
external: 'https://www.upstatement.com/work/moms-demand-action/'
ios: 'https://apps.apple.com/us/app/demand-action/id1475502876'
android: 'https://play.google.com/store/apps/details?id=com.momsdemandaction.app'
tech:- NativeScript Vue- iOS- Android
company: 'Upstatement'
showInProjects: false
---简介
```
- date：时间
- title：标题
- github：指向github的链接
- external：跳转链接
- ios：appstore链接
- android：google play链接
- tech：标签
- company：公司
- showInProjects：是否在网站首页展示，否则只有/archive里才能看见
改成中文后不知道为什么一行只有一个project，所以我的网站删去了这部分内容，只保留了archive的跳转

icon配置

src/components/icons中添加新icon的js文件
仿照已有icon的js文件，将新icon的svg写入新文件
src/components/icons/icon.js中添加新的Icon组件和映射
在src/components/icons/index.js中添加新的组件
在src/config.js中添加新的social图标和链接

写在最后

环境问题真是消耗了我很长时间，因为我本是没有接触过react的，所以很多地方都得现查，写这篇博客也是希望读者能少踩我踩过的坑。

模板作者Brittany Chiang着重提到**“ All I ask of you all is to not claim this effort as your own.”**，所以请不要使用这个模板而声称是自己原创，这种行为只会消耗开源作者的热情，所以请保持在footer链接到Brittany Chiang的开源仓库。

推荐阅读

https://www.gatsbyjs.com/docs/tutorial/getting-started/
https://juejin.cn/post/6844903999024398343
https://juejin.cn/post/7166235513446203422
https://www.junhan.xyz/blog/2021/10-02-web-view-counter