3 minutes build your own blog using Hexo

Github repository for this article
This article gitee repository
Blog preview

1. What is Hexo?

Hexo is a fast, concise, and efficient blogging framework. Markdown can be used to write articles, which is convenient and efficient, without background services, static resources can be displayed. It can be deployed with Github Pages or personal cloud server.

2. Install

npm install -g hexo-cli
Copy the code

3. The initialization

hexo init <project-name>
cd <project-name>
npm install
Copy the code

4. The main API

Create a new article

hexo new <title>
Copy the code

insource/_posts/Under the new

For example, if you create a foo page, you’ll have an extra foo.md file in the source/_posts/ directory, where you can write your posts

hexo new foo
Copy the code

insourceCreate another directory under

For example, create the bar.md file under source/about/

hexo new page --path about/bar "bar"
Copy the code

Generating static files

The project root directory will have a public folder, which is the compiled HTML static file

hexo generate
Copy the code

Clear the cache

Delete the public folder generated above

hexo clean
Copy the code

Start the service

By default, http://localhost:4000 is accessed

hexo server
Copy the code

5. Install the desired theme

hexo themes

With so many themes, there’s always one for you

The theme chosen for this article is hexo-theme-fluid

Theme installation

npm install --save hexo-theme-fluid
Copy the code

Then create _config.fluid. Yml in the blog directory and copy the _config.yml content of the theme into it

Configure the topic

Modify _config.yml in Hexo blog directory:

theme: fluid  # specify a theme

language: zh-CN  # Specify the language, will affect the theme display language, modify as needed
Copy the code

Deployment of 6.

6.1 Github Pages Deployment

Create a repository on your Github called < your Github username >.github. IO
The SSH key pair is generated locally

ssh-keygen -t rsa -C "Username @example.com"
Copy the code

Add the public key content in the repository Settings > Deploy Keys and check the access permissions to confirm
Add the private key in the repository Settings > Secrets with key as DEPLOY_KEY and content as private key
The project _config. yML profile and the topic profile configure the deploy field

deploy:
  type: git
  repo: < your Github repository SSH SSH SSH
  branch: gh-pages
Copy the code

.github/workflows/deploy.yml

name: Hexo Github Pages Deploy

# https://github.com/marketplace/actions/hexo-action?version=v1.0.4

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    name: A job to deploy blog.
    steps:
      - name: Checkout
        uses: actions/checkout@v1
        with:
          submodules: true # Checkout private submodules(themes or something else).

      # Caching dependencies to speed up workflows. (GitHub will remove any cache entries that have not been accessed in over 7 days.)
      - name: Cache node modules
        uses: actions/cache@v1
        id: cache
        with:
          path: node_modules
          key: The ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: | ${{ runner.os }}-node-      - name: Install Dependencies
        if: steps.cache.outputs.cache-hit ! = 'true'
        run: npm ci

      # Deploy hexo blog website.
      - name: Deploy
        id: deploy
        uses: Sma11black/[email protected]
        with:
          deploy_key: The ${{ secrets.DEPLOY_KEY }}
          user_name: < your Github username > # (or delete this input setting to use bot account)
          user_email: < your Github email > # (or delete this input setting to use bot account)
          commit_msg: The ${{ github.event.head_commit.message }} # (or delete this input setting to use hexo default settings)
      # Use the output from the `deploy` step(use for test action)
      - name: Get the output
        run: | echo "${{ steps.deploy.outputs.notify }}"Copy the code

usegitSubmit the code in the repositoryActionsYou can see the automatic execution log of the YML configuration file. After execution, if no accident, the browser will access ithttps://< your Github username >.github. IO, you can see your blog!

6.2 Docker Container Deployment

Github repository Settings > Secrets add your ALIYUN_DOCKER_USERNAME, dockerhub and so on can also, here uses ALIYUN_DOCKER_USERNAME as an example
Add your ALIYUN_DOCKER_PASSWORD to github repository Settings > Secrets
Dockerfile

# 1. Base image installation
FROM alpine:3.15 AS base

ENV NODE_ENV=production \
  APP_PATH=/usr/share/nginx/hexo

WORKDIR $APP_PATH

# Speed up the following APK add installation using a domestic image
# If you want to package the image on Github, you don't need to use the inner image
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories

RUNApk add --no-cache --update nodejs=16.14.0-r0 yarn=1.22.17-r0

# 2. Install project dependencies and packaging based on the base image
FROM base AS install

COPY . ./

RUN yarn install

RUN yarn run build

FROM base AS result

# copy all files from public directory to /usr/share/nginx/hexo
COPY --from=install $APP_PATH/public .

# 3. Finally build on Nginx
FROM nginx:alpine

WORKDIR /usr/share/nginx/hexo

# Add your own configuration default.conf below
ADD nginx.conf /etc/nginx/conf.d/default.conf

COPY --from=result /usr/share/nginx/hexo .

EXPOSE 80
Copy the code

.github/workflows/deploy.yml

name: deploy ci

on:
  push: Trigger CI when # push
    branches: [main] # applies to the main branch
  # pull_request:
  # branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    # strategy:
    # matrix:
    # node-version: [14.x]
    # # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
      # pull main branch code
      - name: Checkout
        uses: actions/checkout@v2

      # # Specify nodeJS version
      # - name: Use Node.js ${{ matrix.node-version }}
      # uses: actions/setup-node@v2
      # with:
      # node-version: ${{ matrix.node-version }}
      # cache: "yarn"

      # install dependencies
      # - name: install
      # run: sudo yarn install

      # # packaged
      # - name: build
      # run: sudo yarn run build

      # Make docker image and push it to Ali Cloud container image service
      - name: build and push docker image
        run: | echo ${{ secrets.ALIYUN_DOCKER_PASSWORD }} | docker login registry.cn-hangzhou.aliyuncs.com --username ${{ secrets.ALIYUN_DOCKER_USERNAME }} --password-stdin docker image build -t hexo-blog . docker tag hexo-blog Registry.cn-hangzhou.aliyuncs.com/ < namespace >/< mirror repository name >:latest docker push Registry.cn-hangzhou.aliyuncs.com/ < namespace >/< mirror repository name >:latest docker logoutCopy the code

Visual management using Docker containers, for exampleportainerWait, pull the image you just made, and run the container. Alternatively, log in to the cloud server, manually pull out the image and run the container

# pull mirrorDocker pull registry.cn-hangzhou.aliyuncs.com/< namespace >/< mirror repository name >:latestRun the containerDocker container run -d -p < port exposed by your server host >:80 --name hexo-blog registry.cn-hangzhou.aliyuncs.com/< namespace >/< repository name >:latestCopy the code

Not surprisingly, access in the browserHTTP :< your IP address or assigned domain name >:< port >, you can see your blog!

7. Reference materials

Hexo official documentation
Hexo Fluid Theme User manual
Hexo Github Action