Automatically Post Your Blog

This blog describes a quick and easy way to set up your own website and automate the process of posting new blogs.

What is Hexo?

Hexo is a fast, simple, and powerful blog framework built with Node.js.

What is GitHub Pages?

GitHub Pages is a static site hosting service provided by GitHub. It allows you to host your website directly from a GitHub repository. You can configure this feature in the repository’s Settings ➔ Pages section.

What is GitHub Actions?

GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that enables you to automate your build, test, and deployment workflows. You can set up workflows to automatically build and test every pull request or deploy merged pull requests to production.

Automatically Post Your Blog

By using Hexo to generate static files from markdown, and deploying them with GitHub Actions, you can automate the process of publishing your blog to GitHub Pages.

Steps

Deployment Repository

1. Create a public repository on GitHub and enable GitHub Pages in the Settings ➔ Pages section. Every time you push to the main branch, GitHub Pages will automatically deploy the static files from the root directory of the main branch to the website.

Source Code Repository

1. Create a new GitHub repository for your blog’s source code. You can keep this repository private.
2. Initialize Hexo in this repository and start writing your blogs in markdown files.
3. Set up GitHub Actions in the source code repository. I recommend using the public action JamesIves/github-pages-deploy-action@v4 to deploy the static files generated by Hexo. Here’s the YAML configuration for your workflow:

   name: GitHub Actions Build and Deploy
   on:
       push:
           branches:
           - main
   jobs:
       build-and-deploy:
           runs-on: ubuntu-latest
       
           steps:
           - name: Checkout code
             uses: actions/checkout@v2
   
           - name: Install dependencies
             uses: actions/setup-node@v3
   
           - name: Build
             run: npm install && npm run clean && npm run build
   
           - name: Deploy to GitHub Pages
             uses: JamesIves/github-pages-deploy-action@v4
             with:
               folder: public
               repository-name: github_username/development_repo_name
               branch: main
               token: ${{ secrets.BLOG_BUILD }}

4. Create a fine-grained personal access token from your account’s Settings ➔ Developer settings ➔ Personal access tokens ➔ Tokens (classic). This token will be used to access the source code repository.
5. In this source code repository’s Settings ➔ Secrets and variables ➔ Actions section, create a new secret named BLOG_BUILD and set its value to your personal access token. This will be used to deploy the static files to the deployment repository.

Additional Features

Comments

Hexo supports many comment plugins. I am using the Utterances plugin for this blog.

Steps to Use Utterances

1. Visit Utterances GitHub page.
2. Click Install.
3. Select the repository you want to use Utterances with.
4. Go to Utterances site.
5. Fill in the form with the necessary details.
6. Add the following code to your post.ejs file.

Note: If you don’t have a post.ejs file, you can create one in your theme’s layout directory. For example: themes/default/layout/post.ejs.