Theme 的引入使得 Gatsbyjs 更加易用。使用 Gatsby Theme 比 Starter 建站,步骤更简单,也利于后期维护,个性化定制也更方便。
一、本地部署 Gatsby (非必须,因 Theme 而异,有的 Theme 自带 Starter ,看说明)
-
全局安装命令行接口 Gatsby CLI
npm install -g gatsby-cli
-
创建存放文件的文件夹
c:/users/Github
-
导航到文件夹
cd c:/users/github
-
创建一个最基本的Gatsby站点
gatsby new site.xyz
-
导航到文件夹
cd site.xyz cd c:/users/github/site.xyz
-
启动开发模式
gatsby develop
-
访问
http://localhost:8000
测试项目是否成功
二、用 Git 把本地项目推送至 Github
-
导航至
site.xyz
cd c:/users/github/site.xyz
-
删除旧的.git 文件夹并将本地目录初始化为 Git 存储库
rm -rf .git && git init
-
将文件添加到新的本地存储库中,为第一次提交准备文件
git add .
-
提交本地存储库中暂存的文件
git commit -m 'First commit'
-
在 Github 创建 Repositories
site.xyz
,自定义名称和是否公开 -
在 GitHub 存储库的“快速设置”页面的顶部,单击剪贴板图标以复制远程存储库URL,然后添加将在其中推送本地存储库的远程存储库的URL
git remote add origin https://github.com/xiyizhou/site.xyz.git
-
验证 URL
git remote -v
-
将本地存储库中的更改推送到 GitHub
git push -u origin master
三、 把项目从 Github 部署到 Netlify
-
用 Github 账号登录 Netlify
-
选择 New Site From Git,授权 Netlify 使用 Github
-
选择 对应的 Repository
site.xyz
-
配置
-
Branch to deploy: master
-
Build command:gatsby build
-
Publish directory:public/
-
-
点击 deploy site,等待 Netlify 自动部署完成.
-
后续配置
-
设置自定义域名,启用 SSL。建议使用 Netlify DNS,只需要在域名商处修改 DNS。netlify 会添加完成A 记录和came 。
-
启用 Identity ,修改 Registration preferences 为 Invite only,防止他人不经邀请修改项目。
-
如果要使用 Netlify CMS 启用 Git Gateway
-
如果 Algolia 等要使用密钥,可以在 Environment variables 配置。
-
要引用 js 代码,可以在 Post processing 中配置。
-
-
用 Github desktop pull 把项目pull到本地
四、安装主题,以 Casper 为例
-
导航到
sss.xyz
目录cd c:/users/github/ .xyz
-
安装主题
npm install gatsby-theme-casper