Hexo搭建 --- 1、搭建 Hexo 博客并部署到 Coding

2018-06-04 16:06:01 浏览数 (1)

前言

我一直想搭建一个个人博客，要求就是简洁，支持Markdown，可以显示文章的TOC目录。 寻找的过程中也遇到了很多坑，教程基本上都不完整，或者是直接copy别人的，而且很多教程中是将其部署到github pages上 ，但是介于网速问题，还是选择了国内的Coding。下面先将我的经历给大家分享下。

  • JPress ：国产，开源，基于JFinal开发的，主题生态系统正在快速完善中，但是markdown支持不好，所以就放弃了。
  • Ghost : 也很简洁，基于Node.js开发，有后台管理页。与markdown支持不错，但是本人英语不好，Ghost国内站也不再继续更新，虽然基本可以满足我的需求，但是迫于强迫症还是放弃了。
  • Hexo ： 很简洁，可以直接生成纯html界面，优点是支持它的环境十分好找，可以直接用github、coding、七牛云存储等静态页面托管，可以省下VPS服务器的费用。

需求条件

  • Windows电脑一台 (没用过Mac，所以无法做Mac的教程)
  • 熟悉Markdown语法 (现学也可以，入门教程 )
  • 耐心 (有耐心按照教程一步一步执行下，不能嫌麻烦就半途而废)

安装Git

下载地址：传送门 这一步最好选择第二项，其他的默认就好

安装完后打开 cmd 输入 git --version 来测试是否安装成功。

安装Node.js

下载地址：传送门 下载安装即可，没有特殊配置，无限下一步。 安装完后打开 cmd 输入 node -v 来测试是否安装成功。

安装Hexo

首先在你电脑上找一个位置来安装Hexo。然后在那个文件夹中打开cmd (shift 右键)

下载

代码语言：javascript复制
npm config set registry http://registry.cnpmjs.org #修改安装源为中国镜像。
npm install hexo-cli -g

初始化Hexo

代码语言：javascript复制
hexo init
npm install
npm install hexo-util --save

测试Hexo

代码语言：javascript复制
hexo s

然后在浏览器的地址栏上面输入localhost:4000就可看到自己博客的样子。Ctrl C 可以终止预览

配置Coding

Cdoing官网：https://coding.net/ 注册后创建一个新项目

项目名称，项目描述随意填写，项目选择私有项目。然后点击创建。

然后在电脑桌面右键，打开Git Bash Here

然后配置SSH： 配置shh key是让本地git项目与远程的coding建立联系

  • 检查是否已经有SSH Key，打开Git Bash Here，输入

cd ~/.ssh

  • 如果没有.ssh这个目录，则我们生成一个SSH，输入

ssh-keygen -t rsa -C "你的邮箱"

  • 接下来几步中系统会要你输入密码

Enter passphrase (empty for no passphrase):<输入密码>

Enter same passphrase again:<再次输入密码>

这个密码是在你提交项目给服务器的时候使用的，可以为空，如果为空的话提交项目时则不用输入密码就能提交。

  • 最好看到类似这样的界面，就成功设置ssh key了
  • 然后查看公钥 cat ~/.ssh/id_rsa.pub

然后将这些内容全部复制下来。

  • 回到Coding 添加你的公钥

然后直接把刚才复制的内容粘贴进去,点击添加即可。

  • 设置自己的身份，这里设置自己的名字和邮箱 git config --global user.name "Your Name"
  • git config --global user.email "email@example.com"
  • 在Git Bash Here 中输入 ssh -T git@git.coding.net

如果显示以下则说明coding中的ssh配置成功 Hello username You've connected to Coding.net by SSH successfully!

  • 开启Coding Pages服务 进入你刚才创建的项目。
  • 先在根目录下找到_config.yml文件，并进入编辑。我们找到deploy这一项，修改看下面： # Deployment ## Docs: http://hexo.io/docs/deployment.html deploy: #我们是使用 git 来部署的。 type: git # git 仓库的地址。 repo: https://git.coding.net/xxx/xxxx.git # 分支名称。 branch: master

仓库的地址可以在coding网站上找到，复制过来即可

测试Coding配置

  • 新建一篇文章，并且部署到Coding上面。在Hexo安装路径下打开cmd1hexo new 第一篇文章

然后在给出的路径里打开.md文件，用markdown语法写作即可

  • 在部署之前还有一步，就是要安装一个插件，不然无法部署上去。 npm install hexo-deployer-git --save
  • 发布部署文章 hexo g -d

然后在去Coding上就可以看到部署的文件了

至此，搭建完成。有关Hexo的详细配置，请参阅Hexo官方文档。

如本文中有错误，欢迎在评论中进行指正。转账请注明出处，谢谢支持。

hexo

0 人点赞