使用CloudStudio和Pages搭建免费博客

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

初始化环境

注册账号

• 这里分两种
  • 如果过你没有Coding帐号 打开 腾讯开发者平台 直接注册
  • 如果有根据 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上

• 插件地址 github.com/hexojs/hexo…

安装插件

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

• 插件地址 github.com/rozbo/hexo-…

安装插件

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

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

• 插件地址 github.com/wzpan/hexo-…

安装插件

npm install hexo-generator-search --save
复制代码

配置插件

• Hexo配置 _config.yml 新增

search:
  path: search.xml
  field: post
  content: true
复制代码

• 主题配置 next.yml 新增

local_search:
  enable: true
复制代码