Skip to content

Commit

Permalink
Update auto-hexo-deploy.md
Browse files Browse the repository at this point in the history
  • Loading branch information
TabNahida committed Sep 28, 2024
1 parent b705279 commit a65a698
Showing 1 changed file with 49 additions and 27 deletions.
76 changes: 49 additions & 27 deletions source/_posts/tutorial/auto-hexo-deploy.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@ tags:
categories: tutor
---

# Automate Hexo Deployment to GitHub Pages with GitHub Actions
# Automate Hexo Deployment to GitHub Pages with GitHub Actions: A Comprehensive Tutorial

Deploying a static website generated by Hexo to GitHub Pages can be streamlined using GitHub Actions. This guide will walk you through setting up an automated workflow that:
Deploying a static website generated by Hexo to GitHub Pages can be seamlessly automated using GitHub Actions. This tutorial will guide you through setting up an automated workflow that:

1. **Generates your Hexo site** every time you push changes to your repository.
2. **Deploys the generated static files** to the `docs` folder of your `TabNahida/TabNahida.github.io` repository, enabling seamless updates to your GitHub Pages site.
2. **Deploys the generated static files** to the `docs` folder of a separate GitHub Pages repository, enabling continuous updates to your website.

By the end of this tutorial, you'll have a fully automated CI/CD pipeline for your Hexo blog, ensuring your website is always up-to-date with your latest content.
By the end of this guide, you'll have a fully automated CI/CD pipeline for your Hexo blog, ensuring your website remains up-to-date with your latest content without manual intervention.

---

Expand All @@ -38,12 +38,12 @@ By the end of this tutorial, you'll have a fully automated CI/CD pipeline for yo
Before you begin, ensure you have the following:

- **Two GitHub Repositories**:
- **Source Repository**: Your main repository containing the Hexo blog source code (e.g., `TabNahida/TabNahida`).
- **Target Repository**: Your GitHub Pages repository where the static site will be deployed (e.g., `TabNahida/TabNahida.github.io`).
- **Source Repository**: Your primary repository containing the Hexo blog source code (e.g., `YourUsername/YourBlog`).
- **Target Repository**: Your GitHub Pages repository where the static site will be deployed (e.g., `YourUsername/YourBlog.github.io`).

- **Hexo Installed and Configured**: Ensure your Hexo blog is properly set up and can generate static files locally using `hexo generate`.

- **Basic Knowledge of GitHub Actions**: Familiarity with creating and editing YAML files within GitHub repositories.
- **Basic Knowledge of GitHub Actions**: Familiarity with creating and editing YAML files within GitHub repositories will be beneficial.

---

Expand All @@ -54,7 +54,7 @@ To allow GitHub Actions to push changes to your target repository, you need a Pe
### Steps to Generate a PAT:

1. **Log in to GitHub**:
Navigate to [GitHub](https://github.com/) and sign in to your account.
- Navigate to [GitHub](https://github.com/) and sign in to your account.

2. **Access Developer Settings**:
- Click on your profile picture in the top-right corner.
Expand All @@ -67,7 +67,7 @@ To allow GitHub Actions to push changes to your target repository, you need a Pe

4. **Configure the Token**:
- **Note**: Enter a descriptive name, e.g., `GitHub Actions Deploy Token`.
- **Expiration**: Choose an appropriate expiration date. For security reasons, it's recommended not to set it to never expire.
- **Expiration**: Choose an appropriate expiration date. For security reasons, it's recommended **not** to set it to never expire.
- **Scopes**:
- Expand the **repo** section.
- Select **repo** (all sub-scopes under repo will be automatically selected), ensuring the token has full control of private repositories.
Expand All @@ -85,7 +85,7 @@ To securely use your PAT within GitHub Actions, store it as a secret in your sou
### Steps to Add the PAT as a Secret:

1. **Navigate to Your Source Repository**:
Go to `TabNahida/TabNahida` on GitHub.
- Go to `YourUsername/YourBlog` on GitHub.

2. **Access Repository Settings**:
- Click on the **Settings** tab.
Expand All @@ -106,11 +106,18 @@ With the PAT in place, you can now create a GitHub Actions workflow that automat
### Steps to Create the Workflow:

1. **Create the Workflow File**:
- In your source repository (`TabNahida/TabNahida`), navigate to the `.github/workflows/` directory. If it doesn't exist, create it.
- In your source repository (`YourUsername/YourBlog`), navigate to the `.github/workflows/` directory. If it doesn't exist, create it.
- Inside the `workflows` folder, create a new file named `deploy.yml`.

```
YourBlog/
└── .github/
└── workflows/
└── deploy.yml
```

2. **Define the Workflow Configuration**:
Open `deploy.yml` and add the following content:
- Open `deploy.yml` and add the following content:

```yaml
name: Deploy Hexo to GitHub Pages
Expand Down Expand Up @@ -152,7 +159,7 @@ With the PAT in place, you can now create a GitHub Actions workflow that automat
github_token: ${{ secrets.TARGET_REPO_TOKEN }}
publish_dir: ./public
destination_dir: docs
publish_repo: TabNahida/TabNahida.github.io
publish_repo: YourUsername/YourBlog.github.io
publish_branch: main
allow_empty_commit: true
```
Expand All @@ -163,7 +170,7 @@ With the PAT in place, you can now create a GitHub Actions workflow that automat

- **on**:
- **push**: Specifies that the workflow runs on `push` events.
- **branches**: The workflow triggers when there’s a push to the `main` branch.
- **branches**: The workflow triggers when there’s a push to the `main` branch. Adjust this if your default branch is different (e.g., `master`).

- **jobs**:
- **build-and-deploy**: The single job that builds and deploys the site.
Expand All @@ -188,13 +195,14 @@ With the PAT in place, you can now create a GitHub Actions workflow that automat
- **github_token**: References the secret `TARGET_REPO_TOKEN` for authentication.
- **publish_dir**: Points to the directory containing the generated static files (`./public`).
- **destination_dir**: Specifies the target directory in the repository (`docs`).
- **publish_repo**: The target repository where the site will be deployed (`TabNahida/TabNahida.github.io`).
- **publish_repo**: The target repository where the site will be deployed (`YourUsername/YourBlog.github.io`).
- **publish_branch**: The branch to which the files will be pushed (`main`).
- **allow_empty_commit**: Allows the workflow to run even if there are no changes to commit, preventing failures in such cases.

3. **Commit and Push the Workflow**:
- Save the `deploy.yml` file.
- Commit the new workflow to your repository:

```bash
git add .github/workflows/deploy.yml
git commit -m "Add GitHub Actions workflow for Hexo deployment"
Expand All @@ -205,12 +213,12 @@ With the PAT in place, you can now create a GitHub Actions workflow that automat

## Configuring GitHub Pages in the Target Repository

To ensure that GitHub Pages serves your site from the `docs` folder, you need to configure the settings in your target repository (`TabNahida/TabNahida.github.io`).
To ensure that GitHub Pages serves your site from the `docs` folder, you need to configure the settings in your target repository (`YourUsername/YourBlog.github.io`).

### Steps to Configure GitHub Pages:

1. **Navigate to the Target Repository**:
Go to `TabNahida/TabNahida.github.io` on GitHub.
- Go to `YourUsername/YourBlog.github.io` on GitHub.

2. **Access Repository Settings**:
- Click on the **Settings** tab.
Expand All @@ -223,7 +231,7 @@ To ensure that GitHub Pages serves your site from the `docs` folder, you need to
- Click **Save** to apply the changes.

4. **Verify the Configuration**:
- After saving, GitHub will provide a URL where your site is published, typically `https://TabNahida.github.io`.
- After saving, GitHub will provide a URL where your site is published, typically `https://YourUsername.github.io`.
- It may take a few minutes for the site to become available.

---
Expand All @@ -235,23 +243,24 @@ With everything set up, it's time to test the automated deployment process.
### Steps to Test:

1. **Make a Change to Your Blog**:
- Add a new post or update existing content in your Hexo source repository.
- Add a new post or update existing content in your Hexo source repository (`YourUsername/YourBlog`).

2. **Push the Changes to GitHub**:

```bash
git add .
git commit -m "Test deployment with a new post"
git push origin main
```

3. **Monitor the GitHub Actions Workflow**:
- Navigate to your source repository (`TabNahida/TabNahida`) on GitHub.
- Navigate to your source repository (`YourUsername/YourBlog`) on GitHub.
- Click on the **Actions** tab.
- You should see a workflow run named `Deploy Hexo to GitHub Pages` triggered by your push.
- Click on the workflow run to monitor its progress. Ensure all steps complete successfully.

4. **Verify the Deployment**:
- After the workflow completes, visit your GitHub Pages site at `https://TabNahida.github.io`.
- After the workflow completes, visit your GitHub Pages site at `https://YourUsername.github.io`.
- Confirm that the changes reflect as expected.

---
Expand All @@ -264,8 +273,8 @@ Despite following the steps carefully, you might encounter some common issues. H

**Error Message:**
```
remote: Permission to TabNahida/TabNahida.github.io.git denied to github-actions[bot].
fatal: unable to access 'https://github.com/TabNahida/TabNahida.github.io.git/': The requested URL returned error: 403
remote: Permission to YourUsername/YourBlog.github.io.git denied to github-actions[bot].
fatal: unable to access 'https://github.com/YourUsername/YourBlog.github.io.git/': The requested URL returned error: 403
```
**Solution:**
Expand All @@ -279,7 +288,7 @@ fatal: unable to access 'https://github.com/TabNahida/TabNahida.github.io.git/':
- Ensure there are no extra spaces or hidden characters.
- **Check Repository Access**:
- Confirm that the PAT owner has write access to the target repository (`TabNahida/TabNahida.github.io`).
- Confirm that the PAT owner has write access to the target repository (`YourUsername/YourBlog.github.io`).
### 2. **Unexpected Input Parameters**
Expand All @@ -291,8 +300,8 @@ Warning: Unexpected input(s) 'folder', 'target-folder', valid inputs are ['githu
**Solution:**
- **Use Supported Inputs**:
- If using an action that doesn't support certain input parameters, adjust your workflow accordingly.
- In this guide, we use `peaceiris/actions-gh-pages@v4`, which supports the necessary parameters.
- Ensure you're using the correct input parameters for the GitHub Action. In this tutorial, we're using `peaceiris/actions-gh-pages@v4`, which supports the necessary parameters.
- If using a different action, refer to its documentation to confirm supported inputs.
### 3. **Empty Commit Errors**
Expand Down Expand Up @@ -326,13 +335,26 @@ Changes take longer to appear on GitHub Pages.
- GitHub Pages might take a few minutes to reflect the latest changes.
- If delays persist, check the workflow logs for any deployment issues.
### 6. **Authentication Issues with Actions**
**Issue:**
The GitHub Action fails to authenticate with the target repository.
**Solution:**
- **Check PAT Validity**:
- Ensure the PAT hasn't expired and is correctly stored in the repository secrets.
- **Verify Repository Names**:
- Double-check that the `publish_repo` field in your workflow matches the exact name of your target repository (`YourUsername/YourBlog.github.io`).
---
## Conclusion
By following this comprehensive guide, you've set up an automated GitHub Actions workflow that:
- **Generates your Hexo site** every time you push updates to your repository.
- **Generates your Hexo site** every time you push updates to your source repository.
- **Deploys the generated static files** to the `docs` folder of your GitHub Pages repository.
This automation ensures your blog remains up-to-date without manual intervention, allowing you to focus on creating content. Additionally, using trusted actions like `peaceiris/actions-gh-pages` simplifies the deployment process and enhances reliability.
Expand Down

0 comments on commit a65a698

Please sign in to comment.