0%

使用Hexo与Coding搭建自己的静态博客

欢迎入坑

写这篇文章的原因很简单,闲的 **。开个玩笑,其实我只是想通过这篇文章交一些志同道合的朋友罢了。欢迎看到这篇文章的朋友在评论区留言交流。

注册Coding,并新建仓库

注册账号并新建项目:
打开Coding,注册账号(最好使用自己常用的邮箱注册),进入控制台,在左侧列表中点击 项目,点击右上角的 新建项目,选择代码托管项目,项目名称、描述随意填写。

新建代码仓库:
进入项目,点击左侧的 代码仓库,为自己的仓库起一个名字,勾选公开源代码,将代码检查取消勾选,点击完成。

仓库初始化:
先不要关闭coding页面,这一步在Hexo安装完成后进行。

安装Git

安装:
Git是一个开源的分布式版本管理系统,我们的网站搭建好之后需要通过Git来上传到Coding上的个人仓库。首先下载对应的版本Git - Downloading Package,Windows的话现在一般都是64位的,选择64位的安装包,下载安装。完成后再cmd窗口输入Git回车,如果出现版本号则证明安装成功。

初始化Git:
打开Git-bash,设置用户名和密码:

git config --global user.name "你的Coding用户名"
git config --global user.email "你的Coding注册邮箱"

生成ssh秘钥文件:

ssh-keygen -t rsa -C "你的GitHub注册邮箱"

然后一路回车即可,最后记住生成的秘钥文件路径。

安装Node.js

Hexo基于Node.js,Node.js下载地址:Download | Node.js ,下载安装包,注意安装Node.js会包含环境变量及npm的安装。

安装后,检测Node.js是否安装成功,在命令行中输入 node -v 如果出现版本号则证明安装成功。
检测npm是否安装成功,在命令行中输入npm -v ,如果出现版本号则证明安装成功。

C:\Users\dell>node -v
v12.13.1

C:\Users\dell>npm -v
6.12.1

至此,hexo安装前的环境准备就结束了。

安装Hexo

首先新建一个文件夹,用来存放之后生成的博客文件,之后打开文件夹,右键选择Git-bash,在出现的黑窗口中输入Hexo安装命令:

npm install -g hexo-cli 

安装过程有些漫长,在这期间我们可以做一些其他的准备工作,用记事本打开之前生成的秘钥文件id_rsa.pub,将其中内容复制到剪切板。打开Coding控制台,点击右上角的头像,找到并点击个人账户设置,在左侧的菜单栏中找到ssh公钥,点击新增公钥,将之前复制的秘钥粘贴上去。

安装完成后,输入:

hexo init

初始化我们的博客。输入hexo 回车没报错就OK。

初始化Git仓库

** 如果没有添加秘钥请先添加,见上一步。**
打开初始化仓库页面,复制如下链接
打开博客文件夹,找到_config.yml,用编辑器打开,推荐用Notepad++或sublime text,不要用系统自带的记事本。
在最下面找到deploy,按下面格式修改保存:

deploy:
  type: 'git'
  repo: git@e.coding.net:xxxxxx/xxxxxx/xxxxxx.git
  branch: master

之后在黑窗口中输入hexo g回车,hexo d 回车。这时博客文件夹下的public文件夹中的内容便会上传到我们的coding 代码仓库。


部署静态页面

打开新创建的代码仓库,点击左下角设置按钮,在项目与成员栏下,点击功能开关,将持续部署选项勾选。

回到仓库页面,会发现在左侧出现了持续部署选项,点击持续部署,选择静态网站,

部署成功后会提供一个访问链接,这就是生成的静态网站链接了。大工告成。