Gatsby 博客部署到腾讯云教程

2020-03-09

前言

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

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

整体流程

Gatsby 部署到腾讯云整体流程
Gatsby 部署到腾讯云整体流程

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

准备工作

本地环境

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

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 密钥方便不用每次都输入账号密码

Copyright © 2020 - Avenir Zheng