こんにちは！ROOXIM株式会社COO 上原です。
今回は、HexoをGithubPagesでホスティングしていこうと思います。
どうなるの?
GithubにHexoのプロジェクトをPushするとGithubActionsが動いてGithubPagesにブログが公開されるようになります。
設定方法
ここではgithubActionsの設定とGithub Actionsの設定をご紹介しようと思います。
Githubのリポジトリの設定
まずは、GithubPagesのソースをGithub Actionsにしましょう。
Githubのリポジトリのページを開いてSettingsを選択しましょう。
![img]()
設定画面を開いたら、左のメニューからPagesを選択して、Build and DeploymentのSourceをGithub Actionsに設定しましょう。
![img]()
Github Actionsの設定
プロジェクトに.github/workflows/pages.ymlファイルを追加します。
内容は以下をそのまま記載します。(nodeのバージョンは18を利用しています。)
.github/workflows/pages.yml1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| name: Pages
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
with:
token: ${{ secrets.GITHUB_TOKEN }}
submodules: recursive
- name: Use Node.js 16.x
uses: actions/setup-node@v2
with:
node-version: '18'
- name: Cache NPM dependencies
uses: actions/cache@v2
with:
path: node_modules
key: ${{ runner.OS }}-npm-cache
restore-keys: |
${{ runner.OS }}-npm-cache
- name: Install Dependencies
run: npm install
- name: Build
run: npm run build
- name: Upload Pages artifact
uses: actions/upload-pages-artifact@v2
with:
path: ./public
deploy:
needs: build
permissions:
pages: write
id-token: write
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2
|
mainブランチにPush
変更をコミットしてPushしましょう。
公開されているか確認
カスタムドメインを設定していない場合、https://<githubのusername>.github.io/<repository名>で公開されています。
ブラウザでアクセスして公開されているか、確認しましょう。
最後に
以上でGithub pagesでサイトを公開出来ました。
あとはカスタムドメイン化したりなどで更に独自のページにしていくと良いでしょう。
