使用Gatsby Theme创建静态博客

iNote-使用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

  1. 导航至site.xyz

    cd c:/users/github/site.xyz
    
  2. 删除旧的.git 文件夹并将本地目录初始化为 Git 存储库

    rm -rf .git && git init
    
  3. 将文件添加到新的本地存储库中,为第一次提交准备文件

    git add .
    
  4. 提交本地存储库中暂存的文件

    git commit -m 'First commit'
    
  5. 在 Github 创建 Repositories site.xyz,自定义名称和是否公开

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

    git remote add origin https://github.com/xiyizhou/site.xyz.git
    
  7. 验证 URL

    git remote -v
    
  8. 将本地存储库中的更改推送到 GitHub

    git push -u origin master
    

三、 把项目从 Github 部署到 Netlify

  1. 用 Github 账号登录 Netlify

  2. 选择 New Site From Git,授权 Netlify 使用 Github

  3. 选择 对应的 Repository site.xyz

  4. 配置

    • Branch to deploy: master

    • Build command:gatsby build

    • Publish directory:public/

  5. 点击 deploy site,等待 Netlify 自动部署完成.

  6. 后续配置

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

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

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

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

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

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


四、安装主题,以 Casper 为例

  1. 导航到sss.xyz目录

    cd c:/users/github/ .xyz
    
  2. 安装主题

    npm install gatsby-theme-casper
    
发表于2019-10-23, 更新于2024-05-18