date: 2019-02-17T18:39:10+01:00
You'll need 3 tools to deploy your Hugo site on Platform.sh:
- node 8+: install git
- npx:
sudo npm install -g npx - Optional: the platform.sh cli tool
For each of these tools please refer to their own install page.
On macOS, this is basically 4 commands:
brew install node@8
sudo npm install -g npx
brew tap homebrew/homebrew-php
brew install curl git php72-cli php72-curl
curl -sS https://platform.sh/cli/installer | phpWe need to create a new GatsbyJS folder from a template:
$ npx gatsby new gatsby-hello https://github.com/gatsbyjs/gatsby-starter-blog
npx: installed 1384 in 33.248s
info Creating new site from git: https://github.com/gatsbyjs/gatsby-starter-blog.git
Cloning into 'gatsby-hello'...
...
success Created starter directory layout
info Installing packages...
yarn install v1.12.3
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "gatsby > [email protected]" has incorrect peer dependency "graphql@^0.12.0 || ^0.13.0".
warning "gatsby > [email protected]" has incorrect peer dependency "graphql@^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0".
warning "gatsby > [email protected]" has incorrect peer dependency "graphql@^0.13.0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 14.45s.
info Initialising git in gatsby-hello
Initialized empty Git repository in /media/psh/customers/gatsby-hello/.git/
info Create initial git commit in gatsby-helloYou can now run the development server:
$ cd gatsby-hello && npm run develop
> [email protected] develop /media/psh/customers/gatsby-hello
> gatsby develop
success open and validate gatsby-configs — 0.012 s
success load plugins — 0.355 s
success onPreInit — 0.509 s
success delete html and css files from previous builds — 0.004 s
success initialize cache — 0.006 s
success copy gatsby files — 0.010 s
success onPreBootstrap — 0.004 s
success source and transform nodes — 0.147 s
success building schema — 0.213 s
success createPages — 0.042 s
success createPagesStatefully — 0.024 s
success onPreExtractQueries — 0.003 s
success update schema — 0.129 s
success extract queries from components — 0.093 s
Generating image thumbnails [==============================] 4/4 0.0 secs 100%
success run graphql queries — 0.290 s — 9/9 31.14 queries/second
success write out page data — 0.002 s
success write out redirect data — 0.000 s
Generating image thumbnails [==============================] 11/11 0.3 secs 100%
info bootstrap finished - 3.63 s
⠂ onPostBootstrapdone generating icons for manifest
success onPostBootstrap — 0.114 s
DONE Compiled successfully in 2798ms 12:33:52 PM
You can now view gatsby-starter-blog in the browser.
http://localhost:8000/
View GraphiQL, an in-browser IDE, to explore your site's data and schema
http://localhost:8000/___graphql
Note that the development build is not optimized.
To create a production build, use npm run build
ℹ ｢wdm｣:
ℹ ｢wdm｣: Compiled successfully.Browse http://localhost:8000/ to check that everything is working as expected.
The npx template already creates a basic git repository:
$ git log
commit cd34e2366e6c28de7e0db53b527d6d4ddb1b7952 (HEAD -> master)
Author: Guillaume Moigneu <[email protected]>
Date: Mon Feb 18 12:33:26 2019 +0100
Initial commit from gatsby: (https://github.com/gatsbyjs/gatsby-starter-blog.git)
Create a Platform.sh project by signing to a trial account or log in to your account.
Select a Standard project and then choose the region you want your project to be hosted in.
Review and validate. You can now access your newly provisioned project. On the wizard, click Git remote and copy it.
Add the remote to your local project:
git remote add platform <project ID>@git.<region>.platform.sh:<project ID>.gitDon't push anything for now
Platform.sh relies on yaml configurations to configure the different containers to deploy.
Create the .platform.app.yaml file at the root of your project and add the following code:
# .platform.app.yaml
# The name of this application, which must be unique within a project.
name: 'gatsbyjs'
# The type key specifies the language and version for your application.
type: 'nodejs:8.9'
# The hooks that will be triggered when the package is deployed.
hooks:
# Build hooks can modify the application files on disk but not access any services like databases.
build: |
npm run build
# The size of the persistent disk of the application (in MB).
disk: 5120
# The configuration of the application when it is exposed to the web.
web:
locations:
'/':
# The public directory of the application relative to its root.
root: 'public'
index: ['index.html']
scripts: false
allow: trueWe need also two other files: routes.yaml and services.yaml. services.yaml is used to configure additional services like databases so we don't need it for that project. Just create the file:
mkdir .platform
touch services.yamlAdd routes.yaml in the .platform folder and add the following configuration:
"https://{default}/":
type: upstream
upstream: "gatsbyjs:http"This file tells the platform router to direct all incoming requests to our gatsbyjs container. Commit these new files:
git add .platform.app.yaml .platform
git commit -m "Add platform.sh configuration"We are now ready to deploy the project on Platform.sh. Push the repository to the new remote:
git push platform masterLet's review the ouput of your push. The first part is basic git. Files and commits are getting pushed to the remote:
Counting objects: 44, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (38/38), done.
Writing objects: 100% (44/44), 1.04 MiB | 16.98 MiB/s, done.
Total 44 (delta 2), reused 0 (delta 0)Platform.sh then analyze your repository, pull submodules and validate your configuration syntax:
Validating submodules
Validating configuration filesThe most important part is now to build your container image (the build hook). It will execute the npm run build we defined. As there is a package.json file in the folder, Platform.sh also launch an install
Building application 'gatsbyjs' (runtime type: nodejs:8.9, tree: fafb3d4)
Generating runtime configuration.
Building a NodeJS application, let's make it fly.
Found a `package.json`, installing dependencies.
> [email protected] install node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
...
up to date in 14.102s
success open and validate gatsby-configs — 0.009 s
success load plugins — 0.325 s
success onPreInit — 0.895 s
success delete html and css files from previous builds — 0.096 s
success initialize cache — 0.016 s
success copy gatsby files — 0.024 s
success onPreBootstrap — 0.006 s
success source and transform nodes — 0.104 s
success building schema — 0.326 s
success createPages — 0.056 s
success createPagesStatefully — 0.032 s
success onPreExtractQueries — 0.004 s
success update schema — 0.185 s
success extract queries from components — 0.134 s
success run graphql queries — 0.694 s — 9/9 13.00 queries/second
success write out page data — 0.012 s
success write out redirect data — 0.001 s
info bootstrap finished - 5.674 s
done generating icons for manifest
success onPostBootstrap — 0.287 s
success Building production JavaScript and CSS bundles — 11.784 s
success Building static HTML for pages — 0.844 s — 7/7 28.27 pages/second
Generated public/sw.js, which will precache 11 files, totaling 283621 bytes.
info Done building in 18.685 secPlatform.sh then checks that everything seems correct and deploys the container to a host. You'll see that Platform.sh also generates the Let's Encrypt TLS certificate for your project.
Executing pre-flight checks...
Compressing application.
Beaming package to its final destination.
W: Route '{default}' doesn't map to a domain of the project, mangling the route.
Provisioning certificates
Validating 1 new domain
Provisioned new certificate for 1 domains of this environment
(Next refresh will be at 2019-04-20 20:19:01+00:00.)
Environment certificates
- certificate 18bf626: expiring on 2019-05-18 20:19:01+00:00, covering master-7rqtwti-<project ID>.<region>.platformsh.site
Creating environment <project ID>-master-7rqtwti
Environment configuration
gatsbyjs (type: nodejs:8.9, size: M, disk: 5120)
Environment routes
http://master-7rqtwti-<project ID>.<region>.platformsh.site/ redirects to https://master-7rqtwti-<project ID>.<region>.platformsh.site/
https://master-7rqtwti-<project ID>.<region>.platformsh.site/ is served by application `gatsbyjs`The last output is the new URL of your application. You can also check that the project has been successully deployed on the web interface:
Now go the URL and you will be able to see your GatsbyJS site
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent