使用Gatsby Theme创建静态博客

Theme 的引入使得 Gatsbyjs 更加易用。使用 Gatsby Theme 比 Starter 建站，步骤更简单，也利于后期维护，个性化定制也更方便。

一、本地部署 Gatsby （非必须，因 Theme 而异，有的 Theme 自带 Starter ,看说明）

1. 全局安装命令行接口 Gatsby CLI

   npm install -g gatsby-cli
   

2. 创建存放文件的文件夹

   c:/users/Github
   

3. 导航到文件夹

   cd c:/users/github
   

4. 创建一个最基本的Gatsby站点

    gatsby new site.xyz
   

5. 导航到文件夹

   cd site.xyz
   cd c:/users/github/site.xyz
   

6. 启动开发模式

   gatsby develop
   

7. 访问http://localhost:8000 测试项目是否成功

---

二、用 Git 把本地项目推送至 Github

8. 导航至site.xyz

   cd c:/users/github/site.xyz
   

9. 删除旧的.git 文件夹并将本地目录初始化为 Git 存储库

   rm -rf .git && git init
   

10. 将文件添加到新的本地存储库中，为第一次提交准备文件

    git add .
    

11. 提交本地存储库中暂存的文件

    git commit -m 'First commit'
    

12. 在 Github 创建 Repositories site.xyz，自定义名称和是否公开

13. 在 GitHub 存储库的“快速设置”页面的顶部，单击剪贴板图标以复制远程存储库URL，然后添加将在其中推送本地存储库的远程存储库的URL

    git remote add origin https://github.com/xiyizhou/site.xyz.git
    

14. 验证 URL

    git remote -v
    

15. 将本地存储库中的更改推送到 GitHub

    git push -u origin master
    

---

三、 把项目从 Github 部署到 Netlify

16. 用 Github 账号登录 Netlify

17. 选择 New Site From Git，授权 Netlify 使用 Github

18. 选择 对应的 Repository site.xyz

19. 配置

    • Branch to deploy： master

    • Build command：gatsby build

    • Publish directory：public/

20. 点击 deploy site，等待 Netlify 自动部署完成.

21. 后续配置

    • 设置自定义域名，启用 SSL。建议使用 Netlify DNS，只需要在域名商处修改 DNS。netlify 会添加完成A 记录和came 。

    • 启用 Identity ，修改 Registration preferences 为 Invite only，防止他人不经邀请修改项目。

    • 如果要使用 Netlify CMS 启用 Git Gateway

    • 如果 Algolia 等要使用密钥，可以在 Environment variables 配置。

    • 要引用 js 代码，可以在 Post processing 中配置。

22. 用 Github desktop pull 把项目pull到本地

---

四、安装主题，以 Casper 为例

22. 导航到sss.xyz目录

    cd c:/users/github/ .xyz
    

23. 安装主题

    npm install gatsby-theme-casper