Hexo profile

Hexo is a Static blog framework based on Node.js. It is easy to install and use, and can easily generate static web pages hosted on GitHub and Coding. Hexo is the preferred framework for building blogs. You can visit Hexo’s official website for more details, because the creator of Hexo is Taiwanese and friendly to Chinese, you can choose Chinese for viewing.

Hexo setup steps

  • Install Git
  • Installation Node. Js
  • Install Hexo
  • Write dead simple actions
  • Push to making
  • Published articles

Our development process is in the WIN environment, which has nothing to do with the environment in nature and has little impact. First of all, we need to ensure that git and Node. js are installed on our computer. Git is for us to easily check out and push our code, node.js is for us to build the scaffolding of Hexo and generate the project structure. We will provide the source code for the generated project structure later, so we don’t need Node.js anymore, but we recommend that you build your own, be flexible, and browse locally to build your project

  • We are not going to explain the above two environments here, but if you don’t know how to install it, you can just start with the scaffolding construction of Hexo

Hexo installation and project initialization

First we can use CMD command window or vscode command window, it’s all the same, we’ll use vscode here because we’ll use vocode for the ide of the later project;

  • To open vscode, pressCTRL+‘Bring up the command window and type
CD H:\project\ -- Switch to the directory of our project. Node -v -- Check the node environment version. NPM -v -- Check the NPM versionCopy the code

If the two commands are used to query the installation status of Node. js, the output is normal

  • Execute the commandnpm install -g hexo-cliTo install Hexo’s scaffolding support, which is installed into the Node plugin,

After downloading the CLI program, we will initialize the project

  • Create a project directory with your own name, such as ‘myblog’

Command: mkdir myblog,

  • Initialize the Hexo project mylog

Command: hexo init project directory name: hexo init myblog

  • Wait until it’s built, as shown above, so let’s open the project directory directly through vscodemyblog

  • After the creation is complete, the following information exists in the specified folder:

    1. node_modules: depend on the package
    2. public: Stores the generated page
    3. scaffolds: Generate some templates for the article
    4. source: For storing your articles
    5. themesTheme:
    6. ** _config.yml: blog profile **

  • At this point we can directly command the console to compile the startup project

cd .\myblog\`

npm installCopy the code

The following problems may occur during execution

5 packages looking for fundraising, executionnpm fundView details (donation link); Discover a low-severity vulnerabilitynpm audit fixTo repair, ornpm auditCheck out more information. Through the commandnpm auditThe details are:

=== npm audit security report === Manual Review Some vulnerabilities require your attention to resolve Visit https://go.npm.me/audit-guide for additional guidance Low Prototype Pollution Package minimist Patched in >=0.2.1 <1.0.0 | | > = 1.2.3 Dependency of hexo Path hexo > swig - templates > optimist > minimist More info https://npmjs.com/advisories/1179 found 1 low severity vulnerability in 470 scanned packages 1 vulnerability requires manual review. See the full report for details.Copy the code

If these messages appear, follow the prompts or not. We can just ignore it. It doesn’t affect our project

  • Launch the project via Hexo S, accessed at http://localhost:4000

The effect is as follows:

  • We can get throughhexo gTo generate static files inpublicDirectory, similar to the following:

This is the result of our local scaffolding run, but it will be a hassle to generate static pages vividly each time we use them, and we can leave it to Github to do this

Github Actions for automatic deployment

Github Actions With Github Actions you can automate your workflow from idea to production It’s a bit abstract, but we know what Github is, a code repository that provides distributed version control and source code management. In a real world scenario, if you write code for a website and store it on Github, you’ll be able to do just that, and then you’ll need to deploy the code to get people to visit your site. Also, if you change the code, you need to test it separately. Ideally, testing, deployment, and so on should be done automatically when you submit code to master. Github Actions is now available to automate and customize your project’s Workflow, as shown on the website.

  • First let’s take a look at some of the terminology of GitHub Actions

(1) Workflow: Continuous integration of a running process, that is, a workflow. (2) Job: A Workflow consists of one or more jobs. It is a continuous integrated operation that can complete multiple tasks. (3) Steps: Each job consists of multiple steps to be completed step by step. Each step in a job is performed in the same virtual environment, allowing information to be shared using file systems. (4) Action: Each step can execute one or more actions in turn. You can create your own actions and use actions shared by the GitHub community.

  • Here we do not elaborate too much knowledge, recommend everyone to go online to see, or go here -> GitHub Actions introductory tutorial – Ruan Yifeng network log, personal feeling or very good article, can learn!!

Deploy to Tencent cloud

  • Below we post our configuration (deployed to Tencent Cloud CloudBase)
name: GitHub Actions Build and Deploy on: push: branches: - master jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: 1. git checkout... uses: actions/checkout@v1 - name: 2. setup nodejs... uses: actions/setup-node@v1 - name: 3. install hexo... run: | npm install hexo-cli -g npm i -S hexo-prism-plugin -g npm install hexo-generator-search --save -g npm i hexo-permalink-pinyin -g npm i --save hexo-wordcount -g npm install hexo-filter-github-emojis -g npm install hexo-generator-feed -g npm install - name: 4. hexo generate public files... Run: | hexo clean hexo g # deployed to Tencent cloud - name: the Deploy static to Tencent CloudBase id: deployStatic USES: TencentCloudBase/cloudbase-action@v1 with: secretId: ${{ secrets.SECRET_ID }} secretKey: ${{ secrets.SECRET_KEY }} envId: ${{ secrets.ENV_ID }} staticSrcPath: ./public - name: Get the deploy result run: echo "Deploy to cloudbase result ${{ steps.deployStatic.outputs.deployResult }}"Copy the code

As a quick note, this is actually running in a container on Github

  1. So first of all, I’m going to checkout our code to the container, and I’m just going to use the actions that have been written,
  2. Then load the uses: Actions /setup-node@v1 environment, which supports Node.js
  3. Then run, just write the commands we normally use, and then hexo g generates a static file,
  4. SECRET_ID, SECRET_KEY, ENV_ID The following are actions for Tencent’s static web hosting service. The attributes need to be configured: SECRET_ID, SECRET_KEY, ENV_ID

Deployed to GitHubPage

  • Some partners like direct use of GitHubPage as a host object, so the implementation is very simple, the above project push Github, as a source code repository, can be directly privatized, actions configuration inside need to modify the back said
  • You need to create a repository on Github to store the generated static files. The command for this repository has the following format:GitHub User name. GitHub. IOFollow this to create the repository if you have a usernameadminSo the name of the warehouse isadmin.github.io  
  • After creation, do not create any files inside, just keep empty, configure in the source repositorygithub ActionsThe configuration file is similar to the above, except for the following:
name: GitHub Actions Build and Deploy on: push: branches: - master jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: 1. git checkout... uses: actions/checkout@v1 - name: 2. setup nodejs... uses: actions/setup-node@v1 - name: 3. install hexo... run: | npm install hexo-cli -g npm i -S hexo-prism-plugin -g npm install hexo-generator-search --save -g npm i hexo-permalink-pinyin -g npm i --save hexo-wordcount -g npm install hexo-filter-github-emojis -g npm install hexo-generator-feed -g npm install - name: 4. hexo generate public files... Run: | hexo clean hexo g # submitted to our the warehouse where the static resources - name: the Build and Deploy USES: y4code/hexo - Deploy - action @ master env: PERSONAL_TOKEN: ${{ secrets.ACCESS_TOKEN }} PUBLISH_REPOSITORY: it-briefcode/it-briefcode.github.io # The repository the action should deploy to. BRANCH: master # The branch the action should deploy to. PUBLISH_DIR: ./public # The folder the action should deploy.Copy the code
  • There’s a variable up thereACCESS_TOKENIs what we need to configure, the configuration method is as follows, first enter the Settings

After entering, click the last option Developer Settings to enter and click generate token

Enter the following picture, click ok after setting, a string of tokens will be displayed to copy and record, this is only displayed once, so it is best to record in the notepad.

Once you have the token, go back to our source repository and select the Settings. Add a variable as follows

${{secrets.access_token}} is the same as the value of the obtained token

So far, our construction is complete, if you encounter any problems can leave a message to exchange learning!

This article was published by AnonyStar. It may be reproduced but the original source must be claimed. Admire “the art of elegant coding” firmly believe that practice makes perfect, and strive to change your life