How to deploy the source from GitHub to KurocoFront
This tutorial explains how to deploy the source from GitHub to KurocoFront.
1. Prepare a repository
In GitHub, prepare a repository where you want to deploy to KurocoFront.
Note: Only static files can be hosted initially by default, so repositories must contain JavaScript frameworks such as Nuxt.js and HTML/CSS/JS files, as well as media files such as images.
The screenshot above shows Nuxt.js repository.
2. Connect GitHub repository with KurocoFront
On Kuroco's management page, click [KurocoFront] -> [GitHub] on the side menu to access KurocoFront's page.
Then click [Authorize GitHub Repository].
Login to GitHub once the login screen is displayed.
GitHub screen is displayed after login.
From "Repository access", select the repository to connect with KurocoFront.
Note: you can change Kuroco connection settings afterward. If you use multiple Kuroco with one account, you will have to select multiple repositories here because there is only one GitHub Apps for Kuroco.
Note: Please note that the repository which can be connected is the only one with an admin authority.
Click [Save] after selecting the repository.
KurocoFront page appears after the connection is completed.
The connection of GitHub repository and KurocoFront is completed.
3. Create kuroco_front.json
In order to use KurocoFront, kuroco_front.json
need to be placed under the root directory.
Note: Create kuroco_front.json under /static
in case of Nuxt.js.
{
"rewrites": [
{
"source": ".*",
"destination": "/index.html"
}
],
"redirects": [],
"basic":[],
"ip_restrictions":[]
}
Note: You can use the URL rewrite process, basic authentication and IP address access limit for kuroco_front.json
. The password of BASIC authentication is a plain text. Be careful when you change the repository to public.
.github/workflows
4. Place YAML file under To use GitHub action, place the YAML file under .github/workflows
.
Copy the part in KurocoFront's page shown below and create build.yml
by adjusting the build command and the branch name and such.
Place the created build.yml
under .github/workflows
to complete the configuration.
5. Display the front page
Click [Top page] button on the side menu.
If the deployed site is displayed without any issue, the deployment is complete.
Regarding the domain
KurocoFront's domain looks like https://sample.g.kuroco-front.app
by default.
Refer to How to use original domain on KurocoFront regarding the original domain.
Remark
- If you don't know how to setup GitHub Actions, feel free to contact us via Support Slack.
- Please not that the site will not be displayed without kuroco_front.json.