本文为纯云端零本地部署Hexo博客提供了思路。

使用本文的解决方案,你可以在不安装任何环境的情况下打造一个可迁移纯云端的Hexo写作部署环境及让你的Blog拥有更好的用户体验。

这篇文章主要是写给一些想写Blog却对部署Blog知之甚少的人的,你可能是厨师老师大宗师,就不是开发人员,没有相关的知识,甚至没有电脑!

前言

Blog部署的低成本高可用思路

现在这个现象很有趣,每当你打开一个感觉还可以的独立Blog的时候,总是会发现Blog的主人是搞开发的😂。
毕竟现在国内基本上没有Blog平台支持免费绑定域名,所以能见到的独立Blog基本都需要一定的搭建过程,这里问题就来了,想要一个独立Blog,你至少需要:

  • 域名
  • 服务器

域名这里不多介绍了,懂得都懂。
这里的服务器的范围可以很广,甚至不需要有计算能力…这就是重点!
在Web发展的初期,网站是静态的,所有的内容都被指定到固定文件。再后来服务端语言的出现,让网站动了起来。但是到了现在,人们发现静态页面托管在一些方面的应用仍有很大的价值。特别是对于一些强内容性却低交互的网站,使用静态页面托管既可以提高用户体验,还可以节约成本。Hexo等静态Blog系统的出现让我们可以以一种更方便的方式去管理静态Blog,而Hexo也是我们今天的选择。
说回服务器😎,因为静态页面不需要服务器有计算能力,所以一些代码托管服务也可以充当服务器,如GitHub,Coding等。这样的做法不仅理论上可行,代码托管平台也提供了类似的服务,如GitPage,Coding的静态网站部署等。

为何要纯云端部署Blog?

纯云端部署Blog,可以满足不同人群不同技术水平不同设备配置的差异。在一些与服务端进行交互比较麻烦的平台可以尽量简化部署流程(其实移动端想要搞的话也可以装个面板再加上FTP…,然后直接在网页上操作就行了)。与此同时可以打造一个方便携带与迁移的平台。

纯云端部署Blog的实现思路

就拿Hexo举例子吧,想要把环境(不是静态页面)迁移,就得备份一下源数据和配置项,最简单却也最麻烦的实现方式就是把数据备份到移动储存设备/网盘…更换设备后部署环境,然后用个人数据进行覆盖。
进阶一点的方法就是用Git😏每次要迁移的时候把数据Push到仓库,然后用的时候再Clone…要我说,其实和网盘解决方法没啥大不同的😂
然后就是今天要介绍的方法了😎。我们可以从另一个思路解决迁移问题:找到一个不会“动”的部署计算平台,每次用的时候远程连接,源数据也保存在云端上。
好吧,我承认…..这就是一个服务器😆。但是因为Hexo并不需要有一个随时可以计算的服务器在后台支持,它所需要的计算就是 hexo g && hexo d 生成静态页面与部署,数据不多的话基本也就是一会的事。那我们可以用什么样的服务来实现这样的临时计算需求呢?
达龙云电脑
不对,是 CloudStudio!

Cloud Studio

Cloud Studio 是基于浏览器的集成式开发环境(IDE),为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器就能使用。
Cloud Studio 包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能,同时支持实时调试、插件扩展等,可以帮助开发者快速完成各种应用的开发、编译与部署工作。
使用 Cloud Studio 的预置环境,您可以直接创建对应类型的工作空间,快速启动项目进入开发状态,而无需进行繁琐的环境配置。
目前每个用户最多可以创建 5 个工作空间,并且只能同时运行一个工作空间,每日可以使用工作空间共四小时,超出时间将不可使用(连接云主机的工作空间无此限制)。
一个工作空间是一个虚拟计算单元,我们为每个工作空间提供了独立的存储、计算资源以及开发环境。在一个工作空间内您可以存放自己的项目代码,安装所需要的软件环境,运行或编译自己的项目。
目前老的工作空间兼容 VS Code 1.33,新创建的工作空间兼容 VS Code 1.39。

这是我从CloudStudio简介中摘抄出来的内容,你可以简单的理解为:CloudStudio=每天限时四个小时的云主机+可以连接到云主机的VSCode😂。
有计算能力且无需本地部署,CloudStudio基本可以满足我们的要求。

把页面部署到哪里?

说到这个问题,各位有经验的第一反应都是GitHub Pages。诚然,GitHubPages出现的早,也一直是这种静态托管的首选方案。但是却在访问速度及稳定性上有所不足。在不花钱的方案下,我更推荐Coding的静态网站部署。口说无凭,直接上图:

这是部署在GitHubPages上的访问情况。

这是部署在Coding上的访问情况
高下立判。
诚然,Coding的静态网站部署运用了腾讯的COS和CDN,但是腾讯云每个月都有赠送的CDN流量,而且的确像官方文档里所说的:一般小博客用不完😂。既然不花钱,还纠结这个干什么😂
可能有人会想啊:国内的服务绑定域名怕不是要备案😎这点尽管放心,Coding可以部署到香港线路,不用备案😍
(注:部分资料说Coding的静态部署不太稳定,但就个人使用而言感觉没有问题。仔细一想,支撑静态部署的是腾讯云COS与CDN两个核心功能,稳定性还是有保证的。反馈Coding不够稳定的资料的时效性有待查验。)

Coding

既然说到这里了,就必须介绍一下Coding了。大家有没有发现,我之前并没有给出CloudStudio的官网地址,那是因为CloudStudio是Coding的一个功能,而Coding DevOps是腾讯云旗下的开发协作平台。
Coding目前已经免费开放了项目协同,代码托管等基本功能,有兴趣的可以去了解一下😁

开始部署

Coding准备

进入Coding,没有团队的就先创建😎


先创建项目,然后创建代码仓库(我这个是已经部署了Hexo的)

然后进入CloudStudio,创建工作空间
这里大家可以用预置环境,也可以连接自己的服务器。这里我选的Node.js,不从仓库Clone,一会自己安装。

进入工作空间,原汁原味的VSCode🤣

配置Git和Node.js

打开终端,进行Git的常规配置

1
2
git config --global user.name "username" 
git config --global user.email [email protected]

获取SSH秘钥(先指定文件名,再指定密码,密码可省略)并将.pub公钥提交给Coding

1
ssh-keygen -t rsa -C "[email protected]"


然后我们就要进行正式的部署了😉
这里我推荐先升级一下Node.js的版本,不然一会会报错
先安装版本控制工具 然后安装稳定版的Node

1
2
npm install -g n
n stable

它提示最好关闭这个终端,然后再开一个,就照做吧。

更换node.js版本
键入n之后直接回车就行,就会选择刚才安装的版本(如果你安装了多个版本的,可以通过上下键进行切换)

1
n

部署Hexo

开始安装Hexo,待安装完成后执行初始化,然后进入hexo的目录

1
2
3
npm install -g hexo-cli 
hexo init blog
cd blog


编辑_config.yml,增加部署信息
翻到最下边,改成这样(注意冒号与配置项之间的空格)
注意,这里你可以选择HTTP或者SSL的地址,如果你选择了HTTP的话,当你向仓库推送文章的时候就会被要求输入账号与密码(在网页上方弹出提示,第一遍是账号,第二遍是服务密码)。如果你选择的是SSL的话就按照文章之前介绍的方法生成SSL秘钥并提交(按照我的体验来说…总是提示我验证失败…如果你不是深度用户,而是就想写写
Blog的话,HTTP足矣)

1
2
3
4
deploy:
type: git
repo: Coding上建仓库的路径,加上 .git
branch: master

安装Git部署插件

1
npm install hexo-deployer-git --save

生成静态页面并推送

1
2
hexo g
hexo d


部署静态网站 持续部署→静态网站→新建网站
代码来源:现有仓库
选择仓库与根目录。
网站类型不用选Hexo,直接静态网站就行,因为你推送到仓库的已经是静态页面了。
选择节点:域名备案了就选国内节点,没有备案就选国外

点击确定后会自动部署,部署成功后就可以访问了。(我的Blog已经更换了主题)


到这里,部署的内容就结束了。
Hexo的基本用法,请向下看。

Hexo基本使用方法

Hexo设置

要修改Hexo设置,请修改根目录下的 _config.yml
下面注释了一些常用的配置项,更多的配置项,请参见 配置 | Hexo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: #在这里输入你的网站标题
subtitle: '' #在这里输入你的网站副标题
description: '' #在这里输入你的网站描述
keywords: #在这里输入你的网站关键字
author: #在这里输入你的昵称
language: zh #在这里输入你的网站语言代号
timezone: '' #在这里输入你的网站时区

# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: http://www.example.xxx #非必要 #在这里输入你的网站域名
root: / #在这里输入你的网站目录
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
enable: true # Open external links in new tab
field: site # Apply to the whole site
exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs:
enable: false
preprocess: true
line_number: true
tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 10
order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape #在这里输入你的网站主题

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repository: #在这里输入你的仓库地址
branch: master #在这里输入你的仓库分支

主题设置

要修改Hexo设置,请修改主题目录(/themes/example)下的 _config.yml
example为你的主题文件夹,你可以在 主题列表 中找到许多主题。
如何修改主题配置,请参考你所选主题的文档。

Hexo写作

  • 新建文章 hexo new “title” #title为你文章的标题
  • 创建完成后 \hexo\source_post 下会出现你新建.md文档
  • 编辑.md文档(请参见后文的教程)
  • 删除文章 删除\hexo\source_post 下的.md文档
  • 想要让你的更改生效,请执行 hexo clean hexo g &&hexo d

想要了解分类,标签等功能,请参见 写作 | Hexo

其他技巧

绑定域名

首先先购买一个域名并进行实名认证(实名认证不等于备案)


去Coding静态网站绑定域名(大陆节点网站需ICP备案)

将获得的CNAME地址解析到域名上


记录类型选CNAME,主机记录即为网站的前缀,留空则所有二级域名都指向这个网站。
待解析生效后即可访问。

好用的在线Markdown编辑器知识库——语雀

Hexo的文章需要用Markdown来编写,关于Markdown的教程很多,这里我只推荐一个可以当编辑器用的在线知识库——语雀。
语雀的编辑器既可以可视化编辑,又可以输入Markdown标识来选择格式,详细的使用方法请参见 语雀使用手册
在语雀写完文章,直接导出为.md文档就可以了😂
之前导出的文档图片外链都是可以用的…但是现在都做了防盗链处理,关于插入图片,我们接下来再讲。
对了,如果你感觉部署Blog麻烦,语雀知识库可能会和你的胃口。

如何在Markdown中插入图片

想要在Markdown中插入图片,可以键入

1
![图片描述](图片链接)

这里提供的是插入网络图片的方法,图片描述由你决定,而图片链接我们可以将图片上传到图床上(如SM.MS)来获得。
不过我更推荐把图片上传到腾讯云对象存储COS上,一是每个月有免费的流量,二是比较稳定快速。
详情请参见 利用腾讯云COS作为图床为Markdown文档提供图片链接
Hexo也提供了将图片上传到仓库的插件,因为我没有使用这个方法,所以不做介绍,你可以搜索 Hexo 插入图片
等关键词来查找教程。

Hexo常见问题解决办法

持续更新ing…