Gatsby 博客部署到腾讯云教程

原文发表于：https://avenirzheng.net/blog/2020/deploying-gatsby-to-tencent-cloud/

Gatsby ❤️ 腾讯云

前言

我算经历过个人博客最热闹的那个时代，那时大部分个人博客都是用 WordPress 搭建起来，与传统服务端语言 + 数据库的架构相比，近年流行的静态编译博客，如 Hexo、Jekyll、Hugo 显然更容易部署和维护，这里我选择了 Gatsby，并用 wp-gatsby-markdown-exporter 插件，把原来 WordPress 中的文章转成 Markdown 完成数据迁移。

因工作原因我选择在腾讯云上部署自己的个人网站，你也可以在 GitHub Pages 或国内的 Coding 上托管 Gatsby 项目，然后 CNAME 绑定到指定的域名就可以，更加方便。

整体流程

整体流程

Tips: 我正在学习用 Figma 做图，如需上图源文件可以点击这里

准备工作

本地环境

Gatsby 基于 Node.js, Gatsby CLI 依赖 Git，先确保本地开发环境已经 Ready。

• 安装 Node.js；
• 安装 Git；
• Gatsby 开发环境

Gatsby 的 CLI 工具非常方便，在终端全局安装 gatsby-cli

npm install -g gatsby-cli

切换到开发目录 gatsby new ，然后设置项目名称，例如 site ，选择起始模板 starter

gatsby new

最后在切换到刚才的 site 目录，gatsby develop

cd /code/avenirzheng.net/v6/site  #gatsby 站点目录。

gatsby develop

打开浏览器访问 http://localhost:8000/，至此本地开发环境已经好了。

Tips: 某些情况下因为代理或者墙的原因，无法使用 Gatsby CLI 从 github 上拉取代码，你可以通过能链通的 npm 源手动创建一个 Gatsby 站点目录。

云服务器环境

Gatsby 最终会编译成静态站点，这里云服务器环境需要 Web 服务器存放静态网页，另外需要 Git 环境使用 git hook 钩子同步本地推送的文件到 Web 服务器，这里我以 CentOS 7.2 的 CVM 为例。

• 腾讯云上搭建 Nginx；
• 腾讯云上搭建 Git；

配置 Nginx 站点

这里为了方便，我们直接用 root 账号为博客设置 Web 目录，在服务器中创建 /www/blog 目录。

mkdir /www/blog/
chown -R $USER:$USER /www/blog/
chmod -R 755 /www/blog/

然后 Nginx 配置文件 nginx.conf 中配置站点信息。

vim /etc/nginx/nginx.conf

在 vim 里找到 server 配置修改，i 键进入插入模式 esc 键退出编辑， :wq 保存并退出。

root /www/blog;    #修改为刚才创建的目录
server_name avenirzheng.net; #修改成对应绑定的域名

启动 Nginx 服务

systemctl start nginx.service　

配置 Git 仓库

接着，我们创建 Git 仓库，本地推送到仓库的文件，同步到前面创建的 Web 站点目录，同样先在服务器中创建 /www/git 目录。

mkdir /www/git/
chown -R $USER:$USER /www/git/
chmod -R 755 /www/git/

然后在目录内创建一个裸的 git 仓库，并创建一个新的 git 钩子，用于 hook 本地提交后自动同步文件到 Web 站点。

cd /www/git/
git init --bare blog.git

vim /www/git/blog.git/hooks/post-receive

在 vim 里 i 键进入插入模式，指定 Web 站点目录和 Git 目录的关联关系（将下面两行代码粘贴进去)，

#!/bin/bash
git --work-tree=/www/blog --git-dir=/www/git/blog.git checkout -f

esc 键退出编辑， :wq 保存并退出，最后再修改文件权限，增加可执行权限

$ chmod +x /www/git/blog.git/hooks/post-receive

至此，我们的云服务器环境就准备好了。

Tips: 如果不太熟悉服务器命令行操作，可以在 CVM 上安装服务器运维面板，例如 宝塔。

这里你可以为 Git 仓库目录绑定一个站点域名，例如我的 git.avenirzheng.net。参考上面创建站点的配置。

本地编译后部署到服务器

前面已经提到本地和服务器同步的机制，这里我们可以用 gh-pages ，很方便的把 Gatsby 编译后的静态文件同步至仓库。

本地安装 gh-pages 包

npm install gh-pages --save-dev

配置 package.json，在 scripts 中添加 deploy 发布指令，这段指令的意思是运行 gatsby build 编译成功后调起 gh-pages，把目标目录 public 的文件推送至 https://git.avenirzheng.net/blog.git 仓库的 master 的分支。

"scripts": {
    "deploy": "gatsby build && gh-pages -d public -b master -r https://git.avenirzheng.net/blog.git"
  },

在本地开发目录执行，最后输入两次服务器密码后，我们的部署流程就大功告成。

npm run deploy

Tips: 单独为仓库配置账号和密码或 ssh 密钥方便不用每次都输入账号密码