Technology selection

WKXK’s blog, welcome everyone to leave interactive comments ~

This article introduces the Hexo+ Keep +Github Actions technique for blog setup and automated deployment.

Begin to build

  1. Install node from nodejs

  2. Install hexo:

    npm install hexo-cli -g
Copy the code

  3. Initialize the blog directory:

    Hexo init wkxk.github. IOCopy the code

  4. Once the initialization is complete, we go to our directory:

    cd wkxk.github.io
Copy the code

  5. The installation

    npm install
Copy the code

  6. Clean it up and generate a static page

    hexo clean
hexo g
Copy the code

    G is generate

  7. Get your site up and running

    hexo s
Copy the code

    S is server, it’s running on the server

  8. Open your browser and type localhost:4000. From then on, your personal website is built so fast!

Decorate your website

Modify personal information on your website

Go to your website directory and open the _config.yml file, which is used to configure your website information.

My simple configuration is listed here, which you can see in this document

title: wkxk's Blog
subtitle: WKXK's personal blog
description: WKXK personal blog, mainly involves the programming (JavaScript, Vue2 Vue3, Webpack, node), to help with the individual learning, sharing the learning process
keywords: JavaScript,Vue2,Vue3,Vite,Webpack,node
author: wkxk
language: zh
timezone: Asia/Shanghai
Copy the code

Pick a topic

Just finished building the website, do you feel a little ugly, do not conform to your beautiful face? That’s what I think, so choose a theme to decorate it with, and here you can choose your theme: Hexo

Download the theme

After you have selected your theme, you can download the theme resources. For example, HERE I choose a keep theme to demonstrate:

Keep topic github: github.com/XPoet/hexo-…

Official document on the Keep theme: keep-docs.xp.o.cn /

# NPM installation is used here to facilitate later code managed maintenance
npm install hexo-theme-keep
Copy the code

Configure the topic

  • After the theme is downloaded, in the _config.yml file in your root directory, change theme to your theme name:
theme: keep
Copy the code
  • If you want to customizehexo-theme-keepTopic, you can refer toKeep Smooth upgrade of the theme.
    • At the root of the blogsourceDirectory to create a new folder_data
    • willnode_modulesUnder thehexo-theme-keepCopy in the directory_config.ymlThe file tosource/_data/, and renamed tokeep.yml.
    • inkeep.ymlYou can configure the corresponding properties according to the document.

Regenerate and run

hexo clean
hexo g
hexo s
Copy the code

We may often run these three commands, which we can set in package.json:

"scripts": {
  "dev": "hexo clean && hexo g && hexo s"
},
Copy the code

We can simply run it once using the following command:

yarn dev
# or
npm run dev
Copy the code

Keep the theme

Blog posts

Two ways to create your blog post

Order form

Use the following command in your blog directory:

Hexo new Hello (here write the name of your article)Copy the code

Your source/_posts will generate a hello. Md file, and you can write your blog content under this file. Write in Markdown syntax.

Direct new mode

The way to do it directly is to create a new Markdown file directly at Source /_posts.

tagged

Tagging makes your articles easily searchable.

Open TAB function:

hexo new page tags
Copy the code

At this point your source/ generated tags/index.md file, we will open it and change it to:

type: "tags"
comments: false
Copy the code

At this point you need to tag your article by saying at the head of your article:

Vue Virtual DOM Date: 2021-04-23 15:36:27 Tags: Vue Virtual DOM Tags: << other tags you want to hit >> --Copy the code

Add the classification

Categorizing and archiving is one of the characteristics of your blog.

Open the classification function:

hexo new page categories
Copy the code

“Categories /index.md” is generated in your source directory. Open it and change it to “categories/index.md” :

type: "categories"
comments: false
Copy the code

At this point you can file your articles by adding the following to the head of your article:

-- Title: Vue Virtual DOM Date: 2021-04-23 15:36:27 Tags: Vue Virtual DOM Categories: << other classes you want to divide >> --Copy the code

Note: Tags and Categories Make sure your configuration file _config.yml has tag_dir: tags and category_dir: categories opened. In addition, Markdown grammar is the most elegant, concise and simple to write. If you have not used the previous advice to learn Markdown grammar instructions, you can master it in about one hour. Because it’s as simple as HTML.

Add comments

The Keep topic provides a comment system, see keep-docs.xpoet.cn/usage-tutor…

Choose a comment system according to your preference. The author uses Gitalk, and the effect picture is as follows:

Deploy online

You can create free online addresses via GitHub Pages.

Create a Github Pages repository

Github. IO: create a public repository for xxx.github. IO: create a public repository for XXX. Once that’s done, you’ll have your own Git address.

Install hexo deployer — git

cd wkxk.github.io
npm install hexo-deployer-git --save
Copy the code

Configure your Git

Open your configuration file _config.yml:

Deploy: type: git repo: / / https://github.com/xxx/xxx.github.io.git enter your git addressCopy the code

Push your site to Github

hexo d
Copy the code

D deploy.

Visit your website

To access it, type your xxx.github. IO directly into your browser.

Bind your own domain name

Add the CNAME file

# enter the sources
cd sources
# create CNAME file, write your own domain name, such as: www.iwkxk.com
touch CNAME
Copy the code

Add two records for DNS resolution in the background of your domain name provider:

Host record: @ Record type: A Record value: 192.30.252.154 or 192.30.252.153 2. Host record: WWW record type: CNAME Record value: xxx.github. IOCopy the code

GitHub set domain name

Set your domain name on GitHub, click Settings on your GitHub blog project, go to GitHub Pages under Custom Domain and write your domain name, then save.

Automatic deployment

Following the previous steps we created an online blog using the Hexo + Keep theme. Here’s how to use GitHub Actions to automatically deploy the blog to GitHub Pages.

Buying a server

I bought here to move tile server, you can choose ali cloud according to their own needs, Baidu cloud is available.

GitHub Actions

Create a GitHub repository

  • Create a private repository to store the source code for the Hexo project. (Keep your vital information confidential)

    The master branch of the text repository is used to store source code

  • The public repository is used to store the compiled static pages. (There is no need to create a repository here, as we deployed Github Pages to xxx.github. IO)

    Xxx.github. IO The master branch of this repository is used to store static files

When the master of the private repository pushes content (e.g., theme files, article md files, images, etc.), GitHub Actions automatically compile and deploy to the master branch of the public repository.

Create a lot Token
  • Create a GitHub Token with REPo and Workflow permissions.

  • The newly generated Token is displayed only once. If any Token is lost, the newly generated Token is displayed again.

Create the repository secret

  • Add the Token generated above to the Secrets of the private repository and name the new secret HEXO_DEPLOY (it doesn’t matter what name you like).

  • Settings -> Secrets -> New repository secret.

The newly created secret HEXO_DEPLOY file is used in the Actions configuration file and must be consistent with the configuration file.

Add the Actions configuration file
  1. Create it at the root of your Hexo project.githubFolder.
  2. in.githubCreate a folderworkflowsFolder.
  3. inworkflowsCreate a folderhexo-deploy.ymlFile.

The hexo-deploy.yml file is configured as follows:

name: deploying Hexo project to GitHub pages
on:
  push:
    branches:
      - master This action is triggered when the # master branch has a push behavior

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@master

      - name: Build and Deploy
        uses: theme-keep/hexo-deploy-github-pages-action@master Use an action dedicated to deploying Hexo to GitHub Pages
        env:
          PERSONAL_TOKEN: The ${{ secrets.HEXO_DEPLOY }} # the name secret
          PUBLISH_REPOSITORY: wkxk/wkxk.github.io Public repository, format: GitHub username/repository name
          BRANCH: master WKXK/wkxK.github. IO repository is the master branch that is pushed to WKXK/WKXK.
          PUBLISH_DIR: ./public # Deploy files in the public directory

Copy the code

In the configuration file above, hexo-deploy-github pages-action is an action that deploys the Hexo blog to Github pages. Welcome to Star and Fork

Automatic deployment trigger process

  • Modify your Hexo blog source code (e.g., add articles, modify articles, change themes, modify theme profiles, etc.).

  • Push your Hexo project changes (commit only those changes) to the Master branch of the GitHub public repository (in this example: test).

  • GitHub Actions detects a push from the master branch and automatically executes the action configuration file command to compile the Hexo project into a static page and deploy it to the master branch of the private repository.

  • You can view the Actions you configured in the private repository.

conclusion

  • So far one is used from 0 to 1hexo+Keep the themeThe integrationGithub ActionsAutomatic deploymentblogIt was born.

  • In addition,keepThemes provide a lot of functions, you can followKeep the documentDo the corresponding configuration.

Author Blog Preview

If this article is helpful to you, you can support the author by liking the message, your support is my motivation to stick to ha ~

This article refer to

  • How can I use GitHub Actions to automatically deploy the Hexo blog
  • Hexo complete tutorial on building a personal website blog