Deploying Hexo Blog

Last updated: 2021-03-29 15:51:16

    Overview

    This document describes how to use the Serverless Website component to quickly construct a serverless Hexo website.

    Prerequisites

    • Node.js has been installed (starting from September 1, 2020, Serverless components no longer support Node.js versions below 10.0. Please upgrade if needed).
    • You have installed Git.

    If the applications above are not installed, please install them as instructed in the Hexo documentation.

    Directions

    1. Install

    Install Serverless Framework through npm:

    $ npm install -g serverless
    

    Install Hexo through npm:

    $ npm install -g hexo-cli
    

    After installing Hexo, please run the following command to make Hexo create required files in the specified folder:

    $ hexo init hexo   # Generate a Hexo directory
    $ cd hexo
    $ npm install
    

    After the specified folder is created, its structure is as follows:

    .
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    |   ├── _drafts
    |   └── _posts
    └── themes
    

    After the installation is completed, run the hexo g command to generate a static webpage:

    $ hexo g   # generate
    

    Note:

    If you want to view the result locally, you can run the following command to access localhost:4000 and view the webpage in a browser:

    $ hexo s   # server
    

    2. Configure

    Create a serverless.yml file in the hexo directory:

    $ touch serverless.yml
    

    Configure the serverless.yml file as follows:

    # serverless.yml
    
    component: website # Name of the imported component, which is required. The `tencent-website` component is used in this example
    name: hexodemo # Name of the instance created by this `website` component, which is required
    
    app: websiteApp # Website application name, which is optional
    stage: dev # Information for identifying environment, which is optional. The default value is `dev`
    
    inputs:
      src:
        src: ./public # Upload static files generated by HEXO
        index: index.html
        # dist: ./dist
        # hook: npm run build
        # websitePath: ./
      region: ap-guangzhou
      bucketName: my-bucket
      protocol: https
      
    

    After the configuration is completed, the directory structure is as follows:

    .
    ├── .serverless
    └── hexo
        ├── public
        ├── ...
        ├── serverless.yml 
        ├── ...
        └── source
    

    3. Deploy

    Deploy by running the sls deploy command, and you can add the --debug parameter to view the information during the deployment process:

    $ sls deploy
    
    serverless ⚡ framework
    Action: "deploy" - Stage: "dev" - App: "websiteApp" - Instance: "hexodemo"
    
    region:  ap-guangzhou
    website: https://my-bucket-1258834142.cos-website.ap-guangzhou.myqcloud.com
    
    
    25s › hexodemo › Success
    

    You can view your serverless Hexo website by accessing the website URL output by the command line.

    Note:

    If you want to update an article in your Hexo website, you need to run hexo g locally again to generate a static webpage and run serverless to update the webpage.

    4. Remove

    You can run the following command to remove the Hexo website:

    $ sls remove --debug
    
      DEBUG ─ Flushing template state and removing all components.
      DEBUG ─ Starting Website Removal.
      DEBUG ─ Removing Website bucket.
      DEBUG ─ Removing files from the "my-bucket-1250000000" bucket.
      DEBUG ─ Removing "my-bucket-1250000000" bucket from the "ap-guangzhou" region.
      DEBUG ─ "my-bucket-1250000000" bucket was successfully removed from the "ap-guangzhou" region.
      DEBUG ─ Finished Website Removal.
    
      6s » myWebsite » done
    

    Account configuration (optional)

    Currently, you can scan a QR code to log in to the CLI by default. If you want to configure persistent environment variables/key information, you can also create a local .env file:

    $ touch .env # Tencent Cloud configuration information
    

    Configure Tencent Cloud's SecretId and SecretKey information in the .env file and save it:

    # .env
    TENCENT_SECRET_ID=123
    TENCENT_SECRET_KEY=123
    

    Note:

    • If you don't have a Tencent Cloud account yet, please sign up first.
    • If you already have a Tencent Cloud account, you can get SecretId and SecretKey in API Key Management.