Good news for me, who pays for the blog server again this month, even though I'm not making any money. There is a way to get your blog to the world ** for free ** using ** Gatsby x Netlify **! !! ** **
This time, I will introduce how to distribute a blog while using Docker: muscle:
I will introduce it in this article according to the above flow (・ ∀ ・) Click here for the sample repository after completion
I usually read Qiita's articles and always think "I want to know the file structure" (laughs). I will post the file structure after completion.
gatsby-ts-netlify-docker |- gatsby |- ... |- docker-compose.yml |- Dockerfile |- README.md
Docker will be used as a local node execution environment!
Dockerfile in the location I introduced earlier and write the following!
FROM node:12.17.0 RUN mkdir gatsby-ts-netlify-docker WORKDIR /gatsby-ts-netlify-docker RUN yarn global add gatsby-cli
FROM gets the image,
RUN creates the
gatsby-ts-netlify-docker folder, and
WORKDIR sets the working directory.
Finally, we have added
gatsby-cli, which is the heart of this time, to global.
If you can write it, create it in the place where you introduced
docker-compose.yml and write the following!
version: '3.8' services: gatsby: build: ./ tty: true stdin_open: true volumes: - ./:/gatsby-ts-netlify-docker environment: - NODE_ENV=development ports: - 8000:8000
Tell the location of the
stdin_open to set the connection between the container and the host, use
volumes to match the host and the container directory, and use
ports to set the port for setting up the server locally. ..
If you can place the
docker-compose.yml files, let's start the container after building!
$ docker-compose build $ docker-compose up -d
The container is now built and launched!
This time, we will build a site using the Starter Library that supports TypeScript.
First let's go inside the container to execute the command: open_hands:
$ docker-compose exec gatsby bash
I think you've put it in the container now!
The Library that I decided to introduce this time has the following features.
--Written in TypeScript --Minimal configuration
Therefore, the one chosen was ...
It was ** gatsby-starter-typescript-plus **! Link from here
We will introduce this.
gatsby new gatsby https://github.com/resir014/gatsby-starter-typescript-plus
If you think "It will take time", please be assured that it is a normal specification ~ (* ´∀ ｀ *)
If you see the following display, you are successful! !!
As you can see in the image, start the server with
gats by develop. ** But there is a caveat here ...! ** **
If you start it as above, it will not be displayed even if you access it with localhost.
So, start it with the following command.
gatsby develop -H 0.0.0.0
After building, when I try to access
localhost: 8000 ...?
If you see a screen like this, you're successful! !! !! : laughing:
If you do not have a Netlify account, you can easily register if you have a GitHub account, so please register.
When you register an account, you will be taken to a place like My Page, so please look for the button below. If you press here, you can link with the GitHub repository.
Please enter like this at the end.
Site settings in the upper right corner, select
Build & Deploy, press
Edit settings, and write as follows.
You can still access it from Netlify, but outsiders can't access it yet. By setting a subdomain there, you can access it from the outside.
As before, go to
Site settings, then to
Domain management, and select
Edit site name from
Options to change the subdomain.
For example, if you set the subdomain to
https://sample.netlify.app will be the domain.
You should now be able to access it from anywhere! !!
Actually, you don't need to set anything. Lol
Just push to the default remote branch on GitHub. This will ignite the Netlify side and deploy it automatically! (Dedicated: cry :)
Thank you for watching until the end.
I'm wondering what to use for the starter library Since the file is generated under Gatsby in the root directory, I was a little stumbled on Netlify's Build when I was doing it while looking at other people's articles, but it is relatively easy to introduce. Why don't you try it!
If you have any mistakes, simple impressions, or good points, please feel free to comment (´ 艸 ｀ *)