V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
scf10cent
V2EX  ›  Serverless

Hexo + Serverless Framework,简单三步搭建你的个人博客

  •  
  •   scf10cent · 2020-01-09 19:52:59 +08:00 · 4558 次点击
    这是一个创建于 1540 天前的主题,其中的信息可能已经有所发展或是发生改变。

    很多人都想拥有自己的个人博客,还得看起来漂亮、酷酷的。尤其对开发者来说,不仅可以分享技术(装)心得(逼),面试的时候还能成为加分。这里介绍两款好用的神器,不用忙前(前端)忙后(后端),简单 3min 即可搞定,本文免费分享给大家。

    PS:不会写代码?没有备案的域名?没有服务器?在这里,这些都不是事儿!

    工具介绍

    • Serverless Framework:Serverless Framework 是业界非常受欢迎的无服务器应用框架,开发者无需关心底层资源即可部署完整可用的 Serverless 应用架构。
    • Hexo:Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown (或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

    使用 Serverless Framework 部署一个 Hexo 网站只需三步::安装与初始化 → 配置 yml 文件 → 部署

    安装与初始化

    简单三步,即可通过 Serverless Website 组件快速构建一个 Serverless Hexo 站点。

    首先确保系统包含以下环境:

    • Node.js (Node.js 版本需不低于 8.6,建议使用 Node.js 10.0 及以上版本)
    • Git

    如未安装上述应用程序,可以参考安装说明

    1. 安装 Serverless Framework

    $ npm install -g serverless
    

    2. 安装 Hexo

    $ npm install -g hexo-cli
    

    3. 初始化项目

    $ hexo init hexo   # 生成 hexo 目录
    $ cd hexo
    $ npm install
    

    初始化完成后,hexo 文件夹的目录如下:

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

    4. 生成本地博客页面

    hexo g   # generate
    

    可以通过 hexo g 命令生成静态页面,如果希望在本地查看效果,也可以运行下列命令,通过浏览器访问 http://localhost:4000 查看页面效果。

    hexo s   # server
    

    配置 yml 文件

    项目目录下,创建 serverless.yml 文件

    cd.> serverless.yml
    

    将以下内容写入上述的 yml 文件里:

    # serverless.yml
    
    myWebsite:
      component: "@serverless/tencent-website"inputs:
        code:
          src: ./public # Upload static files generated by HEXO
          index: index.html
          error: index.html
        region: ap-guangzhou
        bucketName: my-bucket-hexo
    

    配置完成后,文件目录如下:

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

    部署

    通过 sls 命令进行部署,并可以添加 --debug 参数查看部署过程中的信息

    如您的账号未登陆注册腾讯云,您可以直接通过微信扫描命令行中的二维码进行授权登陆和注册。

    PS serverless --debug
    
      DEBUG ─ Resolving the template's static variables.
      DEBUG ─ Collecting components from the template.
      DEBUG ─ Downloading any NPM components found in the template.
      DEBUG ─ Analyzing the template's components dependencies.
      DEBUG ─ Creating the template's components graph.
      DEBUG ─ Syncing template state.
      DEBUG ─ Executing the template's components graph.
      DEBUG ─ Starting Website Component.
    
    Please scan QR code login from wechat
    Wait login...
    Login successful for TencentCloud
      DEBUG ─ Preparing website Tencent COS bucket my-bucket-1250000000.
      DEBUG ─ Deploying "my-bucket-1250000000" bucket in the "ap-guangzhou" region.
      DEBUG ─ "my-bucket-1250000000" bucket was successfully deployed to the "ap-guangzhou" region.
      DEBUG ─ Setting ACL for "my-bucket-1250000000" bucket in the "ap-guangzhou" region.
      DEBUG ─ Ensuring no CORS are set for "my-bucket-1250000000" bucket in the "ap-guangzhou" region.
      DEBUG ─ Ensuring no Tags are set for "my-bucket-1250000000" bucket in the "ap-guangzhou" region.
      DEBUG ─ Configuring bucket my-bucket-1250000000 for website hosting.
      DEBUG ─ Uploading website files from D:\hexotina\localhexo\public to bucket my-bucket-1250000000.
      DEBUG ─ Starting upload to bucket my-bucket-1250000000 in region ap-guangzhou
      DEBUG ─ Uploading directory D:\hexotina\localhexo\public to bucket my-bucket-1250000000
      DEBUG ─ Website deployed successfully to URL: https://my-bucket-1250000000.cos-website.ap-guangzhou.myqcloud.com.
    
      myWebsite:
        url: https://my-bucket-1250000000.cos-website.ap-guangzhou.myqcloud.com
        env:
    
      13s » myWebsite » done
    

    访问命令行输出的 website url,即可查看属于自己的 Serverless Hexo 站点。

    image

    如果需要更新 hexo 站点中的文章,只需要在本地重新运行 hexo g 更新本地页面,再运行 sls 就可以直接更新到 Hexo 网站啦~

    小结

    本文简单展示了如何利用 Serverless Framework 创建一个个人博客,Hexo 拥有丰富的插件系统,大家可以基于 Serverless Framework 和 hexo 开发更多个性化功能,如自定义 Themes、博文置顶、添加小图标等。这两个工具结合使用,开发方便部署快捷,非常适合想要快速搭建静态网站的开发者。

    参考:

    大家也可以访问:Serverless 中文技术社区,可以在 最佳实践 里查看更多关于 Serverless 应用的开发!

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5455 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 01:33 · PVG 09:33 · LAX 18:33 · JFK 21:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.