使用CloudStudio和Pages搭建免费博客

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

初始化环境

注册账号

• 这里分两种
  • 如果过你没有Coding帐号 打开 腾讯开发者平台 直接注册
  • 如果有根据 https://feedback.coding.net/topics/7257 关联升级

初始化一个空的仓库

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

在CloudStudio中初始化一个工作空间

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

初始化博客

安装 Hexo

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

  • 点击下面的终端 执行下列命令

    npm install hexo

• 切换到 source 分支 因为Master分支需要用来部署静态文件

  git checkout -b source

• 初始化博客 (下列所有的配置 均在 blog 文件夹下完成)

  hexo init blog
  cd blog

• 测试博客 运行临时服务器

  hexo s

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

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

创建临时访问链接

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

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

博客基本配置

• 打开配置文件 _config.yml 填写相关参数

# 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 主题

  git clone https://github.com/theme-next/hexo-theme-next themes/next

• 配置主题 在 CloudStudio中依次打开 _config.yml 按下 Ctrl+F 搜索 theme

  # Extensions
  ## Plugins: https://hexo.io/plugins/
  ## Themes: https://hexo.io/themes/
  #theme: landscape
  theme: next

• 测试主题 开启临时服务器然后 创建临时访问链接

  hexo s

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

  mkdir -p source/_data
  touch source/_data/next.yml

• 配置底部 主题配置 next.yml 新增

  footer:
    since: 2018 #从那一年开始写博客
    icon:
      name: heart
      animated: true
      color: "#ff0000"

• 切换到 Pisces 主题 主题配置 next.yml 新增

  scheme: Pisces

• 设置头像 主题配置 next.yml 新增

  avatar:
    url: #头像地址

• 侧边栏配置 主题配置 next.yml 新增

  sidebar:
    position: left
    display: always
    offset: 12
    b2t: true

• 开启字数统计

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

    # hexo-symbols-count-time
    symbols_count_time:
      symbols: true
      time: true
      total_symbols: true
      total_time: true

  • 主题配置 next.yml 新增

    # hexo-symbols-count-time
    symbols_count_time:
      separated_meta: true
      item_text_post: true
      item_text_total: true
      awl: 2
      wpm: 275

• 开启代码块复制 主题配置 next.yml 新增

  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 新增

  post_copyright:
    enable: true

• 配置高亮主题 主题配置 next.yml 新增

  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 新增

    canvas_nest: true

• 更多主题配置 请详见 NexT主题官网

添加 hexo-deployer-git 插件

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

• 插件地址 https://github.com/hexojs/hexo-deployer-git

安装插件

npm install hexo-deployer-git --save

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

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

配置插件

• 打开 _config.yml 按下 Ctrl+F 搜索 Deployment

  # 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 分支

  hexo d

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

配置静态Pages

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

  # 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:

• 重新执行 部署命令

  hexo d

添加 hexo-neat 插件

此插件用于压缩 CSS 和 JS

• 插件地址 https://github.com/rozbo/hexo-neat

安装插件

npm install hexo-neat --save

配置插件

• 打开 _config.yml 在底部追加下列配置

  # 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 插件

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

• 插件地址 https://github.com/wzpan/hexo-generator-search

安装插件

npm install hexo-generator-search --save

配置插件

• Hexo配置 _config.yml 新增

  search:
    path: search.xml
    field: post
    content: true

• 主题配置 next.yml 新增

  local_search:
    enable: true