实验步骤:
1.准备实验环境。
进入命令行界面,执行以下命令进行 Git 的安装:
yum install git -y
安装完成后,可以执行下方命令验证 Git 的版本:
git --version
如果 Git 的版本号可以成功展示,说明 Git 已经成功安装。
在终端中,通过执行下方的命令,安装 Node.js:
curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash - && sudo yum clean all && sudo yum makecache && sudo yum install -y gcc-c++ make && sudo yum install -y nodejs
安装完成后,可以进行 node 和 npm 的版本信息验证。
验证 node 的版本信息:
node -v
验证 npm 的版本信息:
npm -v
2.利用 Hexo 生成静态博客。
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他标记语言)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
在终端中,可以通过执行下方的命令,全局安装 Hexo 客户端:
npm install -g hexo-cli
安装完成后,可以执行下方命令验证 Hexo 的版本及其依赖信息:
hexo -v
如果 Hexo 的版本及其依赖信息可以成功展示,说明 hexo 已经成功安装。
在终端中执行下方命令,初始化博客项目,同时会安装博客项目所需的依赖包:
cd ~ && hexo init blog --no-clone
在终端中通过以下命令下载安装 hexo-deployer-cos 插件:
cd ~/blog && npm install hexo-deployer-ali-oss --save
在终端中执行下方命令,生成静态文件:
hexo g
3.本地部署博客。
执行以下命令,进入 blog 项目文件夹,启动博客项目:
cd ~/blog/ && hexo s
验证博客是否成功启动。可以看到界面如下:
4.基于阿里云OSS部署静态博客。
复制下方地址,在Chromium网页浏览器打开新页签,粘贴并访问OSS控制台。
https://oss.console.aliyun.com/
进入Bucket权限控制,将Bucket权限改为公共读写。
进入Bucket文件管理,新增授权。
授权用户给:所有账号,权限设置为读/写,访问方式设置为HTTP,点击确定。
将静态博客上传至阿里云OSS 中。
执行如下命令,编辑 _config.yml 文件。
vim _config.yml
按shift加G跳转到文件末尾最后一行,按i键进入编辑模式,复制下方代码,粘贴并覆盖原 deploy 选项的代码:(注意:冒号一定要使用英文冒号,冒号前不能有空格,冒号后必须有一个空格,这是 yml 的固定写法。)
deploy:
type: ali-oss
region: yourRegion //地域
accessKeyId: yourSecretId //子用户名称
accessKeySecret: yourSecretKey //子用户密码
bucket: yourBucket //bucket名称
执行以下命令重新生成静态文件。
hexo g -d
执行以下命令进入 blog 项目目录下,创建新文章。
cd ~/blog && hexo new first
命令执行完毕后,会在 source/_posts 中会生成一个 markdown 文件,本条命令会生成一个“first.md”的文件。
打开 first.md 文件,编写生成的文章模板:
vi source/_posts/first.md
执行以下命令,进入 blog 项目文件夹,启动博客项目:
cd ~/blog/ && hexo s
切换至浏览器,输入ECS的公网IP地址加端口号4000,访问网站,可以看到博客页面展示了刚刚创建的文章。
切换至命令行,按Ctrl+C退出博客启动。
执行命令,重新生成静态文件并部署至阿里云OSS :
cd ~/blog && hexo g -d
回到刚才的浏览器界面,点击存储桶左侧列表中的【文件列表】,如果文件列表中包含静态博客生成的静态文件,则说明静态文件通过插件自动上传至阿里云OSS成功,示例图如下:
至此,上传成功,实验结束。