Deploying Hexo Blog

Last updated: 2020-07-10 10:54:35

    Operation Scenarios

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

    Prerequisites

    • You have installed Node.js (v8.6 or above; v10.0 or above is recommended).
    • 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

    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
    org: test # Organization information, which is optional. The default value is the `APPID` of your Tencent Cloud account
    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:
    If you have not logged in to or signed up for a Tencent Cloud account, you can directly log in or sign up:

    $ 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.

    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
    • 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.

    Was this page helpful?

    Was this page helpful?

    • Not at all
    • Not very helpful
    • Somewhat helpful
    • Very helpful
    • Extremely helpful
    Send Feedback
    Help