使用 Github 和 Gatsby 创建作品集网站的新手指南

对于那些想要在网上建立影响力的人来说，拥有一个网站应该是你的首要任务。这也是一个有趣的学习体验，能帮助你探索内心的童真创意。

本指南将帮助您搭建作品集网站，并将其托管到线上供所有人浏览。为了顺利完成本指南，您至少需要具备一些 HTML、CSS 和 JavaScript 的应用知识。

设置您的计算机

我们将设置 JavaScript 开发环境。您需要在您的计算机上安装并设置以下软件。

NodeJS

NodeJS 将用于构建我们网站的源代码并下载所需的软件包。请注意，npm将与NodeJS一起安装。

1. 下载NodeJS。本文撰写时，这是最新版本。如果您使用的是 Windows，此页面将显示 Windows 下载。
2. 下载安装程序后，请按照提示将其安装到您的计算机上。
3. 如果您已成功安装 NodeJS，您应该能够通过打开终端/命令提示符并键入以下命令来验证它。

node -v     # will show currently installed version of NodeJS
npm -v      # will show currently installed version of npm

VS 代码

VS Code 是一个源代码编辑器。它支持嵌入式 Git 控件和 GitHub。

1. 下载VS Code。如果您使用的是 Windows，此页面将显示 Windows 下载。
2. 下载安装程序后，请按照提示将其安装到您的计算机上。

Git 和 Github

Git 可以帮助我们将源代码的不同版本保存到 GitHub。您需要创建一个GitHub帐户，并按照以下说明设置 Git：

创建 Github 帐户

1. 前往https://github.com。输入用户名、电子邮件和密码。
2. 到达此页面需要三 (3) 个步骤。

创建存储库

验证邮箱后，您将被重定向到此页面。我们将在这里创建一个名为username.github.io的仓库，例如，在我的例子中，它将是geocine.github.io。

设置 SSH 密钥

为了能够将文件从我们的计算机上传到 GitHub，我们需要创建一个 SSH 密钥并在 GitHub 上进行设置。

生成新的 SSH 密钥

1. 打开你的终端/Git Bash
2. 输入以下文本，将电子邮件替换为您的电子邮件

   ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

   view raw generate-key.md hosted with ❤ by GitHub
3. 当系统提示“输入用于保存密钥的文件”时，按 Enter。这将接受默认文件位置。
4. 在提示符下，输入一个安全密码。注意，输入过程中不会显示任何内容。

向您的 GitHub 帐户添加新的 SSH 密钥

如果您正确地遵循了上述说明，则会在您的~/.ssh文件夹中生成一个文件：

1. 在 Mac 上，前往~/.ssh文件夹；在 Windows 上，前往C:/Users/YOUR_USER_NAME/.ssh 文件夹。您将看到一个名为id_rsa.pub的文件。打开它并复制其内容。
2. 转到您的 GitHub 帐户的设置页面。
3. 单击SSH 和 GPG 密钥>新建 SSH 密钥
4. 从步骤 1添加您的SSH 密钥，然后按添加 SSH 密钥
5. 如果出现提示，请确认您的 GitHub 密码。

选择模板

让我们打开Gatsby Starters页面并选择一个模板。你将看到类似这样的内容：

我将使用LekovicMilos创建的gatsby-starter-portfolio

设置你的 Git 存储库

我们将使用我们的 GitHub 帐户创建一个网站，我们将把它托管在username.github.io上，例如，在我的情况下它将是geocine.github.io

1. 在你的电脑上创建一个文件夹，并使用你的 GitHub 用户名。我这里创建的是geocine.github.io
2. 找到你选择的模板，向下滚动。点击“源”链接。
3. 复制链接，如下图所示：

4. 进入你的文件夹，在我的例子中是geocine.github.io。克隆启动器
   

   git clone git@github.com:LekovicMilos/gatsby-starter-portfolio.git
   

5. 克隆完成后，你的文件夹结构应该如下所示
   

6. 我们将gatsby-starter-portfolio重命名为gatsby。现在你的目录结构应该如下所示
   

7. 在根目录上创建一个.gitignore文件并粘贴以下内容：
   

   

8. 当你在根文件夹时，让我们初始化 git
   

   git init
   

9. 现在进入gatsby文件夹并删除.git文件夹
   

   rm -rf .git
   

10. 当您位于gatsby文件夹中时，让我们安装依赖项。
    

11. 打开 package.json 文件并编辑scripts部分。添加clean属性并编辑build属性：
    

12. 返回根文件夹。打开之前在创建存储库中创建的 GitHub 存储库，然后复制突出显示的命令。
    

13. 在根文件夹中，执行步骤 12中的命令
    

    git remote add origin git@github.com:geocine/geocine.github.io.git
    

14. 回到gatsby文件夹。让我们构建项目
    

    npm run build
    

15. 回到根文件夹。现在让我们提交代码并推送。
    

16. 现在你应该可以在username.github.io上看到你的网站了。我的应该是geocine.github.io

请注意，我们将构建文件推送到master分支，并将gatsby保存到子目录中，因为username.github.io仅服务于master分支。更多详情请见此处

开发工作流程

现在你的网站已经启动并运行了。我将描述开发工作流程

编辑/开发

开发时，您必须位于gatsby文件夹中。要进一步了解您下载的模板上可以配置哪些内容，只需访问代码库并按照README 文件进行操作即可。

我无法提供关于如何使用启动器的具体说明。启动器作者会根据自己的需求，自行配置不同的启动器。

编辑

在VS Code中打开gatsby文件夹

发展

要在开发模式下运行gatsby，请进入gatsby文件夹，打开终端/命令提示符并运行以下命令：

npm run develop

部署

完成入门模板上的编辑后，您需要将其部署到 GitHub。

建造

首先，你需要构建gatsby，以便它能够生成你网站所需的所有静态文件。在gatsby目录中，执行以下命令：

npm run build

部署

你需要进入根目录（我的用户名是.github.io或geocine.github.io），才能将内容推送到 Github。执行以下命令：

git add .
git commit -m "your message"
git push -u origin master

如果您对设置有任何疑问或需要任何帮助，请发表评论。