Skip to content

Commit dbd0daa

Browse files
urban-adeiningerdeining
urban-adeininger
authored and
deining
committed
User guide, deployment page: add section 'Deployment on GitHub Pages'
1 parent 5b83257 commit dbd0daa

1 file changed

Lines changed: 146 additions & 7 deletions

File tree

  • userguide/content/en/docs/Deployment

‎userguide/content/en/docs/Deployment/_index.md‎

Lines changed: 146 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,11 @@ Then follow the instructions in [Host on Netlify](https://gohugo.io/hosting-and-
4545
* If you are using Docsy as a [Hugo module](/docs/get-started/docsy-as-module/) or NPM package, you can just specify `hugo`.
4646
3. Click **Show advanced**.
4747
4. In the **Advanced build settings** section, click **New variable**.
48-
5. Specify `HUGO_VERSION` as the **Key** for the new variable, and set its **Value** to the latest version of Hugo (minimum required version: `0.110.0`).
49-
6. In the **Advanced build settings** section, click **New variable** again.
50-
7. Specify `GO_VERSION` as the **Key** for the new variable, and set its **Value** to the latest version of Go (minimum recommended version: `1.18`).
48+
5. Specify `NODE_VERSION` as the **Key** for the new variable, and set its **Value** to the [latest LTS version](https://nodejs.org/en/download/) of node.js (minimum recommended version: `v18.x`).
49+
6. In the **Advanced build settings** section, click **New variable**.
50+
7. Specify `HUGO_VERSION` as the **Key** for the new variable, and set its **Value** to the [latest version](https://github.com/gohugoio/hugo/releases) of Hugo (minimum recommended version: `0.110.0`).
51+
8. In the **Advanced build settings** section, click **New variable** again.
52+
9. Specify `GO_VERSION` as the **Key** for the new variable, and set its **Value** to the [latest version](https://go.dev/dl/) of Go (minimum recommended version: `1.18`).
5153

5254
If you don't want your site to be indexed by search engines, you can add an environment flag to your build command to specify a non-`production` environment, as described in [Build environments and indexing](#build-environments-and-indexing).
5355
1. Click **Deploy site**.
@@ -59,9 +61,9 @@ For example, if you want to use a version of `postcss-cli` later than version 8.
5961

6062
```
6163
"devDependencies": {
62-
"autoprefixer": "^9.8.8",
63-
"postcss-cli": "^8.0.0",
64-
"postcss": "^8.0.0"
64+
"autoprefixer": "^10.4.14",
65+
"postcss-cli": "^10.1.0",
66+
"postcss": "^8.4.24"
6567
}
6668
```
6769

@@ -71,6 +73,142 @@ Alternatively, you can follow the same instructions but specify your **Deploy se
7173

7274
If you have an existing deployment you can view and update the relevant information by selecting the site from your list of sites in Netlify, then clicking **Site settings** - **Build and deploy**. Ensure that **Ubuntu Focal 20.04** is selected in the **Build image selection** section - if you're creating a new deployment this is used by default. You need to use this image to run the extended version of Hugo.
7375

76+
## Deployment on GitHub Pages
77+
78+
If your repo is hosted on [GitHub](https://github.com), the simplest option to serve your site is deployment on [GitHub pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages). There are project, user and organization sites; for a project site, your site URL will be `http(s)://<username>.github.io/<repository_name>`, custom domains are also supported. GitHub pages come with [continuous deployment](https://docs.github.com/en/actions/deployment/about-deployments/about-continuous-deployment) via GitHub actions and the [marketplace for actions](https://github.com/marketplace/actions) has a lot of useful tools for spell and link checking, deploy preview and more. Using your existing GitHub account, you can start with the free plan of GitHub Pages for publicly available repositories, with premium tiers available for business use cases.
79+
80+
Before deploying on GitHub Pages, make sure that you've pushed your site source to your chosen GitHub repo, following any setup instructions in [Using the theme](/docs/get-started/docsy-as-module).
81+
82+
1. With GitHub Pages, a site is published to the branch `gh-pages` and served from there by default. Therefore, you have to create this branch first, either in the GitHub web interface or via command line (at the root of your local repo clone):
83+
84+
```console
85+
$ git checkout -b gh-pages
86+
Switched to a new branch 'gh-pages'
87+
```
88+
89+
1. Then push this local branch to your repo:
90+
91+
```console
92+
$ git push --set-upstream origin gh-pages
93+
details omitted …
94+
* [new branch] new -> new
95+
branch 'gh-pages' set up to track 'origin/gh-pages'.
96+
```
97+
98+
1. Now switch back to the `main` (or `work`) branch of your repo:
99+
100+
```console
101+
$ git checkout main
102+
Switched to branch 'main'
103+
104+
```
105+
106+
1. At the root of your local repo, create a new empty workflow file `.github/workflows/deploy-github-pages.yml`:
107+
108+
```console
109+
$ mkdir -p .github/workflows
110+
$ touch .github/workflows/deploy-github-pages.yml
111+
```
112+
113+
{{% alert title="Workflow setup with docsy example site" color="primary" %}}
114+
Please note that a such a deployment [workflow file](https://github.com/google/docsy-example/blob/master/.github/workflows/deploy-github-pages.yml) was added to the docsy-example site recently. If you used the example site as template for your new site as described [here](https://www.docsy.dev/docs/get-started/docsy-as-module/example-site-as-template/), please check your repo for this file, it might be part of your site repo already.
115+
{{% /alert %}}
116+
117+
1. Open the newly created, empty workflow file in an editor of your choice, paste in the code below and save the file:
118+
119+
```yaml
120+
name: Deployment to GitHub Pages
121+
122+
on:
123+
workflow_dispatch:
124+
push:
125+
branches:
126+
- main # <-- specify the branch you want to deploy from
127+
pull_request:
128+
129+
env:
130+
REPO_NAME: ${{ github.event.repository.name }}
131+
REPO_OWNER: ${{ github.repository_owner }}
132+
133+
jobs:
134+
deploy:
135+
runs-on: ubuntu-22.04
136+
concurrency:
137+
group: ${{ github.workflow }}-${{ github.ref }}
138+
steps:
139+
- uses: actions/checkout@v3
140+
with:
141+
fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod
142+
143+
- name: Setup Hugo
144+
uses: peaceiris/actions-hugo@v2
145+
with:
146+
hugo-version: '0.110.0'
147+
extended: true
148+
149+
- name: Setup Node
150+
uses: actions/setup-node@v3
151+
with:
152+
node-version: '18'
153+
cache: 'npm'
154+
cache-dependency-path: '**/package-lock.json'
155+
156+
- run: npm ci
157+
- run: hugo --baseURL https://${REPO_OWNER}.github.io/${REPO_NAME} --minify
158+
159+
- name: Deploy
160+
uses: peaceiris/actions-gh-pages@v3
161+
if: ${{ github.ref == 'refs/heads/main' }} # <-- specify same branch as above here
162+
with:
163+
github_token: ${{ secrets.GITHUB_TOKEN }}
164+
```
165+
166+
1. Afterwards, add the file to the staging area, commit your change and push the change to your remote GitHub repo:
167+
168+
```console
169+
$ git add .github/workflows/deploy-github-pages.yml
170+
$ git commit -m "Adding workflow file for site deployment"
171+
$ git push origin
172+
```
173+
174+
1. In your browser, make sure you are logged into your GitHub account. Then visit the subsection `Pages` in your repo `Settings`. You may use the URL below to directly jump to this subsection:
175+
176+
```
177+
URL Repo Page settings: https://github.com/<username>/<repository_name>/settings/pages
178+
```
179+
180+
1. Under `Build and deployment`, select `Deploy from a branch` in the **source** dropdown.
181+
182+
2. From the **branch** dropdown, select `gh-pages` as branch where the site is built from.
183+
184+
3. From the **folder** dropdown, select `/(root)` as root directory.
185+
186+
1. That's it! Your deployment workflow for your site is configured!
187+
188+
Any future push to the branch specified in your workflow file will now trigger the action workflow defined in this file. Additionally, you are able to trigger the deployment manually inside your web browser via the GitHub web UI.
189+
190+
Once you pushed to your repo, you can see the progress of the triggered workflow in the `Actions` tab of the the GitHub web UI:
191+
192+
```
193+
URL 'Repo actions': https://github.com/<username>/<repository_name>/actions
194+
```
195+
196+
After the first successful deployment, a new environment `github-pages` is added to your repo, you will find it at the right of your repo main view (below `Releases` and `Packages`). When clicking on the newly created environment, a list of deployments is presented to you:
197+
198+
```
199+
URL 'Repo deployments': https://github.com/<username>/<repository_name>/deployments/
200+
```
201+
202+
{{% alert title="Correct baseURL setting" color="primary" %}}
203+
Make sure to correctly set your site's `baseURL`, either via hugo's `--baseURL '…'` command line parameter or inside your your `hugo.toml`/`hugo.yaml`/`hugo.json` configuration file. When deploying to GitHub pages your `baseURL` needs to be set to `https://<USERNAME>.github.io/<repository_name>`, otherwise your site layout will be broken.
204+
{{% /alert %}}
205+
206+
{{% alert title="Further reading" color="primary" %}}
207+
In the hugo docs, you can find a chapter [Hosting on GitHub]( https://gohugo.io/hosting-and-deployment/hosting-on-github/).
208+
209+
For advanced use cases, the [`hugo-action`](https://github.com/peaceiris/actions-hugo) used inside the workflow file has more configuration options, which are well [documented](https://github.com/marketplace/actions/hugo-setup).
210+
{{% /alert %}}
211+
74212
## Deployment with Amazon S3 + Amazon CloudFront
75213
76214
There are several options for publishing your web site using [Amazon Web Services](https://aws.amazon.com), as described in this [blog post](https://adrianhall.github.io/cloud/2019/01/31/which-aws-service-for-hosting/). This section describes the most basic option, deploying your site using an S3 bucket and activating the CloudFront CDN (content delivery network) to speed up the delivery of your deployed contents.
@@ -117,7 +255,8 @@ deployment:
117255
}
118256
]
119257
}
120-
}{{< /tab >}}
258+
}
259+
{{< /tab >}}
121260
{{< /tabpane >}}
122261
123262
1. Run the command `hugo --gc --minify` to render the site's assets into the `public/` directory of your Hugo build environment.

0 commit comments

Comments
 (0)