使用CloudStudio和Pages搭建免费博客

最近 Coding 和 Tencent 合作了 升级帐户之后 免费使用各种资源 所以 就重新整理了一下博客 顺带写一下搭建博客的过程

初始化环境

注册账号

初始化一个空的仓库

  • 登录完成后
  • 点击项目创建 或这节点击 这个按钮
  • 名称输入 blog 或者别的 但是下面要做对应修改

CloudStudio中初始化一个工作空间

  • 打开 CloudStudio
  • 点击新建工作空间 选择刚才创建的项目 blog 环境选择 Hexo 点击创建
  • 然后进入工作空间

初始化博客

安装 Hexo

  • 先测试一下 hexo 命令是否可以使用 如果不行

    • 点击下面的终端 执行下列命令
      1
      npm install hexo
  • 切换到 source 分支 因为Master分支需要用来部署静态文件

    1
    git checkout -b source
  • 初始化博客 (下列所有的配置 均在 blog 文件夹下完成)

    1
    2
    hexo init blog
    cd blog
  • 测试博客 运行临时服务器

    1
    hexo s
  • 看到下列内容代表启动成功

    1
    2
    INFO  Start processing
    INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

创建临时访问链接

  • 点击右侧的访问链接
  • 输入 4000
  • 点击创建链接
  • 然后点击右边的复制按钮就可以在浏览器打开了
  • 图片

调整博客主题以及相关设置

博客基本配置

  • 打开配置文件 _config.yml 填写相关参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Site
title: 博客标题
subtitle: 博客附标题
description: 博客描述
author: MiaoWoo #博客作者
language: zh-CN #语言
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://用户名.coding.me
root: /blog/
permalink: posts/:title/ #这里可以调整为短链接 当然你也可以用默认的
permalink_defaults:

安装 Next 主题

  • 下载 Next 主题

    1
    git clone https://github.com/theme-next/hexo-theme-next themes/next
  • 配置主题 在 CloudStudio中依次打开 _config.yml 按下 Ctrl+F 搜索 theme

    1
    2
    3
    4
    5
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    #theme: landscape
    theme: next
  • 测试主题 开启临时服务器然后 创建临时访问链接

    1
    hexo s
  • 基本配置 新建 source/_data/next.yml 文件 不存在的文件夹请自行新建 或者执行下列命令

    1
    2
    mkdir -p source/_data
    touch source/_data/next.yml
  • 配置底部 主题配置 next.yml 新增

    1
    2
    3
    4
    5
    6
    footer:
    since: 2018 #从那一年开始写博客
    icon:
    name: heart
    animated: true
    color: "#ff0000"
  • 切换到 Pisces 主题 主题配置 next.yml 新增

    1
    scheme: Pisces
  • 设置头像 主题配置 next.yml 新增

    1
    2
    avatar:
    url: #头像地址
  • 侧边栏配置 主题配置 next.yml 新增

    1
    2
    3
    4
    5
    sidebar:
    position: left
    display: always
    offset: 12
    b2t: true
  • 开启字数统计

    • 执行 npm install hexo-symbols-count-time --save
    • Hexo配置 _config.yml 新增

      1
      2
      3
      4
      5
      6
      # hexo-symbols-count-time
      symbols_count_time:
      symbols: true
      time: true
      total_symbols: true
      total_time: true
    • 主题配置 next.yml 新增

      1
      2
      3
      4
      5
      6
      7
      # hexo-symbols-count-time
      symbols_count_time:
      separated_meta: true
      item_text_post: true
      item_text_total: true
      awl: 2
      wpm: 275
  • 开启代码块复制 主题配置 next.yml 新增

    1
    2
    3
    4
    5
    6
    7
    8
    9
    codeblock:
    # Manual define the border radius in codeblock
    # Leave it empty for the default 1
    border_radius:
    # Add copy button on codeblock
    copy_button:
    enable: true
    # Show text copy result
    show_result: true
  • 开启 Copyright 主题配置 next.yml 新增

    1
    2
    post_copyright:
    enable: true
  • 配置高亮主题 主题配置 next.yml 新增

    1
    highlight_theme: night eighties
  • 开启 nest 动画效果 就是我博客里 线条跟随鼠标的

    • 切换到主题目录 cd themes/next
    • 安装源码 git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest
    • 主题配置 next.yml 新增
      1
      canvas_nest: true
  • 更多主题配置 请详见 NexT主题官网

添加 hexo-deployer-git 插件

当前插件用于部署静态文件到Git上

安装插件

1
npm install hexo-deployer-git --save

配置Git基本信息 不然会报错 上面的是邮箱 下面的名称

1
2
git config --global user.email "you@example.com"
git config --global user.name "Your Name"

配置插件

  • 打开 _config.yml 按下 Ctrl+F 搜索 Deployment
    1
    2
    3
    4
    5
    6
    7
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
    type: git #上传类型 选择git
    repo: git@git.dev.tencent.com:<用户名>/<项目名称>.git # 执行 git remote -v 可以获得
    branch: master # 部署到 Master分支
    #message: update blog # 每次提交的信息 不填默认为当前时间

测试插件

  • 执行命令 部署静态文件到 master 分支

    1
    hexo d
  • 查看代码仓库 master 分支 是否有文件

配置静态Pages

  • 打开代码仓库 https://dev.tencent.com/u/<用户名>/p/<项目名称>/git
  • 点击右侧的 代码 => Pages服务 => 一键开启 Pages 服务
  • 部署完成后打开 博客首页 https://用户名.coding.me/项目名称/ 发现样式丢失了 因为没有修改主站根后缀
  • 修改配置 blog/_config.yml 修改 root 为 /<项目名称>/

    1
    2
    3
    4
    5
    6
    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: https://用户名.coding.me
    root: /项目名称/
    permalink: posts/:title/
    permalink_defaults:
  • 重新执行 部署命令

    1
    hexo d

添加 hexo-neat 插件

此插件用于压缩 CSS 和 JS

安装插件

1
npm install hexo-neat --save

配置插件

  • 打开 _config.yml 在底部追加下列配置
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    # Neat
    neat_enable: true
    # Neat Html
    neat_html:
    enable: true
    logger: false
    exclude:
    - '*.md'
    # Neat Css
    neat_css:
    enable: true
    logger: false
    exclude:
    - '*.min.css'
    # Neat JS
    neat_js:
    enable: true
    logger: false
    mangle: true
    output:
    compress:
    exclude:
    - '*.min.js'

添加 hexo-generator-search 插件

当前插件用于给博客添加搜索功能 详见左边的搜索

安装插件

1
npm install hexo-generator-search --save

配置插件

  • Hexo配置 _config.yml 新增

    1
    2
    3
    4
    search:
    path: search.xml
    field: post
    content: true
  • 主题配置 next.yml 新增

    1
    2
    local_search:
    enable: true