Gatsby 是一个为 React 打造的快如闪电的现代化站点生成器
安装 Node.js;
安装 Git;
Gatsby 开发环境
Gatsby 的 CLI 工具非常方便,在终端全局安装 gatsby-cli
npm install -g gatsby-cli
切换到开发目录 gatsby new
,然后设置项目名称,例如 site
,选择起始模板 starter
。这里的https链接,可以是github 任意仓库地址。
gatsby new learn-gatsby https://github.com/gatsbyjs/gatsby-starter-default
# 两种启动方式(开发模式)
npm run develop
gatsby develop
# 默认端口是8000,可自定义端口启动
PORT=8001 npm start
# 编译发布
gatsby clean
gatsby build
除了上面创建基础网站的方式,还能新建一些有基本功能的网站。
1、Gatsby’s default starter
gatsby new learn-gatsby https://github.com/gatsbyjs/gatsby-starter-default
cd learn-gatsby gatsby develop
gatsby-starter-default - 官方说明 2、gatsby-starter-blog gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog gatsby-starter-blog - 官方说明 3、gatsby-starter-hello-world gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world gatsby-starter-hello-world - 官方说明 4、gatsby-starter-blog-theme gatsby new my-themed-blog https://github.com/gatsbyjs/gatsby-starter-blog-theme gatsby-starter-blog-theme - 官方说明 5、gatsby-starter-theme-workspace gatsby new my-theme https://github.com/gatsbyjs/gatsby-starter-theme-workspace gatsby-starter-theme-workspace - 官方说明
sudo yum install -y nginx
sudo yum -y install nodejs
mkdir /www/wedding/public
vim /etc/nginx/nginx.conf
配置文件主要修改以下内容:
这里ilovezaq.top_bundle.pem
和/ilovezaq.top.key
文件,从域名服务商网站的SSL服务里下载。
server {
listen 443;
server_name ilovezaq.top;
ssl on;
ssl_certificate /root/cert/ilovezaq.top_bundle.pem;
ssl_certificate_key /root/cert/ilovezaq.top.key;
location / {
root /www/wedding/public/;
index index.html index.htm;
}
}
server {
listen 80;
listen [::]:80;
root /www/wedding/public/;
server_name ilovezaq.top;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
error_page 404 /404.html;
location = /404.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
cd /etc/nginx/sbin
启动命令: ./nginx 或者 sudo systemctl start nginx
重启命令: ./nginx -s reload 或者 sudo systemctl reload nginx
结束命令: ./nginx -s quit
这里使用XFTP将编译好的public
文件夹下的内容全部复制到/www/wedding/public/
路径下即可。
浏览器访问对应域名,即可进入站点。
这里也可以通过git将本地文件协同上传到/www/wedding/public/
文件夹下,具体方式可查找相关git hook 相关资料。