【融资24小时】2022年3月3日投融资事件汇总及明细
06-18
原文发表于：??腾讯云前言我经历了个人博客最繁忙的时代。当时大部分个人博客都是用WordPress搭建的，是传统服务器端语言+数据库相结合的。
与近年来流行的Hexo、Jekyll、Hugo等静态编译博客的架构相比，它们显然更易于部署和维护。这里我选择了Gatsby，使用wp-gatsby-markdown-exporter插件将原来的WordPress文章转换为Markdown完成数据迁移。
由于工作原因，我选择将个人网站部署在腾讯云上。也可以将Gatsby项目托管在GitHub Pages或者国内Coding上，然后将CNAME绑定到指定的域名上，这样更方便。
整体流程 整体流程温馨提示：我正在学习使用Figma制作图片。如果您需要上图的源文件，可以点击这里准备作品。
本地环境Gatsby基于Node.js，Gatsby CLI依赖Git。首先，确保本地开发环境已准备就绪。
安装 Node.js；安装 Git； Gatsby开发环境 Gatsby的CLI工具非常方便。在终端全局安装gatsby-cli代码语言： javascript copy npm install -g gatsby-cli 切换到开发目录gatsby new，然后设置项目名称，例如site，选择起始模板starter代码语言： javascript copy gatsby new 最后切换到刚才的site目录，gatsby开发代码语言： javascript copy cd /code/avenirzheng.net/v6/site #gatsby site目录。
打开浏览器访问gatsbydevelop。在某些情况下，由于代理或墙的原因，您无法使用 Gatsby CLI 从 github 拉取代码。
您可以通过可链接的npm源手动创建Gatsby站点目录。云服务器环境Gatsby最终会被编译成静态站点。
这里的云服务器环境需要一个Web服务器来存储静态网页。另外，Git环境需要使用git hooks将本地推送的文件同步到Web服务器。
这里我以CentOS 7.2的CVM为例。在腾讯云上搭建Nginx；在腾讯云上构建Git；配置 Nginx 站点。
为了方便，我们直接使用root帐号设置博客的Web目录，在服务器中创建/www/blog目录。代码语言： javascript copy mkdir /www/blog/chown -R $USER:$USER /www/blog/chmod -R /www/blog/ 然后在Nginx配置文件nginx.conf中配置站点信息。
代码语言：javascript 复制vim /etc/nginx/nginx.conf，在vim中找到服务器配置修改。按 i 键进入插入模式，按 esc 键退出编辑。
:wq 保存并退出。代码语言：javascript 复制root /www/blog； #修改为刚刚创建的目录 server_name avenirzheng.net; #修改为对应的绑定域名启动Nginx服务代码语言：javascript copy systemctl start nginx.service 配置Git仓库接下来我们创建一个Git仓库，将本地推送到仓库的文件同步到网站之前创建的目录。
我们还首先在服务器中创建 /www/git 目录。代码语言： javascript copy mkdir /www/git/chown -R $USER:$USER /www/git/chmod -R /www/git/ 然后在该目录下创建一个裸git仓库，并新建一个git hook，用于在本地挂接文件后自动将文件同步到网站。
代码语言： javascript copy cd /www/git/git init --bare blog.git 代码语言： javascript copy vim /www/git/blog.git/hooks/post-receive 在vim中，按i键进入插入模式并指定 Web 站点目录和 Git 目录的关系（粘贴以下两行代码），代码语言：javascript copy#!/bin/bashgit --work-tree=/www/blog --git-dir= /www/git/ blog.git checkout -fesc 键退出编辑，:wq 保存退出，最后修改文件权限添加可执行权限代码语言：javascript copy $ chmod +x /www/git/blog.git /hooks/post-receive 至此，我们的云服务器环境就准备好了。温馨提示：如果您不熟悉服务器命令行操作，可以在 CVM 上安装服务器运维面板，例如宝塔。
这里可以给Git仓库目录绑定一个站点域名，比如我的git.avenirzheng.net。参考上面创建站点的配置。
本地编译部署到服务器后，我们已经提到了本地和服务器的同步机制。这里我们可以使用gh-pages方便的将Gatsby编译的静态文件同步到仓库中。
本地安装 gh-pages 包。代码语言：javascript。
复制 npm install gh-pages --save-dev 配置 package.json。在脚本中添加部署发布指令。
该指令的意思是编译成功后运行gatsby build并调用gh-。 pages，将目标目录public下的文件推送到仓库的master分支。
代码语言：javascript 复制 "scripts": { "deploy": "gatsby build && gh-pages -d public -b master -r }，在本地开发目录下执行，最后输入两次服务器密码，我们的部署过程将会是你完成了。
版权声明：本文内容由互联网用户自发贡献，本站不拥有所有权，不承担相关法律责任。如果发现本站有涉嫌抄袭的内容，欢迎发送邮件 举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
标签：
相关文章
06-17
06-17
06-17
06-17
最新文章
【玩转GPU】ControlNet初学者生存指南
【实战】获取小程序中用户的城市信息（附源码）
包雪雪简单介绍Vue.js：开学
Go进阶：使用Gin框架简单实现服务端渲染
线程池介绍及实际案例分享
JMeter 注释 18 - JMeter 常用配置组件介绍
基于Sentry的大数据权限解决方案
【云+社区年度征文集】GPE监控介绍及使用