Gatsby 腾讯云
前言
我算经历过个人博客最热闹的那个时代, 那时大部分个人博客都是用 WordPress https://wordpress.org/ 搭建起来, 与传统服务端语言 + 数据库的架构相比, 近年流行的静态编译博客, 如 Hexo https://hexo.io/zh-cn/ ,Jekyll https://jekyllcn.com/ ,Hugo https://gohugo.io/ 显然更容易部署和维护, 这里我选择了 Gatsby https://www.gatsbyjs.org/ , 并用 插件, 把原来 WordPress 中的文章转成 Markdown 完成数据迁移.
因工作原因我选择在腾讯云上部署自己的个人网站, 你也可以在 GitHub Pages 或国内的 Coding https://runsisi.com/2019-04-27/coding-me-pages 上托管 Gatsby 项目, 然后 CNAME 绑定到指定的域名就可以, 更加方便.
整体流程
整体流程
Tips: 我正在学习用 Figma 做图, 如需上图源文件可以点击这里
准备工作
本地环境
Gatsby 基于 Node.JS, Gatsby CLI 依赖 Git, 先确保本地开发环境已经 Ready.
安装 Node.JS https://nodejs.org/zh-cn/download/ ;
安装 ;
Gatsby 开发环境 https://www.gatsbyjs.org/tutorial/part-zero/
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 上安装服务器运维面板, 例如 宝塔 https://www.bt.cn/ .
这里你可以为 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 密钥 https://www.cnblogs.com/0xcafebabe/p/5234678.html 方便不用每次都输入账号密码
来源: https://www.qcloud.com/developer/article/1602246